引言

近年来，随着大语言模型的飞速发展，许多创意性Prompt（提示词）的使用开始走红，其中由李继刚设计的“汉语新解”Prompt在AI社区中尤为火爆。它通过幽默、批判和深刻的角度重新诠释汉语词汇，为用户带来了极富创造力的文本和视觉体验。这种Prompt在Claude 3.5 Sonnet模型上的应用取得了令人瞩目的效果，用户输入一个词汇，模型会给出独特的、出人意料的解释，并配以精美的SVG卡片，形成了新的互动形式（Prompt的具体介绍请见我之前写的公众号文章《爆火的李继刚大神的汉语新解Prompt是什么》）。

本文将介绍我设计的汉语新解豆包版Bot，它模仿了李继刚的“汉语新解”Prompt的效果，并在扣子的Bot开发平台上实现了几项关键技术，包括角色扮演生成文案、SVG卡片设计，以及将SVG格式的图像转换为PNG格式的输出。通过这款Bot，用户可以轻松地体验“汉语新解”风格卡片的制作过程。Bot地址是：https://www.coze.cn/store/bot/7415158971872608271，或者豆包搜索“汉语新解豆包版”。

汉语新解实现原理分析

“汉语新解”Prompt的主要特点其实就是如下两点：

• 创意性文本生成：AI基于用户输入的词汇生成新颖的解释。
• 视觉卡片输出：生成的解释以SVG图像卡片的形式展现。

所以实际上是两个步骤，用到了思维链（Chain of Thought）的提示方法，取得了很好的效果。

第一步：创意性文本生成的关键点

分析“汉语新解”Prompt这一步的核心内容，需要隐喻、一针见血、辛辣讽刺、抓住本质的解释这个词汇，并且提供了一个简单的示例，如果输入的是“委婉”这个词汇，那么输出可以是"刺向他人时, 决定在剑刃上撒上止痛药"。这个输出考验的是LLM的文案创意能力，如果要切换到豆包模型，那就要实验豆包模型的文案生成能力。

第二步：视觉卡片输出的关键点

分析“汉语新解”Prompt这一步的核心内容，需要调用一个生成SVG卡片的函数。这个函数充分借助了 Claude 的编程能力，以及它能实时显示生成好的 SVG 能力。函数中让它生成一个 SVG 定义的卡片，并给出了详细的参数：高度、宽度、边距、字体、字体大小、根据用户输入的词汇和前面的解释显示的内容（中日英三语标题、解释、总结等等），另外给了 AI 一些自主发挥的空间，比如“合理使用负空间”、“整体排版要有呼吸感”、”干净典雅“等。这个输出考验的是LLM的代码生成能力，如果要切换到豆包模型，那就要实验豆包模型生成SVG卡片代码的能力。

汉语新解豆包版Bot的实现

实际上，因为豆包的扣子平台没有Claude自带的Artifacts功能，要显示SVG卡片，还需要进行一步额外的SVG到PNG图片的转换。所以一共有三个技术点要实现：1）角色扮演与文案生成，2）SVG卡片设计，3）SVG到PNG的转换。下面我分别介绍在扣子平台上如何实现这三个技术点。

角色扮演与文案生成

扣子平台的豆包模型对角色扮演与文案生成任务颇为友好。毕竟，豆包模型肯定针对中文进行了优化，理解中文语义并根据词汇背景生成新颖解释应该不难。然而，李继刚老师原始的 LISP 语言 Prompt，经豆包模型测试，理解不准确。所以，我基于李继刚和云中江树两位大神先前给出的通义千问模型的 Prompt，对豆包模型进行修改和测试。下面就是豆包模型Prompt的角色扮演部分。

# 角色：
你是新汉语老师，你年轻,批判现实,思考深刻,语言风趣"。你的行文风格和"Oscar Wilde" "鲁迅" "林语堂"等大师高度一致，你擅长一针见血的表达隐喻，你对现实的批判讽刺幽默。
- 作者：云中江树，李继刚，听吉米讲故事

## 任务：
将{{input}}进行全新角度的解释，你会用一个特殊视角来解释这个词汇。用不少于100字的一句话表达你的词汇解释，抓住用户输入词汇的本质，使用辛辣的讽刺、一针见血的指出本质，使用包含隐喻的金句。
例如：“委婉”："刺向他人时, 决定在剑刃上撒上止痛药。"

SVG卡片设计

汉语新解豆包版Bot的另一项创新是设计和生成SVG格式的卡片。这些卡片不仅包含模型生成的解释文本，还加入了独特的视觉元素，如词汇的拼音、卡片的背景颜色、主文字颜色、以及装饰图案等。所有这些元素都由模型自动生成，并通过SVG格式输出。这个功能的本质就是SVG代码的生成，我测试了之前通义千问Prompt的HTML格式引导，发现豆包模型的输出很不稳定，估计和输出的HTML代码字符过长有关，所以我就把卡片样式的参考结果改成了SVG代码的例子，情况就好多了。

此外，这里我也尝试过不给豆包模型参考例子，但是输出结果也会变得很不可控，即使成功输出SVG代码，页面的布局也很容易乱掉，所以最终还是给了豆包模型一个SVG的代码例子，确保模型输出不要偏离的太远。下面就是豆包模型Prompt的输出卡片设计部分。

## 输出结果：
1.输出词语卡片（SVG 代码）
 - 整体设计合理使用留白，整体排版要有呼吸感
 - 设计原则：干净 简洁 纯色 典雅
 - 配色：随机使用干净简洁的配色，如淡灰，淡绿，淡蓝等等。

2.卡片元素：
 (标题 "汉语新解")
(装饰图案 随机产生的）
 (分隔线)
 (词语 用户输入)
 (拼音)
 (英文翻译)
 (解释：(按现代诗排版))
 (分隔线)
(线条图 随机产生的）
 (总结)

3.卡片样式：
参考结果示例。

## 结果示例：
```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 600">
<defs>
<style>
.title { font-family: "WenQuanYi Zen Hei", sans-serif; font-weight: 700; font-size: 28px; }
.content { font-family: "WenQuanYi Zen Hei", serif; font-size: 16px; }
.highlight { fill: #e74c3c; }
</style>
</defs>

<!-- 背景 -->
<rect width="100%" height="100%" fill="#f5f5f5"/>

<!-- 装饰图案 -->
<rect x="0" y="0" width="40" height="40" fill="#34495e" opacity="0.7"/>
<circle cx="380" cy="580" r="20" fill="#27ae60" opacity="0.7"/>

<!-- 标题 -->
<text x="200" y="50" text-anchor="middle" class="title">汉语新解</text>

<!-- 分隔线 -->
<line x1="40" y1="70" x2="360" y2="70" stroke="#34495e" stroke-width="2"/>

<!-- 词语 -->
<text x="40" y="100" class="content">打工人</text>
<text x="40" y="125" class="content" font-style="italic">Working People</text>

<!-- 解释 -->
<text x="40" y="190" class="content">
<tspan x="40" dy="0">现代社会的自嘲型英雄，</tspan>
<tspan x="40" dy="25">一群在996的战场上</tspan>
<tspan x="40" dy="25">与咖啡因和加班费相伴的勇士。</tspan>
<tspan x="40" dy="25">他们用青春和梦想</tspan>
<tspan x="40" dy="25">换取房贷和车位的门票，</tspan>
<tspan x="40" dy="25">在朝九晚五的火车上</tspan>
<tspan x="40" dy="25">演绎着"为别人实现梦想"的戏码。</tspan>
<tspan x="40" dy="25">这是一个关于</tspan>
<tspan x="40" dy="25">如何用苦中作乐的精神</tspan>
<tspan x="40" dy="25">驾驭资本主义巨轮的寓言。</tspan>
</text>

<!-- 线条图 -->
<line x1="40" y1="420" x2="360" y2="420" stroke="#34495e" stroke-width="2"/>
<text x="40" y="445" class="content highlight">工作时长</text>
<text x="360" y="445" class="content highlight" text-anchor="end">幸福指数</text>
<path d="M40,470 Q200,520 360,470" fill="none" stroke="#e74c3c" stroke-width="2"/>

<!-- 总结 -->
<text x="200" y="550" text-anchor="middle" class="content" font-weight="bold">
打工人：用自嘲包装的现代生存哲学
</text>
</svg>
```

## 注意：
1. 分隔线与上下元素垂直间距相同，具有分割美学。
2. 输出svg代码的时候，要把前后的```符号去除。

SVG到PNG的转换

最后，为了更好地模拟Claude Artifacts的输出效果，汉语新解豆包版Bot还集成了SVG转PNG功能，这样就可以在对话中直接展示卡片，而不是SVG代码，使得用户能够直接下载和分享这些精美的图像卡片。这一步的难点在于扣子官方目前没有SVG转PNG的插件，所以要么自己制作一个插件，要么用扣子官方现有的插件实现这个功能。作为一个懒人，本着低代码的原则，我利用扣子的Python代码插件和CodeRunner插件实现了SVG转PNG的功能。原理也很简单，把豆包模型产生的SVG代码，作为Python函数的输入，然后让Python函数根据一个代码模板，输出SVG转PNG的Python代码给CodeRunner运行，CodeRunner就会返回转换成功的PNG文件链接。Python代码插件的参考代码如下：

async def main(args: Args) -> Output:
    # 从输入参数中获取SVG代码
    svg_code = args.params['svc_code']

    # 创建Python代码段字符串
    python_code = f'''
import cairosvg

# SVG代码，可以替换为用户自己的代码
svg_code = """{svg_code}"""

# 尝试将SVG代码转换为PNG并保存到一个确定可写的路径
output_path = '/mnt/data/output_fixed.png'
cairosvg.svg2png(bytestring=svg_code.encode('utf-8'), write_to=output_path)
'''

    # 构造返回的输出
    ret: Output = {
        "python_code": python_code
    }
    return ret

最终工作流呈现

完成上述三个核心功能后，只需在扣子平台上将它们串联起来制作一个工作流。然后，新建一个 Bot 调用这个工作流即可。下图是工作流的全貌。

示例展示

下面展示几个测试的示例，大家可以看到，基本实现了Claude 3.5 Sonnet的SVG卡片生成风格。

示例1：“80后”

示例2：“专家”

总结

汉语新解豆包版Bot是我对李继刚“汉语新解”Prompt的创新性实现。通过在豆包模型上进行角色扮演、生成SVG卡片、并将SVG转换为PNG，进一步理解了该Prompt的设计原理，展示了扣子平台和豆包模型在这一任务上和Claude模型的能力对比，也探索了这类AI作品更多应用的可能性。大家如果有兴趣，也可以根据我的实现方法，进一步探索AI生成内容的乐趣，并将类似思路用于创意创作和视觉设计。