用途：把界面工作变成系统化的前端实现，而非逐像素微调，目标是在代码中保留设计系统。与框架无关，需按本地技术栈翻译规则：SwiftUI 用枚举/静态常量做设计令牌、可复用 View、语义化度量；React/Web 用 CSS 变量、设计令牌模块、组件 props/变体；React Native/Flutter 用主题对象、共享组件、语义尺寸。
适用场景：创建或修改可见屏幕、组件、布局、交互；把 Figma、SVG、截图或视觉规格转为代码；修复错位、截断、间距不一致、字体错误、按钮尺寸、安全区问题；创建或修改按钮、卡片、chip、标签页、导航栏、sheet、对话框、列表、进度指示、输入框、阅读界面；审查前端代码的生产就绪度与设计一致性；重构重复 UI 或散落的硬编码值。纯后端、数据模型、提示词或基础设施工作不用，除非影响用户可见界面。
核心分层：设计令牌（颜色、字体、间距、圆角、阴影、安全区偏移、内容宽度等全局与语义值）、组件度量（chip 高度、图标大小、内边距、卡片头部间距、按钮变体等组件专属结构）、屏幕布局度量（hero 卡片位置、区块间距、重复行对齐、装饰资源位置等页面专属组合）。视图代码应描述结构与状态，不把原始设计数学藏在视图体内。
实施流程：先搜索最接近的现有组件与屏幕，识别本地令牌文件、主题文件、组件库与布局辅助；将每个视觉值分类为全局可复用、组件专属、屏幕内重复或一次性装饰；优先扩展现有组件变体而非新建；用派生值编码布局关系（如 authorChipWidth = rowWidth - sourceChipWidth - rowGap）；修好一个同类表面后搜索相同标签、组件、资源或模式，尽量更新共享组件；运行相关构建/类型检查，移动端在用户主动验证视觉时装到模拟器或真机，检查截断、安全区、触控目标、动态文本风险与导航返回行为。
令牌与度量规则：优先语义命名（primaryActionWidth、screenHorizontalInset、cardVerticalSpacing），避免在视图体内重复出现 width: 271、padding(.leading, 12)、offset(y: 37)。数值允许出现在令牌或度量定义中、分组在具名度量区块的一次性资源几何中、平台 API 要求字面量且非视觉设计时。避免散落原始十六进制颜色、有字号体系时内联字号、内联间距、同一按钮/chip/顶栏/卡片/底部 CTA 的多个本地版本、只在单个调用点修复共享组件问题。
组件复用：新建前先判断是新视觉角色还是现有角色的变体、现有组件是否已定义交互/尺寸/阴影/圆角/排版、是否会出现在其他屏幕、是否应作为 prop/变体而非新文件。同结构不同颜色或状态、同按钮形状不同文案/图标、同卡片外壳不同内容、同 chip 不同标签/图标，均做变体；仅当结构、行为或布局角色有实质差异，或扩展现有组件会使其含糊脆弱时才新建。
Figma 转代码：把 Figma 数值当作输入证据而非最终代码结构；先识别重复原语（颜色、排版、圆角、阴影、间距、内容宽度），映射到现有令牌或新增语义令牌；重复 UI 元素映射到现有组件或变体；仅在设计确为插画/装饰或平台布局模型要求时用绝对定位；保留层级与关系，不盲抄坐标；若两元素对齐，用共同容器、网格、宽度或派生度量在代码中编码共享对齐。
排版：优先项目字号体系或平台文字样式；通过大小、字重、颜色与间距体现层级；移动端正文保持可读，避免用极小字号承载有意义内容；用户需阅读的内容优先换行，截断只用于元数据、标签、用户名、作者或有界 chip；截断时在正确组件内约束文本，不让文本改变尺寸或推挤周边布局。
布局与间距：使用一致页面内边距与内容最大宽度；尊重安全区、刘海、home 指示条与键盘行为；主要底部操作在产品内保持一致的宽度与垂直位置；顶部栏的返回、关闭、通知、收藏按钮共用一套定位模型；同族卡片共享外壳度量（宽度、圆角、阴影、内容内边距、间距节奏）；避免嵌套卡片，除非设计明确使用被包含的子卡片。
交互：触控目标至少 44pt（iOS）或平台等效值；纯图标按钮需无障碍标签；破坏性操作需明确确认或撤销；加载、重试、禁用、空与错误状态必须显式；返回行为尽量匹配用户进入路径；可点击区域匹配用户预期，整行或整卡是可供性时不要把点击限制在小图标上。
完成前检查：是否先搜索现有组件；颜色、排版、间距、圆角、阴影是否令牌化；组件内部是否放组件度量而非视图体内联值；屏幕专属布局值是否分组命名；相关宽度/位置是否来自单一事实源；是否更新所有同族组件或说明原因；文本是否无意外截断；触控目标与安全区是否满足；是否运行相关构建/类型检查；视觉打磨时是否装到设备或截图验证。
常见反模式：不检查共享容器就“这里下移 8px”；因“稍有不同”而复制按钮实现；把 Figma 坐标直接抄进视图体；因一个标签看着不对就加局部字号；只在一个屏幕修宽度而同一组件在别处仍坏；生产 UI 用仅模拟数据的布局假设；让生成或后端文本决定 UI 布局而无长度限制或截断策略。
可接受局部例外：某屏幕独有的装饰资源、一次性艺术指导的营销或编辑布局、全量组件抽取风险过大的过渡重构、平台特有约束需本地适配。即便如此也应把值放进具名度量对象并保持例外最小。限制：资料未提供具体安装命令、依赖、支持平台版本与性能数据，暂未提供。