Skip to content
UXClaim
Design Systems

design-engine

Stack-agnostic design system toolkit for Claude Code with auto-loaded rules, generators, and audit agents across React, Astro, SvelteKit, Obsidian, and CSS.

View source More in Design Systems

What it does

design-engine is a Claude Code plugin that enforces design consistency across projects regardless of technology stack. It auto-loads design tokens, color hierarchies, typography rules, and UI patterns whenever you work on styling or components — no manual activation required.

How it works

After running /design-init, the plugin detects your stack (React+shadcn, Astro, SvelteKit, Obsidian, or plain CSS) and bootstraps a .design-rules/ configuration. Skills automatically provide:

  • design-engine: Core tokens, color hierarchy, accessibility rules, pattern catalog
  • design-language: 69 numbered visual design rules for dashboards, KPIs, fintech, charts
  • composition-recipes: 5 page templates (SaaS, ecommerce, fintech, social, productivity)

Generators like /design-page, /design-component, and /design-pattern produce code matching your stack. Audits (/design-review, /design-a11y, /design-lint) surface violations and auto-fix mechanical issues.

Use cases

  • Maintain design consistency across multi-stack projects
  • Scaffold new pages and components in seconds
  • Audit existing code against 69 design rules and WCAG AA standards
  • Swap between 75+ brand palettes instantly with /design-skin
  • Generate microcopy and user flows aligned to design system

Who benefits

Product designers building in code, design system maintainers, full-stack teams needing design enforcement without a separate DSM tool.

Frequently asked questions

How do I install design-engine?
Run `/plugin install TimSimpsonJr/design-engine` in Claude Code, then `/design-init` in any project. The wizard detects your stack (React, Astro, SvelteKit, Obsidian, or vanilla CSS) and bootstraps a `.design-rules/config.json` file plus adapter-specific templates.
What stacks does design-engine support?
React+shadcn (with 32 components and 16 patterns), Astro, SvelteKit, Obsidian plugins, and plain HTML+CSS. All use Tailwind v4 as the token foundation, with framework-specific adapters generating code in your native syntax.
How does design-engine audit code?
/design-review runs an agent over your code against 69 design-language rules + engine prohibitions. /design-a11y checks WCAG AA (contrast, touch targets, alt text). /design-lint runs fast pattern-based checks (hardcoded colors, wrong margins). Use --fix flag to auto-apply mechanical fixes.
Can I use my own brand colors?
Yes. `/design-skin <name>` swaps palettes from 5 bundled skins (Toss, Stripe, Linear, Vercel, Notion) or 70 community brands from awesome-design-md. Edit `.design-rules/config.json` directly or use `/design-tokens update` to customize individual tokens.
What's the difference between /design-review and /design-lint?
/design-lint is fast pattern-based checking (grep for hardcoded colors, wrong utilities). /design-review runs an agent applying all 69 design rules semantically. Use lint for quick feedback during development, review for comprehensive compliance audits.
How do composition recipes work?
5 recipes (saas, ecommerce, fintech, social, productivity) provide page-shape templates. Pick one during `/design-init`, then `/design-page <name>` scaffolds pages using that recipe in your stack's syntax. Override per-page with `--recipe=<name>`.
Does design-engine work in monorepos?
v0.2.0 supports single-stack projects. Multi-stack monorepo routing is on the roadmap (filed as GitHub issues). For now, run `/design-init` per package or use plain-css adapter as a universal fallback.
Can I generate microcopy with design-engine?
Yes. `/design-copy <context>` generates UX microcopy (buttons, errors, empty states) aligned to your design system's tone. `/design-feedback <path>` adds loading, error, and empty state treatments to existing components.

Glossary

Adapter
Stack-specific code generator that translates design rules into native syntax (React JSX, Astro templates, Svelte, CSS). design-engine ships 5 adapters: react-shadcn, astro, sveltekit, obsidian-css, plain-css.
Skin
A pre-built color palette and typography set for branding. design-engine includes 5 bundled skins (Toss, Stripe, Linear, Vercel, Notion) and 70 community brands. Swap instantly with `/design-skin <name>`.
Design tokens
Reusable design values (colors, spacing, font sizes, shadows) stored as variables. design-engine manages tokens in `.design-rules/config.json` and makes them available across your stack via Tailwind utilities.
Composition recipe
Page layout template defining structure (header, sidebar, content grid, footer). 5 recipes (saas, ecommerce, fintech, social, productivity) are provided; `/design-page` uses the active recipe to scaffold new pages.
Design audit
Automated code review against design rules, accessibility standards, and UX heuristics. design-engine provides 4 audit types: /design-review (comprehensive), /design-lint (fast), /design-a11y (WCAG), /design-audit (Nielsen).

More in Design Systems

All →
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.