Which frameworks does this skill support?

The skill automatically detects your project's stack via package.json, supporting React, Vue, Svelte, and Angular, with React + TypeScript + Tailwind CSS as the default output.

Can it extract design systems from existing code?

Yes, the skill analyzes prototype styles to extract design tokens for colors, typography, and spacing into a structured JSON format for consistent reuse.

Does it work with Figma exports?

It is specifically designed to recognize Figma-specific class names and absolute positioning, converting them into flexible, responsive component layouts.

How does it handle different styling approaches?

It identifies existing styling patterns such as Tailwind CSS, Styled Components, Emotion, or traditional SCSS files and adapts its component generation to match your project's architecture.

Is the generated code accessible?

Yes, every component generated includes semantic HTML elements, keyboard navigation support, and appropriate ARIA attributes by default.

Prototype to Production

Name: Prototype to Production
Author: ArieGoldkin

byArieGoldkin

•

디자인 도구

Converts design prototypes and mockups into production-ready, accessible React components with automated design token extraction.

소개

The Prototype to Production skill bridges the gap between design and engineering by transforming static HTML, CSS, and Figma exports into high-quality, typed components. It automatically analyzes UI patterns using atomic design principles, extracts design tokens into configurable JSON, and generates clean code that matches your existing project's tech stack. Whether you are using AI-generated 'super-design' outputs or standard design exports, this skill ensures consistency, accessibility, and architectural best practices in your frontend development workflow.

주요 기능

Atomic design decomposition into reusable atoms, molecules, and organisms
6 GitHub stars
Intelligent design token extraction for consistent color, spacing, and typography
Built-in accessibility (ARIA) and keyboard navigation support for generated components
Automated conversion of HTML/CSS and Figma exports into production code
Tech stack detection supporting React, TypeScript, and various styling frameworks

사용 사례

Extracting design systems from existing legacy HTML prototypes
Refactoring rapid design mockups into maintainable production components
Migrating Figma design handoffs to TypeScript-based React component libraries

소개

주요 기능

Atomic design decomposition into reusable atoms, molecules, and organisms
6 GitHub stars
Intelligent design token extraction for consistent color, spacing, and typography
Built-in accessibility (ARIA) and keyboard navigation support for generated components
Automated conversion of HTML/CSS and Figma exports into production code
Tech stack detection supporting React, TypeScript, and various styling frameworks

사용 사례

Extracting design systems from existing legacy HTML prototypes
Refactoring rapid design mockups into maintainable production components
Migrating Figma design handoffs to TypeScript-based React component libraries