Sketchlink

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, 16px section titles
• InterBody: Inter 400 16px field text; 14px descriptions at 1.5; 12px footer labels uppercase (600, 0.08em)

Patterns

• share popover anchored to top-right Share button
• two-part popover: white "Share app" section and tinted "Embed selection" section
• read-only URL fields with copy icon
• toggle "Link to current view"
• selection-dependent embed fields with placeholder guidance
• publish-to-web toggle with consequence text
• infinite canvas with floating block cards
• bottom floating tool dock
• inspector / console split footer

States it is designed for

• No block selected (placeholder guidance, copy disabled)
• One block selected (fields filled)
• Multiple blocks selected ("Select a single block")
• Published to web (public URL shown, badge on Share button)
• Workspace policy disallows public sharing (toggle disabled with reason)
• Copy failed fallback
• Viewer role (can copy app link only)

Who it is for

• Data analysts building dashboards on a canvas
• Growth and marketing teams sharing traffic reports
• Writers embedding charts in docs

Layout

1. Top bar: back, project name pill; centered canvas tabs ("Canvas" + add); right: avatar, blue Share button, zoom in/out, fit, comments, more
2. Left thin search rail
3. Canvas: dotted/grey with small block cards
4. Popover (~295-360px) under Share: Share app (title, sub, App URL field + copy, Link to current view toggle); Embed selection (tinted: description, link field, embed code textarea, Share to web toggle + consequence)
5. Bottom dock of tools (hand, blocks, text, chart, pie, loop)
6. Footer split: INSPECTOR | CONSOLE
7. Mobile: popover as bottom sheet

Palette

technical, calm, flexible, collaborative. Sharing options are laid out clearly without leaving the canvas.

• canvas background#eff0f2
• popover and panels#ffffff
• embed section fill#f7f7f9
• titles, field text#1f2328
• descriptions, placeholders#5c6370
• Share button, toggle on, focus#1f6feb
• button label#ffffff
• field outlines#86909a
• toggle track off#86909a
• canvas tab chip#e3ecfb

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, 16px section titles

Body

Inter 400 16px field text; 14px descriptions at 1.5; 12px footer labels uppercase (600, 0.08em)

Similar to the observed neutral grotesk; URLs and embed code in JetBrains Mono 13px.

Spacing and imagery

Compact: 4px base; popover padding 16px; 12px field spacing; fields 40px; radius 10px popover, 6px fields and buttons, full pill for Share and tab chip; popover shadow 0 12px 32px rgba(15,23,42,.14).

None; canvas blocks show miniature charts and tables; outline icons.

Components

• Share button
• Share popover
• Read-only URL field with copy
• Toggle with label
• Embed code textarea with copy
• Publish-to-web toggle with confirmation
• Canvas block card with selection outline
• Tool dock
• Inspector/Console footer

Interactions

• Selecting a single block on canvas fills the embed link and code fields; multi/none shows guidance placeholder
• "Link to current view" appends viewport and selection to the URL
• Copy icons copy with a tooltip "Copied"
• Turning on Share to web opens a confirm dialog explaining public visibility; turning off revokes immediately
• Popover stays open while clicking the canvas to change selection

Data

• Project{id, workspace_id, name, public bool, public_token?}
• Canvas{id, project_id, name}
• Block{id, canvas_id, kind (chart|table|text|query), x, y, w, h}
• EmbedToken{id, block_id, token, created_by, revoked_at?}
• WorkspacePolicy{workspace_id, allow_public bool}

Guardrails

Experience

• Separate internal sharing (members) from public embedding visually
• Explain why embed fields are empty and how to fill them
• Show the consequence of publishing to the web next to the toggle
• Keep the popover open during canvas selection
• Show a persistent badge when a project is public

Accessibility

• Popover is a non-modal dialog with a heading; Esc closes and focus returns to Share
• Toggles are role="switch" with labels
• Read-only fields selectable and labelled; copy buttons labelled per field
• Placeholder guidance also provided as helper text (not placeholder-only)
• Selection changes announce "Embed ready for Chart: Weekly visits"

Security

• Embed tokens are per-block, revocable and read-only
• Publishing to web requires editor role and respects workspace policy (server-enforced)
• Public views serve cached, sanitised data; no query editing
• RLS on projects/blocks by workspace membership
• Audit publish/unpublish events

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 **Sketchlink**, the share popover of a data canvas app. Analysts arrange chart and table blocks on a canvas. The popover, under a blue Share button, offers an app link for workspace members, embed options for a single selected block (link and iframe code), and a toggle to publish the canvas to the web.

### Stack
React + TypeScript + Vite, Tailwind CSS, shadcn/ui (Popover, Switch, AlertDialog, Tooltip, Textarea) on Radix, lucide-react, TanStack Query. Supabase for auth, projects, blocks and embed tokens; an Edge Function serves public and embed views.

### Pages & layout
1. **Top bar**: back arrow and project pill ("Site traffic sources"); centred canvas tab chip with a +; on the right an avatar, blue Share pill, zoom in/out, fit, comments and more.
2. **Canvas**: light grey with block cards; the selected block gets a 2px blue outline.
3. **Share popover** (360px, anchored under Share):
   - **Share app** (white): title; subline "Share a link to this app with workspace members"; "App URL" read-only field with copy icon; "Link to current view" switch.
   - **Embed selection** (tinted): description ("Embed a chart in other tools by pasting its link, or on any site using the code below"); "Link to selected block" field; "Embed code" textarea; "Share to web" switch with the line "People outside your workspace will be able to see it".
4. **Bottom dock** of tools; **footer** split into INSPECTOR and CONSOLE.
5. Mobile: the popover becomes a bottom sheet.

### Design system
- Colors: `--canvas: #eff0f2` (canvas background), `--bg: #ffffff` (popover and panels), `--tint: #f7f7f9` (embed section fill), `--fg: #1f2328` (titles, field text), `--muted: #5c6370` (descriptions, placeholders), `--primary: #1f6feb` (Share button, toggle on, focus), `--on-primary: #ffffff` (button label), `--input-border: #86909a` (field outlines), `--toggle-off: #86909a` (toggle track off), `--chip: #e3ecfb` (canvas tab chip).
- Fonts: Inter (similar to the observed grotesk): section titles 16px/600; field text 16px; descriptions 14px/1.5; footer labels 12px uppercase 600 with 0.08em tracking; URLs and code in JetBrains Mono 13px.
- Spacing: 4px base; 16px popover padding; 12px between fields; 40px fields.
- Radius: popover 10px; fields 6px; Share and tab chip full.
- Shadows: popover `0 12px 32px rgba(15,23,42,.14)`.
- Motion: 120ms popover fade; field values cross-fade on selection change.

### Components & interactions
TopBar, CanvasTabs, Canvas with BlockCard (select, multi-select with Shift), SharePopover (stays open while the canvas is clicked), UrlField (copy with tooltip), ViewLinkSwitch, EmbedFields (driven by the selection: none, one or many), PublishSwitch (AlertDialog to confirm on; immediate revoke off), PublicBadge on Share, ToolDock, FooterPanels.

### Data & state
Tables: `projects(id, workspace_id, name, public, public_token)`, `canvases`, `blocks(id, canvas_id, kind, x, y, w, h, title)`, `embed_tokens(id, block_id, token, created_by, revoked_at)`, `workspace_policies(workspace_id, allow_public)`. Mock six blocks ("Weekly visits", "Top referrers", "Signup funnel"). Handle states: no selection, one block, many blocks, published, policy-disabled, copy fallback, viewer role.

### Accessibility
The popover is a labelled non-modal dialog; Esc returns focus to Share. Switches have labels and states. Guidance appears as helper text, not only placeholder. Selection changes are announced politely. Copy buttons are labelled per field. Focus ring: 2px blue.
Verified contrast: field text: #1f2328 on #ffffff = 15.80:1; muted description on tint: #5c6370 on #f7f7f9 = 5.65:1; muted on white: #5c6370 on #ffffff = 6.05:1; Share label: #ffffff on #1f6feb = 4.63:1; input border on tint: #86909a on #f7f7f9 = 3.03:1; toggle on / focus: #1f6feb on #ffffff = 4.63:1; text on canvas: #1f2328 on #eff0f2 = 13.85:1; tab chip text: #1f2328 on #e3ecfb = 13.28:1.

### Security
Embed tokens are random, per block, read-only and revocable. Public publishing needs the editor role and an allowed workspace policy, both enforced in the Edge Function and RLS. Public and embed views serve cached, sanitised results with no query access. Log publish and unpublish events.

### Performance & SEO
Create embed tokens lazily on first selection. Cache public renders at the edge for 60 seconds. Public pages get titles and OG images; the editor is noindex.

### Guardrails
- Invented project and block names; no references to real tools.
- Public publishing always needs confirmation.
- Acceptance criteria: (1) the app link copies; (2) embed fields follow the selection; (3) publishing confirms, shows a badge and revokes cleanly; (4) the policy disables publishing; (5) all states render; (6) keyboard and screen-reader checks pass.

Open the builderAll templatesThis palette on its own