What is the Design System Skill?
The Design System Skill scaffolds a complete, opinionated design system directly into your codebase — with locked-in defaults you can edit afterward, not a barrage of upfront decisions.
You walk away with three things:
- A live reference page that previews and documents every primitive in light + dark mode.
- A small set of reusable components that the rest of the app imports.
- A managed block in
AGENTS.md/CLAUDE.mdthat tells future agent sessions to defer to the design system instead of inventing new UI from scratch.
Requirements
The skill has two hard requirements:
- React on the frontend.
- Tailwind CSS v4 or later.
Installation
The Design System Skill ships in the open-source bm-skills plugin marketplace. To install:
/plugin marketplace add buildermethods/bm-skills/plugin install bm-design-systemThen run /bm-design-system, or just ask your agent to set up a design system — the skill auto-triggers.
Works with any React codebase
The skill detects your framework and writes to the right paths for it — Vite, Next.js (app or pages router), Inertia, react-on-rails, or a custom setup. As long as you’re on React + Tailwind v4, the workflow is the same.
Any agent
The Claude Code plugin install above is the easiest route, but the skill itself is just markdown — not tied to any one tool. If you’re using Codex, Antigravity, Cursor, or another agentic tool, download the bm-design-system folder from the bm-skills repo and install it as a custom skill, command, or rule per your tool’s convention.
Pre-installed in Build New
If you’re starting a new project, Build New — my Rails + React starter template — ships with the design system already wired in. You don’t need to run this skill on a Build New project to get it; it’s already there.
Concepts
The skill installs everything below as a connected system — tokens, components, and the agent rules to keep them in use. Each concept maps to a section of the live reference page in your app.
Branding
The visual identity layer — your color palette and type system. Tokens come pre-configured in light + dark pairs (page, surface, ink, accent, signal, etc.), with sensible defaults you can edit in the scaffolded stylesheet whenever you’re ready. This is what makes everything else feel cohesive.
Structure
The repeatable scaffolding that frames every screen — shells, main navigation, sub-navigation, page headers, body content patterns, and footers. These are the building blocks your agent reaches for when laying out a new page so it doesn’t reinvent the structure each time.
Elements
The interactive UI primitives — buttons, forms, badges, listings, modals, dropdowns, callouts, and iconography. These are the actual API the rest of your app imports.
Base styles
The bare HTML defaults — h1–h6, p, ul, a, blockquote, hr, and friends. Styled at the @layer base level so writing clean markup just works without a stack of utility classes every time.
Agent training
The skill appends a managed block to your AGENTS.md (or CLAUDE.md) that tells future agent sessions how to use the design system — read the reference page first, prefer documented primitives over ad-hoc utility stacks, never write raw hex colors or off-system fonts, and check both light and dark mode before declaring done.
Before adding the block, the skill scans the file for any pre-existing UI / styling directives that would conflict and either removes or rewrites them — surfacing anything ambiguous to you in chat first.
Customizing
Customizing is the same flow as building anything else: describe what you want and let your agent do it. Tweak a color, swap a font, change a button’s default radius, add a new variant to a component, or introduce a brand new element — just prompt your agent. The agent instructions installed in the previous step keep additions consistent with the rest of the system instead of drifting.
Should you use it?
The Design System Skill is a strong fit for some builds and the wrong shape for others. Here’s when it earns its place — and when you’re better off skipping it or borrowing the underlying idea.
When to reach for it
The Design System Skill earns its place at the start of a build — when the codebase is still new and you haven’t accumulated much UI yet. It establishes the patterns up front so your agent stops inventing buttons, cards, and spacing every session, and gives you a single page that catalogs everything in use.
When to skip it
Skip it if:
- You’re not on React + Tailwind v4 (it’s a hard requirement).
- Your codebase already has a lot of UI — retrofitting a full design system after the fact is more rewrite than establishment.
- You already have a design system you’re happy with; borrow the underlying idea (a single page that catalogs your tokens and components, plus agent rules) without adopting the full skill.
Next steps
Stay updated on Design System
Get notified of major new releases and updates to Design System.