For people building with Cursor, Claude Code, v0 and Lovable

Your agent writes the code.
You bring the taste.

Keep the sites you wish you'd made. Tag what to borrow from each — this type, that palette, the way it scrolls — and snapp writes one design guide your agent actually follows.

Start saving freeSee the Mix

Free forever for bookmarking · No card required

Paste the guide intoCursorClaude Codev0LovableBolt

The Mix Pro

You can see it. Your agent can't. That's the whole problem.

Vibe coding dies at “make it look better.” You know exactly which sites you mean — you just can't type it. So don't describe. Point: pick bookmarks, tag what to borrow from each one, and snapp writes the spec.

✓
OBJEKT®work — about
GRAPHIC
MATTER
O
Objektobjekt.studio

Borrow from this site

Typography✓
Layout✓
Color
Motion & Scroll

Twelve things you can borrow from any site.

Every site is a menu, not a template. Take one dish — a typeface, a gradient, the way it scrolls — and leave the rest. snapp only pulls what you tag, so the result is yours, not a clone.

TypographyColorBackgroundLayoutSpacingComponentsDepth & ShapeAnimationMotion & ScrollImageryIconographyVibe

The output

One guide instead of forty prompts.

What comes out isn't a moodboard — it's a working document: hex values, font pairings, a spacing scale, component notes. Written for an agent, not a client. Paste it once and stop arguing with your AI about what “cleaner” means.

cursor — new chat
› Use the attached design guide.
  palette   porcelain #FBFAF7 · espresso #221C15 · mocha #8D6F4C
  type      Bricolage Grotesque display / Geist body
  shape     14px cards · pill buttons · low warm shadows
  motion    slow fade-up on scroll, 0.6s, ease-out
▊

Design guide

# Combined Design Guide: Warm Editorial

## Design Philosophy

Editorial calm on a warm paper ground. Objekt sets the voice with confident display type; Pulse lends the single loud accent; Kiln keeps every surface soft and hand-made.

## Typography

Display — Bricolage Grotesque, 600, −0.02em (Objekt)
Body — Geist, 400/500, 1.6 line-height
Data — Geist Mono, 12px, 0.14em tracking

## Color & Background

--bg#FBFAF7porcelain--ink#221C15espresso--accent#8D6F4Cmocha (Pulse)--warn#C25E6Arosewood--line#E7E1D5

Flat paper ground — no gradients, no glass. (Kiln)

## Layout & Spacing

1200px container · 4 / 8 / 12 / 20 / 32 scale · 14px card radius · pill buttons

## Components

+ Motion & Effects · Imagery & Iconography · Your Additions · What This Design Is NOT · Design Tokens

The difference

Same agent, same model. One of them read the guide.

Designing a site shouldn't take fifty rounds of prompting. Hand your agent one guide — the palette, the type, the spacing, the shapes — and it stops guessing from the first message.

Without a guide“make it look modern”
ProductPricingChangelogSign inGet started
✦ Northwind — Your AI-powered workspace copilot

Every project should ship in one sprint — not one quarter

It's 2026 — your roadmap should plan itself. Northwind reads the work, writes the plan, and keeps the team honest.

✉you@company.comGet started free →

Free for teams up to 5. No card required.

✨Plan this week's sprint✨Flag the blockers✨Sync the team✨Draft the standup✨Summarize the retro
Sprint 24 — NorthwindAuto-planned 4m ago
Now3
Billing retry queueKestrel2d left
Onboarding drop-offAnain review
Next2
Q3 roadmap draftSamMon
Funnel trackingKestrelTue
Shipped4
Auth rate limitsAnaFri
Dark modeSamThu
With your guidemidnight ledger
ProductPricingChangelogSign inGet access

Workspace copilot

Every project ships in one sprint

not one quarter.

It's 2026 — your roadmap should plan itself. Northwind reads the work, writes the plan, and keeps the team honest.

✉you@company.comGet access

Free for teams up to 5. No card required.

✦Plan this week's sprint✦Flag the blockers✦Sync the team✦Draft the standup✦Summarize the retro
Sprint 24 — NorthwindAuto-planned 4m ago
Now3
Billing retry queueKestrel2d left
Onboarding drop-offAnain review
Next2
Q3 roadmap draftSamMon
Funnel trackingKestrelTue
Shipped4
Auth rate limitsAnaFri
Dark modeSamThu

The library — free forever

And underneath it, a properly good bookmark app.

The Mix needs somewhere to keep the references, so this half had to be worth using on its own. Most bookmark tools file links away like receipts; snapp keeps them like references — full visual previews, real favicons, tags you invent yourself. Free, and it stays free.

  • Save in one click. The Chrome extension saves the page you're on — or paste a URL. Either way snapp grabs the preview, favicon, fonts and colors.
  • Organize by feel. Tags like “dark & loud” or “client-safe” are welcome here.
  • Find it in a keystroke. Type half a memory, get the site back.

Every other bookmark tool

  • https://grove.earth/
  • pulse.fm — Pulse
  • paperandtype.com/ab…
  • grove.earth/menu
  • (untitled) — 2 days ago
  • https://www.pulse.fm/re…

snapp

Slow food, grown close
G
Grovegrove.earth
PULSE
P
Pulsepulse.fm

The working flow

The way you already work, minus the part where the references get lost.

  1. 01

    Browse

    You trawl the web like always — a studio site, a competitor, that one landing page you keep reopening.

  2. 02

    Save

    One click from the extension, or paste the URL. snapp keeps the preview, the favicon, and reads the fonts and colours behind it.

  3. 03

    Borrow

    Tag what each one gets right. This one's type, that one's palette, a third one's scroll.

  4. 04

    Guide

    One spec into your agent — hex values, font stacks, spacing, motion — instead of forty prompts.

Pricing

Free to collect. Paid to compose.

A credit is one design guide — from a single site or a Mix of up to eight. Bookmarks and scans never count against it.

Free

$0 forever

 

The library, always yours.

  • Unlimited bookmarks
  • Previews, tags & instant search
  • 15 site scans a month
  • 1 design guide, to see what it does
Start free

Lite

$3.99 / month

 

For the occasional build.

  • Everything in Free
  • 10 design guides a month
  • Unlimited site scans
  • Mix up to 8 sources
Start free
Most popular

Pro

$9.99 / month

 

For shipping weekly.

  • Everything in Lite
  • 40 design guides a month
  • Unlimited site scans
  • Priority generation
Start free

From the blog

How to say what you mean to a model.

Working with agents

Writing a rules file your agent actually follows

Most CLAUDE.md and .cursorrules files get ignored by the third file. The ones that hold have a property in common, and it isn't length.

Design for builders

The twelve things worth borrowing from a website

Make it look like that fails because that is a whole site. Naming the specific part you want is the entire skill.

Design for builders

Using references without cloning

Every designer works from references. The line between borrowing and copying is real, and it's easier to stay on the right side of it than people assume.

Read the blog

Questions

Before you sign up.

Which coding tools does this work with?

Any of them. The output is a Markdown document — hex values, font stacks, spacing scale, component notes — so it pastes into Cursor, Claude Code, v0, Lovable, Bolt, or straight into a CLAUDE.md or cursorrules file.

Is this a website cloner?

No. You tag which aspects to borrow from each site — this one's typography, that one's colour, another's motion — and snapp fuses only those into one original system. Nothing is copied wholesale, and the result is a spec, not markup.

What do I get for free?

The whole library: unlimited bookmarks, visual previews, tags, search, and 15 site scans a month. It stays free. You also get one design guide so you can see what the output looks like — after that, Lite is $3.99/month for ten a month and Pro is $9.99 for forty.

How is this different from a bookmark manager?

A bookmark manager gives you the link back. snapp reads the site — its fonts, its palette, a full screenshot — and turns a set of them into something your coding agent can act on.

Do I need to know design terms?

No. You point at sites you like and tick what appeals — typography, colour, spacing, the way it scrolls. Naming the thing is snapp's job.

What does the guide actually contain?

A design philosophy, typography with real font stacks, a colour section with hex values and roles, layout and spacing, components, motion, imagery, and a design-token block — CSS variables and component snippets your agent can apply without interpreting. The whole document is the prompt: paste it in as it is.

Make it look like that.

Start saving free