技能介绍

要解决的问题

蓝湖设计稿交付后，开发常需手动对照图层、色值、间距、字体和素材，容易漏掉渐变、阴影、非均匀圆角、opacity 与复杂布局，也常把一次性页面写进项目后与既有设计系统割裂。该技能把“设计稿到组件代码”的还原过程收敛为可检查的工作流，重点处理像素级样式和工程化落地。

技能如何工作

先列出设计图，由用户选择目标页面或序号。
拉取 .schema.json、.tokens.txt、设计原图与切片资源；官方 HTML/CSS 仅在用户要求时下载，且只作为结构参考。
根据项目中的 package.json、pubspec.yaml、Podfile 等判断 React、Vue、Flutter、Android、iOS 或纯 HTML，并识别 Tailwind、SCSS、CSS Modules 等样式方案。
以 .schema.json 为唯一权威来源遍历图层树，将设计元素映射为组件代码；若项目存在 DESIGN.md，会先读取并遵循其设计令牌、命名、目录和复用组件约定。
对移动端稿检查 pxtorem、postcss-px-to-viewport、rem 基准等适配方案，再决定输出单位。
最后按 13 项核查尺寸、颜色、渐变、阴影、字体、间距、图片资源、overflow、组件拆分与 BEM 命名等差异。

适用边界与注意点

适合已经具备蓝湖访问 Cookie、且希望减少样式细节遗漏的前端或跨端组件还原。它不替代交互状态设计、接口对接或可访问性测试；如果项目缺少移动端适配方案，输出会保持 px 并提示缺失。遇到 DESIGN.md 与 Schema 冲突时，优先按文档说明处理，无说明则以 Schema 数值保证单屏还原。