design-systemlisted

# design-system A design system is not a folder of components. It is a set of decisions written down once so they stop being remade badly every time someone opens a file. The test of a system is not whether it exists. It is whether a new screen built by someone who has never seen the product comes out looking like it belongs. ## Engine ```bash DS=$(ls "${CLAUDE_PLUGIN_ROOT:-/nonexistent}/engine/dstack.py" "$HOME/.claude/dstack/engine/dstack.py" 2>/dev/null | head -1) python3 "$DS" "<query>" -c design-systems python3 "$DS" "<query>" -c handoff python3 "$DS" "<query>" --styles # 40 style recipes, including full dark mode formulas python3 "$DS" --audit -c design-systems ``` Read `engine/reference/system-template.md` for the output shape and `engine/reference/examples/` for two worked examples. --- ## Pick the mode - **Codebase exists, no system.** Mode A, extract. - **Codebase has a system that drifted.** Mode A, then Mode C. - **Nothing exists yet.** Mode B, define. - **System exists and works, needs theming or dark mode.** Mode D. --- # Mode A: Extract ## A1. Inventory what is actually there Count before you decide. The gap between what people think the system is and what the code contains is always larger than expected. ```bash # every hardcoded color grep -rhoE "#[0-9a-fA-F]{3,8}\b|rgba?\([^)]*\)|hsla?\([^)]*\)" src/ | sort | uniq -c | sort -rn | head -40 # every font size grep -rhoE "font-size:\s*[0-9.]+(px|rem|em)|text-\[[^]]+\]|text-(xs|sm|base|