How devabas/design-system works
Agent-Ready Design System is a Claude Code plugin for setting up, auditing, and maintaining a project’s token-based design system, plus installing enforcement gates. The main workflow is a user choosing a command: setup provides a starter token architecture; audit inventories and checks the project, then produces a report; fix addresses selected findings, re-audits, and compares results; harness installs checks and hooks. The graph includes documented command capabilities and sampled script dependencies; internal wiring for unsampled skill instructions is not inferred.
Main entry points: check-tokens.mjs Token checks · audit/SKILL.md Audit command · harness/SKILL.md Harness command · run-gates.mjs Gate runner
Components 21
Agent workflows
- Setup command
plugins/design-system/skills/setup/SKILL.md - Starter architecture
plugins/design-system/assets/setup - Audit command
plugins/design-system/skills/audit/SKILL.md - Fix command
plugins/design-system/skills/fix/SKILL.md - Harness command
plugins/design-system/skills/harness/SKILL.md
Audit and reports
- Project inventory
plugins/design-system/scripts/scan.mjs - Report rendering
plugins/design-system/scripts/render-report.mjs - Report comparison
plugins/design-system/scripts/compare-reports.mjs
Token validation
- Token checks
plugins/design-system/scripts/check-tokens.mjs - Rules contract
plugins/design-system/scripts/check-rules-contract.mjs - DTCG resolver
plugins/design-system/scripts/lib/dtcg.mjs - Color calculations
plugins/design-system/scripts/lib/color.mjs - Project settings
plugins/design-system/scripts/lib/project-modules.mjs - Project token files
plugins/design-system/assets/setup/design-system/tokens
Enforcement gates
- Gate runner
plugins/design-system/assets/harness/core/run-gates.mjs - Gate configuration
plugins/design-system/assets/harness/core/design-system.yml - Claude Code hooks
plugins/design-system/assets/harness/adapters/claude-code - Search boundary hook
plugins/design-system/scripts/search-scope.mjs - Generated output check
plugins/design-system/scripts/profiles/terrazzo-tailwind-v4/check-generated.mjs
Other components
- Project maintainer
- Web project
Connections 28
- Project maintainer → Setup command: chooses setup
- Project maintainer → Audit command: requests audit
- Project maintainer → Fix command: requests fixes
- Project maintainer → Harness command: requests gates
- Setup command → Starter architecture: provides starter
- Audit command → Project inventory: inventories project
- Project inventory → Web project: reads files
- Audit command → Token checks: checks tokens
- Audit command → Rules contract: checks rules
- Audit command → Report rendering: writes report
- Fix command → Report comparison: compares audits
- Report comparison → Report rendering: validates reports
- Rules contract → Token checks: reads token model
- Token checks → DTCG resolver: loads and resolves
- Token checks → Color calculations: checks derived colors
- Token checks → Project settings: loads settings
- Rules contract → Project settings: loads settings
- DTCG resolver → Project token files: reads token sources
- Harness command → Gate runner: installs gates
- Harness command → Claude Code hooks: installs hooks
- Harness command → Gate configuration: configures checks
- Gate runner → Token checks: runs check
- Gate runner → Rules contract: runs check
- Gate runner → Generated output check: runs profile check
- Claude Code hooks → Search boundary hook: dispatches search guard
- Search boundary hook → Web project: constrains searches
- Generated output check → Project settings: reads output settings
- Generated output check → Web project: checks generated files