mcpField
E
excalidraw-visuals

excalidraw-visuals

github.com/aiagentwithdhruv创意与媒体2056 次安装15 周前更新
代码仓库

关于 excalidraw-visuals

excalidraw-visuals 是一项用于根据概念或流程生成 Excalidraw 手绘风格图表的技能，指导提示词、布局、标签和配色，并通过 Node.js 脚本与 fal.ai 生成图像。

主要功能

  1. 01固定风格前缀的提示词规划
  2. 02六种图表布局模板
  3. 03精简标签与文字的指导
  4. 04按含义分配调色板
  5. 05通过 Node.js 脚本生成图像

适用场景

  1. 01展示流程或步骤顺序
  2. 02直观比较两个选项
  3. 03围绕中心概念梳理能力
  4. 04呈现层级或迭代循环

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aiagentwithdhruv/skills --skill excalidraw-visuals

安装后在 Claude Code 中输入/excalidraw-visuals确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

.env.example
style-guide.md
scripts/
generate-visual.js

详细介绍

前置条件

使用此技能前，请确保你已具备：

  1. 一个 fal.ai API 密钥（在 https://fal.ai 注册），并将其添加到 .env 中，变量名为 FAL_KEY
  2. 已安装 Node.js
  3. 生成脚本 scripts/excalidraw-visuals/generate-visual.js
  4. 风格参考图 brand-assets/excalidraw-style-reference.png（可选——用于保持提示词一致性）

构建任何提示词前，请先阅读完整的视觉规范：

  • style-guide.md（位于此技能文件夹中）——色彩系统、字体规范、形状规则、图标用语、布局模板、文本精简规则

风格前缀（已锁定）

这段文本会原样添加到每条提示词的开头。切勿针对单次请求修改。

Excalidraw-style hand-drawn diagram on a clean white background. All text uses neat, consistent architect-style handwriting -- legible, slightly rounded letters with medium stroke weight. Letter sizes are uniform within each label. Titles are bold and larger. Body labels are smaller but equally neat. This is NOT sloppy handwriting -- it looks like a designer wrote it carefully with a thick marker.

Shapes are rounded rectangles with a 2-3px dark gray (#495057) hand-drawn outline and soft pastel fills. Lines and arrows are slightly wobbly and hand-drawn, not ruler-straight. Arrowheads are simple triangles. Nothing is pixel-perfect -- everything has a natural, sketched feel with visible stroke texture.

Color palette: soft blue (#a5d8ff), warm yellow (#ffec99), soft green (#b2f2bb), coral (#ffa8a8), light purple (#d0bfff). All text is dark charcoal (#343a40). All lines and arrows are dark gray (#495057). Background is always clean white.

People are simple stick figures with round heads, no facial features. AI agents/robots have a round head with two dot eyes and a small antenna. Documents have a folded corner. Gears represent automation. All icons are simple line drawings, not detailed or cartoonish.

Layout is clean and spacious with generous whitespace. Visual hierarchy is clear -- title is largest, labels are short (max 3 words each). The overall feel is educational, friendly, and slightly more polished than basic Excalidraw -- colored fills, intentional spacing, consistent sizing, and meaningful color coding elevate it.

Do NOT include: realistic photos, gradients, drop shadows, 3D effects, corporate clip art, stock imagery, dark backgrounds, heavy borders.

步骤 1：收集输入

向用户了解：

  • 要可视化的概念或流程
  • 要包含的任何特定元素、步骤或标签
  • 长宽比偏好（默认：16:9）

如果请求含糊不清，提出一个澄清问题，询问要展示的具体角度或流程。

步骤 2：选择布局模板

从风格指南中选择最合适的布局：

模板适用场景
从左到右的流程流程、序列、转换
中心辐射式围绕中心概念展示能力、功能
从上到下的层级结构层级、层次、渐进式深入
并排对比前后对比、新旧对比、选项 A 与选项 B
编号步骤列表框架、检查清单、有序说明
循环 / 闭环反馈闭环、迭代流程

步骤 3：规划文本（尽量精简）

编写提示词前，规划图像中要出现的每一段文本：

  1. 标题： 最多 5 个词，最好 3 个。
  2. 框内标签： 每个最多 3 个词，最好 1-2 个。
  3. 注释： 每个最多 4 个词。
  4. 总词数： 目标少于 30 个词，绝对上限为 50 个。

拼写保护：

  • 标出所有超过 8 个字符的单词并缩短
  • 尽可能用图标代替文字
  • 使用缩写（API、AI、DB、CLI）
  • 删除冠词和介词

步骤 4：构建提示词

严格按以下结构构建提示词：

[STYLE PREFIX]

STYLE REFERENCE: Match the visual style of the reference image exactly -- same font, same shapes, same colors, same level of polish.

Diagram concept: [TITLE -- max 5 words]

Layout: [TEMPLATE NAME] -- [brief spatial description]

Elements (left to right / top to bottom):
1. [Element name] -- [color] fill, [icon if any], label: "[EXACT TEXT]"
2. [Element name] -- [color] fill, [icon if any], label: "[EXACT TEXT]"
3. ...

Connections:
- Arrow from [1] to [2], label: "[TEXT or none]"
- Arrow from [2] to [3]
...

Title at top center, bold and large: "[EXACT TITLE TEXT]"

规则：

  • 明确标注空间位置（“左侧”“顶部居中”“右下角”）
  • 为每个填充元素指定调色板中的一种具体颜色
  • 为每个元素命名，并写明其准确标签文本
  • 描述连接线 / 箭头及其方向

步骤 5：按含义分配颜色

  • 流程： 蓝色（输入）-> 黄色（处理）-> 绿色（输出）
  • 对比： 珊瑚色（旧 / 差 / 慢）与绿色（新 / 好 / 快）
  • 中心辐射式： 蓝色中心，辐射分支使用多种颜色
  • 层级结构： 蓝色（顶部）-> 黄色（中部）-> 绿色（底部）
  • 列表 / 网格： 每行交替使用不同颜色

切勿让模型自行决定颜色。始终明确指定。

步骤 6：生成图像

始终包含风格参考图。 这是强制要求，有助于保持视觉一致性。

node scripts/excalidraw-visuals/generate-visual.js "<FULL_PROMPT>" "projects/excalidraw-visuals/[YYYY-MM-DD]-[slug].png" "[ASPECT_RATIO]"

你可以通过 --input 传入参考图 URL：

node scripts/excalidraw-visuals/generate-visual.js "<FULL_PROMPT>" "projects/excalidraw-visuals/[YYYY-MM-DD]-[slug].png" "[ASPECT_RATIO]" --input "https://example.com/reference.png"

长宽比：16:9（默认）、1:1、4:5

注意： 使用 fal.ai Flux Schnell 模型（免费套餐）。提示词中的风格前缀可确保 Excalidraw 风格保持一致，无需参考图。

步骤 7：展示结果

  • 提供预览文件路径
  • 用一句话概述图像内容
  • 询问是否需要调整

如果需要调整：仅修改图表专属部分。切勿更改风格前缀。

文件位置

内容路径
风格指南.claude/skills/excalidraw-visuals/style-guide.md
脚本scripts/excalidraw-visuals/generate-visual.js
输出projects/excalidraw-visuals/
API 密钥.env (FAL_KEY)

备注

  • 使用 fal.ai Flux Schnell 模型（免费套餐，每张图约需 5 秒）
  • 风格前缀已锁定。每次请求仅更改图表描述。
  • 提示词中的风格前缀可确保 Excalidraw 美学风格一致。
  • 如果生成失败，请检查 .env 中的 FAL_KEY
  • 拿不准时，少用文字，多用图标
  • 备选方案：使用 Social-Media-Agent-1.0/Videos/scripts/generate_fal.py 进行基于 Python 的生成

评论

支持 Markdown