Task prompt · Websites & Apps
Turn a Figma or design screenshot into React components
by Agent Yard TeamConverts a design into typed, reusable React components.
You'll attach
Needs screenshot
Works with
Cursor
Claude Code
Codex
Claude
ChatGPT
GeminiUse cases
- Converts a design into typed, reusable React components.
- When you already have a screenshot and want the AI to work from it instead of starting from scratch.
- Reuse it as often as you like: fill in the blanks (tailwind or css modules) with new details and copy again.
- With Cursor, Claude Code, Codex and more, the AIs that support what this prompt needs.
How to use it
- Open Cursor or Claude Code in your terminal (or another AI listed here).
- Attach the screenshot (or paste it straight into the chat).
- Fill in the highlighted blank ([TAILWIND OR CSS MODULES]) below, or edit them after pasting.
- Copy the prompt, paste it into the chat and send.
Fill in the blanks (optional)
Prompt
Convert the attached design screenshot into React components using [TAILWIND OR CSS MODULES] and TypeScript. 1. Break the design into a component tree and show it first. 2. Write each component with typed props, sensible defaults and no hardcoded copy (pass content as props). 3. Make it responsive and accessible: semantic elements, labels, keyboard focus. 4. Create one page component that assembles everything with sample data. Keep components small. Point out any spacing or color values you estimated.
One email a week
The Weekly is presented byyour brandSponsored · openThe best new prompts and personas, nothing else.