designseeddocs

Generator

Generating from URL

2 min read

The generator loads a URL in a real headless browser, samples the computed styles of the rendered page, clusters them into semantic tokens, and emits a DESIGN.md you can install. No design files needed, no API access to the source brand required.

How it works

  1. Capture. A headless Chromium loads the URL with a 30-second timeout. Media and font requests are blocked to keep bandwidth (and time) low.
  2. Extract. A page-side script walks up to 1500 visible elements and samples backgroundColor, color, fontFamily, borderRadius, padding, margin, and gap from each. Counts are aggregated and the top values per category are kept.
  3. Analyze. Heuristics map raw counts to semantic roles: low-luminance foreground → ink, high-luminance background → bg, the most-saturated non-greyscale color → accent, and so on. Radii and spacing are quartile-sampled from the observed values.
  4. Generate. The clustered output is validated against the DesignSystem schema and persisted as a generation_job.

A typical extraction takes 2–4 seconds end-to-end on the dev box. Real-site numbers from the bench:

| Site | Latency | |------|---------| | stripe.com | 2.28s | | vercel.com | 1.39s | | github.com | 2.01s | | airbnb.com | 2.91s |

Submit a job

Sign in to app.designdrop.app, open Generate, paste a URL, and hit Generate DESIGN.md. The progress stepper walks through Capturing → Extracting → Analyzing → Generating in real time.

When the job finishes you'll see:

  • A palette strip with the extracted brand colors.
  • A type sample using the captured font stack and base size.
  • A confidence pill (high / medium / low) based on signal coverage.
  • The full raw DesignSystem JSON in a collapsible block.

Rate limits

Per PRD §7.1:

  • Free — 3 generations per 30 days.
  • Pro — unlimited.
  • API tier — 100/month (Pro), 1,000/seat/month (Team).

Limitations

  • Auth-walled pages — the generator runs unauthenticated, so anything behind a login produces a degraded result.
  • JavaScript-heavy sites — we wait for domcontentloaded plus a 500ms settle but don't block on networkidle (it never fires on real sites). Some SPAs may capture mid-hydration.
  • Brand primary detection — the deterministic heuristic picks the most-saturated visible color, which sometimes misses the brand primary on minimalist sites. Edit the result in the visual editor when this happens.

The next iteration adds an AI synthesis layer that names tokens semantically — see the roadmap for the timeline.