frontend-implementation

前端实现技能

适用场景

当请求涉及以下内容时，应用此技能：

• UI 实现、设计转代码、Figma 转代码、组件实现、样式调整、响应式设计、修复损坏的 UI
• UI 实现、从设计稿实现、从 Figma 实现、组件实现、样式调整、响应式适配、修复错乱的 UI
• 将任何设计工具的输出（Figma/Pencil/Canva/草图）转换为代码

核心原则

• 目标不是像素级复刻，而是保持比例、对齐、适应性和一致性。
• 要转换，而不是照抄。 设计工具中的数值（px）仅作参考；实现时应使用尺度、比例和结构。
• 固定值是例外。 如果使用固定值，应说明原因（规范要求、媒体、点击目标等）。

设计理念（决策规则）

1. UI 是一组约束，而不是一张图片。 要包含加载、错误、空状态、禁用等状态，确保完整。
2. 不要用调整边距来实现对齐。 应使用结构（flex/grid）和 gap。
3. 避免固定高度。 优先考虑 min/max/overflow。
4. 按角色定义排版。 不要通过复制数值来增加样式。
5. 提前处理例外情况。 长文本、零条目、失败、延迟等问题，不要留到事后处理。
6. 先明确设计意图（要突出什么、如何引导视线），再创建能够保留这些意图的结构。
7. 宽度应随视口变化。 UI 应适应屏幕宽度（SCALE/FILL 意图）；不要只从左侧裁剪。

转换流程（设计工具 → 代码）

1) 先理解意图，再看数值

• 目的（用户在此屏幕上首先应理解什么、做什么）
• 视觉流向（首先 → 其次 → 最后看到的内容）
• 重点（主视觉 / 辅助元素 / 背景元素）
• 层级（父子关系、分组）
• 拉伸/状态意图（Auto Layout / Constraints / Variants）
• 间距规则（gap/padding 模式）
• 对齐关系（哪些元素彼此对齐）
• 可变元素（文本长度、列表数量、图片比例、输入值）

2) 转换为实现方案

• px → 按尺度取整（例如，4/8/12/16/24/32/40/48）
• font-size → 映射到角色（标题/正文/说明文字）
• 局部边距调整 → 转换为布局结构（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，不要在子元素上分散设置边距。

比例

• 通过比例而非精确数值保持视觉效果（列宽比例、间距步进、字号比例）。
• 优先使用 max-width 加间距规则，而不是固定宽度。

布局

• 一维布局：flex。二维布局：grid。间距：gap。
• 仅在用途明确时，使用 position: absolute 实现叠加层/装饰元素。
• 默认保留图片的宽高比；必要时使用 aspect-ratio。

固定值（例外情况）

• 图标、缩略图、点击区域、规范定义的页眉高度等。
• 即使是为了防止布局崩坏，也应优先考虑 min/max，再使用固定值。

状态与弹性处理（必需）

• 包括：默认 / 悬停 / 激活 / 聚焦 / 禁用 / 加载中 / 错误 / 空状态
• 从一开始就处理长文本、零个项目、网络故障和延迟，不要事后补救。

输出格式（按此顺序）

1. 目的（此 UI 要实现什么）
2. 前提条件（设计输入类型、现有规范、限制）
3. 转换结果（层级、对齐、间距规则、可变元素）
4. 实现方案（布局结构、比例、例外条件）
5. 状态设计（默认 / 悬停 / 激活 / 聚焦 / 禁用 / 加载中 / 错误 / 空状态）
6. 检查清单自评（符合 / 需要改进）

检查清单

• 具备空状态 / 加载状态 / 错误状态
• 设有禁用条件（防止重复提交、无效状态）
• 长文本不会导致布局崩坏（换行 / 省略号 / 最大宽度 / 溢出处理）
• 支持键盘操作且焦点可见
• 在窄屏 / 移动端视口下不会崩坏
• 间距、字体、颜色遵循规范（设计令牌 / 比例）

常见问题

• 从设计稿中逐像素复制，导致边缘状态和响应式布局下出现问题
• 不断微调边距，最终变得难以维护
• 优先追求“视觉还原”，却将状态（加载 / 错误 / 空状态）留待事后处理