LISP语言提示词为什么能生成SVG矢量图形

我们发布了大量基于 Claude 应用的卡片图提示词。有些人会有疑问，为什么提示词并没有约束输出格式，但输出格式总是SVG格式而且很稳定。

首先卡片图提示词使用了LISP语言作为“伪代码”，使用LISP语言的原因是可以更好的描述结构复杂的因果关系和样式。

我们以 卡片图提示词：生成各类科普演示图例/PPT可视化卡片的提示词 为例，详细解释这个问题：

1. 语言差异说明：

• 输入的提示词是用 LISP 语言编写的，这是一种函数式编程语言
• 输出的是 SVG (Scalable Vector Graphics)，这是一种基于 XML 的矢量图形标记语言
• 它们是两种完全不同的语言，服务于不同的目的

2. LISP代码的角色：

• LISP代码在这里实际上是一个"生成器"或"模板引擎"
• 它定义了一系列函数来处理数据并最终生成SVG代码
• 主要函数包括：

  (defun 创建优化SVG图表 ...)  ; 核心生成函数
  (defun 设计背景 ...)         ; 背景样式生成
  (defun 生成副标题 ...)       ; 文本内容生成
  

3. 转换过程：

LISP代码 ---(处理)---> SVG输出
┌─────────────┐ ┌────────────┐
│ LISP函数定义│ → │ SVG标记语言│
│(数据处理逻辑)│ → │(图形描述) │
└─────────────┘ └────────────┘

4. 具体示例：

;; LISP代码（输入）
(defun 创建优化SVG图表 (主题 生命阶段 ...)
(let ((svg-template
"<svg xmlns=\"http://w3.org/2000/svg\"...>"))
...)

<!-- 生成的SVG代码（输出） -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<rect width="100%" height="100%" fill="url(#bgGradient)"/>
...
</svg>

5. 关系解释：

• LISP代码是"厨师的菜谱"：定义了如何处理数据和生成图形的步骤
• SVG是"最终的菜品"：是可视化的最终形态
• LISP代码包含了生成SVG所需的所有逻辑和规则
• SVG是LISP代码执行后的产物

6. 工作流程：
7. LISP代码接收输入参数（如主题、数据等）
8. 处理这些参数（如计算位置、选择颜色等）
9. 将处理后的数据插入SVG模板
10. 输出完整的SVG代码
11. 优势：

• 这种分离允许：
  • LISP处理复杂的逻辑和数据转换
  • SVG专注于视觉呈现
  • 更容易维护和修改
  • 可以根据不同输入生成不同的可视化

8. 现实应用示例：

;; LISP中的函数定义
(defun 设计背景 (主题)
(case 主题
(蝉 '(渐变 "E6F3FF" "B3E5FC" 土地))
...))

转换为：

<!-- 生成的SVG背景代码 -->
<defs>
<linearGradient id="bgGradient">
<stop offset="0%" style="stop-color:#E6F3FF"/>
<stop offset="100%" style="stop-color:#B3E5FC"/>
</linearGradient>
</defs>

这就像是一个翻译过程：LISP代码定义了"规则"和"逻辑"，而这些规则最终被转换成SVG的具体图形描述。这种方式允许我们用LISP伪代码的方式来描述和控制可视化效果，而不是手动编写SVG代码。

普通人的AI入门指南

帮助你以低成本、零基础学会如何利用AI工具。AI就像办公软件一样，是每个人的必备技能。 掌握AI会让你在求职中占据优势，在未来的工作和学习中事半功倍。

查看详情>