You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2.0 KiB
2.0 KiB
| name | description |
|---|---|
| figma-ui-implementation | Implement UI from Figma links with strict visual fidelity and responsive layout rules. Use when the user provides a figma.com design URL, asks to restore UI from design drafts, or requests pixel-level design implementation. |
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），禁止全部写死定位
- 保证基础响应式（适配常见屏宽）
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.
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.