From URL to Beautiful UI in 60 Seconds — A Tutorial

What you'll do

This tutorial walks you through every step from a blank project to a working on-brand UI in under sixty seconds of human work, using whichever AI coding agent you already have. The steps are:

1. Pick a URL whose visual language you want to start from.
2. Run designdrop generate to extract a starting DESIGN.md.
3. Tweak two or three tokens by hand or in the visual editor.
4. Prompt your agent for a real component and watch the result feel on-brand.
5. Ship.

By the end of this post you'll have a workflow you can reuse on every new project. We'll use Stripe as the example URL because everyone has roughly the same intuition for what "Stripe-like" means, but the same flow works for any brand. If you don't have a target brand yet, pick one from the library — same outcome, faster.

Prerequisites

You need three things, all free:

• A project directory. Empty repo or existing app, both work.
• An AI coding agent. We'll show prompts for Cursor, Claude Code, and v0, but anything with file-aware code generation works.
• Node 18+ for the designdrop CLI.

No DesignDrop account needed for the curated library or the local CLI. The remote URL extractor needs a free signup; we'll get to that.

Step 1 — Pick the source

For this tutorial: https://stripe.com. The pattern works for any of:

• A brand you admire whose visual language you want to start from.
• A competitor whose system you want to study (and then deliberately diverge from).
• An older site of your own that's already on-brand and you want to bring its tokens into a new app.

A few rules of thumb for picking a good source URL:

• Pick the homepage or a marketing page, not a checkout flow. Marketing pages render the brand at full saturation; checkout flows are pared down and produce thin extractions.
• Pick a page with at least 200 visual elements rendered. Tools like Stripe's homepage saturate; a portfolio site with three sections will produce a thin token set.
• Avoid pages with heavy custom-font fallbacks. The extractor reads computed styles, so if the brand font hasn't loaded the result will mention the fallback.

Step 2 — Extract a starting DESIGN.md

If you're using the curated library, this is one command:

npx designdrop add stripe

That writes DESIGN.md to your project root, sourced from DesignDrop's curated Stripe-inspired tokens. Total time: roughly four seconds, plus the npx download on first run.

If you want a fresh extraction from any URL — including brands not yet in the library — the generator command is:

npx designdrop generate https://stripe.com --out DESIGN.md

The generator does five things behind the scenes:

1. Loads the URL in a headless browser via Playwright.
2. Walks the rendered DOM and samples computed styles.
3. Clusters colors by frequency and role (foreground vs background).
4. Reads typography from the most common heading + body combinations.
5. Probes radius and shadow values from cards and buttons.

The output is the same shape as the curated DESIGN.md files — the format is universal. You'll get back something like:

# DESIGN.md — stripe.com

<!-- @designdrop name=stripe.com version=1.0.0 -->

> Generated from https://stripe.com on 2026-05-09.

## Colors / Light

\`\`\`
--primary: #635BFF
--ink: #0A2540
--accent: #00D4FF
--bg: #F6F9FC
--muted: #425466
\`\`\`

Step 3 — Tweak two or three tokens

Generated systems are starting points, not finished work. Always plan to spend two minutes editing before you trust the file.

The three highest-leverage edits, in order:

1. Change --primary to your real brand color. Even if you're starting from Stripe's palette, your product probably isn't going to ship with Stripe's exact indigo. Replace it with whatever your real primary is. The agent will pick up everything downstream from this single change.
2. Set --accent deliberately. The accent is the color that shows up on highlights, lime-green badges, hover states. Don't leave it as the extracted default. Make a deliberate choice — bright and saturated for excitement, muted for restraint.
3. Decide on radius once. The extracted radius will be whatever the source brand uses. If your product wants brutalist hard corners, set everything to 0. If it wants soft and friendly, bump every radius to 12px+. This single decision changes the vibe of the entire app more than any color choice.

You can edit the file directly in your editor or open it in DesignDrop's visual editor at designdrop.app/editor for a live preview with WCAG contrast warnings. Both produce the same file.

After your edits, run npx designdrop validate DESIGN.md to confirm the file still parses and that you haven't dropped any required tokens.

Step 4 — Prompt your agent

Open your agent and prompt for any UI component you actually need. The pattern that produces the best results is:

> "Build me a [component name] for [use case]. Use the tokens from DESIGN.md."

Some agents pick up DESIGN.md automatically when it's at the project root. Others need the explicit reference. Both work.

Three concrete examples to try:

An empty-state card for an inbox feature

> Build me an empty-state card for a notifications inbox that says "All caught up." with a small illustration placeholder. Use the tokens from DESIGN.md.

The output should have your primary color on the CTA button, your radius on the card, your typography family in the heading. If it doesn't, the agent didn't read DESIGN.md — try prefixing the prompt with "First read ./DESIGN.md, then" and re-run.

A pricing table

> Build me a 3-tier pricing table with Free / Pro / Team. Highlight Pro. Use the tokens from DESIGN.md.

This is the test that quickly reveals whether the system is opinionated enough. A bland-AI pricing table looks like every SaaS landing page; an on-brand one immediately reads as yours.

A toast notification system

> Build me a toast notification component with success / warning / error variants. Use the tokens from DESIGN.md.

The semantic color tokens (--success, --warning, --error) get exercised here. If your DESIGN.md doesn't have them yet, the agent will fall back to defaults — a good signal that you should add them.

Step 5 — Ship

The output of the previous step is real component code. You can paste it directly into your project. There's no DesignDrop runtime, no SDK, no font loader, no theme provider. The component uses CSS Custom Properties (or Tailwind classes if you exported the Tailwind @theme flavor) and they reference the tokens DesignDrop wrote.

If you want to share the system across a multi-app monorepo, you have two options:

• Put the DESIGN.md at the monorepo root and let agents resolve up the tree.
• Put one DESIGN.md per app and let each app diverge as it grows.

We've seen teams pick option two more often. Apps drift; the format makes the drift visible.

The 60-second recap

To prove the workflow holds, here's the same flow as a wall-clock:

00:00  npx designdrop add stripe          # 4 seconds
00:04  open DESIGN.md, change --primary    # 20 seconds
00:24  open Cursor, prompt for empty-state # 5 seconds typing
00:29  Cursor generates component          # 8 seconds
00:37  paste output into project           # 5 seconds
00:42  preview in browser                  # 5 seconds
00:47  done — on-brand UI in under a minute

The biggest variable is your typing speed. If you're slower, it's still under two minutes. If you're faster, you'll hit forty seconds.

What can go wrong

Three failure modes you'll encounter and the fix for each:

The agent ignored DESIGN.md. Easy to spot — your output has Tailwind blue and rounded-md when your tokens are forest green and 0px radius. Re-prompt with "First read ./DESIGN.md, then..." or open the agent's project context settings and add DESIGN.md to its always-include list.

The extracted file is too sparse. The source URL didn't render enough variety. Either pick a richer page or hand-edit the file to add the missing tokens. Tokens are cheap to add and the validator will tell you exactly what's missing.

The output looks on-brand but accessibility is broken. A vivid primary color often fails WCAG contrast against white backgrounds. Open DesignDrop's editor — the contrast warnings flag failing pairs immediately and suggest darker variants that pass.

What to try next

Once the basic flow works for one project, two interesting directions to explore:

Multiple themes. Add a ## Colors / Dark section to your DESIGN.md. Most agents will start producing dark-mode variants of components automatically. Test by prompting "in dark mode" or by setting data-theme="dark" on html.

Semantic colors beyond primary. Add --success, --warning, --error, --info to your DESIGN.md. Watch the agent's toast and alert components get markedly better.

Round-trip to Tailwind. designdrop add stripe --format tailwind writes a CSS file with the Tailwind v4 @theme block already populated. Drop it next to your globals.css and you have utility classes (bg-primary, text-ink) ready to use without a config file.

The full sixty-second flow is the reason DesignDrop exists. Once it clicks, you stop fighting AI defaults and start shipping at the speed AI promised.