用途：把 Figma 设计稿描述转成前端代码，覆盖整页还原、单个 UI 组件、复杂布局、设计系统与响应式适配等场景。
主要能力：像素级还原间距、字号、颜色、圆角等细节；输出语义化 HTML；优先使用 Flexbox/Grid；可复用部分抽成组件；默认输出响应式代码；支持原生 CSS、Tailwind CSS、CSS Modules、styled-components 等方案，以及 React/Vue/Next.js 技术栈；可从设计规范提取 Design Token 并搭建样式变量体系。
使用方式：先确认设计内容、设计描述、技术栈、CSS 方案与响应式需求；再分析布局分层、可复用组件、样式变量与交互状态；随后编写代码，按页面还原或组件两种格式输出，包含设计分析、CSS 变量、代码、响应式适配与还原说明。迭代时可按间距、颜色、Tailwind 版本、hover 效果、Vue 组件、移动端问题等指令调整。
限制：不能直接读取 Figma 文件，需用户描述设计稿内容；不负责视觉设计、复杂交互动画（如 Lottie、Three.js）、后端 API 与业务逻辑、部署发布。超出范围时先完成当前还原，再说明能力边界。