cx-rebuild
Figma → DS ComponentsTakes a selected Figma frame and rebuilds it below using proper Design System library components and tokens. The original stays untouched — the rebuild is a new frame placed directly underneath.
How to trigger
cx-rebuildType this in the Kiro chat with a Figma frame selected. The assistant will ask which platform the design belongs to (till / sports / account) before starting.
What happens
-
1
Capture — Screenshots the selected frame as visual reference, confirms dimensions and name.
-
2
Analyze — Reads the frame tree (layers, text, colors, spacing). Maps each element to a DS component (Button, Input, Alert, etc.).
-
3
Search — Finds the correct library components via REST API (Tipico Tailwind DS + Linked Assets).
-
4
Build — Creates a new frame below the original. Places DS component instances, sets variants, applies text content and tokens.
-
5
Compare — Screenshots both frames side-by-side for visual comparison. Iterates on request.
Component mapping
The assistant maps visual elements to DS components automatically:
| Detected element | Maps to |
|---|---|
| Colored frame + text | Button (variant by color/size) |
| Frame with border + placeholder | Input |
| Icon + text + colored bg | Alert / Inlinemessage |
| Small square/circle | Checkbox / Radiobutton |
| Horizontal text row | Tabs |
| White frame + shadow | Card (manual, no DS component) |
MCP tools used
Prerequisites
- Figma Desktop with Bridge Plugin running
- FIGMA_ACCESS_TOKEN set (for library REST API access)
- A frame selected in Figma
- Tipico Tailwind DS library subscribed in your Figma file
Library sources
Rules
- The original frame is never modified — rebuild is always a new frame below.
- Published library components are always preferred over local elements.
- Design tokens are used for all colors — never hardcoded hex values.
- Text styles are applied via published text style keys.
- Content is copied exactly from the original (same text, same language).