Vindrel

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 700, 32px document H1 (-0.02em); H2 24px 600
• InterBody: Inter 400, 16px/1.6 in the document; UI 14px/1.5 for step cards; gutter labels 12px mono

Patterns

• three-column editor (nav / document / inspector)
• block editor with gutter block-type labels
• floating formatting toolbar
• segmented Brief / Final draft toggle
• right inspector with tabs
• workflow step checklist with progress bar
• save status pill in breadcrumb bar
• beta/alpha badges in nav

States it is designed for

• Workflow running (partial progress, one spinner)
• Workflow failed on a step with retry
• All steps done (100%)
• Autosave failed (pill turns amber with retry)
• Read-only for viewers (toolbar hidden)
• Final draft not yet created (empty state with CTA)
• Long URL lists wrap without horizontal scroll
• Offline: edits queued with notice

Who it is for

• Content marketers producing search- and AI-answer-oriented articles
• SEO strategists reviewing generated briefs
• Agency editors managing many client briefs

Layout

1. Left nav (220px): brand switcher, search with ⌘K, groups Analytics / Action / Reports with small Alpha/Beta badges; footer: support, what's new, user
2. Top bar: Back, document title, 'Saved' pill; right: info icon, status dropdown (Draft), Copy menu, Export menu
3. Document column: segmented control (Content brief / Final draft), dark 'Create final draft' button; white page card with gutter labels (h1, h2, p, ul) and block content
4. Floating bottom toolbar: undo/redo, bold, italic, strike, text, H1-H3, lists, code, quote, align
5. Inspector (360px): tabs (Visibility, History, Workflow active, Inputs); 'Workflow progress' with count and green progress bar; list of step cards each with a check icon; info note at bottom
6. Below 1280px inspector becomes a toggleable drawer; below 768px left nav collapses and gutter labels hide

Palette

focused, systematic, editorial. Writing and machine progress side by side without clutter.

• app background#fafafa
• page card#ffffff
• primary text#1b1d1f
• muted text#5f6368
• border#8d9196
• dark button#1b1d1f
• progress/success green#15803d
• saved pill fill#f1fcf5
• badge violet#6d28d9
• info note fill#eef4ff
• info text#1d4ed8
• focus ring#2563eb

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 700, 32px document H1 (-0.02em); H2 24px 600

Body

Inter 400, 16px/1.6 in the document; UI 14px/1.5 for step cards; gutter labels 12px mono

Neutral grotesk similar to observed; JetBrains Mono for gutter block-type labels and URLs in code blocks.

Spacing and imagery

Document card max 680px text width with 48px padding; gutter 40px for labels; inspector cards 44px tall with 8px gap; radius 8px throughout; floating toolbar radius 10px with shadow.

No imagery; icons for nav and toolbar; status checks in green circles.

Components

• Brand/workspace switcher
• Sidebar with badges
• Breadcrumb bar with save pill
• Status dropdown
• Copy and Export menus
• Segmented control
• Create final draft button
• Block editor with gutter labels
• Floating format toolbar
• Inspector tabs
• Workflow progress bar
• Workflow step card (pending/running/done/failed)
• Info note
• Version history list

Interactions

• Typing autosaves after 800ms; pill cycles 'Saving…' → 'Saved'
• Selecting text highlights relevant toolbar buttons; keyboard shortcuts (⌘B, ⌘I, ⌘⌥1..3)
• Workflow steps update live via realtime; running step shows spinner
• Create final draft disabled until workflow completes
• Brief/Final draft toggle swaps documents, preserving scroll
• History tab restores a previous version with confirm

Data

• Brief{id, brand_id, title, status (draft|in_review|approved), content_json, updated_at}
• WorkflowRun{id, brief_id, status (running|done|failed), completed_steps, total_steps}
• WorkflowStep{run_id, index, label, status (pending|running|done|failed), started_at, finished_at}
• BriefVersion{id, brief_id, content_json, created_by, created_at}
• FinalDraft{id, brief_id, content_json}

Guardrails

Experience

• Show save state at all times near the title
• Keep workflow progress visible while editing; never block typing
• Gate 'Create final draft' on workflow completion and explain why
• Make each workflow step's status explicit with text, not just the check
• Let users restore previous versions from History

Accessibility

• Editor is a labelled textbox region; block-type gutter labels aria-hidden (structure comes from real headings)
• Toolbar is role=toolbar with arrow-key navigation and aria-pressed states
• Workflow list uses status text ('Done', 'Running') alongside icons; progress bar is role=progressbar
• Live step changes announced politely, at most one per step
• Focus ring 2px blue on all controls

Security

• RLS: briefs, runs, steps and versions scoped to brand workspace members; viewers read-only
• Sanitise pasted HTML; store Tiptap JSON, never raw HTML
• External URLs in briefs rendered with rel=noopener noreferrer and not auto-fetched client-side
• Workflow model calls server-side with secrets in environment, never in the client
• Rate-limit workflow runs per workspace

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 **Vindrel**'s content brief editor for a brand-visibility analytics product. Writers see an AI-generated brief as editable blocks in the centre and the generation workflow's step-by-step progress on the right, then turn the finished brief into a final draft.

### Stack
Next.js App Router + React 18 + TypeScript, Tailwind CSS, shadcn/ui (Radix), lucide-react, Tiptap for the block editor, TanStack Query, Supabase (Auth, Postgres, RLS, Realtime channel for workflow steps). Workflow runs in a server-side job/Edge Function.

### Pages & layout
1. **Left nav** (220px): brand switcher (invented brand), search '⌘K'; Analytics (Overview, Answer insights, Prompt volumes, Agent analytics, Shopping); Action (Opportunities, Content active, Workflows 'Alpha', Brand kit); Reports (Custom reports 'Beta'); footer Support, What's new, user.
2. **Top bar**: '< Back', title, 'Saved' pill; right: info, Draft status dropdown, Copy, Export (Markdown, HTML, DOCX).
3. **Document column**: segmented 'Content brief | Final draft'; dark 'Create final draft →'; white card with gutter labels and blocks: H1 title, H2 'Strategic overview', paragraphs for target topic, target prompts list, target platforms, top-cited pages list of invented URLs, cited content patterns.
4. **Floating toolbar** centred at bottom of the column.
5. **Inspector** (360px): tabs Visibility, History, Workflow, Inputs. Workflow: 'Workflow progress 9 / 9 completed', 100% bar, step cards (Starting workflow, Gathering citations, Web research, Research output, Analyse research, Extract outline, Build brief, Add metadata, Workflow completed) each with status icon + text; info note.
6. Responsive: inspector as drawer <1280px.

### Design system
- Colors: `--bg: #fafafa` (app background), `--card: #ffffff` (page card), `--fg: #1b1d1f` (primary text), `--muted: #5f6368` (muted text), `--border: #8d9196` (border), `--primary: #1b1d1f` (dark button), `--success: #15803d` (progress/success green), `--success-bg: #f1fcf5` (saved pill fill), `--badge: #6d28d9` (badge violet), `--info-bg: #eef4ff` (info note fill), `--info: #1d4ed8` (info text), `--ring: #2563eb` (focus ring).
- Fonts: Inter 400/600/700; doc H1 32px 700 -0.02em, H2 24px 600, body 16px/1.6; UI 14px; JetBrains Mono 12px gutter labels.
- Spacing: 4px base; doc card padding 48px; inspector padding 16px; step gap 8px.
- Radius: 8px cards and buttons; toolbar 10px.
- Shadows: toolbar `0 8px 24px rgb(0 0 0 / 0.12)`; doc card 1px border only.
- Motion: step status crossfade 150ms; progress bar width 300ms; toolbar fade 120ms.

### Components & interactions
`SideNav` with `NavBadge`, `DocTopBar` + `SaveStatePill`, `StatusMenu`, `ExportMenu`, `DocModeToggle` (Radix ToggleGroup), `CreateDraftButton` (disabled with tooltip + visible reason), `BriefEditor` (Tiptap with headings, lists, code, quote; gutter labels via node views), `FormatToolbar` (role=toolbar), `InspectorTabs`, `WorkflowProgress`, `StepCard`, `InfoNote`, `HistoryList` (restore with confirm).

### Data & state
`briefs(id, brand_id, title, status, content jsonb, updated_at, updated_by)`, `brief_versions(id, brief_id, content jsonb, created_by, created_at)`, `workflow_runs(id, brief_id, status, completed_steps, total_steps)`, `workflow_steps(run_id, idx, label, status, started_at, finished_at)`, `final_drafts(id, brief_id, content jsonb)`, `brand_members(brand_id, user_id, role)`. Autosave with debounce and optimistic updates; version snapshot every 10 minutes of editing. Realtime subscription on `workflow_steps` for the run.

### Accessibility
Real heading levels in the document; gutter labels hidden from AT. Toolbar arrow-key roving focus, `aria-pressed`. Progress bar `role=progressbar` with value text. Step changes announced politely. Disabled 'Create final draft' explains why in text. Focus ring 2px `--ring`.
Verified contrast: document text on card: #1b1d1f on #ffffff = 16.91:1; muted UI text on app bg: #5f6368 on #fafafa = 5.80:1; saved pill text: #15803d on #f1fcf5 = 4.77:1; dark button label: #ffffff on #1b1d1f = 16.91:1; badge text violet: #6d28d9 on #ffffff = 7.10:1; info note text: #1d4ed8 on #eef4ff = 6.07:1; progress bar green on card: #15803d on #ffffff = 5.02:1; border on card: #8d9196 on #ffffff = 3.17:1; focus ring: #2563eb on #ffffff = 5.17:1.

### Security
RLS on all tables through `brand_members`: select for members; insert/update for editor+; viewers read-only; `workflow_*` written only by the server job (service role). Sanitise pasted content through Tiptap schema; store JSON. Links render with `rel=noopener noreferrer`. Model/API keys live in server env. Rate-limit runs to 20/hour per workspace.

### Performance & SEO
Lazy-load Tiptap extensions; inspector tabs load on demand; realtime only while the doc is open. App routes `noindex`.

### Guardrails
- Invent brand, topic and every URL (use example.org paths).
- Name AI platforms generically ('AI answer engines').
- Never auto-publish; final draft requires an explicit click.

Acceptance criteria:
- [ ] Autosave pill reflects saving/saved/failed
- [ ] Workflow steps update live to 100%
- [ ] Create final draft enabled only after completion
- [ ] Viewer role cannot edit (RLS + hidden toolbar)
- [ ] Contrast pairs pass

Open the builderAll templatesThis palette on its own