Quenwick

A mock-up of the screen, drawn from its layout, palette and typefaces. A build follows the full prompt below.

Start from this screenRead the build prompt

Typefaces

The catalog's own faces. A screen composed into a template is drawn in that template's typefaces.

• Source Sans 3Headings: Source Sans 3 500, 28px/1.25, -0.01em
• Source Sans 3Body: Source Sans 3 400 16px/1.5

Patterns

• single centred question card
• free-text intent capture
• disabled-until-valid primary button
• ambient gradient backdrop at page bottom
• skip and back escape hatches in corners
• example-driven placeholder

States it is designed for

• pristine (button disabled, placeholder visible)
• typing (counter visible after 400 of 600 characters)
• too long (counter turns to error text, submit blocked)
• submitting (spinner, textarea read-only)
• generation failed (inline error with Retry, text preserved)
• offline (button disabled with note)
• returning user (previous answer pre-filled)

Who it is for

• developers evaluating an agent platform
• technical founders
• solutions engineers

Layout

1. corner row: 'Go back' text link with arrow top-left, 'Skip' text link top-right
2. white upper half of the viewport
3. centred card (~440px wide) at vertical centre: heading, one-line helper, multi-line textarea, full-width primary button
4. lower 45% of the viewport: soft blue-violet rippled gradient that rises behind the card
5. on mobile the card becomes full width with 16px gutters and the gradient shrinks to the bottom 30%

Palette

Calm, optimistic, frictionless. The page asks one question and gets out of the way.

• page background#ffffff
• card surface#ffffff
• textarea fill#f4f4f5
• heading / body text#111114
• helper text#4b4b55
• placeholder text#6a6a74
• primary button (enabled)#2463d6
• primary button (disabled)#a9c6f7
• backdrop violet#828fda
• backdrop blue#86a9f1
• focus ring#2463d6

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type scale

Display

Source Sans 3 500, 28px/1.25, -0.01em

Body

Source Sans 3 400 16px/1.5

Corner links 14px 400; button label 16px 500; placeholder 16px so it never looks smaller than the typed text.

Spacing and imagery

Airy: card padding 24px, 16px between heading and helper, 24px before the field, 20px before the button; card radius 12px with a soft 0 8px 24px rgba(17,17,20,0.08) shadow and 1px #ececf0 border; field radius 8px, min-height 88px.

An abstract, water-like blue-to-violet texture fades up from the bottom edge; no photos, no icons except the small back arrow.

Components

• CornerNav (back link, skip link)
• QuestionCard
• IntentTextarea with example placeholder and character counter
• PrimaryButton with disabled and loading states
• GradientBackdrop (CSS/SVG noise, no image)
• InlineError

Interactions

• button enables once the answer has 10+ non-space characters
• Cmd/Ctrl+Enter submits
• on submit the button shows a spinner and 'Generating…' while the field locks
• success routes to the config review step with a 250ms fade
• Skip asks nothing and routes to a blank config
• backdrop drifts slowly (20s loop) and stops under prefers-reduced-motion

Data

• OnboardingAnswer{id, user_id, step (build_intent), text, created_at}
• AgentDraft{id, user_id, source_answer_id, config_prompt, status (draft|accepted), created_at}

Guardrails

Experience

• Ask exactly one question on this screen; no secondary fields.
• Use a concrete example in the placeholder so users know the expected granularity.
• Never lose typed text on error, back navigation or refresh (persist a draft).
• Keep Skip visible and guilt-free; skipping still produces a usable blank config.
• Place the card so it never overlaps the busiest part of the gradient; text always sits on white.

Accessibility

• The heading is the textarea's label via aria-labelledby; the helper line is aria-describedby.
• Disabled button keeps aria-disabled with an explanation in the helper for screen readers ('Write at least 10 characters').
• Errors are announced with role=alert and move no focus.
• The animated backdrop is aria-hidden and respects prefers-reduced-motion.
• Corner links are real links with 44px hit targets.

Security

• Validate length (10–600) and strip control characters with zod on client and server.
• Call the model provider only from an Edge Function; never ship API keys to the browser.
• Rate-limit generation per user (e.g. 10 per hour) and log abuse.
• RLS: answers and drafts readable and writable only by their owner.

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste an entry's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack entries)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build **Quenwick**, one discovery step in the onboarding of an AI agent builder. A new user describes, in their own words, what they want to build; the app turns that into a draft configuration prompt shown on the next step. The screen must be fast, friendly and impossible to get stuck on.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Textarea, Button) and lucide-react. react-hook-form + zod for the single field, Motion for the step fade. Supabase Auth, Postgres for answers and drafts, and an Edge Function that calls a hosted language-model API to produce the config prompt.

### Pages & layout
1. **/onboarding/intent**: corner links, centred card, gradient backdrop.
2. **/onboarding/review**: minimal next step showing the generated prompt in an editable block with Accept and Regenerate (enough to prove the flow).
3. Mobile: card spans full width, 16px gutters; corner links stay pinned at the top.

### Design system
- Colors: `--bg: #ffffff` (page background), `--card: #ffffff` (card surface), `--field: #f4f4f5` (textarea fill), `--fg: #111114` (heading / body text), `--muted: #4b4b55` (helper text), `--placeholder: #6a6a74` (placeholder text), `--primary: #2463d6` (primary button (enabled)), `--primary-disabled: #a9c6f7` (primary button (disabled)), `--wash-violet: #828fda` (backdrop violet), `--wash-blue: #86a9f1` (backdrop blue), `--ring: #2463d6` (focus ring).
- Fonts: Source Sans 3 500, 28px/1.25, -0.01em for headings; Source Sans 3 400 16px/1.5 for body. Corner links 14px 400; button label 16px 500; placeholder 16px so it never looks smaller than the typed text.
- Spacing: Airy: card padding 24px, 16px between heading and helper, 24px before the field, 20px before the button; card radius 12px with a soft 0 8px 24px rgba(17,17,20,0.08) shadow and 1px #ececf0 border; field radius 8px, min-height 88px.
- Radius: 12px card, 8px field and button.
- Shadow: one soft card shadow; nothing else is elevated.
- Motion: 250ms ease-out fade/translate between steps; backdrop hue drift 20s, off under reduced motion.
- Backdrop: layered radial gradients of the two wash colours plus an SVG turbulence filter at low opacity; white fade at the top edge.

### Components & interactions
CornerNav, QuestionCard, IntentTextarea (auto-grow to 6 lines, counter), PrimaryButton (disabled / loading), GradientBackdrop, InlineError with Retry.

Interactions: button enables once the answer has 10+ non-space characters; Cmd/Ctrl+Enter submits; on submit the button shows a spinner and 'Generating…' while the field locks; success routes to the config review step with a 250ms fade; Skip asks nothing and routes to a blank config; backdrop drifts slowly (20s loop) and stops under prefers-reduced-motion.

States to build: pristine (button disabled, placeholder visible); typing (counter visible after 400 of 600 characters); too long (counter turns to error text, submit blocked); submitting (spinner, textarea read-only); generation failed (inline error with Retry, text preserved); offline (button disabled with note); returning user (previous answer pre-filled).

### Data & state
Persist a draft of the text in localStorage on every keystroke (debounced, try/catch). On submit insert `onboarding_answers`, invoke the Edge Function, insert the `agent_drafts` row and navigate. Mock the Edge Function in development with a 1.2s delay and a canned response.

Model: `OnboardingAnswer{id, user_id, step (build_intent), text, created_at}`; `AgentDraft{id, user_id, source_answer_id, config_prompt, status (draft|accepted), created_at}`.

### Accessibility
The heading is the textarea's label via aria-labelledby; the helper line is aria-describedby. Disabled button keeps aria-disabled with an explanation in the helper for screen readers ('Write at least 10 characters'). Errors are announced with role=alert and move no focus. The animated backdrop is aria-hidden and respects prefers-reduced-motion. Corner links are real links with 44px hit targets. Body text is 16px; nothing is below 14px.
Verified contrast: heading text: #111114 on #ffffff = 18.85:1; helper text: #4b4b55 on #ffffff = 8.62:1; placeholder in field: #6a6a74 on #f4f4f5 = 4.87:1; button label on primary: #ffffff on #2463d6 = 5.48:1; focus ring on white: #2463d6 on #ffffff = 5.48:1; field boundary (fill vs card): #6a6a74 on #ffffff = 5.35:1.

### Security
Validate length (10–600) and strip control characters with zod on client and server. Call the model provider only from an Edge Function; never ship API keys to the browser. Rate-limit generation per user (e.g. 10 per hour) and log abuse. RLS: answers and drafts readable and writable only by their owner. RLS per table: `onboarding_answers` and `agent_drafts` both allow select/insert/update only where `user_id = auth.uid()`; no deletes from the client. The Edge Function re-validates input and uses the service key server-side only.

### Performance & SEO
Ship the step as its own tiny chunk; the backdrop is CSS/SVG, no image download. Preload the review route on first keystroke. Onboarding routes are noindex.

### Guardrails
- Ask exactly one question on this screen; no secondary fields.
- Use a concrete example in the placeholder so users know the expected granularity.
- Never lose typed text on error, back navigation or refresh (persist a draft).
- Keep Skip visible and guilt-free; skipping still produces a usable blank config.
- Place the card so it never overlaps the busiest part of the gradient; text always sits on white.
- Write all copy fresh; use invented people, companies and numbers only. No real brands, logos, wordmarks or third-party product names anywhere in the UI or seed data.
- Do not trace or copy any existing product's layout assets, icons or illustrations; draw generic ones.
- Acceptance criteria:
  - [ ] Button is disabled until 10 characters and enabled after
  - [ ] Cmd/Ctrl+Enter submits
  - [ ] Failure shows an inline error with Retry and keeps the text
  - [ ] Skip leads to a blank draft
  - [ ] Reduced-motion users see a static backdrop

Open the builderAll templatesThis palette on its own