Snip

Who it is for

• Marketers sharing campaign links
• Startup teams sharing docs and decks
• Creators tracking bio links
• Developers wanting a self-hosted shortener

Layout

1. Minimal top bar: wordmark left, 'Sign in' right
2. Hero on faint grid background: big title, subtitle, wide URL input with blue pill 'Shorten' button
3. Partner logo strip with invented wordmarks
4. Bright blue band with auto-cycling tabs (Shorten / Customize / Analyze) + pause, each with headline and browser-framed dashboard mock
5. Testimonial cards over landscape photos with progress pager
6. Closing CTA band and footer
7. App: links dashboard (stats, search, table), link detail (clicks chart, referrer, device), settings, redirect resolver, 404

Palette

Clean, bright, confident, fast, uncluttered. A focused SaaS utility with a crisp blue signature.

• background#ffffff
• text#0a0a0a
• primary blue#0073b8
• grid lines#eef2f6
• muted text#656c79
• input glow#cfe6f7
• input border#8c95a6

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

Figtree 600, 70px, -0.03em tracking

Body

Figtree 400 16px

Single friendly geometric sans; weight contrast only

Spacing and imagery

Centered 1100px container, airy hero, 999px pill buttons, 8px inputs with soft blue glow, 24px radius testimonial cards

Browser-framed dashboard mockups, grayscale partner wordmarks, scenic landscape photos behind testimonial quotes.

Components

• URL input + Shorten button
• Result card with copy
• Logo strip
• Auto-cycling tab showcase with pause
• Browser frame mock
• Stat cards (links, clicks, today)
• Links table with search and row actions
• Custom slug field with availability check
• Clicks over time chart
• Referrer and device breakdowns
• Testimonial photo cards with pager
• Theme switcher

Interactions

• Instant shorten with copy-to-clipboard
• Slug availability check while typing
• Showcase auto-advance with pause
• Row actions (copy, edit, delete)
• Search filtering
• Chart hover tooltips
• Claim anonymous links on sign-in
• Redirect with click logging

Data

• Link{id, user_id(nullable), slug, destination, title, created_at, claim_token}
• Click{id, link_id, clicked_at, referrer_host, device(mobile|desktop|tablet), country}
• Profile{id, display_name, theme}

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 **Snip**, a clean link shortener for teams and creators. Anyone can shorten a URL from the homepage; signed-in users choose memorable slugs, manage links in a dashboard and read simple analytics per link (clicks over time, referrers, devices). The job: share tidy links and know what happened to them.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. TanStack Query; react-hook-form + zod for shorten/edit forms; Recharts for charts; Framer Motion for the tabbed showcase; date-fns for bucketing. Supabase: Auth (email + Google), Postgres (links, clicks), Edge Function for the redirect resolver (logs click, returns 302) and for anonymous link creation with rate limits.

### Pages & layout
1. **Landing** – minimal top bar; hero on a faint square-grid background with 70px title, subtitle, a wide URL field and blue pill "Shorten" button; result appears inline with copy. Partner-style wordmark strip (use invented names). Bright blue band with tabs Shorten / Customize / Analyze auto-rotating with a pause button, each showing a headline and a browser-framed dashboard mock. Testimonial cards over landscape photos with a progress pager. Closing CTA and footer.
2. **Auth**.
3. **Dashboard** – stat cards (total links, total clicks, clicks today), search, table (title, short URL, destination, clicks, created, actions), "New link" dialog with custom slug.
4. **Link detail** – header with copy/edit, clicks-over-time area chart (7/30/90 days), referrer bar list, device donut.
5. **Settings** – profile, theme.
6. **/s/:slug resolver** and **404**.

### Design system
`--background: #ffffff`, `--foreground: #0a0a0a`, `--primary: #0073b8`, `--primary-hover: #005f99`, `--grid: #eef2f6`, `--muted-foreground: #656c79`, `--ring: #309ce1`, `--input-border: #8c95a6`. Font: Figtree 400/600. Scale 13/14/16/20/32/70 (body 16px/1.5, table text 15px minimum); display tracking -0.03em. Radius 8px inputs/cards, 24px media cards, 999px buttons. Input focus glow `0 0 0 4px rgb(0 132 209 / .15)`. Motion 200ms ease; showcase interval 6s. Dark theme with #0b0f14 base, #e6edf3 text, #9ba6b3 muted, #5cb3ff links.

### Components & interactions
ShortenForm (idle/validating/loading/success with copy/error), SlugField (available/taken/invalid), CopyButton (copied state 2s), TabShowcase (play/pause), BrowserFrame, StatCard, LinksTable (search, empty "No links yet", loading skeleton, row menu), DeleteConfirm, ClicksChart, ReferrerList, DeviceDonut, TestimonialCard, ThemeToggle.

### Data & state
`links` (slug unique, lowercase, 3–32 chars `[a-z0-9-]`), `clicks` (link_id, timestamp, referrer host, device, country). Anonymous links carry a `claim_token` in localStorage; on sign-in they are claimed. Analytics aggregated via SQL views. Seed 12 links with ~18k synthetic clicks.

### Accessibility
URL input has a visible label (can be visually subtle) and error text linked by `aria-describedby`. Copy feedback announced via live region. White text sits only on #0073b8 (buttons and the blue band, 5.0:1). Testimonial quotes over photos use a `rgb(0 0 0 / .55)` scrim. Showcase pauses on focus/hover and under reduced motion. Charts accompanied by a data table toggle. Table has proper headers and row action buttons with labels. Verified contrast: body text #0a0a0a on #ffffff = 19.8:1; muted text #656c79 on #ffffff = 5.2:1; white #ffffff on #0073b8 = 5.0:1; focus ring #309ce1 on #ffffff = 3.0:1; white quote text #ffffff on #737373 = 4.7:1.

### Security
Validate destinations with zod on client and in the Edge Function: http/https only, max length, block `javascript:`/`data:` and the shortener's own domain; optionally check against a malware/phishing list. Rate-limit anonymous creation per IP and add a honeypot. RLS: links owner-only for select/update/delete; clicks insertable only by the resolver (service role), readable by link owner. Store referrer host only and a coarse device class -- no full IPs. Reserved slugs (admin, api, s, login).

### Performance & SEO
Resolver responds from the edge with minimal work (insert click async). Landing meta/OG tags; dashboard `noindex`. Lazy-load testimonial photos. Lighthouse 95+ on landing.

### Guardrails
- Invented partner names only; no real company logos.
- Testimonials clearly illustrative.
- Minimal analytics data; no personal identifiers.
- Typed small components, no `any`, visible errors.
- Done when: an anonymous user shortens a link and it redirects, a custom slug conflict is caught, signing in claims the link, clicks appear in the chart within a minute, unsafe URLs are rejected, and other users cannot see the link's analytics.

Open the builderAll templatesThis palette on its own