DESIGN.md 转原型

问题

前端原型常常卡在“设计已定、代码未起”的中间态：DESIGN.md 里已有颜色、字体、组件与布局规则，但手工拼单文件页面容易漏令牌、风格漂移，也常引入不必要的框架。这个技能把设计规范和页面需求转成一个可直接打开的 HTML 原型。

工作方式

它先读取 DESIGN.md，抽取颜色、排版、组件样式与布局原则；再结合用户提示或 requirements.md、PRD.md 中的结构，确定导航、侧边栏、卡片、表格、表单和图表。输出为单个 .html 文件，CSS/JS 内联，除 ECharts CDN 外不依赖构建工具。

核心做法包括：

• 用 CSS 自定义属性承载设计令牌
• 用原生 JS 实现标签页、悬停、折叠、模态框
• 用内联 SVG 或 Unicode 做图标
• 为表格、表单、图表填入 5-10 行模拟数据

注意点

适合需要快速评审界面结构、颜色一致性和企业仪表盘观感的场景。若要求生产级可访问性、真实接口、组件库复用或复杂状态管理，仍应以正式前端工程为准。