Build a React component from a description

Describe the component, its data and how it should behave, and this prompt writes one self-contained React component with TypeScript, accessible markup and a mobile layout, plus a usage example.

text-code-react-component-from-spec — claude — 79 words

Act as a senior frontend developer using [STACK, e.g. React with TypeScript and Tailwind].

Component: [WHAT IT IS, e.g. a pricing table with monthly and yearly toggle]
Props and data: [DESCRIBE]
Behaviour: [e.g. yearly shows 2 months free, highlights the middle plan]
Style: [e.g. clean, rounded cards, works on mobile]

Write one self-contained component with typed props, accessible markup, keyboard support and a mobile layout. Keep state minimal. Add a small usage example and list any assumption you made.

Edit in the builder Copy & open Claude ↗Copy & open ChatGPT ↗Copy & open Gemini ↗

Paste an existing component from your project and say "match this style" for code that fits in.

Get a better result

What you will get

One self-contained React component with typed props, accessible markup, keyboard support and a mobile layout, minimal state, a short usage example and a list of the assumptions it made.

Why it works

The prompt splits the spec into props, behaviour and style, which are the three things a developer would ask you about before writing code. Naming your stack gets TypeScript and Tailwind code rather than plain JavaScript and CSS. Asking for listed assumptions is the safety net: it shows where the model filled a gap, so you can catch it early.

Common mistake

The component fetches its own data.

Fix: Say the data comes in through props, so the component stays easy to test and to reuse on another page.

Also watch for

The toggle is a div with a click handler. Ask for a real button or radio group with a visible focus state, so it works with the keyboard and screen readers.
The styling clashes with your project. Paste one existing component and ask it to match it, as the tip says.

Try a variation: add loading and empty states

Ask for how the component looks while data loads, when the list is empty and when something fails.

Still not right? Reply with this

Some of your assumptions are wrong: [CORRECTIONS]. Update the component to match and list anything else you had to change.