skills.rest
kftof
kftofCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/kftof/ui-kit --skill ui-kit-to-code
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
imsaifimsaif
3

design-audit

Scan Tailwind UI components for hardcoded colors and design token violations.

Community
Advanced
hkcm91hkcm91

theming-with-tokens

Manage StickerNest UI themes with CSS custom properties and token-based architecture.

Community
Intermediate
toddmoytoddmoy
1

figma implementation

Convert Figma designs into React components with CSS flex/grid and variables.

Community
Advanced
elsolalelsolal
1

figma-to-code

Convert Figma design selections into React, Vue, or HTML code.

Community
Advanced