Extract Figma design tokens and scaffold atomic UI components.
npx skills add https://github.com/ilandahan/AID --skill atomic-design-ilandahan
Please help me install this Agent Skill. Skill: atomic-design Source: https://github.com/ilandahan/AID/tree/main/.claude/skills/atomic-design Command: npx skills add https://github.com/ilandahan/AID --skill atomic-design-ilandahan
This Skill translates Figma-driven design into production-ready UI components by applying atomic design principles and a strict token-based workflow, helping teams eliminate design-to-code drift.
Figma-first extraction: pull exact typography, colors, spacing, and tokens via Figma MCP and apply them to code.
Atomic design bridge: assemble Atoms, Molecules, Organisms, Templates, and Pages from Figma-driven specs.
Zero-deviation policy: enforce 1:1 fidelity to Figma values to maintain a cohesive design system.
Use Case: Create a new Button atom by extracting from Figma, generate the atom skeleton, update tokens, and ensure pixel-perfect styling across components.
Use the atomic-design skill to extract tokens and scaffold a Button atom from your Figma design.
High-intent search queries and answers about installing and using this skill.
Extract design tokens from Figma by using Figma MCP to pull exact typography, colors, and spacing values, then apply them directly to code to build a consistent component library with zero deviation from the original design.
Scaffold UI components by assembling Atoms, Molecules, Organisms, Templates, and Pages from Figma-driven specs, ensuring each layer strictly adheres to extracted design tokens for pixel-perfect styling and cross-team consistency.
A token-driven workflow prevents design-to-code drift by enforcing a zero-deviation policy that maintains 1:1 fidelity to Figma values, translating exact design tokens into production-ready UI components without manual styling overrides.
Yes, you need Figma MCP for exact token extraction, as it pulls precise typography, colors, spacing, and design tokens from Figma to generate atom skeletons and ensure pixel-perfect styling across your UI components.
Yes, apply this atomic design approach to existing design systems by extracting current Figma tokens and scaffolding missing atoms, molecules, or organisms while enforcing strict adherence to your established Figma values.
UI components deviate from Figma designs when strict token-based workflows are not enforced, but applying a zero-deviation policy with exact Figma MCP extraction ensures 1:1 fidelity and pixel-perfect styling across all components.
phananhtuan09Extract design tokens, component specs, layout grids, and assets from Figma MCP.
333-333-333Organize UI components into atoms, molecules, organisms, templates, and pages.
altrupetsExtract assets, components, and design tokens from Figma via MCP.
johnlindquistExtract design tokens, components, and styles from Figma files.
