Turn a screenshot into a React component
For developers and designers who have a screenshot, mockup, or Figma export and want working code: turn it into a component that fits your project instead of a pile of hard-coded hex values. Reads your stack (React, Next.js, Vue, Svelte, or Astro; Tailwind, CSS modules, shadcn/ui), maps the design to your existing tokens and components, writes an accessible, responsive component with props and sample data, then renders it next to the screenshot and fixes the differences.
- Activity
- New: be the first to try it
Will this work for me?
- Effort
- Needs about 10 minutes of setupOur guess from what the kit says it needs.
- Works in
- Claude Code, claude.ai and the desktop app
- You need
Figma account: setup steps
- What it is
- This kit works with your own Figma account.
- Where to get it
- Sign in to Figma, or make a free account if it offers one. Go to Figma
Playwright account: setup steps
How this works
- It is a skill: written instructions Claude reads when your request matches what the skill is for. You do not call it by name; just ask for the task.
- While it works, it reads and changes files in the places it lists, nowhere else.
- It runs these commands on your computer: node scripts/detect-stack.mjs.
- Nothing runs until you choose to use it, and you can remove it any time.
What it can access
What this kit says it will touch, the same list you see before you add it. These are its Permissions: What a kit is allowed to touch on your computer or accounts, such as reading a folder or using the internet. You see them before you add it.. In Claude Code they become rules, so Claude stops anything not on the list.
Command
Runs the command: node scripts/detect-stack.mjs (with any arguments, without asking)
Reads
Reads files in ./**