·8 min read

Turn a URL into a Stitch Design System

Turn any reference URL into a design system: a reproducible workflow, voice-edit prompt formulas, design.md export, and when to choose it over Brand Kit.

S
Stitch Prompt Team
Content Team
StitchUI DesignTutorial

The usual starting point for AI-generated interfaces is a sentence: "modern, clean, generous whitespace". The problem is that every person reads those adjectives differently, and the output often feels almost right but never quite.

Try the opposite approach: instead of describing a style, reference one. Hand Stitch the URL of a site you admire, and it extracts the design system behind it — colors, type, corner radii, component style — producing a spec you can iterate on and export for reuse.

This is the "reverse workflow" this article covers: from a URL to a design system, to design.md, and finally into your own projects.

Note: URL extraction is community-verified; the official feature boundary is not fully documented. Test extraction quality on complex sites before relying on it.

1. From "Describing a Style" to "Referencing a Style"

Adjectives are fuzzy; references are concrete. When you say "bold and modern", the model guesses among countless options. When you give it a specific site, all it has to do is read and translate.

Three practical benefits follow:

  • Cheaper alignment: "make it feel like that site" beats "make it more premium" in any team discussion.
  • Stronger consistency: multiple pages start from one extracted system instead of inventing their own.
  • Something to keep: results export to design.md and become a reusable asset across projects.

2. Hands On: Extracting a Design System from a URL (fireship.dev)

Steps

  1. Pick a reference site (we use fireship.dev, a well-known developer site, as the example).
  2. Feed the URL to Stitch as the starting point for design system extraction.
  3. Wait for Stitch to output the full design system definition.
  4. Review the extracted colors, typography, radii, and component styles.
  5. Continue iterating in the generated project, or export design.md for the record.

What comes back

  • A color system: primary, background, text, and border hierarchy.
  • Typography: heading and body pairings plus scale.
  • Shape language: corner radii, button and card forms.
  • Component style: visual rules for navigation, cards, and forms.

One easily missed detail: the output is interactive components, not a static image. The extracted style is immediately editable rather than frozen in a screenshot.

3. Voice Editing with the Right Formula: Function + Vibe Anchor

When you keep editing by voice or chat, structure every request with a simple formula:

Function + vibe anchor (a known product as reference).

It beats stacking adjectives. Three examples you can reuse directly:

  • "Build a chat feature that feels like a bold, modern social product."
  • "Keep the current design system and add a settings page with account, notifications, and privacy groups."
  • "Make the homepage feel like a developer-tools site: denser information, restrained color."

The extraction instruction itself can be a formula too:

Starting from the design system of [reference URL], generate a reusable design spec
covering color, typography, spacing, radii, and component rules, keeping every page consistent.

4. Exporting design.md for Cross-Project Reuse

Extraction is step one; reuse is the goal:

  1. Export the extracted result as design.md.
  2. Check token completeness (color, typography, spacing, radii).
  3. Have your coding agent reference the file in new projects — for example, declare "read DESIGN.md before any UI work" in AGENTS.md.
  4. Lint the spec regularly so it does not drift.

This flow is fully compatible with the checks described in DESIGN.md in CI: extract, freeze, then hold the line with tooling.

5. How It Splits Work with Brand Kit: Forward vs Reverse

Stitch supports two ways into a design system. They run in opposite directions and fit different situations:

WorkflowStarting pointGood fitPoor fit
Brand Kit (forward)Your own brand assets, logo, product shotsYou have brand assets and need on-brand interfacesBrand visuals are not defined yet
URL extraction (reverse)A reference site's design systemQuickly aligning with a proven style or exploring directionsYou need a fully original visual identity

A practical rule: use the reverse workflow to find direction early, then switch to the forward workflow once the product enters branding.

6. Boundaries: Style Reference Is Not Copying

Extracting a design system extracts rules, not artwork. Mind a few boundaries:

  • Do not copy the reference site's specific layouts or assets.
  • Adjust extracted colors and type enough to create your own identity.
  • In commercial work, make sure brand elements (logos, illustrations) are not reused.
  • Run an "AI-smell" self-check on the output: type hierarchy, mechanical spacing, missing component states.

7. FAQ

Q1: Can any website be extracted?

Publicly accessible pages can generally be tried; heavily interactive or complex sites vary widely. Test on a small scale before adopting it in a real production flow.

Q2: Can the extracted design system be used commercially?

You get style rules that can inform your own design; specific layouts, assets, and brand elements still need to be original. Avoid direct copying.

Q3: After extraction, how do I keep multiple pages consistent?

Export the result to design.md and freeze it, so page generation and code implementation reference one spec. Lint it regularly.

8. Summary

The reverse workflow solves the "zero to one" style problem: one URL replaces a paragraph of adjectives, and a design system replaces a one-off visual attempt. Chain it with design.md and your agent workflow, and you get a complete loop you can reuse.

Keep reading:

← ← Back to Blog