技能介绍

要解决的具体问题

UI 设计稿交付后，工程师往往要把截图里的布局、颜色、间距、组件结构手工翻译成代码：先判断是 Grid 还是 Flexbox，再确认按钮、输入框、卡片、导航、弹窗等控件层级，还要把 hex 色值、字号、圆角、阴影和响应式断点逐项对齐。这个过程容易产生视觉漂移，也常把框架选择、组件拆分和可访问性留给临场发挥。

技能如何工作

这个技能把截图作为输入，先细致分析视觉设计，再按用户指定的框架生成完整、可运行的实现。默认情况下，现代页面使用 React + Tailwind CSS，简单页面使用 plain HTML/CSS；如果用户给出 React、Vue、Next.js 或原生 HTML/CSS 偏好，则按对应体系输出。

生成代码时重点包括：

按语义结构拆分组件，使用 header、nav、main、section 等标签。
提取截图中的精确色值，尽量还原间距、比例和视觉层级。
优先使用 Grid、Flexbox、CSS 自定义属性，并给出 rem、em、%、vw/vh、min()、max()、clamp() 等响应式单位。
补充 alt 文本、ARIA 标签和必要的可访问性属性。
输出完整文件、文件结构说明、运行方式和设计取舍说明。

适用边界与注意点

它适合作为设计还原和前端实现的参考：截图清晰时，可以直接生成结构完整、注释清楚的代码；截图模糊或存在歧义时，需要基于常见 UI 模式做合理假设，并在注释中说明，必要时请求澄清。代码默认只作为参考，不自动安装依赖、修改系统权限、创建持久化任务或执行下载内容；涉及发送、发布、删除、付款、部署等外部写入时，应先展示目标和影响，并取得用户明确确认。凭据仅用于用户指定的对应官方服务，不回显、不记录、不转发。