Skip to content
.mdDesign.md Store
The difference

Same prompt. Three context files. Three very different dashboards.

A design.md file is only as good as its detail. We gave Claude the identical prompt three times — the only variable was the design context sitting in the project root. Here is what came back, unedited.

Test run: June 2026

Methodology

One prompt, three runs, fresh context each time. Run 1 got the 450-line Supabase-inspired design.md from our library. Run 2 got a deliberately minimal 35-line version — the kind of quick writeup most projects have. Run 3 got no design file at all. Outputs were not edited afterward.

Build a single-file static HTML analytics dashboard for a Postgres database platform. It must include: a left sidebar with navigation, a top bar with the project name and a primary action button ("New query"), four stat cards (Database size, Active connections, Queries / sec, Cache hit rate), a table of the five most recent queries (query, duration, rows, status), and a usage chart placeholder area. Use only inline CSS in a <style> tag — no external libraries, no JavaScript. Follow the design context provided with this prompt; if none is provided, use your own judgment.
Detailed design.md450-line file from our library
Dashboard generated with detailed design.md
Exact brand surfaces (#121212 canvas, #1F1F1F cards) and hairline borders
Primary action uses the spec'd green-on-deep-green pairing, 6px radius
Monospaced uppercase labels and restrained accent use — green only where the spec says so
Minimal design.md35-line file — the typical quick writeup
Dashboard generated with minimal design.md
Right general direction (dark + green), but surfaces drift blue-gray
Accent color is overused: headings, stat values and chart all glow green
Radii, shadows and type scale are guessed — bubbly buttons, glow shadows
No design.mdSame prompt, zero design context
Dashboard generated with no design.md
Generic admin-template defaults: white canvas, blue sidebar
Stock blue primary button, soft card shadows
Nothing connects the result to the actual brand

The context behind each result

Detailed design.mdMinimal design.mdNo design.md
Lines45035
File size22.9 KB0.7 KB
Color tokens260
Typography roles130
Component tokens150
Spacing tokens60

Token counts are machine-readable tokens computed from the actual context files used in the test. The minimal file mentions colors and components in prose, but defines zero structured tokens — which is exactly why the AI had to guess. The frozen files and the screenshot script live in the project so the run can be reproduced.

Detail is the difference.

Every file in our library is written at the depth of the first column — exact tokens, full component specs, usage rules an AI can actually follow.

All design specs are independent, unofficial works inspired by publicly accessible websites. Not affiliated with or endorsed by any referenced brand. Screenshots shown for reference purposes only.