UIPrompt: Design the component. Get the exact prompt.<br>For people who ship UI with Claude Code · Cursor · v0

h1 · Bricolage Grotesque 700letter-spacing: -0.035emfont-size: clamp(44px, 7vw, 76px)Design it once.<br>AI builds it exactly.

UIPrompt is a visual component editor that writes spec-grade prompts with exact values, state diffs, and accessibility rules. The UI your AI builds is the UI you designed.<br>Open the editor, no sign-upStart 7-day trial<br>Full-featured trial · No credit card

live: this is the real engineButton<br>Radius8px

Color

Padding16px

Motion150ms ease-out

prompt: updates as you design<br>You are implementing a UI component in this codebase. Implement the component below as a React component styled with Tailwind CSS. Follow this spec exactly — every value is intentional. Do not substitute your own design taste, do not round values, and do not add visual features the spec does not mention. Where Tailwind has no utility for an exact value, use arbitrary values (e.g. `rounded-[8px]`). Match the project's existing component conventions for file placement and exports.

## Component: Button

### Default state<br>- Background: #18181B<br>- Text color: #FAFAFA<br>- Corner radius: 8px<br>- Padding: 10px vertical, 16px horizontal<br>- Border: none<br>- Font size: 14px (line-height: 1.25)<br>- Font weight: 500<br>- Shadow: none<br>- Transition: background-color 150ms ease-out

## Implementation rules<br>- **Visible focus ring**: Style keyboard focus with `:focus-visible` (never bare `:focus`): a 2px outline offset 2px from the element, using a high-contrast color. Never remove focus outlines without an equally visible replacement.<br>- **Respect reduced motion**: Wrap all transitions/animations in `@media (prefers-reduced-motion: no-preference)` or disable them under `prefers-reduced-motion: reduce`. Motion must be an enhancement, never a requirement.<br>- **Transition only listed properties**: Transition exactly the properties listed in the spec — never `transition: all`. Keep durations as specified; do not add extra animated properties.<br>- **Minimum hit target**: Ensure the interactive hit target is at least 44×44px. If the visual element is smaller, extend the clickable area with padding or a pseudo-element without changing the visual size.<br>- **Disabled state**: For the disabled state: set `cursor: not-allowed` on a wrapper (disabled elements don't fire pointer events), reduce opacity to ~50% unless the spec overrides colors explicitly, and suppress all hover/active effects.<br>- **Font smoothing on dark fills**: When rendering light text on a dark background, apply `-webkit-font-smoothing: antialiased` and `-moz-osx-font-smoothing: grayscale` to avoid overly bold-looking text.<br>- **Text contrast**: Text must meet WCAG AA contrast (4.5:1 against its background; 3:1 for text ≥18.66px bold). If a specified color pair falls short, keep the spec colors but flag the contrast issue in a code comment.<br>- **No hover layout shift**: Hover/focus styles must not change the element's layout size. If a border appears on interaction, reserve its space with a transparent border in the default state.

drag anything ↑ and watch the prompt rewrite itself

Adjectives gamble. Specs land.<br>✕What most people prompt<br>"make me a nice modern button, something clean that pops"<br>Eight visual decisions left to chance. The result looks fine, in someone else's app. Then the correction loop starts.

✓What UIPrompt writes for you<br>- Corner radius: 8px<br>- Transition: background-color 150ms ease-out<br>- Hover state: background #1D4ED8<br>Every value pinned. States as diffs. First try lands.

Nine components. Every state. Real CSS.<br>These previews are rendered by the same engine that writes your prompts: hover, focus, disabled and all. More types ship with every release.

Button

Buttonradius 8px · 150ms ease-out<br>Badge

Badgeradius 12px · 500 weight<br>UncheckedChecked

Checkbox18×18 · custom checkmark

Inputfocus ring · 150ms<br>OffOn

Switchthumb travel 18px · 160ms<br>Card title<br>Supporting copy that shows how content sits inside your card's padding.

Cardshadow 0 2 8 · hover lift<br>Product designEngineering

Selectnative + custom chevron

Textareamin 3 rows · resize-y<br>Copied to clipboardHover target

Tooltiparrow 8px · 120ms enter

Blind-tested: 11 of 11 CSS properties, identical.<br>We gave an AI only the generated prompt. It never saw the design. The implementation matched every measured property: colors, radius, padding, shadow, all three transition values. Read the full experiment.

Rules AI always forgets, included when relevant<br>:focus-visible ring<br>prefers-reduced-motion<br>44px hit target<br>WCAG AA contrast<br>no transition: all<br>no hover layout shift

One plan. Everything in it.<br>$8 /month billed yearly · or $12 monthly<br>✓ Unlimited components & tokens<br>✓ Full prompt export, 3 target tools<br>✓ Per-state overrides & motion control<br>✓ All future component types<br>✓ 14-day money-back guarantee<br>Start your free trial

Frequently asked<br>Why prompts instead of exporting code?Code exports go stale the moment they meet...