Snippetly

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Figtree fits this airy single-purpose utility well; it stays here while the other templates that used it move to other faces.

• FigtreeHeadings: hero 40px 600 at -2.4px, quote text 32-40px
• FigtreeBody: body 16px, UI 13px 500

Who it is for

• Content marketers
• Freelance SEO writers
• Small-site owners
• Marketing teams auditing metadata

Layout

1. Sticky nav: text wordmark left, 'Sign in' and cyan pill 'Get started' right (becomes a frosted rounded bar on scroll)
2. Centered hero: product name, tagline, generator card with URL input, keyword tag input and wide cyan Generate pill
3. Dashed placeholder panel with skeleton SERP and social-card previews ('Paste a URL to generate previews')
4. Tabbed product tour on a cyan band: Pages checklist, Platform previews, AI generate, each showing a floating app UI mock
5. Large centered testimonial quote carousel with progress pill and pause
6. Closing CTA and footer
7. App: Pages table with status badges, page editor with title/description fields, char counters, previews grid, before/after section, OG image upload

Palette

Clean, airy, helpful, modern, lightweight. A focused single-purpose utility with a bright cyan accent.

• background (stone)#fafaf9
• text#1c1917
• brand cyan (band and decorative fills, dark text)#0ab0ec
• cyan disabled#7fd6f7
• border#e7e5e4
• status amber#b45309
• status green#15803d
• primary (buttons, links)#077ba5

Every checked pair, measured again

As vibld’s tokens

The palette on the 15+ color tokens vibld styles a project with, each text color 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

Figtree 600, 40px hero with very tight -2.4px tracking; big 32-40px quote text

Body

Figtree 400 16px; UI 13px 500

One friendly geometric sans throughout; tight tracking on large sizes gives a modern product feel. Accessibility: body copy 16px or larger at 1.5+ line height with a ~70ch max measure; no text below 12px; weights under 400 only at 32px+; uppercase reserved for short labels with 0.05em+ tracking.

Spacing and imagery

Centered ~670px generator column; big vertical whitespace; 10px radius cards, pill buttons; subtle shadows and dashed empty-state borders.

No photography; product UI mocks float over a cyan band; platform preview cards render user-supplied OG images.

Components

• Generator card (URL + keyword chips + Generate)
• Skeleton preview placeholder
• Google SERP preview
• Social card previews (X, Facebook, LinkedIn, Slack, Discord style)
• Character counter badges
• Pages table with status badges and search
• Page editor form
• Before/after current meta section
• OG image dropzone
• Copy-to-clipboard buttons
• Feature tab switcher with auto-advance
• Testimonial carousel

Interactions

• Anonymous generation from landing, save prompts sign-in
• Keyword tags added with Enter/comma
• Live char count color changes (green/amber/red)
• Previews update on each keystroke
• Drag-and-drop OG image with instant preview
• Copy tags to clipboard toast
• Auto-advancing tour with pause
• Sort/search pages table

Data

• Page{id, owner_id, url, keywords[], title, description, og_image_path, current_title, current_description, status: optimized|partial|missing, updated_at}
• GenerationLog{user_id|ip_hash, created_at}

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 a template'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 templates)
- 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 color 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, labeled 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.

### Goal
Build **Snippetly**, a metadata studio for content marketers and small-site owners. Users paste a page URL and target keywords, receive AI-drafted title and description options, edit them with live length checks, and preview how the page appears in search results and link unfurls across social and chat apps. A library tracks each URL's status so the SEO backlog is visible at a glance.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. react-hook-form + zod for the editor, TanStack Query + TanStack Table for the library, Framer Motion for the landing tour and preview transitions, react-dropzone for OG images. Supabase: Auth, Postgres for pages, Storage for OG images, and an Edge Function that fetches the target page (server-side), extracts current meta and body text, and calls the AI model.

### Pages & layout
1. **Landing**: sticky nav (wordmark, Sign in, cyan pill Get started) that turns into a frosted rounded bar on scroll. Centered title and tagline above a generator card: URL input, keyword tag input, wide cyan Generate button (disabled until a valid URL). Below, a dashed placeholder showing skeleton previews. A cyan band with three tabs (Library, Previews, Generate) that auto-advance and show floating UI mocks. Large quote carousel with pause control. Closing CTA and footer.
2. **Library**: search, status filter, table (status badge, URL in mono, title, updated, overflow menu), "New page", pagination.
3. **Page editor**: title and description fields with counters (≤60 / ≤160), keyword chips, Generate button, OG image dropzone; right side a grid of previews (search result, large-image card, compact card, chat unfurl); below, a muted "currently live" section for comparison; Copy HTML tags button.

### Design system
Light. Tokens: `--background: #fafaf9`, `--card: #ffffff`, `--foreground: #1c1917`, `--muted-foreground: #78716c`, `--primary: #077ba5`, `--primary-foreground: #ffffff`, `--brand-cyan: #0ab0ec` (band and decorative fills only, with dark text), `--border: #e7e5e4`, `--ok: #15803d`, `--warn: #b45309`, `--bad: #dc2626`. Font: Figtree 400/500/600; headings at -0.05em tracking; scale 13/16/20/32/40. Radius 10px cards, pill buttons and inputs within the generator. Shadows subtle (`0 10px 30px rgb(28 25 23 / .06)`). Motion 200ms ease-out; tour interval 6s. Add `--input-border: #9a938e` for inputs and keyword chips. Disabled buttons use `#7fd6f7` (inactive controls are exempt from contrast).

### Components & interactions
Generate button: idle, loading (spinner + "Reading page…"), success, error (unreachable URL, with retry). Counters change color and announce thresholds. Previews truncate text using each platform's typical limits. Dropzone: hover, dragging, uploading progress, rejected-file message. Library empty state invites adding a first URL. Anonymous users can generate once or twice; Save opens sign-in and keeps the draft.

### Data & state
Page(owner_id, url, keywords[], title, description, og_image_path, current_title, current_description, status derived from field completeness), GenerationLog for quotas. Draft state in the form; server state via TanStack Query. Seed ~10 pages for a fictional software blog with mixed statuses.

### Accessibility
Buttons use the darker `--primary: #077ba5` with white text; the bright `--brand-cyan: #0ab0ec` band always carries dark `#1c1917` text. Counters use `aria-live="polite"`. Keyword chips are removable via keyboard with labeled buttons. Carousel pauses on focus/hover and respects reduced motion. Preview images need alt text derived from the page title; decorative skeletons are `aria-hidden`. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #1c1917 on #fafaf9 = 16.74:1; muted text #78716c on #fafaf9 = 4.59:1; white text #ffffff on #077ba5 = 4.79:1; primary link text #077ba5 on #fafaf9 = 4.58:1.

### Security
The page fetcher runs only in the Edge Function: allow http(s), block private/loopback IPs, set timeouts and a response-size cap, and strip scripts before extraction. Validate URL and keywords with zod on client and server. Anonymous generation is rate-limited by hashed IP; signed-in users have daily caps. AI and service keys stay in function secrets. RLS: pages readable/writable only by owner. OG uploads limited to PNG/JPEG/WebP ≤ 5 MB. Escape all fetched text when rendering previews.

### Performance & SEO
Eat your own cooking: complete title, description, OG and Twitter tags on the landing page, semantic headings, Lighthouse 95+. Lazy-load tour images; debounce preview rendering.

### Guardrails
- Original copy; fictional example sites; use generic preview styling rather than exact platform logos.
- Label sample testimonials as illustrative or omit them.
- Typed components, no `any`, visible errors.
- Done when: a URL generates editable suggestions; counters flag long text; previews update live with an uploaded image; saving adds the page to the library with correct status; unsafe or private URLs are rejected.

Open the builderAll templatesThis palette on its own