---
name: figma-ui-implementation
description: 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

1. Parse the Figma URL and read the design context first.
2. Implement the UI according to the design values.
3. Verify visual fidelity before finishing.
4. Report any design mismatch as a risk, and do not silently change design intent.

## Hard Constraints

1. 严格按照设计稿还原 UI：
   - 间距（margin / padding）
   - 字体（大小 / 粗细 / 行高）
   - 颜色（hex / rgba）
   - 圆角 / 边框 / 阴影
2. 误差控制在 1px 内（尽量做到像素级还原）
3. 不允许擅自修改设计（禁止“美化”或“简化”UI）
4. 自动分析布局（Flex / Grid），禁止全部写死定位
5. 保证基础响应式（适配常见屏宽）

## 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.