Tapestrine

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.

• Plus Jakarta SansHeadings: Plus Jakarta Sans 700, 20px panel titles; slide titles set by the slide style (e.g. a serif display)
• Plus Jakarta SansBody: Plus Jakarta Sans 400/500, 16px/1.5 panels; tool labels 12px 500

Patterns

• slide thumbnail rail
• canvas with contextual bottom toolbar
• insert toolbar of icon+label tools
• right comments panel with empty state
• vertical tool rail on far right
• presence avatars + Present/Share buttons
• style picker popover
• dismissible integration nudge

States it is designed for

• No comments on this slide (empty state)
• Threads with replies; resolved filter
• Comment posting (optimistic) and failed with retry
• Someone else editing the same element (lock outline with name)
• Offline: comments queued, banner shown
• Viewer role: can comment but not edit
• Long thread scrolls within panel

Who it is for

• Startup teams building decks together
• Marketers reviewing slides asynchronously
• Designers setting deck-wide styles

Layout

1. Top bar: home, menu, deck title + privacy caption; centre insert tools (Text, Media, Shape, Sticker, Chart, Table, Embed, Record) as icon-over-label buttons; right: presence avatars + add, bell, analytics, 'Present' outline button, violet 'Share'
2. Left rail (~110px): 'Add slide' button, numbered slide thumbnails with active outline and a comment-count badge on one
3. Canvas: slide at 16:9 on grey stage, annotation arrow note in hand-lettered style, contextual toolbar below (Slide style, Slide colour, Background image, more)
4. Style picker popover anchored to toolbar: list of styles with swatches and an add option
5. Comments panel (~260px): title + close, 'Add a comment' input, empty state illustration + text; bottom nudge card with dismiss
6. Far-right vertical rail: icons for design, animations, comments (active), notes, checks, profile
7. Below 1024px comments panel overlays the canvas; below 768px the editor becomes view + comment only

Palette

creative, collaborative, polished. A design tool that feels like a shared studio.

• stage background#f6f6f8
• panel surface#ffffff
• primary text#1d1d24
• muted text#5f6170
• border#8b8d99
• accent violet (Share, active)#5b5bd6
• slide accent orange#c2410c
• comment badge#dc2626
• focus ring#5b5bd6
• selection outline#4f46e5

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

Plus Jakarta Sans 700, 20px panel titles; slide titles set by the slide style (e.g. a serif display)

Body

Plus Jakarta Sans 400/500, 16px/1.5 panels; tool labels 12px 500

Friendly geometric grotesk similar to observed UI; hand-lettered annotations use Caveat 20px (decorative, duplicated in accessible text).

Spacing and imagery

Editor chrome compact: top bar 56px, tool buttons 48px square with 12px labels; thumbnails 96px wide with 12px gap; comments panel padding 16px; radius 8px controls, 12px panels, 4px slide thumbnails.

Slides carry their own imagery; the comments empty state uses an original soft 3D speech-bubble illustration; line icons for tools.

Components

• Insert toolbar
• Presence avatars
• Present button
• Share button + dialog
• Slide thumbnail rail with comment badges
• Canvas with selection
• Contextual slide toolbar
• Style picker popover
• Comments panel (composer, threads, resolve)
• Empty comments state
• Integration nudge card
• Vertical tool rail

Interactions

• Clicking a thumbnail selects the slide; drag to reorder (dnd-kit) with keyboard alternative
• Comments are per slide; posting shows the thread with avatar and time; resolve collapses it
• @mention suggests workspace members
• Style picker applies deck-wide style with live preview on hover
• Present enters full-screen playback
• Realtime: other users' cursors and new comments appear live

Data

• Deck{id, workspace_id, title, visibility (private|workspace|link), style_id}
• Slide{id, deck_id, index, content_json}
• Comment{id, slide_id, author_id, body, parent_id, resolved, created_at}
• Style{id, workspace_id, name, fonts{}, colors{}}
• Presence{deck_id, user_id, slide_id, cursor}

Guardrails

Experience

• Anchor comments to a slide and show counts on thumbnails
• Keep the composer at the top of the panel so replying is fast
• Make empty state encourage the first comment without blocking the canvas
• Show who else is here and what they're editing
• Integration nudges must be dismissible and never return after dismissal

Accessibility

• Toolbar and rails are role=toolbar with labelled buttons (icon + text label where space allows)
• Thumbnail reorder has keyboard move up/down actions
• Comment threads are lists with author, time and body readable in order
• Hand-lettered annotation duplicated as normal text for screen readers
• Panels are landmarks (complementary) with headings

Security

• RLS: decks/slides/comments scoped to workspace membership and deck visibility; link-shared decks read-only via signed token
• Comment bodies sanitised (plain text + mentions), max length enforced
• Mentions only resolve to workspace members
• Realtime channels authorised per deck
• Audit share-setting changes

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 **Tapestrine**'s slide editor with the comments panel open. People edit slides on a canvas, apply deck-wide styles, and discuss each slide in a right-hand comments panel with live presence, so review happens beside the work.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react, dnd-kit for thumbnail reordering, Motion for panel transitions, TanStack Query, Supabase (Auth, Postgres, RLS, Realtime for presence and comments).

### Pages & layout
1. **Top bar**: home, menu, deck title 'Quarterly review' + 'Private'; insert tools Text, Media, Shape, Sticker, Chart, Table, Embed, Record; right: presence stack + add person, bell, analytics, 'Present', violet 'Share'.
2. **Thumbnail rail**: '+ Add slide', numbered thumbnails, active slide outlined in `--accent`, red comment badge.
3. **Canvas**: 16:9 slide on `--stage` with an orange data slide example (invented metrics), contextual toolbar (Slide style, Slide colour, Background image, more).
4. **Style picker**: popover listing deck styles with swatch and '+ New style'.
5. **Comments panel**: 'Comments' + close; 'Add a comment…'; empty state illustration + 'Leave a comment on this slide.'; threads when present; bottom nudge 'Get replies in your team chat' with dismiss.
6. **Vertical rail**: design, animate, comments (active), notes, checks, account.
7. Responsive per layout notes.

### Design system
- Colors: `--stage: #f6f6f8` (stage background), `--bg: #ffffff` (panel surface), `--fg: #1d1d24` (primary text), `--muted: #5f6170` (muted text), `--border: #8b8d99` (border), `--accent: #5b5bd6` (accent violet (Share, active)), `--slide: #c2410c` (slide accent orange), `--badge: #dc2626` (comment badge), `--ring: #5b5bd6` (focus ring), `--select: #4f46e5` (selection outline).
- Fonts: Plus Jakarta Sans 400/500/700 for UI (16px/1.5 panels, 12px tool labels); Caveat 20px for annotations only.
- Spacing: 4px base; top bar 56px; panel padding 16px.
- Radius: 8px controls, 12px panels/popovers, 4px thumbnails.
- Shadows: popovers `0 12px 32px rgb(29 29 36 / 0.16)`; slide `0 2px 8px rgb(0 0 0 / 0.08)`.
- Motion: panel slide 200ms; thumbnail reorder spring; style preview crossfade 150ms; reduced motion disables springs.

### Components & interactions
`EditorTopBar`, `InsertToolbar`, `PresenceStack`, `ShareDialog` (visibility, invite, copy link), `ThumbnailRail` (dnd-kit sortable + keyboard move), `SlideCanvas`, `ContextToolbar`, `StylePicker`, `CommentsPanel` (`CommentComposer` with @mentions, `CommentThread`, resolve toggle, filter resolved), `EmptyComments`, `NudgeCard`, `ToolRail`, `PresentMode`.

### Data & state
`decks(id, workspace_id, title, visibility, style_id)`, `slides(id, deck_id, idx, content jsonb)`, `comments(id, slide_id, author_id, body, parent_id, resolved, created_at)`, `styles(id, workspace_id, name, tokens jsonb)`, `members(workspace_id, user_id, role editor|commenter|viewer)`, `nudge_dismissals(user_id, key)`. Presence over a Realtime channel per deck. Mock: 9 slides, comments only on slide 8.

### Accessibility
Tool buttons have text labels; rails `role=toolbar`. Thumbnail reorder via 'Move up/down' menu. Comments region is `complementary` with heading; new comments announced politely. Annotation text duplicated in `aria-label`. Focus ring 2px violet; selection outline 3:1 on stage.
Verified contrast: panel text: #1d1d24 on #ffffff = 16.75:1; muted text on stage: #5f6170 on #f6f6f8 = 5.67:1; Share label on violet: #ffffff on #5b5bd6 = 5.37:1; text on orange slide: #ffffff on #c2410c = 5.18:1; comment badge on panel: #dc2626 on #ffffff = 4.83:1; input border: #8b8d99 on #ffffff = 3.30:1; focus ring violet: #5b5bd6 on #ffffff = 5.37:1; selection outline on stage: #4f46e5 on #f6f6f8 = 5.83:1.

### Security
RLS: `decks`/`slides` select for members (or via a link token RPC for link visibility, read-only); update for editors; `comments` insert for editor/commenter, update/delete own only, resolve by editors. Sanitise comment bodies (plain text, 2,000 chars). Mentions validated against members. Realtime channel authorisation per deck. Audit visibility changes.

### Performance & SEO
Render thumbnails as cached images regenerated on idle; virtualise rail over 50 slides; lazy-load Present mode. App routes `noindex`.

### Guardrails
- Use invented deck content and people; original illustration.
- Name the chat integration generically ('your team chat').
- Don't copy any real tool's icon set; use lucide.

Acceptance criteria:
- [ ] Comments post, reply and resolve per slide with live updates
- [ ] Thumbnail badges show comment counts
- [ ] Style picker applies deck-wide
- [ ] Commenters cannot edit slides (RLS)
- [ ] Contrast pairs pass

Open the builderAll templatesThis palette on its own