Glimpse

Who it is for

• Social media managers
• Small business owners posting themselves
• Content creators and influencers
• Marketing agencies reviewing client posts

Layout

1. Top nav: script wordmark left, Features/How it works/Pricing center, Log in + outlined 'Sign up free' right
2. Centered hero on white-to-sky gradient with dot grid: script logo, 60px headline, subcopy, blue CTA
3. Auto-scrolling strip of vertical phone-sized reel/story mockups
4. Feature section with a large 4-column live-preview panel showing the same post as four platform cards
5. Dark navy 4-step 'how it works' section with big numerals
6. Final CTA and footer
7. App: editor with text field, media upload, format presets, platform tabs and live previews; drafts list; profile settings

Palette

Bright, clean, helpful, optimistic, trustworthy. A sky-blue utility that feels friendly rather than corporate.

• background#fafcfd
• text#0b121a
• primary blue#0095d7
• secondary#e5f1f7
• accent sky#d5ecf8
• dark section#0d131b
• border#dbe7ed
• primary (text-bearing)#0077ad
• muted text#4f5f6b
• input border#6699b2

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

Display

Miranda Sans 600, 60px, -0.03em tracking; script logotype for the wordmark

Body

Miranda Sans 400 16–18px

Friendly humanist sans with a handwritten logo accent for personality

Spacing and imagery

Centered 1100px container; 10px radius cards; the preview panel is one large rounded card split into 4 columns with hairline dividers; roomy 120px sections alternating light and dark

Lifestyle and food photography inside faux phone screens and platform post frames; a light dot-grid texture fading into sky gradient.

Components

• Script wordmark
• Gradient hero with dot grid
• Phone mockup marquee
• Four-platform preview panel
• Platform post card (avatar, handle, text, media, action bar)
• Format preset selector (1:1, 4:5, 16:9, 9:16)
• Media uploader with progress
• Per-platform character counter
• AI enhance button with suggestions
• Drafts list
• Numbered steps on dark band
• Profile customization form

Interactions

• Previews update live as you type
• Preset switch re-crops media
• Upload progress bar
• Counter warns near and over limit
• AI enhance shows loading then suggestion to accept/reject
• Autosave draft indicator
• Marquee of phone mockups
• Truncation with '...more' like real feeds

Data

• Draft{id, user_id, text, media[], preset, updated_at}
• Media{id, draft_id, storage_path, type(image|video), width, height, size}
• Profile{id, display_name, handle, avatar_url}
• PlatformSpec{key, char_limit, aspect_ratios[]} (static config)

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 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.

### Goal
Build **Glimpse**, a tool that shows how one social post will look across four common feed styles before it goes live. Users write once, add media, choose a crop preset, and see side-by-side previews with character limits enforced. An AI helper suggests tighter copy; drafts save to the cloud. Audience: social managers, small businesses, creators. Use generic platform-style frames rather than copying any network's exact UI or logo.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. react-hook-form + zod for the editor, TanStack Query for drafts, Framer Motion for the hero marquee and preview transitions, react-dropzone for uploads. Supabase: Auth (email + Google, email verification), Postgres (drafts, profiles), Storage (media), Edge Function proxying an LLM for text enhancement.

### Pages & layout
1. **Landing** – nav with a script-style wordmark; centered hero on a white→sky gradient with dot grid, 60px headline, subcopy, blue CTA; horizontal auto-scroll of 9:16 phone mockups; a large rounded panel with four columns each rendering the same sample post in a different feed style; a dark navy band with 4 numbered steps; final CTA; footer.
2. **Auth**.
3. **Editor** – left: text area with per-platform counters, media dropzone, preset chips (1:1, 4:5, 16:9, 9:16), Enhance button; right: tabbed or grid previews (4 styles) with avatar, handle, truncated text with "more", media, action row.
4. **Drafts** – list with thumbnail, excerpt, updated time, delete.
5. **Profile** – display name, handle, avatar used in previews.

### Design system
`--background: #fafcfd`, `--foreground: #0b121a`, `--primary: #0077ad` (buttons, links, focus ring), `--sky: #0095d7` (gradient, icons and large decorative accents only), `--secondary: #e5f1f7`, `--accent: #d5ecf8`, `--muted: #ebf3f7`, `--border: #dbe7ed` (decorative), `--input-border: #6699b2`, `--muted-foreground: #4f5f6b`, `--on-ink-muted: #a9b8c6`, `--ink-section: #0d131b`. Fonts: Figtree or Miranda Sans (400/600) + a script face (e.g. Caveat or Mr Dafoe, with cursive fallback) for the wordmark only, never for body or UI text. Scale 13/14/16/18/24/36/60 (body 16-18px, line-height 1.6), headings -0.03em. Radius 10px, pills for chips. Shadow `0 12px 40px rgb(11 18 26 / .08)` on the preview panel. Motion 180ms ease-out; marquee 50s linear.

### Components & interactions
Navbar, GradientHero, PhoneMarquee, PreviewPanel, FeedCard (4 variants), PresetChips (selected state), MediaDropzone (idle/drag-over/uploading %/error/unsupported), CharCounter (ok ≥ 90% warn, over = red + "N over"), EnhanceButton (idle/loading/suggestion diff with Accept/Discard/error), SaveIndicator, DraftCard, StepNumber. Empty editor shows sample placeholder post.

### Data & state
`drafts` (text, preset, media refs), `media`, `profiles`. Platform limits and ratios in a typed config (e.g. 280 / 2,200 / 3,000 / 63,206). Editor state local, autosaved every 2s when dirty. Seed with fictional brand posts and generated imagery.

### Accessibility
Text area labeled with live counters announced politely (only on threshold changes). Previews are illustrative: mark action bars `aria-hidden`, give each preview a heading ("Square feed preview"). Uploaded media requires alt text input which also shows in previews. Marquee pauses on hover and under reduced motion. White text only sits on #0077ad (4.8:1+); the brighter #0095d7 is reserved for non-text accents. Verified contrast: body text #0b121a on #fafcfd = 18.2:1; muted text #4f5f6b on #fafcfd = 6.4:1; white #ffffff on #0077ad = 4.9:1; chip text #0b121a on #d5ecf8 = 15.4:1; white text #ffffff on #0d131b = 18.6:1.

### Security
RLS owner-only on `drafts`, `media`, `profiles`. Storage private, per-user folder; images (jpeg/png/webp) ≤ 10 MB, video (mp4/webm) ≤ 100 MB, validated client and via policy. Enhance Edge Function holds the model key, validates input length with zod, rate limits per user, and returns plain text (render as text, never HTML). No posting tokens stored.

### Performance & SEO
Lazy-load marquee videos/images, use poster frames. Generate thumbnails for drafts list. Code-split editor. Meta/OG on landing. Lighthouse 90+.

### Guardrails
- No real network logos or trademarks; neutral "Feed A–D" styling or generic icons.
- Placeholder people and images only; no testimonials shown as real.
- Delete media from storage when a draft is deleted.
- Typed small components, no `any`, visible errors.
- Done when: typing updates all four previews instantly, presets re-crop media, counters flag overflow per platform, enhance returns a suggestion that can be accepted, and a draft reloads intact after sign-out/in.

Open the builderAll templatesThis palette on its own