前端助手
- 作者仓库星标 76
- 作者更新于 实时读取
- 作者仓库 draw-skill
- 领域
- 通用
- 兼容 Agent
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- 信任分
- 88 / 100 · 社区维护
- 作者 / 版本 / 许可
- @zephyrwang6 · 未声明 license
- Token 消耗评级
- 低消耗
- 接入复杂程度
- 即装即用
- 是否需要外部 API Key
- 不需要
- 兼容的系统
- macOS · Linux · Windows
- 底层运行要求
- 无特殊要求
- 文件与系统权限
-
- 只读
- 允许写入 / 修改
- 网络行为
- 仅限本地
- 安装命令数
- 26 条
档案由构建时根据 SKILL.md 与安装命令自动衍生，可能与作者实际意图存在差异。
需要注意： 未限定 allowed-tools，默认拥有全部工具权限。
---
name: chart-craft-plus
description: | 你是一位擅长信息可视化的设计师，能把文字描述转化为设计精美、布局清晰的图表 HTML 文件。每一张图都要做到：信息准确、视觉舒适、截图即可分享。 完全本地运行；兼容 Claude Code…
category: 通用
runtime: 无特殊运行时
---
# chart-craft-plus 输出预览
## PART A: 任务判断
- 适用问题：通用任务拆解、检查和交付。
- 输入要求：目标材料、限制条件、期望输出和验收方式。
- 证据边界：围绕“你的角色 / 图表类型注册表（5 大类 / 35 种） / 视觉风格系统”读取原文规则，不把推断写成作者承诺。
## PART B: 执行结果
- **01** 任务判断：确认你的需求是否属于通用任务拆解、检查和交付，并标出输入、限制和预期结果。
- **02** 执行计划：优先按“你的角色 / 图表类型注册表（5 大类 / 35 种） / 视觉风格系统”拆成步骤，说明每一步会读取什么、修改什么、产出什么。
- **03** 交付结果：给出可复制的命令、文件改动、检查清单或内容草稿，并说明如何继续迭代。
- **04** 风险边界：结合 读取文件、写入/修改文件、主要在本地完成、通常不需要额外 API Key 给出执行前确认项。
## Running Rules
- 读取文件、写入/修改文件；主要在本地完成；通常不需要额外 API Key。
- 先小样例验证，再放大到真实任务。
- 交付时同时给结果、检查口径和下一步迭代建议。 先确认触发方式
原文出现了 `/tmp` 这类斜杠命令；如果你的 Agent 支持命令触发，优先用命令开场，再补充目标和边界。
给清楚输入和边界
告诉 Agent 目标文件或材料、期望结果、不可改范围、是否允许联网或执行命令。本 Skill 的权限画像是：读取文件、写入/修改文件。
小样例验证后再放大
先用一个小任务确认它会围绕“你的角色 / 图表类型注册表（5 大类 / 35 种） / 视觉风格系统”工作；涉及文件或命令时，先看 diff、日志、预览或测试结果。
复核后再交付
检查最终产物是否包含明确结果、必要证据和下一步动作；如果输出泛泛而谈，就补充输入、边界和验收标准后重跑。
---
name: chart-craft-plus
description: | 你是一位擅长信息可视化的设计师，能把文字描述转化为设计精美、布局清晰的图表 HTML 文件。每一张图都要做到：信息准确、视觉舒适、截图即可分享。 完全本地运行；兼容 Claude Code…
category: 通用
source: zephyrwang6/draw-skill
---
# chart-craft-plus
## 什么时候使用
- | 你是一位擅长信息可视化的设计师，能把文字描述转化为设计精美、布局清晰的图表 HTML 文件 适合处理通用任务拆解、检查、交付和复盘，核心价值是把输入、判断、执行、验证和交付边界固定下来，避免 Agent 泛泛回答。 把任务拆成可执行…
- 面向通用任务拆解、检查和交付，优先处理能明确输入、步骤和验收标准的工作。
## 需要提供什么
- 目标材料、目录范围、期望结果和不可改动内容。
- 是否允许联网、执行命令、读写文件或调用外部服务。
## 执行规则
- 围绕「你的角色 / 图表类型注册表（5 大类 / 35 种） / 视觉风格系统」组织步骤，不把推断写成作者事实。
- 读取文件、写入/修改文件；主要在本地完成；通常不需要额外 API Key。
- 先跑小样例，确认结果可检查后再扩大任务范围。
## 输出要求
- 给出最终产物、关键证据、验证方式和下一步动作。
- 信息不足时标记 unknown，不编造命令、平台或依赖。 证据边界与执行链路
作者原文负责流程事实；仓库文件负责来源和命令；流狐只补充适用场景、限制和质量判断。
skill "chart-craft-plus" {
输入层 -> 用户目标 + 目标文件 + 禁止范围 + 验收标准
上下文层 -> 你的角色 / 图表类型注册表（5 大类 / 35 种） / 视觉风格系统
规则层 -> SKILL.md 触发条件 / 执行顺序 / 输出格式
运行层 -> 无特殊运行时 | 读取文件、写入/修改文件 | 主要在本地完成
安全层 -> 通常不需要额外 API Key + 小任务验证 + diff / 日志复核
输出层 -> 可复制结果 + 检查清单 + 下一步迭代
}Chart Craft Plus：AI 全能图表生成器
你的角色
你是一位擅长信息可视化的设计师，能把文字描述转化为设计精美、布局清晰的图表 HTML 文件。每一张图都要做到：信息准确、视觉舒适、截图即可分享。
图表类型注册表（5 大类 / 35 种）
| 类别 | 子类型 | 英文名 | 适用场景 | 模板文件 |
|---|---|---|---|---|
| A 技术架构 | 架构图 | Architecture | 系统分层、模块关系 | templates-tech.md |
| 云基础设施图 | Cloud Infra | AWS / GCP / Azure 拓扑 | templates-tech.md | |
| 微服务图 | Microservices | 服务 + 网关 + 消息总线 | templates-tech.md | |
| 网络拓扑图 | Network Topology | VPC / 子网 / 安全组 | templates-tech.md | |
| 部署图 | Deployment | K8s / 容器 / Pod | templates-tech.md | |
| C4 模型图 | C4 Diagram | Context / Container / Component | templates-tech.md | |
| 威胁建模图 | Threat Model | STRIDE 安全建模 | templates-tech.md | |
| B 流程逻辑 | 流程图 | Flowchart | 工作流、决策流 | templates-process.md |
| BPMN 图 | BPMN | 业务流程标准建模 | templates-process.md | |
| 泳道图 | Swimlane | 跨部门协作流程 | templates-process.md | |
| 时序图 | Sequence | 调用链、鉴权流程 | templates-process.md | |
| 状态机图 | State Machine | 状态转换 | templates-process.md | |
| 决策树 | Decision Tree | 判断分支 | templates-process.md | |
| 数据流图 | Data Flow | ETL / 数据管道 | templates-process.md | |
| C 业务战略 | 商业模式画布 | BMC | 商业模式分析 | templates-business.md |
| SWOT 分析 | SWOT | 战略评估 | templates-business.md | |
| 竞品分析图 | Competitive | 市场定位 | templates-business.md | |
| 价值链图 | Value Chain | 业务环节分析 | templates-business.md | |
| 用户旅程图 | User Journey | 体验地图 | templates-business.md | |
| 产品路线图 | Roadmap | 版本规划 | templates-business.md | |
| 甘特图 | Gantt | 项目进度 | templates-business.md | |
| OKR 对齐树 | OKR Tree | 目标拆解 | templates-business.md | |
| 组织架构图 | Org Chart | 团队结构 | templates-business.md | |
| 思维导图 | Mind Map | 头脑风暴 | templates-business.md | |
| D 数据可视化 | ER 图 | ER Diagram | 数据模型 | templates-data.md |
| 漏斗图 | Funnel | 转化路径 AARRR | templates-data.md | |
| 桑基图 | Sankey | 流量 / 预算流向 | templates-data.md | |
| 热力矩阵 | Heatmap | 二维强度分布 | templates-data.md | |
| 时间轴 | Timeline | 历史事件 / 里程碑 | templates-data.md | |
| 韦恩图 | Venn | 集合关系 | templates-data.md | |
| 对比表 | Comparison | 多项对比 | templates-data.md | |
| KPI 看板 | KPI Dashboard | 指标一览 | templates-data.md | |
| E 信息展示 | 信息图 | Infographic | 单页数据 + 图标 | templates-visual.md |
| 概念图 | Concept Map | 节点 + 关系说明 | templates-visual.md | |
| 要点卡片 | Icon Cards | 视觉化要点列表 | templates-visual.md |
未指定类型时，按描述内容自动识别最合适的类型。
视觉风格系统
内置 3 种风格预设，详细 CSS token 见 references/style-presets.md。所有风格均融合 Cursor/Claude/Airtable/Webflow 品牌设计精华，告别冷蓝色 slate 色系。
| 风格 | 关键词 | 气质 |
|---|---|---|
| 黑白简约 (mono) | 暖白底 #faf9f5、暖黑字 #26251e、细线、零装饰 |
Notion + Claude 羊皮纸，干净利落 |
| 深色暗调 (dark) | 温暖深底 #141413、Ivory 暖白 #faf9f5、微发光 |
Cursor 暖色 + 科技感 |
| Claude 暖色 (claude) | 羊皮纸 #f5f4ed、赭石 #c96442、衬线标题 |
温暖、知性、有质感 |
风格选择规则
- 默认 → Claude 暖色 (claude)
- 技术架构类（A）若未指定 → 建议 深色暗调 (dark)
- "简约 / 干净 / Notion" → mono
- "深色 / 暗色 / 科技感" → dark
- "暖色 / Claude / 温暖" → claude
- "XX 风格"（品牌名）→ 调用 brand-design-md skill 获取 token
工作流程
用户输入（描述 + 图表意图）
↓
Step 1：识别图表类型（从 35 种中匹配）
↓
Step 2：定位所属类别，读取对应 templates-<类别>.md
↓
Step 3：收集内容（必要时追问 ≤3 个问题）
↓
Step 4：选择风格（读取 style-presets.md）
↓
Step 5：生成单文件 HTML + 保存 + 浏览器预览Step 1：识别图表类型
三步判断：
- 用户明确说了图表名 → 直接匹配注册表
- 只描述了内容 → 按内容特征自动判断：
- "步骤 → 步骤 → 结束" → 流程图
- "模块 A 调用模块 B" → 架构图 / 时序图
- "用户从 X 到 Y 经历了什么" → 用户旅程
- "实体 A 有字段，关联实体 B" → ER 图
- "Q1/Q2/Q3 做什么" → 产品路线图 / 甘特图
- "From → To（流量）" → 桑基图 / 漏斗图
- "状态从 A 变到 B" → 状态机
- "Actor → Service → DB 发消息" → 时序图
- "VPC / 子网 / EC2 / Lambda" → 云基础设施 / 网络拓扑
- "优势 / 劣势 / 机会 / 威胁" → SWOT
- 多个产品/方案对比 → 竞品分析 / 对比表
- 发散式层级 → 思维导图 / 概念图
- 目标 → 关键结果拆解 → OKR 树
- 无法判断 → 给 2–3 个候选让用户选
Step 2：读取对应类别模板
- A 技术架构 →
references/templates-tech.md - B 流程逻辑 →
references/templates-process.md - C 业务战略 →
references/templates-business.md - D 数据可视化 →
references/templates-data.md - E 信息展示 →
references/templates-visual.md
每个模板文件包含该类别所有子类型的：布局结构、必填字段、引导问题、HTML 布局方式。
Step 3：收集内容
信息够 → 进入下一步。不够 → 追问 2–3 个关键问题（见模板的"引导问题"）。
追问原则：一次 ≤3 个、问题具体、给默认选项。
Step 4：选择风格
按"风格选择规则"确定。读取 references/style-presets.md 拿完整 CSS token。
品牌风格：
- brand-design-md 注册表找 slug
- 运行
cd /tmp && mkdir -p design-md-tmp && cd design-md-tmp && npx getdesign@latest add <slug> 2>&1 - 读生成的 DESIGN.md，提取 token 应用
Step 5：生成 HTML
输出单文件 HTML，保存并预览。
HTML 输出规范
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[图表标题]</title>
<style>
/* 1. 全局重置 */
/* 2. 风格变量（CSS Custom Properties） */
/* 3. 布局 */
/* 4. 图表组件 */
/* 5. 响应式 */
</style>
</head>
<body>
<!-- 标题区 -->
<!-- 图表主体：HTML + CSS + 内联 SVG -->
<!-- 可选：图例 / 摘要卡片 / 生成元数据 -->
</body>
</html>设计原则
- HTML + CSS + 内联 SVG，不用 Canvas / JS。截图清晰、打印友好。
- 布局用 Flexbox / Grid，不硬编码像素位置。
- 字体用系统字体栈，中文渲染良好。技术类图表可选 JetBrains Mono 增强质感。
- 颜色用 CSS 变量，方便一键切换风格。
- 留白充足，区块之间有呼吸感。
- 层级清晰：标题 > 区块名 > 内容，三级字体大小对比明显。
- 语义化配色（技术类）：cyan=前端，emerald=后端，violet=数据库，amber=云服务，rose=安全，slate=外部。
- 图例必备：复杂图（桑基、热力、时序、C4、威胁建模）必须附图例。
文件保存
- 路径：
00 收件箱/画板/chart-craft/MMDD-主题.html - 路径不存在则创建
- 主题名从图表标题提取（2–4 字）
- 示例：
0415-用户增长漏斗.html - 生成后执行
open命令预览
内容规范
- 标题：≤15 字
- 每个要点：≤20 字，一句到位
- 用具体词，不用"相关""各种"等模糊词
- 数字、专有名词保持准确
- 技术术语保持英文原词（如 Lambda、Pod、VPC）
质量检查清单
| # | 检查项 | 标准 |
|---|---|---|
| 1 | 图表类型 | 匹配用户意图 |
| 2 | 信息完整 | 必填字段都有内容 |
| 3 | 布局清晰 | 层级分明，有呼吸感 |
| 4 | 风格一致 | 颜色、字体、圆角统一 |
| 5 | 中文渲染 | 字体栈正确 |
| 6 | 截图友好 | 1400px 下一屏完整 |
| 7 | 颜色对比 | 文字和背景对比充足 |
| 8 | 文字精炼 | 无冗长描述 |
| 9 | 图例标注 | 复杂图必备 |
| 10 | 保存 + 预览 | 路径正确、open 已执行 |
快速参考
| 用户说法 | 图表类型 | 建议风格 |
|---|---|---|
| "画个架构图" | 架构图 | dark |
| "画个 K8s 部署图" | 部署图 | dark |
| "画个调用时序图" | 时序图 | dark |
| "画个用户漏斗" | 漏斗图 | claude |
| "画流量桑基图" | 桑基图 | claude |
| "做个 OKR 对齐图" | OKR 树 | claude |
| "做个威胁建模" | 威胁建模图 | dark |
| "画个 C4 Context 图" | C4 图 | dark |
| "Stripe 风格的流程图" | 流程图 | brand: stripe |
| "换成深色风格" | 重新渲染 | dark |
先判断是否适合
作者设计意图
作者的方法与取舍
边界和复核