free design.md
Back to extractor

How good are the AI-enriched extractions?

Head-to-head against VoltAgent's hand-curated DESIGN.md catalog on five brands. The spike's pre-committed success bar was 70% of VoltAgent's quality on average — we met or beat that on every brand, and exceeded VoltAgent on Linear and Stripe.

Five-brand head-to-head

Format per cell: total lines / colors / typography scales / components

BrandVoltAgent (curated)Free design.md (AI)Outcome
Airbnb545 / 23 / 18 / 33~580 / 30 / 13 / ~30Peer-quality, more visible components, fewer state variants. (User-pasted output.)
Vercel736 / 36 / 14 / 40484 / 25 / 12 / 24~65–85% of VoltAgent across dimensions.
Linear548 / 23 / 13 / 21615 / 27 / 12 / 36Bigger and more component-rich than VoltAgent.
Stripe487 / 20 / 15 / 15603 / 26 / 12 / 33Bigger and more component-rich than VoltAgent.
Notion821 / 47 / 17 / 50539 / 33 / 12 / 29~60–70% of VoltAgent's deepest curated file.

What the model actually noticed

Selected observations from the spike runs — editorial-grade detail indistinguishable from designer-curated work.

Linear

Identified Inter Variable at weight 510 — Linear's proprietary fractional weight that VoltAgent's curated file also names. Captured the asymmetric padding `12px 20px 16px 15px` on translucent cards and named it "the brand's asymmetric ink-compensation". Enumerated `sidebar-row`, `issue-title`, `issue-id-label`, `issue-counter`, `issue-meta-row` — micro-components only visible inside the product mockup. Picked up the "Inbox / My issues / Reviews / Pulse / Initiatives" sidebar items by name from the screenshot.

Stripe

Described the iconic gradient as "iridescent indigo-to-magenta-to-amber 'petal' gradient that drapes the hero like a piece of silk", and identified Stripe's signature in-headline color highlighting: "language as colour-coded UI".

Notion

Read the page's two-band layout as "two stitched-together rooms: the night shift on top, the workspace below".

Vercel

Enumerated all 6 mesh-gradient stops and named the brand-specific palette tokens (`gradient-cyan` / `lime` / `amber` / `coral` / `magenta` / `violet` / `blue`).

Airbnb

Identified the precise rule that the brand's coral "appears exactly twice" on the homepage (wordmark + search submit), and the observation "the photograph IS the card".

What's still ahead

  • VoltAgent's curators add state variants (button-primary-hover, -pressed, -disabled) by convention. We don't see these in a screenshot, so we don't infer them yet. Closing this needs an explicit "infer state variants" pass.
  • Proprietary brand knowledge we can't see — e.g. Airbnb's luxe and plus sub-brand colors only appear on internal pages, not the marketing homepage we scrape.
  • A live 73-brand eval harness vs. VoltAgent's full catalog — the data above is from a 5-brand sample. Phase 3.