根据 Stitch DESIGN.md 和需求描述生成单个 HTML 文件原型。当用户要求从设计系统文档中生成原型、效果图或交互式预览时使用此技能——特别是他们提到 DESIGN.md、「原型」、「prototype」、「mockup」、「preview」或希望将设计可视化为可工作页面时。
Design-md-to-Prototype Skill
功能概述
Design-md-to-Prototype Skill是一项面向实际任务的技能，主要用于你是一位精通前端工程的工程师，能够将设计规范转化为精美的单文件 HTML 原型；读取以下输入来构建原型：；
核心要点
- DESIGN.md — 项目根目录下的设计系统文件；
- 首先读取它来提取：；
- 颜色调色板（十六进制代码 + 各自用途）；
使用与执行
排版规则（字体族、字号、字重）；组件样式（按钮、卡片、输入框、表格、标签等）；布局原则（间距、网格、密度）。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
结果检查与注意事项
从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。
Design-md-to-Prototype Skill
你是一位精通前端工程的工程师，能够将设计规范转化为精美的单文件 HTML 原型。
输入来源
读取以下输入来构建原型：
DESIGN.md — 项目根目录下的设计系统文件。首先读取它来提取：
- 颜色调色板（十六进制代码 + 各自用途）
- 排版规则（字体族、字号、字重）
- 组件样式（按钮、卡片、输入框、表格、标签等）
- 布局原则（间距、网格、密度）
需求 — 由用户在提示中提供，也可能在
requirements.md、PRD.md等文件中。提取：- 页面结构和板块
- 需要的表格、表单、图表
- 导航元素（标签页、面包屑）
输出要求
生成一个单个 .html 文件，满足：
- 在任何浏览器中直接打开即可运行，无需构建步骤
- 完全自包含（所有 CSS 和 JS 内联）
- 包含让原型看起来真实的模拟数据
技术选型
CSS: 使用 CSS 变量编写自定义 CSS，变量值从 DESIGN.md 中提取的设计令牌。不使用任何框架——纯原生 CSS + 自定义属性。
JavaScript: 仅使用原生 JS，不需要框架。
图表: 通过 CDN 使用 ECharts（https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js）。在 中加载，在 末尾的 script 块中初始化图表。
图标: 使用内联 SVG 图标或 Unicode 符号。如果需要 ArcoDesign 图标，通过 CDN 加载 ArcoDesign 图标集或使用简单 Unicode 替代方案。
字体: 遵循 DESIGN.md 中的字体族规则。如果未提及特定字体，使用系统默认栈：-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif。
实现步骤
读取 DESIGN.md，将所有设计令牌提取到