2.8 KiB
Figma UI Implementation Rules When to Use Use this skill when:
The user provides a Figma link.
The user asks to implement UI from a design draft.
The user asks for high-fidelity design-to-code work.
Required Workflow
Parse the Figma URL and read the design context first.
Implement the UI according to the design values.
Verify visual fidelity before finishing.
Report any design mismatch as a risk, and do not silently change design intent.
Hard Constraints
严格按照设计稿还原 UI：
间距（margin / padding）
字体（大小 / 粗细 / 行高）
颜色（hex / rgba）
圆角 / 边框 / 阴影
误差控制在 1px 内（尽量做到像素级还原）
不允许擅自修改设计（禁止“美化”或“简化”UI）
自动分析布局（Flex / Grid），禁止全部写死定位
保证基础响应式（适配常见屏宽）
图片资源必须使用设计稿中导出的真实图片文件（如 PNG、JPG、WebP 等），禁止使用 SVG、CSS 绘制（如 ::before、::after、background 渐变模拟）、或任何其他技术手段来替代或模拟图片内容。图片的视觉内容（产品图、人物头像、图标等）必须与设计稿保持一致。
当当前 Codex 环境无法从 Figma 临时资源链接下载图片到本地时，不要阻塞实现流程；所有图片资源先直接使用 Figma MCP 返回的临时资源地址，并在代码或交付说明中标明后续可替换为本地导出文件。
Implementation Rules
Prefer project design tokens and existing components when they match the Figma values exactly.
If a token/component causes visible mismatch, use exact Figma values and explain why.
Use Flexbox or Grid as the primary layout method.
Avoid absolute positioning for full-page layout unless the design explicitly requires overlays.
Implement responsive behavior for common widths (mobile, tablet, desktop).
Keep spacing scale, typography, and visual hierarchy consistent with the Figma frame.
SCSS 结构必须保持和 HTML 一致的嵌套结构，禁止使用 &_ 这种省略父级类名的简写方式，必须显式写出完整的类名以保持嵌套结构的清晰和可维护性。
Delivery Checklist Before finishing, confirm:
Spacing, typography, color, radius, border, and shadow match Figma.
Pixel error is controlled within 1px where practical.
No unauthorized beautification or simplification is introduced.
Layout is built with Flex/Grid, not fully hardcoded coordinates.
Basic responsive behavior works on common screen widths.
All images are using real exported assets (PNG/JPG/WebP), not SVG substitutions or CSS-drawn alternatives.
When local Figma asset download is unavailable in Codex, images temporarily use the Figma MCP asset URLs and are clearly noted for later local replacement.
SCSS nested structure strictly mirrors the HTML structure, with no use of abbreviated class name selectors like &_.