techtide-v0-ui-prompt-hardener

v0 UI Prompt Hardener

A UI generator fills every gap in your prompt with a guess. Harden the prompt until the only decisions left are ones you would accept either way.

Workflow

1. Translate intent into structure. Break the vague ask into screens, components, states, interactions, and responsive requirements. "A dashboard" becomes named panels with named behaviors.
2. Name the data shape and all five states. For every data-bearing component, specify the shape plus loading, empty, error, disabled, and success states before generation. Unstated states do not get generated.
3. Specify the constraint floor. Accessibility (labels, semantics, focus order), contrast minimums, keyboard operation, and text-fitting rules (truncation, wrapping, long-string behavior).
4. Ask for implementation-ready output plus an assumptions note. Require v0 to list its assumptions and anything it could not support. The assumptions list is where the bugs hide.
5. Review the output. Check for overbroad dependencies, hardcoded secrets or URLs, layouts that break at 375px, and missing states. Write a follow-up patch prompt for gaps instead of hand-editing generated code you will regenerate later. Read references/adapter-map.md when companion outputs for other harnesses are requested.

Output contract

Return a concise brief with:

• The hardened v0 prompt.
• UI state checklist (per component, five states).
• Handoff review findings.
• Follow-up patch prompt.
• Verification performed and still required.
• Security and privacy notes.

Guardrails

• Never put credentials, tokens, real customer data, or private URLs into generation prompts.
• Placeholders for people, accounts, and datasets unless the user supplies public-safe values.
• Generated code is a candidate, not a deliverable: it passes review before any handoff.

Good vs bad

Good prompt fragment: "OrdersTable: array of { id, customer, total_cents, status: 'paid' | 'pending' | 'failed' }. States: skeleton rows while loading; empty state with 'No orders yet' and a CTA; inline error banner with retry; rows disabled while a bulk action runs. Truncate customer names over 24 chars with a title attribute."

Bad prompt fragment: "A nice orders table with good UX." Every state, shape, and edge case just became the generator's guess, and the empty state will not exist.

Verification

Do this: against the generated output, walk the UI state checklist and force each state (empty array, failing fetch, slow fetch, long strings) at a 375px viewport. Expect every listed state to render as specified with no layout break. If a state is missing or broken, do not patch by hand: add it to the follow-up patch prompt and regenerate.

Completion checklist

• [ ] Intent decomposed into screens, components, states, interactions, responsive rules
• [ ] Data shape and five states specified per data-bearing component
• [ ] Accessibility, contrast, keyboard, and text-fitting constraints in the prompt
• [ ] Assumptions and unsupported-pieces note requested and reviewed
• [ ] Output reviewed for dependencies, secrets, 375px breakage, missing states
• [ ] Follow-up patch prompt written for every gap found

Any box unchecked: not done. Fix or say so.

Footguns

• Prompting only the happy path: generators produce beautiful success states and nothing else. The empty and error states you did not mention are the ones users hit first.
• Accepting the dependency list silently: generated UIs pull in chart, animation, and date libraries for one component. Strike unneeded dependencies in the patch prompt.
• Hand-editing generated code, then regenerating: the regeneration erases your edits. All fixes flow through the patch prompt until you fork the code for good.
• Testing only at desktop width: v0 output defaults to generous widths. The 375px pass is where tables and toolbars break.