Design System Starter for Claude Wireframing

A 12-file Obsidian vault template that gives Claude the context it needs to generate wireframes that match your product.

Quick Start

1. Download this folder and open it as a vault in Obsidian
2. Open Claude Desktop in Cowork mode and connect the vault folder
3. Paste this prompt:

I want to build a design system vault for wireframing. My product is at
https://your-app-url.com/

Go through every main screen and tab in Chrome. For each screen:
1. Screenshot it
2. Use JavaScript to extract all computed styles (getComputedStyle),
   CSS variables, and canvas pixel colors (getImageData for canvas elements)
3. Document every UI component as a separate .md file in this vault
4. Use [[wikilinks]] between related components
5. Include exact hex colors, px dimensions, font sizes/weights in a
   ## Visual Specs section per component
6. Fill in the placeholder values in Colors.md, Typography.md, Spacing.md,
   Borders and Radii.md, Shadows.md, Layout.md with real extracted values
7. Update DESIGN.md with real tokens in the YAML and real rationale in the prose
8. Update Index.md with every file you create

Start with the main navigation, then work through each section.

4. Review the generated files in Obsidian's graph view (Cmd+G)
5. Ask Claude to wireframe new features using the vault as reference

What's Inside

File	Purpose
DESIGN.md	Brand summary with YAML tokens and rationale — the quick-context layer
CLAUDE.md	Instructions for Claude: read order, rules, CSS cache
Index.md	Table of contents for the vault
Colors.md	Color tokens (backgrounds, accents, text, borders)
Typography.md	Font stack, size scale, weights
Spacing.md	Spacing scale and component padding
Borders and Radii.md	Border colors and radius scale
Shadows.md	Shadow tokens
Layout.md	Panel widths, heights, grid dimensions
Example Component.md	Copy-paste template for new components
Pattern — Dropdown.md	Dropdown behavior pattern
Pattern — Table Selection.md	Row selection pattern

How It Works

Claude reads CLAUDE.md and DESIGN.md at the start of every session, getting your core tokens immediately. It loads component files lazily — only when needed. The vault compounds over time as you document more components.

For the full methodology, see the companion article: Wireframing Your Own Product with Claude

Adding Design Rationale

The vault works best when it captures not just what the design looks like but why. If you have recorded design meetings (Granola, Fireflies, Otter, Zoom AI summaries), ask Claude to:

Query my recent design meetings from the past 30 days and extract every
design decision and its rationale. Update DESIGN.md with real quotes
cited by meeting date.

Credits

This approach combines ideas from:

• Your Design System Is Useless to AI — Rounak Sengupta
• What is DESIGN.md? — getdesign.md / Google Stitch
• LLM Wiki — Andrej Karpathy