skills.rest
Kaakati
KaakatiCOMMUNITY
Explore all skills by this author →
Website𝕏@kaakatiGitHub

design-to-code

Translate Figma designs into React components with design tokens.

2|1|Updated Feb 27, 2026
Search Tags:#design#accessibility#frontend#react#responsive design#code generation#phlex
One-click install
npx skills add https://github.com/Kaakati/sdh-claude-skills --skill design-to-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-to-code
Source: https://github.com/Kaakati/sdh-claude-skills/tree/main/.claude/skills/design-to-code
Command: npx skills add https://github.com/Kaakati/sdh-claude-skills --skill design-to-code

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill bridges the gap between visual design specifications and functional code, ensuring accurate and efficient implementation across different platforms.

Core Features & Use Cases

  • Design Translation: Converts design inputs (Figma, screenshots, specs) into platform-specific code (Phlex, React, React Native).
  • Tokenization: Extracts and applies design tokens for colors, typography, and spacing.
  • Component Generation: Decomposes UI into reusable components following Atomic Design principles.
  • Accessibility & Responsiveness: Implements WCAG compliance and breakpoint-aware layouts.
  • Use Case: You have a Figma design for a new user dashboard. Use this Skill to generate the React components, ensuring they adhere to your design system's tokens and are responsive across devices.

Quick Start

Use the design-to-code skill to translate the attached Figma design link into React components.

Frequently Asked Questions about design-to-code

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Figma designs into React components?▼

The Skill translates Figma designs into React components by extracting design tokens for colors and spacing, decomposing the UI into reusable parts, and generating production-ready code following Atomic Design principles. Provide the Figma link or screenshot as input.

What is the best way to translate design specifications into responsive web and mobile code?▼

Translating design specifications into responsive code involves extracting design tokens and implementing breakpoint-aware layouts. This Skill processes Figma links, screenshots, or written specs to output responsive code for platforms like React and React Native.

Can I generate accessible frontend code from a screenshot?▼

Yes, you can generate accessible frontend code from a screenshot. The Skill processes screenshot inputs, extracts design tokens, and implements WCAG compliance to ensure the resulting React or Phlex components are accessible.

Does the design-to-code process support React Native and Phlex?▼

The design-to-code process supports React Native and Phlex by translating visual specifications into platform-specific code. It decomposes UI elements and applies design tokens to generate functional views across web, mobile, and backend platforms.

How do I extract design tokens from a UI design for code generation?▼

Extracting design tokens from a UI design for code generation is handled automatically during the translation process. The Skill identifies colors, typography, and spacing from your inputs and applies them to the generated components.

Related Skills

Explore More Design & Creative Skills→
htafollahtafolla
5

multimodal-looker

Analyze diagrams, screenshots, and UI mockups to extract information and assess design.

Community
Advanced
emilyLi2020emilyLi2020
2

Expo UI SwiftUI

Integrate native iOS SwiftUI views into Expo SDK 55 projects.

Community
Intermediate
seikaikyoseikaikyo
2

bencium-controlled-ux-designer

Enforce an ask-first workflow for UI design decisions with WCAG AA accessibility.

Community
Advanced
hii-saikrishnahii-saikrishna

spline-interactive

Create and animate 3D web scenes in a browser-based visual editor.

Community
Intermediate