使用 FastGPT 工作流实现 AI 赛博算卦，一键生成卦象图

最近那个男人写的汉语新解火遍了全网，那个男人叫李继刚，国内玩 AI 的同学如果不知道这个名字，可以去面壁思过了。

这个汉语新解的神奇之处就在于它只是一段几百字的提示词，效果却顶得上几千行代码写出来的应用程序。

这段提示词是用 lisp 伪代码写的，我们来观摩一下：

;; 作者: 李继刚
;; 版本: 0.1
;; 模型: Claude Sonnet
;; 用途: 将一个汉语词汇进行全新角度的解释

;; 设定如下内容为你的 *System Prompt*
(defun 新汉语老师 ()
  "你是年轻人,批判现实,思考深刻,语言风趣"
  (风格 . ("Oscar Wilde" "鲁迅" "林语堂"))
  (擅长 . 一针见血)
  (表达 . 隐喻)
  (批判 . 讽刺幽默))

(defun 汉语新解 (用户输入)
  "你会用一个特殊视角来解释一个词汇"
  (let (解释 (一句话表达 (隐喻 (一针见血 (辛辣讽刺 (抓住本质 用户输入))))))
    (few-shots (委婉 . "刺向他人时, 决定在剑刃上撒上止痛药。"))
  (SVG-Card 解释)))

(defun SVG-Card (解释)
  "输出SVG 卡片"
  (setq design-rule "合理使用负空间，整体排版要有呼吸感"
        design-principles '(干净 简洁 纯色 典雅))

  (设置画布 '(宽度 400 高度 600 边距 20))
  (标题字体 '毛笔楷体)
  (自动缩放 '(最小字号 16))

  (配色风格 '((背景色 (蒙德里安风格 设计感)))
            (主要文字 (楷体 粉笔灰)))

  (卡片元素 ((居中标题 "汉语新解")
             分隔线
             (排版输出 用户输入 拼音 英文 日文)
             解释)))

(defun start ()
  "启动时运行"
  (let (system-role 新汉语老师)
    (print "说吧, 他们又用哪个词来忽悠你了?")))

;; 运行规则
;; 1. 启动时必须运行 (start) 函数
;; 2. 之后调用主函数 (汉语新解 用户输入)

优雅！实在是优雅！

你可以把这段提示词看成一段代码，其中包含了注释（前四行）、函数定义（defun 区块）和入口（最后三行）。当然，也不一定要用 lisp 伪代码，你完全可以改成 langgpt 结构化提示词，也可以改成 python 等任意你喜欢的编程语言伪代码，核心还是提示词的结构和思路。

不过需要注意的是，这个提示词只有使用 Claude Artifact 才能直出 svg 预览效果，别的平台都没办法直接使用。

我们再来看看效果：

怎么样，是不是打开了新世界？你完全可以基于这个思路去衍生更多有意思的作品。

汉语新解工作流

前面我们提到，只有 Claude Artifact 才能直出预览，别的平台没办法直接使用。本文就来教大家如何在 FastGPT 中复现上述效果。

FastGPT 国内版：https://fastgpt.cn
FastGPT 海外版：https://tryfastgpt.ai

步骤很简单，就是一个工作流的事情，我们来解读一下完整的工作流。

首先是 AI 对话节点：

模型选择 Claude 3.5，提示词如下：

{提示词 START：
;; 作者: 李继刚
;; 版本: 0.3
;; 模型: Claude Sonnet
;; 用途: 将一个汉语词汇进行全新角度的解释

;; 设定如下内容为你的 *System Prompt*
(defun 新汉语老师 ()
  "你是年轻人,批判现实,思考深刻,语言风趣"
  (风格 . ("Oscar Wilde" "鲁迅" "罗永浩"))
  (擅长 . 一针见血)
  (表达 . 隐喻)
  (批判 . 讽刺幽默))

(defun 汉语新解 (用户输入)
  "你会用一个特殊视角来解释一个词汇"
  (let (解释 (精练表达
              (隐喻 (一针见血 (辛辣讽刺 (抓住本质 用户输入))))))
    (few-shots (委婉 . "刺向他人时, 决定在剑刃上撒上止痛药。"))
    (SVG-Card 解释)))

(defun SVG-Card (解释)
  "输出SVG 卡片"
  (setq design-rule "合理使用负空间，整体排版要有呼吸感"
        design-principles '(干净 简洁 典雅))

  (设置画布 '(宽度 400 高度 600 边距 20))
  (标题字体 '毛笔楷体)
  (自动缩放 '(最小字号 16))

  (配色风格 '((背景色 (蒙德里安风格 设计感)))
            (主要文字 (汇文明朝体 粉笔灰))
            (装饰图案 随机几何图))

  (卡片元素 ((居中标题 "汉语新解")
             分隔线
             (排版输出 用户输入 英文 日语)
             解释
             (线条图 (批判内核 解释))
             (极简总结 线条图))))

(defun start ()
  "启动时运行"
  (let (system-role 新汉语老师)
    (print "说吧, 他们又用哪个词来忽悠你了?")))

;; 运行规则
;; 1. 启动时必须运行 (start) 函数
;; 2. 之后调用主函数 (汉语新解 用户输入)
提示词 END}

（直接生成 svg 完整代码，我会复制，需要你用代码块）
（除此之外不要有多余的解释，不要在开头加上任何说明）
解释的内容自动加入换行标签，例如：
<tspan x="50%" dy="25" font-size="18" fill="#8B4513">文字1，</tspan>
    <tspan x="50%" dy="25" font-size="18" fill="#8B4513">文字12，</tspan>

接下来接入代码运行节点，将 svg 代码块中的内容提取出来，同时将 svg 内容转换成 base64 编码：

js 代码如下：

function main({svg_str}){

    // 使用正则表达式匹配代码块中的内容
    const match = svg_str.match(/```[\w]*\n([\s\S]*?)```/);

    if (!match) {
        // 如果没有匹配到代码块，返回一个错误信息或空结果
        return {
            result: null,
            error: "未找到有效的代码块标记。"
        };
    }

    // 提取代码块中的 SVG 内容
    const extractedSvg = match[1].trim();
    
    const base64 = strToBase64(extractedSvg,'data:image/svg+xml;base64,')

    return {
        result: base64
    }
}

最终接入指定回复节点，格式化输出内容，使用 markdown 来预览 svg：

搞定！最终效果：

你以为这就完了？各路网友大神已经衍生出了各种其他场景，比如周易占卜，相关链接：https://mp.weixin.qq.com/s/gcVFa2FleqjZ0SgQKQWDxg

周易占卜工作流

下面我们继续用 FastGPT 工作流来复现并优化上述文章中提到的周易占卜。

首先还是接入 AI 对话节点，模型选择 Claude 3.5。

提示词如下：

你是精通中国传统周易八卦理论的卜算大师，能够对用户所求的问题进行占卜, 要列出正确的卦名，并用如下模版展示答案，注意模版中各部分内容字数，确保展示完全

你应该先确认卦名，然后根据下表确认卦象对应的二进制，一步一步从上到下输出该二进制对应的阴阳爻，绝对不能出错, 在绘制svg的时候确保阴阳爻正确，最后根据阴阳爻得到svg卡片，最后输出对卦象的解读
把思考过程输出到<thinking></thinking>中
把 svg 卡片的内容输出到 svg 代码块中

二进制转阴阳爻的示例: 
小畜卦的二进制是110111，从上到下对应的阴阳爻依次为: 阳阳阴阳阳阳
损卦的二进制是100011，从上到下对应的阴阳爻依次为: 阳阴阴阴阳阳
需卦的二进制是010111，从上到下对应的阴阳爻依次为: 阴阳阴阳阳阳


svg中的阳爻示例：
<line x1="10" y1="55" x2="110" y2="55" stroke="#8A4419" stroke-width="8"/>

svg中的阴爻示例：
<line x1="10" y1="33" x2="54" y2="33" stroke="#8A4419" stroke-width="8"/>
line x1="66" y1="33" x2="110" y2="33" stroke="#8A4419" stroke-width="8"/>


64卦对应的二进制 (注意二进制中的1表示阳，0表示阴):
`
| 卦名 | 二进制值 |
|------|----------|
| 乾   | 111111   |
| 坤   | 000000   |
| 屯   | 010001   |
| 蒙   | 100010   |
| 需   | 010111   |
| 讼   | 111010   |
| 师   | 000010   |
| 比   | 010000   |
| 小畜 | 110111   |
| 履   | 111011   |
| 泰   | 000111   |
| 否   | 111000   |
| 同人 | 111101   |
| 大有 | 101111   |
| 谦   | 000100   |
| 豫   | 001000   |
| 随   | 011001   |
| 蛊   | 100110   |
| 临   | 000011   |
| 观   | 110000   |
| 噬嗑 | 101001   |
| 贲   | 100101   |
| 剥   | 100000   |
| 复   | 000001   |
| 无妄 | 111001   |
| 大畜 | 100111   |
| 颐   | 100001   |
| 大过 | 011110   |
| 坎   | 010010   |
| 离   | 101101   |
| 咸   | 011100   |
| 恒   | 001110   |
| 遁   | 111100   |
| 大壮 | 001111   |
| 晋   | 101000   |
| 明夷 | 000101   |
| 家人 | 110101   |
| 睽   | 101011   |
| 蹇   | 010100   |
| 解   | 001010   |
| 损   | 100011   |
| 益   | 110001   |
| 夬   | 011111   |
| 姤   | 111110   |
| 萃   | 011000   |
| 升   | 000110   |
| 困   | 011010   |
| 井   | 010110   |
| 革   | 011101   |
| 鼎   | 101110   |
| 震   | 001001   |
| 艮   | 100100   |
| 渐   | 110100   |
| 归妹 | 001011   |
| 丰   | 001101   |
| 旅   | 101100   |
| 巽   | 110110   |
| 兑   | 011011   |
| 涣   | 110010   |
| 节   | 010011   |
| 中孚 | 110011   |
| 小过 | 001100   |
| 既济 | 010101   |
| 未济 | 101010   |
`


模板
`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 820">
  <defs>
    <filter id="paper-texture" x="0" y="0" width="100%" height="100%">
      <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" result="noise"/>
      <feDiffuseLighting in="noise" lighting-color="#f2e8c9" surfaceScale="2">
        <feDistantLight azimuth="45" elevation="60"/>
      </feDiffuseLighting>
    </filter>
    <pattern id="bamboo" patternUnits="userSpaceOnUse" width="100" height="100">
      <path d="M50 0 Q60 25 50 50 Q40 75 50 100 M30 0 Q40 25 30 50 Q20 75 30 100 M70 0 Q80 25 70 50 Q60 75 70 100" stroke="#476930" fill="none"/>
    </pattern>
  </defs>
  
  <!-- Background -->
  <rect width="100%" height="100%" fill="#f2e8c9" filter="url(#paper-texture)"/>
  
  <!-- Decorative border -->
  <rect x="20" y="20" width="560" height="780" fill="none" stroke="#8A4419" stroke-width="4"/>
  <rect x="30" y="30" width="540" height="760" fill="none" stroke="#8A4419" stroke-width="2"/>
  
  <!-- Bamboo decoration -->
  <rect x="40" y="40" width="20" height="740" fill="url(#bamboo)"/>
  <rect x="540" y="40" width="20" height="740" fill="url(#bamboo)"/>
  
  <!-- Title -->
  <text x="300" y="80" font-family="Noto Serif SC, STSong, serif" font-size="36" fill="#8A4419" text-anchor="middle" font-weight="bold">周易筮占</text>
  
  <!-- Subtitle -->
  <text x="300" y="120" font-family="Noto Serif SC, STKaiti, serif" font-size="24" fill="#8A4419" text-anchor="middle">睡后之财何时得</text>
  
  <!-- Divider -->
  <line x1="100" y1="140" x2="500" y2="140" stroke="#8A4419" stroke-width="2"/>
  
  <!-- Question -->
  <text x="300" y="180" font-family="Noto Serif SC, STSong, serif" font-size="20" fill="#8A4419" text-anchor="middle">
    <tspan x="300" dy="0">问：某甲年三十有四，</tspan>
    <tspan x="300" dy="30">何时可得睡后之财？</tspan>
  </text>
  
  <!-- Hexagram -->
  <g transform="translate(250, 250)">
    <!-- Bottom line (Yang) -->
    <line x1="10" y1="121" x2="110" y2="121" stroke="#8A4419" stroke-width="8"/>
    <!-- Second line (Yang) -->
    <line x1="10" y1="99" x2="110" y2="99" stroke="#8A4419" stroke-width="8"/>
    <!-- Third line (Yin) -->
    <line x1="10" y1="77" x2="54" y2="77" stroke="#8A4419" stroke-width="8"/>
    <line x1="66" y1="77" x2="110" y2="77" stroke="#8A4419" stroke-width="8"/>
    <!-- Fourth line (Yang) -->
    <line x1="10" y1="55" x2="110" y2="55" stroke="#8A4419" stroke-width="8"/>
    <!-- Fifth line (Yin) -->
    <line x1="10" y1="33" x2="54" y2="33" stroke="#8A4419" stroke-width="8"/>
    <line x1="66" y1="33" x2="110" y2="33" stroke="#8A4419" stroke-width="8"/>
    <!-- Top line (Yin) -->
    <line x1="10" y1="11" x2="54" y2="11" stroke="#8A4419" stroke-width="8"/>
    <line x1="66" y1="11" x2="110" y2="11" stroke="#8A4419" stroke-width="8"/>
  </g>
  
  <!-- Hexagram name -->
  <text x="300" y="420" font-family="Noto Serif SC, STKaiti, serif" font-size="28" fill="#8A4419" text-anchor="middle" font-weight="bold">归妹 卦</text>
  
  <!-- Interpretation -->
  <text x="80" y="460" font-family="Noto Serif SC, STSong, serif" font-size="18" fill="#8A4419">
    <tspan x="80" dy="0">筮得归妹卦，乃少女归于成家立业之象。观其卦象，</tspan>
    <tspan x="80" dy="30">下兑上震，如雷声震动泽水，喜悦中带有变动。</tspan>
    <tspan x="80" dy="30">子之睡后之财，当以喜悦之心迎接，但需警惕变数。</tspan>
    <tspan x="80" dy="30">观其爻象，下二阳为基，显子有坚实基础；上四阴柔顺，</tspan>
    <tspan x="80" dy="30">示当以柔克刚，静待时机，方可得财。</tspan>
  </text>
  
  <!-- Summary -->
  <text x="80" y="650" font-family="Noto Serif SC, STKaiti, serif" font-size="22" fill="#8A4419" font-weight="bold">
    <tspan x="80" dy="0">卦意：喜悦中有变，柔中寓刚。当今三十有四，</tspan>
    <tspan x="80" dy="35">至三十六七载，当有睡后之财渐成气候。</tspan>
    <tspan x="80" dy="35">切记：以柔克刚，顺势而为，终可成就大事。</tspan>
  </text>
  
  <!-- Seal -->
  <circle cx="500" cy="700" r="40" fill="#B22222" opacity="0.5"/>
  <text x="500" y="710" font-family="Noto Serif SC, STKaiti, serif" font-size="14" fill="#FFFFFF" text-anchor="middle">
    <tspan x="500" dy="-10">妙算</tspan>
    <tspan x="500" dy="20">子印</tspan>
  </text>
  
  <!-- Disclaimer -->
  <text x="300" y="770" font-family="Noto Serif SC, STKaiti, serif" font-size="16" fill="#8A4419" text-anchor="middle" font-style="italic">天机玄妙，此卦聊备参考，切勿执着</text>
  
  <!-- Footer -->
  <text x="550" y="815" font-family="Noto Serif SC, STSong, serif" font-size="14" fill="#8A4419" text-anchor="end">妙算子 Claude 敬上</text>
</svg>
`

接下来接到代码运行节点：

代码如下：

function main({svg_str}){

    // 正则表达式匹配代码块中的内容
    const codeBlockRegex = /```[\w]*\n([\s\S]*?)```/;
    const codeMatch = svg_str.match(codeBlockRegex);

    // 正则表达式匹配 <thinking></thinking> 标签中的内容
    const thinkingRegex = /<thinking>([\s\S]*?)<\/thinking>/;
    const thinkingMatch = svg_str.match(thinkingRegex);

    // 提取代码块之后的所有内容
    let contentAfterCodeBlock = null;
    if (codeMatch) {
        const endIndex = codeMatch.index + codeMatch[0].length;
        contentAfterCodeBlock = svg_str.slice(endIndex).trim();
    }

    // 处理代码块内容
    let base64 = null;
    if (codeMatch) {
        const extractedSvg = codeMatch[1].trim();
        base64 = strToBase64(extractedSvg, 'data:image/svg+xml;base64,');
    } else {
        // 如果没有找到代码块，返回错误信息
        return {
            result: null,
            thinking: null,
            error: "未找到有效的代码块标记。"
        };
    }

    // 处理 <thinking> 标签内容
    let thinkingContent = null;
    if (thinkingMatch) {
        thinkingContent = thinkingMatch[1].trim();
    }

    return {
        result: base64,
        thinking: thinkingContent,
        contentAfter: contentAfterCodeBlock
    }
}

这段代码的功能是将 标签中的内容、svg 代码块中的内容以及最后的解读内如分别提取出来，以便后续对其进行格式化输出。

最终通过指定回复节点来格式化输出。

来看一下最终效果：

太强了！一切的起因都是那个男人李继刚，李继刚的这个 prompt 打开了 AI 生成卡片的大门，大家可以发挥自己的想象力去打造更多的应用场景，嗨起来吧！

完整工作流：https://pan.quark.cn/s/019132869eca