Skills
.Work. You
Rest

design-to-code

Community

Translate designs into production code.

Design & Creative#design#accessibility#frontend#react#responsive design#code generation#phlex
AuthorKaakati
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-to-code
Download link: https://github.com/Kaakati/sdh-claude-skills/archive/main.zip#design-to-code

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.