用途
该技能用于把设计稿和 UI 需求转化为稳健、可扩展的前端实现。当请求涉及 UI 实现、设计转代码、Figma 转代码、组件实现、样式调整、响应式设计、修复崩坏的 UI，或把任意设计工具（Figma/Pencil/Canva/草图）的输出翻译为代码时，适用本技能。
核心原则
目标不是像素级复制，而是保持比例、对齐、韧性与一致性。要“翻译，而非誊抄”：设计工具中的 px 值只是参考，实现应使用尺度、比例与结构。固定值属于例外，若使用固定值，需要说明理由（规格要求、媒体、点击目标等）。
设计哲学（决策规则）
- UI 是一组约束，而不是一张图片。要包含状态（加载/错误/空/禁用）才算完整。
- 不要用 margin 微调来制造对齐，应使用结构（flex/grid）与 gap。
- 避免固定高度，优先考虑 min/max/overflow。
- 字体排版基于角色，不要靠复制数值来扩散样式。
- 提前处理例外：长文本、零条目、失败、延迟，不应事后补救。
- 先阐明设计意图（强调什么、如何引导视线），再建立能保持该意图的结构。
- 宽度跟随视口。UI 应适应屏幕宽度（SCALE/FILL 意图），而不是简单地从左侧裁切。
翻译流程（设计工具 → 代码）
1）先读意图，再看数字：
- 目的（用户在此屏幕首先应理解/做什么）
- 视觉流（第一 → 第二 → 最后看到什么）
- 强调（主视觉/辅助/背景元素）
- 层级（父子关系、分组）
- 伸缩/状态意图（Auto Layout / Constraints / Variants）
- 间距规则（gap/padding 模式）
- 对齐（什么与什么对齐）
- 可变元素（文本长度、列表数量、图片比例、输入值）
2）转换为实现：
- px → 归入尺度（如 4/8/12/16/24/32/40/48）
- font-size → 映射到角色（标题/正文/说明）
- 局部 margin 微调 → 转为布局结构（flex/grid/gap，明确父子职责）
- 固定宽高 → 转为约束（min/max、换行、省略、溢出）
- 宽度设计 → 分离背景/容器/内容职责
3）对齐决策：
- 何时对齐：重复元素（卡片/列表/表单）便于比较；主列（正文/主要输入/CTA）形成清晰视觉路径；减少困惑（管理面板、设置、重输入屏幕）。
- 何时可打破对齐：有意让主视觉元素浮动；强调区块边界；以媒体/装饰为焦点（但需保证韧性）。
- 打破对齐的规则：至少保留一条基线；偏移模式限制在 1–2 种；窄视口下优先对齐。
4）保持宽度分布（权重）：
- 宽度分布本身就是视觉引导。列权重（主/次/三级）是有意为之。
- 不要意外均等化。给所有元素加 flex: 1 会让辅助元素和主视觉一样突出。
- 把基线对齐与宽度分布分开，二者可以不同。
实现指南
字体排版：
- 使用 rem（或 clamp()）。仅在需要与父级尺寸关联时使用 em。
- line-height 应无单位（如 1.5–1.7）。
- 正文可读性：目标 max-width: 60ch。
间距：
- 归入尺度（避免小数值）。
- 优先使用父级的 gap/padding，而不是在子元素上散布 margin。
比例：
- 通过比例而非精确数字保持观感（列宽比、间距步进、字号尺度）。
- 优先使用 max-width + 间距规则，而非固定宽度。
布局：
- 一维用 flex，二维用 grid，间距用 gap。
- position: absolute 仅用于有明确目的的覆盖层/装饰。
- 图片默认保持宽高比；需要时使用 aspect-ratio。
固定值（例外）：
- 图标、缩略图、点击目标、规格定义的头部高度等。
- 即使为防止崩坏，也应先考虑 min/max 再考虑固定。
状态与韧性（必需）
需包含：默认 / 悬停 / 激活 / 聚焦 / 禁用 / 加载 / 错误 / 空。 从一开始就处理长文本、零条目、网络失败、延迟，不应事后补救。
输出格式（按此顺序）
- 目的（该 UI 达成什么）
- 前置条件（设计输入类型、既有约定、约束）
- 翻译结果（层级、对齐、间距规则、可变元素）
- 实现方案（布局结构、尺度、例外条件）
- 状态设计（默认/悬停/激活/聚焦/禁用/加载/错误/空）
- 清单自评（OK / 待改进）
检查清单
- 是否有空/加载/错误状态
- 是否有禁用条件（防止重复提交、无效状态）
- 长文本下是否不崩坏（换行/省略/max-width/溢出）
- 是否支持键盘操作与可见聚焦
- 窄屏/移动视口下是否不崩坏
- 间距、字体、颜色是否遵循约定（tokens/尺度）
常见陷阱
- 按设计数据做像素级复制，在边缘状态与响应式下崩坏
- margin 微调不断扩散，变得难以维护
- 优先“视觉匹配”，而把状态（加载/错误/空）当作事后补充
限制
资料未提供该技能的具体安装命令、依赖环境、支持的框架或工具版本、收费与价格信息，暂未提供。