design.how vs shadcn presets

A shadcn preset restyles shadcn/ui's own components: it packs a style, base color, theme, fonts, radius and icon library into one short code. A design.how system replaces the components with its own and adds blocks, a skill and a lint for one kind of product. Use a preset to give shadcn/ui your look; use a design.how system when you want an agent to build one kind of product to fixed rules.

Both go through the shadcn CLI and the registry format, so the install feels the same. Both moved toward agents in 2026: shadcn shipped its own agent skill with CLI v4 in March, preset commands meant for handing a setup to a coding agent in April, and @shadcn/lint in September, which it describes as rules "that agents can verify". If you only need shadcn/ui with consistent tokens, that set covers it.

A preset is a choice from fixed lists. It can't hold an arbitrary hex value or a font outside its list, and it says nothing about layout or behaviour. It changes how the same components look.

A design.how system starts from a product. Quartz is for AI agents and developer tools, so it ships components such as Message, Conversation, Response, Reasoning, and blocks for screens such as tool approval and API keys. Its rules go past values: one primary action per view, no status dots, no colored bar on one edge. Its lint enforces them, and every docs page has an agent view.

• Use a preset when you already build on shadcn/ui and want it in your brand's colors, fonts and radius, and you will make the product decisions yourself.
• Use a design.how system when you are building one of the products it was made for and want the agent to make those decisions the same way on every screen.
• Use neither when your team has its own design system. Make that one agent-ready with build-design-system.