Willowkit

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.

• InterHeadings: Inter 600, 26px modal title, -0.02em
• InterBody: Inter 400 16px / 1.5; row titles 15px 600, row descriptions 14px

Patterns

• split modal: list left, photo right
• floating glass steps card over photo
• search field above option list
• icon-tile list rows with one-line descriptions
• skip as primary, back as secondary
• dimmed app shell behind modal
• progress dashes at top of modal

States it is designed for

• Loading templates: four row skeletons
• No search results: message and 'Browse all templates' link
• Creating app: selected row shows spinner, other rows disabled
• Create failed: inline error on the row with Retry
• Photo fails to load: neutral gradient panel keeps the steps card
• Long descriptions truncate to one line with full text in title/tooltip

Who it is for

• operations managers building internal tools
• small-business owners
• non-technical makers

Layout

1. Background: the app shell (left sidebar with workspace name, Home, Projects, App store, Recent; bottom 'Grow your workspace' upsell card with Upgrade) dimmed by a dark scrim
2. Modal (max 880px, radius 20px, white border frame): left column with step dashes, H2, one-line description, search field, four template rows, helper line, Back + Skip buttons
3. Right column: full-height photo of a workspace with a frosted card listing three numbered steps
4. Below 820px the photo panel is hidden and the modal becomes a full-screen sheet; buttons stick to the bottom

Palette

Warm, encouraging, grown-up. A calm white panel beside a sunlit office photo; nothing shouts.

• scrim#2b2b2b
• surface#ffffff
• text#161616
• muted#5f5f63
• field-bg#f2f2f3
• input-border#8a8a90
• primary#1a1a1a
• on-primary#ffffff
• secondary-bg#ececee
• tile-violet#5b4fd6
• tile-teal#1d8a7a
• tile-blue#2f6fdb

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

Inter 600, 26px modal title, -0.02em

Body

Inter 400 16px / 1.5; row titles 15px 600, row descriptions 14px

Step numbers in 12px circular chips. Similar to the observed grotesk. No uppercase.

Spacing and imagery

Roomy modal; 4px base; modal padding 24px; template rows 64px with 12px gap; radius 20px modal, 12px rows and photo, 10px buttons (fully rounded pills for Back/Skip); modal shadow 0 24px 64px rgba(0,0,0,.35).

One lifestyle photo of a bright shared workspace with plants (sourced from a licensed stock library), right panel, covered by a frosted white card at 85% opacity with backdrop blur; template icons are rounded squares in solid brand tints with white glyphs.

Components

• ProgressDashes
• TemplateSearchField
• TemplateRow (icon tile, title, truncated description)
• StepsGlassCard
• BackButton
• SkipButton
• DimmedShell
• UpgradeCard in sidebar
• Toast

Interactions

• Typing filters the template list instantly; no results shows a link to browse the full store
• Hovering a row raises its border and tints it; Enter or click creates the app and moves to the next step
• Right panel card updates its three steps to preview what the hovered template includes
• Skip closes the modal and lands on Home with a dismissible tip; Escape equals Skip
• Modal enters with 200ms fade + 8px rise

Data

• Template{id, name, description, icon, color (violet|blue|teal|indigo), category}
• OnboardingState{user_id, step (template|data|customize|done), skipped boolean}
• App{id, workspace_id, template_id, name, created_at}

Guardrails

Experience

• Keep 'Skip' always available; onboarding must never trap the user
• Show at most four templates here and link to the full store
• Descriptions stay one line; the name carries the meaning
• The photo is decorative; all needed info lives in the left column and steps card
• Back returns to the previous step without losing choices

Accessibility

• Modal is a dialog with aria-labelledby title, focus trapped, Escape closes
• Template rows are buttons in a list with descriptive names
• Photo has empty alt (decorative); steps card text is real text
• Search field has a visible label or aria-label and announces result counts
• Focus ring 2px #1a1a1a with 2px white offset on rows and buttons

Security

• Creating an app from a template runs server-side, scoped to the user's workspace via RLS
• Validate template_id against the published template list
• Rate-limit app creation during onboarding
• Onboarding state rows readable/writable only by their user

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 **Willowkit**, the first-run 'Start from a template' modal of a no-code internal-tools builder. New users pick one of four starter apps (or skip), and a photo panel explains the three things that happen next.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Dialog), lucide-react, Motion for the modal entrance, TanStack Query, zod. Supabase Auth + Postgres for templates, onboarding state and created apps.

### Pages & layout
1. **App shell behind** (dimmed by `--scrim` at 70%): sidebar with workspace name, Home, Projects, Template store, Recent section and a 'Grow your workspace' upsell card; top-right Invite button.
2. **Modal** (880 x 400 min, radius 20px): left column with four progress dashes (first filled), H2 'Start from a template', description, search field, four template rows (icon tile, name, one-line description), helper line 'Undecided? You can pick one later from the store.', Back (grey pill) and Skip (black pill, wider).
3. **Right column**: photo panel (radius 12px) with a frosted card: title, subline, three numbered steps.
4. Under 820px: full-screen sheet without the photo; action bar pinned to bottom.

### Design system
- Colors: `--scrim: #2b2b2b`, `--surface: #ffffff`, `--text: #161616`, `--muted: #5f5f63`, `--field-bg: #f2f2f3`, `--input-border: #8a8a90`, `--primary: #1a1a1a`, `--on-primary: #ffffff`, `--secondary-bg: #ececee`, `--tile-violet: #5b4fd6`, `--tile-teal: #1d8a7a`, `--tile-blue: #2f6fdb`.
- Fonts: Inter 400/600; body 16px/1.5; title 26px -0.02em; rows 15px/14px.
- Spacing: 4px scale; modal padding 24px; row gap 12px.
- Radius: 20px modal, 12px rows/photo, 999px buttons, 10px icon tiles.
- Shadows: modal 0 24px 64px rgba(0,0,0,.35); rows none until hover (0 2px 6px rgba(0,0,0,.06)).
- Glass card: white at 85% with 12px backdrop blur; text always on the solid-enough card, checked against pure white.
- Motion: 200ms fade/rise; list filter crossfade 120ms; honour reduced motion.

### Components & interactions
Dialog (focus trap, Escape = skip), ProgressDashes (aria-label 'Step 1 of 4'), TemplateSearchField (live result count), TemplateRow (hover lift, loading spinner, disabled siblings while creating), StepsGlassCard (updates on hover/focus), Back/Skip, Toasts. Sidebar UpgradeCard stays inert while the modal is open.

### Data & state
Tables `templates(id, name, description, icon, color, category, is_published)`, `onboarding_state(user_id, step, skipped)`, `apps(id, workspace_id, template_id, name)`. Creating an app calls an RPC that copies template tables into the workspace. Seed four templates: project tracker, lightweight CRM, stock tracker, field jobs.

### Accessibility
Dialog semantics with labelled title; rows as buttons; decorative photo alt=''; announce search result counts; visible focus rings; steps list is an ordered list. Do not rely on icon tile colour to distinguish templates.
Verified contrast: body text: #161616 on #ffffff = 18.1:1; muted description: #5f5f63 on #ffffff = 6.36:1; primary button label: #ffffff on #1a1a1a = 17.4:1; secondary button label: #161616 on #ececee = 15.34:1; search placeholder: #5f5f63 on #f2f2f3 = 5.68:1; icon tile violet: #5b4fd6 on #ffffff = 5.94:1; icon tile teal: #1d8a7a on #ffffff = 4.23:1; input border: #8a8a90 on #ffffff = 3.43:1; steps card text over photo worst case: #161616 on #ffffff = 18.1:1.

### Security
RLS: `onboarding_state` owner-only; `apps` insert only into workspaces the user belongs to; `templates` read-only public where is_published. Validate template_id server-side. Rate-limit creation RPC.

### Performance & SEO
Preload the photo at the right size (WebP/AVIF, ~1200px wide) and lazy-load it only when the modal opens. Keep the modal bundle small; app routes noindex.

### Guardrails
- Use a licensed stock photo or a neutral gradient; no real people's names or brands.
- Never hide Skip.
- Acceptance criteria: (1) search filters and announces counts; (2) choosing a template creates an app and advances; (3) skip lands on Home with a tip; (4) photo failure keeps layout; (5) whole modal usable by keyboard.

Open the builderAll templatesThis palette on its own