---
id: "action-extract-design-markdown"
type: "action-item"
source_timestamps: ["00:11:28", "00:11:40"]
tags: ["competitive-analysis", "design-systems"]
related: ["concept-design-markdown", "entity-stitch"]
speakers: ["Nate B. Jones"]
action: "Use Stitch to pull a design.md file from any URL to analyze its design system."
outcome: "Obtain an agent-readable design system file based on a reference website."
sources: ["s48-markdown-design-meeting"]
sourceVaultSlug: "s48-markdown-design-meeting"
originDay: 48
---
# Extract Design Markdown from competitor sites

## Action

**Use [[entity-stitch|Stitch]] to analyze a URL of a site you admire and extract its [[concept-design-markdown|design.md]] file.**

## Outcome

Obtain an **agent-readable design system file** based on a reference website — a durable, plaintext record of typography, spacing, and color palettes you can use as inspiration or a baseline for your own agent-driven design generation.

## Rationale

Classic competitive analysis is lossy: screenshots, manual notes, bookmarked palettes. A `design.md` is **structured, agent-feedable input** to [[entity-claude-d48|Claude]] or any other coding agent. The agent can then build new features that conform to (or intentionally diverge from) the reference's visual language.

## How to Execute

1. Pick a reference site (admired competitor, design hero, your own site).
2. Feed the URL to Stitch.
3. Receive a generated `design.md`.
4. Review and edit for accuracy.
5. Feed it to your coding agent as design-system context.
6. Generate new features that adhere to that visual language.

## Strategic Use

- Onboard new product surfaces to an existing brand.
- Audit a competitor's component library.
- Stress-test your own design system by extracting it from your live site.

## Related
[[concept-design-markdown]] · [[entity-stitch]] · [[concept-command-line-design]] · [[entity-claude-d48]]