workflowstacks
design

brandmd: Extract Design Systems

Get a Stitch-ready DESIGN.md for your website.
58 stars5 forksJavaScriptGuide quality 8/10Updated 8/30/2026100% free · open source
What it does

Brandmd extracts any website design system into a Stitch-ready DESIGN.md, stopping Claude Code/Cursor from guessing UI

When to use it
  • •You're building a website with Claude Code/Cursor and want to define a clear design system
  • •You need to document your existing website's design system for future development
  • •You want to create a DESIGN.md file for your website to use with Stitch
Ready-to-paste prompt
npx brandmd extract https://example.com --output DESIGN.md
Heads up: Make sure you have Node.js installed and configured on your system, as brandmd is a Node.js-based tool
Saves to your device
Use with Claude
New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install
Claude Code
mkdir -p ~/.claude/skills/brandmd && curl -fsSL https://workflowstacks.com/api/skills/brandmd/claude-skill -o ~/.claude/skills/brandmd/SKILL.md
Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)
claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How brandmd: Extract Design Systems works
Codeflow
Free to inspect

Brandmd: Extract Design Systems is a medium JavaScript project (~4.9k lines across 21 code files, plus 8 test files). Setup is light: installs like a normal app. Reading the code is optional. Last commit a month ago, MIT license, has a test suite.

Size
Medium codebase
~4.9k lines · 21 code files · 41 min skim
Setup
One-command install
Installs like a normal app. Reading the code is optional.
Runs on
Node.js
No API keys detected
JavaScript 100%
Where to start reading
  1. 1
    README.md
    Start here — what it does and how to install it
  2. 2
    SKILL.md
    The instructions the AI actually follows
  3. 3
    src/cli.js
    Where the program starts running
  4. 4
    package.json
    Dependencies and the commands it exposes
  5. 5
    examples/README.md
    A worked example — copy this to get going
What's in each folder
src/Core code — the actual logic13 files
bin/Command-line entry points1 files
examples/Examples you can copy34 files
docs/Documentation12 files
scripts/Helper scripts7 files
gallery/Folder1 files
test/Tests — proof it works14 files
.github/CI / automation (GitHub Actions)3 files
READMEHas testsDocumentedCI checksExamples includedMIT licenseUpdated 1 mo ago
Quick Actions
Details
Creator
yuvrajangadsingh
Language
JavaScript
Category
design
Published
3/25/2026

Are you the creator of this tool? Claim your listing → and earn 85% of every sale.

Related skills

More design tools founders pair with this one.

design★ 389,002
openclaw: Personal AI Assistant
Get a personal AI assistant for any OS and platform, ideal for founders seeking AI-driven support.
design★ 164,771
Stable Diffusion web UI for Design
Generate images with stable-diffusion-webui, a tool.
design★ 108,368
Supabase: Dedicated Postgres DB
Get a dedicated Postgres database with Supabase.
design★ 47,098
Summer2026-Internships: Find Top Talent
Get daily updated internship postings for software engineering and more.
design★ 39,133
Drawdb
Free, simple, and intuitive online database diagram editor and SQL generator.
design★ 22,019
Airbyte: Simplify Data Movement
Get seamless data integration for your startup with Airbyte.