ui-kit-to-code

Convert hi-fi HTML UI kit screens into framework-native code.

Updated Apr 25, 2026

Search Tags:#react #frameworks #vue #flutter #design-to-code #code-generation #ui-kit

Ready to run

npx skills add https://github.com/kftof/ui-kit --skill ui-kit-to-code

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-kit-to-code
Source: https://github.com/kftof/ui-kit/tree/main/ui-kit-to-code
Command: npx skills add https://github.com/kftof/ui-kit --skill ui-kit-to-code

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Transform hi-fi HTML screens from UI kits into production-ready code for a target framework, enabling seamless design→dev handoff and simplifying migrations from mockups to real code.

Core Features & Use Cases

Multi-framework generation: outputs production-ready code for React, Vue, Flutter, SwiftUI, Jetpack Compose, and plain HTML/CSS.
Token and theme reuse: maps design tokens and CSS variables to the target framework theming system.
Asset and icon mapping: resolves icons via data-asset and reuses the shared asset catalog to ensure consistency.
Use cases: accelerate design-to-code handoffs, migrate UI mockups, and prototype across frameworks with minimal rework.

Quick Start

Chargez la flow HTML cible (flows/NN-<flow_id>/<page_id>.html) et lancez la génération pour obtenir le code prêt pour le framework souhaité.

Frequently Asked Questions about ui-kit-to-code

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

FAQPage Schema

How do I convert HTML UI kits to React or Vue code?▼

You can convert hi-fi HTML UI kits to React or Vue code by loading the target HTML flow and initiating generation to output production-ready framework code mapped from native UI elements.

Can I generate Flutter widgets from HTML mockups?▼

Yes, you can generate Flutter widgets from HTML mockups by transforming the hi-fi HTML screen into production-ready Flutter code, mapping UI elements and design tokens to framework-native widgets.

Does the design-to-code process support SwiftUI and Jetpack Compose?▼

The design-to-code process supports SwiftUI and Jetpack Compose by transforming hi-fi HTML screens from UI kits into production-ready code mapped to framework-native widgets and theming systems.

How do I map design tokens to a target framework during UI migration?▼

To map design tokens during UI migration, the transformation process maps CSS variables and tokens from the HTML flow to the specific theming system of your chosen target framework.

What assets do I need to generate production-ready code from a UI kit?▼

You need access to the target HTML flow, design tokens, a shared component catalog, and an icons library to accurately map UI elements and resolve assets into production-ready code.

What is the best way to handle icon mapping in framework code generation?▼

The best way to handle icon mapping in framework code generation is resolving icons via data-attributes and reusing a shared asset catalog to ensure visual consistency across the target framework.