技能介绍

解决的问题

设计稿到可运行原型之间，常见痛点不只是“能打开页面”，而是 CSS 变量、组件令牌、图标、图表、侧边栏布局都容易漂移。该技能把 phase-design 输出的 DSL JSON 或设计方案文档转换成单文件 final.html，目标是在不引入复杂前端工程的前提下，完成 FTdesign 约束下的页面还原。

工作方式

输入侧：优先解析 DSL JSON，也可接受含页面列表、布局决策、组件令牌汇总和 BEM 容器映射的方案文档；
输出侧：生成包含 CSS 变量、组件样式、Mock 数据与响应式交互的单文件 HTML；
图标与图表：使用 Font Awesome 6.4.0 多源 CDN 降级，按需引入 ECharts 5.4.3，并通过 waitForECharts 轮询避免图表渲染竞态；
布局约束：固定 240px 侧边栏，主内容区使用 margin-left: 240px，内容卡片遵循白色背景与 24px 间距；
质量检查：覆盖 CSS 分号、var(--ft-xxx) 格式、标签闭合、fa-solid fa-* 图标类名、品牌色与侧边栏状态。

技能内部沿用 L7-L10 分层，把设计系统、组件资产、模板和 DSL Schema 分开管理；design_engine.py 可作为查询组件、设计系统与 DSL 的本地 CLI 入口。

适用边界

适合 B 端后台、仪表盘、权限/用户管理、列表表单等原型页面。若页面依赖登录态、真实接口、复杂路由或后端权限模型，它只能作为前端视觉原型。该技能更像设计到前端的桥接器，而不是通用 React/Vue 脚手架。使用时应确认上游 DSL 完整，并核对 GEN::、NAV::、ENT:: 等令牌前缀是否覆盖目标组件。