LogoClawIndex
CasesSkillsAbout
LogoClawIndex

prototype-to-production - Convert Design Prototypes to Production Components

Convert HTML, CSS, and Figma prototypes into typed React components with design tokens

Tags

Updated: 2026-05-11
frontenddesigncomponentsprototypingReactTypeScriptUI conversion

Capabilities

Analyze HTML prototypesDetect project tech stackExtract design tokensGenerate TypeScript components

Typical Inputs

HTML prototype filesCSS theme filesFigma exports

Typical Outputs

TypeScript component filesDesign tokens JSONReact component code

What this skill does

  • Analyze HTML prototypes
  • Detect project tech stack
  • Extract design tokens
  • Generate TypeScript components
  • Map HTML patterns to React
  • Convert styles to Tailwind
  • Create component props

Inputs

  • HTML prototype files
  • CSS theme files
  • Figma exports
  • package.json
  • super-design iteration files

Outputs

  • TypeScript component files
  • Design tokens JSON
  • React component code
  • Component documentation
  • Integration guidance

Requirements

  • React framework support
  • TypeScript compatibility

Source

  • Spec: SKILL.md

ClawIndex

OpenClaw Skills & Use Case Index

ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

Index

Skills·
Cases

Meta

About·
Disclaimer·
Email·
GitHub
© 2026 ClawIndex All Rights Reserved.