Sheafpress

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, 15px tab labels; 15px card titles (500)
• InterBody: Inter 400 16px notes at 1.5; 13px card descriptions at 1.45

Patterns

• tabbed share dialog (Invite / Share externally / Export)
• selectable format cards with file-type badge
• info note with inline link
• upsell panel with thumbnail and outlined CTA
• primary Export button bottom-right
• slide thumbnail rail in editor
• insert toolbar with labelled icons
• right-side tool rail

States it is designed for

• Format selected (default compressed PDF)
• Exporting with progress and cancel
• Export ready (download started toast + link)
• Export failed (retry, report)
• Premium workspace (no upsell panel, no watermark)
• Deck contains non-exportable blocks (note listed with count)
• Editable-slide format warning shown when selected

Who it is for

• Presenters sending decks to clients
• Sales and marketing teams
• Free-plan users considering upgrade

Layout

1. Editor behind: top bar (home, menu, deck title + folder, insert toolbar Text/Media/Shape/Sticker/Chart/Table/Embed/Record, avatars, bell, analytics, Present, Share)
2. Left slide thumbnail rail with numbers and comment badges
3. Canvas with slide; right tool rail; bottom slide-style bar
4. Dialog (~370-560px): tabs; three format cards in a row; info note; upsell panel; Export button
5. Mobile: format cards stack; dialog full-screen

Palette

polished, creative, helpful, gently commercial. Export feels simple while the upgrade path stays visible but polite.

• dialog background#ffffff
• titles and body#1d1d27
• card descriptions#5f5f6e
• Export button, active tab, selected card border#6246ea
• button label#ffffff
• selected card fill#f5f2ff
• upsell panel fill#f4f1fd
• unselected card border#8e8e9c
• editor canvas grey (decorative)#bdbdbf
• inline links#4f35d4

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, 15px tab labels; 15px card titles (500)

Body

Inter 400 16px notes at 1.5; 13px card descriptions at 1.45

Similar to the observed geometric grotesk. File-type badges 12px 700 uppercase with 0.06em tracking.

Spacing and imagery

Medium: 8px base; dialog padding 16px; 12px card gap; cards 110px tall; radius 10px dialog, 8px cards and upsell panel, 6px buttons; dialog shadow 0 24px 60px rgba(0,0,0,.25).

File-type document icons on cards; a small thumbnail of the deck in the upsell; playful handwritten annotations and sparkle doodles on the editor canvas (invented).

Components

• Share dialog tabs
• Format card (icon badge, title, description) as radio
• Info note with link
• Upsell panel (thumbnail, text, outlined button)
• Export button with progress
• Close button
• Slide thumbnail rail
• Insert toolbar

Interactions

• Format cards behave as a radio group; arrow keys move selection
• Export shows progress in the button, then downloads and shows a toast
• "share a link" in the note switches to the Share externally tab
• Remove branding opens plan comparison
• Dialog opens from Share button; Esc closes

Data

• Deck{id, title, folder_id, slide_count}
• Slide{id, deck_id, order, has_video bool, has_embed bool}
• ExportJob{id, deck_id, format (pdf_compressed|pdf_hq|slides_file), status, file_url, watermark bool}
• Workspace{id, plan (free|premium)}

Guardrails

Experience

• Describe the trade-off of each format in one line
• Warn about blocks that will not export and offer sharing a link instead
• State the watermark consequence before export, not after
• Remember the last chosen format per user
• Keep Export as the only primary button

Accessibility

• Format cards are a radiogroup with visible selected state (border + fill + check)
• Tabs follow tablist semantics
• Export progress announced via aria-live
• Upsell thumbnail has empty alt
• Dialog focus trapped and restored to Share

Security

• Exports generated server-side; signed, expiring download URLs
• Check deck access before export (RLS)
• Watermark applied server-side based on plan, not client flag
• Rate-limit export jobs per 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 **Sheafpress**, the Export tab of a presentation editor's share dialog. The user picks a format card (compressed PDF, high-quality PDF or an editable slide file), reads a note about blocks that won't export, sees that free workspaces get a watermark and an extra slide, and clicks "Export presentation".

### Stack
React + TypeScript + Vite, Tailwind CSS, shadcn/ui (Dialog, Tabs, RadioGroup, Toast) on Radix, lucide-react, TanStack Query. Supabase for auth, decks and export jobs; an Edge Function renders exports and uploads them to private storage.

### Pages & layout
1. **Editor shell**: top bar (home, menu, deck title with "Private" below, insert toolbar with labelled icons, avatars, bell, analytics, Present, Share); a slide thumbnail rail with numbers and comment badges; the canvas; a right tool rail; a bottom bar with Slide style, Slide colour and Background image.
2. **Share dialog** (560px): tabs Invite to collaborate, Share externally, Export (active, underlined).
3. **Format cards** (three in a row): a file badge icon, title and a two-line description. Compressed PDF ("Slight compression, best for sharing online"), High-quality PDF ("Lossless images, longer export"), Editable slides ("Some elements may not be supported"). The selected card has an accent border and tinted fill.
4. **Info note**: "Videos, recordings and interactive blocks may not export correctly. To keep them, share a link" (the link switches tabs).
5. **Upsell panel** (tinted): deck thumbnail, "Exports include a watermark and an extra closing slide. Premium workspaces export without them." and an outlined "Remove branding" button.
6. **Footer**: "Export presentation" primary button, right-aligned.
7. Mobile: stacked cards; full-screen dialog.

### Design system
- Colors: `--bg: #ffffff` (dialog background), `--fg: #1d1d27` (titles and body), `--muted: #5f5f6e` (card descriptions), `--primary: #6246ea` (Export button, active tab, selected card border), `--on-primary: #ffffff` (button label), `--selected: #f5f2ff` (selected card fill), `--upsell: #f4f1fd` (upsell panel fill), `--card-border: #8e8e9c` (unselected card border), `--canvas: #bdbdbf` (editor canvas grey (decorative)), `--link: #4f35d4` (inline links).
- Fonts: Inter (similar to the observed geometric grotesk): tabs 15px/600, card titles 15px/500, notes 16px/1.5, descriptions 13px/1.45; file badges 12px/700 uppercase with 0.06em tracking.
- Spacing: 8px scale; 16px dialog padding; 12px card gap.
- Radius: dialog 10px; cards and panel 8px; buttons 6px.
- Shadows: dialog `0 24px 60px rgba(0,0,0,.25)`.
- Motion: 150ms card selection; progress inside the button.

### Components & interactions
EditorShell (static mock), ShareDialog, ShareTabs, FormatRadioCard (arrow keys, check icon when selected), InfoNote, UpsellPanel, ExportButton (idle, progress with percentage, cancel), Toast ("Your PDF is downloading"; Open link). The last format is remembered.

### Data & state
Tables: `decks(id, title, folder_id, slide_count)`, `slides(id, deck_id, order, has_video, has_embed)`, `export_jobs(id, deck_id, format, status, file_path, watermark)`, `workspaces(id, plan)`. Mock a nine-slide deck, two slides with video. Handle states: default selection, exporting, ready, failed with retry, premium (no upsell), non-exportable blocks count, editable-file warning.

### Accessibility
Format cards form a radiogroup; selection shows border, fill and a check. Export progress is announced through aria-live. The dialog restores focus to Share. The thumbnail is decorative. Focus ring: 2px accent with offset.
Verified contrast: body text: #1d1d27 on #ffffff = 16.70:1; muted description: #5f5f6e on #ffffff = 6.27:1; button label on primary: #ffffff on #6246ea = 5.86:1; text on selected card: #1d1d27 on #f5f2ff = 15.13:1; muted on upsell: #5f5f6e on #f4f1fd = 5.63:1; link on white: #4f35d4 on #ffffff = 7.52:1; card border: #8e8e9c on #ffffff = 3.23:1; selected border / focus: #6246ea on #ffffff = 5.86:1.

### Security
RLS: only users with access to the deck can create export jobs or read their files. The server decides whether to add the watermark from the workspace plan. Downloads use signed URLs that expire after 10 minutes. Limit to three concurrent jobs per user.

### Performance & SEO
Poll the job or use a realtime channel; stop when done. Cache finished exports by deck version and format. The editor is noindex.

### Guardrails
- Invented deck content and doodles; no real brand names on the watermark.
- The upsell never blocks exporting.
- Acceptance criteria: (1) all formats export via jobs; (2) the watermark follows the plan; (3) the link in the note switches tabs; (4) all states render; (5) the radiogroup and dialog are fully keyboard accessible.

Open the builderAll templatesThis palette on its own