Wyndhollow

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.

• NewsreaderHeadings: Newsreader 400, 44px headline, -0.01em; similar to the observed transitional serif
• InterBody: Inter 400 18px / 1.5 subline; 16px elsewhere

Patterns

• centred serif headline over short subline
• framed product preview on textured warm panel
• single dark connect button with provider icon
• preview badge beside wordmark
• empty page chrome

States it is designed for

• Default: headline, preview, one button
• Connecting: button busy, preview dims slightly
• OAuth cancelled: inline note 'Connection cancelled. You can try again.'
• OAuth error: inline error with Retry and help link
• Already connected: page skipped, redirect to composer
• Popup blocked: fallback full-page redirect

Who it is for

• software engineers
• tech leads trying agentic coding
• indie developers

Layout

1. Top-left wordmark with a small 'preview' tag; nothing else in the chrome
2. Centred hero: large serif headline (two lines max) and a sans subline
3. Preview frame (620px): warm beige panel with a faint diagonal texture, inner white app mock showing wordmark, repository picker, environment picker, prompt box with an accent send button, and a sessions list with filter
4. Primary dark button with a code-host icon
5. Mobile: headline 32px, preview scales to full width with 16px gutters, button full width

Palette

Warm, literary, confident. Paper-like off-white, a serif voice and one terracotta accent make an engineering tool feel considered.

• canvas#faf9f5
• preview-panel#e9e3d6
• surface#ffffff
• text#1c1b18
• muted#5f5c55
• border#e2ddd2
• primary#1c1b18
• on-primary#ffffff
• accent#c2552f
• input-border#8d887e
• focus#c2552f

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

Newsreader 400, 44px headline, -0.01em; similar to the observed transitional serif

Body

Inter 400 18px / 1.5 subline; 16px elsewhere

Preview tag in JetBrains Mono 12px on a light chip. Headline weight stays 400 at 44px (not light).

Spacing and imagery

Very airy; 8px base; content max 640px; 48px between headline and preview, 32px to button; radius 10px preview panel, 8px inner mock and button; one soft shadow on the inner mock 0 8px 24px rgba(60,50,30,.10).

No photos. The product preview is a static, simplified mock (not a screenshot) drawn with real components; subtle diagonal light streaks on the beige panel.

Components

• WordmarkWithTag
• HeroHeadline
• Subline
• ProductPreview (RepoPicker, EnvPicker, PromptBox, SessionsList)
• ConnectButton
• ConsentNote

Interactions

• Connect button starts an OAuth flow with the code host; shows spinner and 'Waiting for authorisation' while the popup is open
• Preview is non-interactive (aria-hidden, inert) but its prompt caret blinks once then stops
• Hover on button lightens background 6%; focus shows terracotta ring
• On return, success routes to repository selection; cancel returns here with a neutral note

Data

• User{id, email, created_at}
• CodeHostConnection{user_id, provider_account_id, scopes[], installed_at, status (active|revoked)}
• Repository{id, connection_id, full_name, default_branch}
• Session{id, user_id, repo_id, title, status (active|done|failed), updated_at}

Guardrails

Experience

• One primary action only; nothing else competes on this screen
• Headline states the benefit, subline states where it works
• Preview must look like the real product but never be clickable
• Tell users which permissions are requested before they click (small note under button)
• Skip this screen entirely for already-connected users

Accessibility

• Preview is aria-hidden and inert so screen readers skip it; a short text description precedes it
• Button has an accessible name including the provider type ('Connect code-hosting account')
• Busy state uses aria-busy and a live status message
• Serif headline at 44px/1.15; body 18px/1.5
• Focus ring 2px #c2552f with 2px offset on the dark button

Security

• OAuth with state parameter and PKCE; verify state on callback
• Request least-privilege repository scopes; list them before connecting
• Store provider tokens encrypted server-side only; never in the browser
• RLS: code_host_connections, repositories and sessions owner-only

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 **Wyndhollow**, the onboarding screen of a cloud-hosted coding agent. The page explains the product in a sentence, previews the task composer, and asks the user to connect a code-hosting account so tasks can run against their repositories.

### Stack
Next.js (App Router) + TypeScript, Tailwind CSS, shadcn/ui (Radix), lucide-react, TanStack Query, zod. Supabase Auth for the user session; a server route handles the code-host OAuth callback and stores encrypted tokens.

### Pages & layout
1. **Chrome**: wordmark top-left with a small monospace 'preview' tag; no nav.
2. **Hero**: centred serif headline (e.g. 'Ship code from anywhere'), 18px subline about running tasks in the cloud and continuing in browser, terminal or phone.
3. **Preview frame**: beige textured panel containing a white mock with wordmark, repository picker, environment picker, prompt box with terracotta send button, and a sessions list (two invented task titles) with an 'Active' filter.
4. **Action**: dark 'Connect code host' button with a generic branch icon; permissions note beneath.
5. **After connect**: repository picker screen (out of scope beyond a stub).
6. Mobile: everything stacks; preview scales down; button full width.

### Design system
- Colors: `--canvas: #faf9f5`, `--preview-panel: #e9e3d6`, `--surface: #ffffff`, `--text: #1c1b18`, `--muted: #5f5c55`, `--border: #e2ddd2`, `--primary: #1c1b18`, `--on-primary: #ffffff`, `--accent: #c2552f`, `--input-border: #8d887e`, `--focus: #c2552f`.
- Fonts: Newsreader 400 44px headline (32px mobile); Inter 400/500 for UI 16-18px/1.5; JetBrains Mono 12px for the tag.
- Spacing: 8px base; 48px hero-to-preview; 32px preview-to-button.
- Radius: 10px panel, 8px mock and button, 6px pickers.
- Shadows: mock 0 8px 24px rgba(60,50,30,.10).
- Motion: fade-in 300ms; caret blinks twice then stops; reduced motion disables both.

### Components & interactions
WordmarkWithTag, HeroHeadline, ProductPreview (built from real, static components; inert), ConnectButton (idle, busy, error), PermissionsNote, InlineStatus (cancelled/error), popup-blocked fallback redirect.

### Data & state
Tables `code_host_connections(user_id, provider_account_id, scopes text[], token_ciphertext, status)`, `repositories(id, connection_id, full_name, default_branch)`, `sessions(id, user_id, repo_id, title, status, updated_at)`. Middleware redirects already-connected users past this page. Preview data is hard-coded invented repository and task names.

### Accessibility
Inert, aria-hidden preview preceded by a one-sentence text description; labelled connect button with aria-busy; status messages in a polite live region; generous type sizes; warm focus ring visible on the off-white canvas.
Verified contrast: body text: #1c1b18 on #faf9f5 = 16.35:1; muted subline: #5f5c55 on #faf9f5 = 6.33:1; button label: #ffffff on #1c1b18 = 17.22:1; accent send icon: #c2552f on #ffffff = 4.53:1; focus ring on canvas: #c2552f on #faf9f5 = 4.3:1; input border in mock: #8d887e on #ffffff = 3.53:1; mock text on white: #1c1b18 on #ffffff = 17.22:1.

### Security
OAuth with PKCE and state; encrypt tokens server-side; least-privilege scopes listed before connecting; RLS owner-only on all three tables; revoke flow available in settings; never log tokens.

### Performance & SEO
Server-render the page; preview is static HTML/CSS (no screenshot image). Preload the serif font subset. Marketing-visible route may be indexed with a plain title and description.

### Guardrails
- Invented repository and task names; generic code-host wording.
- One primary action only.
- Acceptance criteria: (1) connect completes and redirects; (2) cancel and error states show inline; (3) connected users skip the page; (4) preview is skipped by screen readers; (5) layout holds at 390px.

Open the builderAll templatesThis palette on its own