Direct answer
Better Design uses shadcn's registry and editable components, then adds design-system context, agent guidance, and review.
One workflow, three layers
Editable component source and distribution
Registry definitions and installed files
Design-system context, agent guidance, and review rules
MCP guidance and the selected system
Production tokens, components, behavior, tests, and history
The code the team owns
Three layers from source to interface
The project-owned component source stays intact while design guidance helps the coding agent compose it into a reviewed interface.
- Owned components: Keep editable shadcn-compatible source in the repository.
- Design guidance: Add the visual, UX, and review rules for the selected system.
- Agent implementation: Compose the owned source under those constraints.
Start with shadcn components
- Keep the shadcn-compatible component source already in the repository.
- Preserve established tokens, variants, behavior, and accessibility decisions.
- Install only the registry components the product needs.
- Compose existing primitives before creating duplicate components.
Add Better Design guidance
- Select or create a coherent visual system for the agent to follow.
- Load relevant UI and UX principles before implementation.
- Give the agent retrievable rules for using the existing component source.
- Review rendered states for comprehension, interaction quality, and visual consistency.
Keep the source owned by the project
Better Design uses the shadcn registry format to install editable source into a project. The result remains local code that the developer and coding agent can inspect, change, and compose.
shadcn provides the registry and editable-component model. Better Design supplies design-system context and agent guidance around the source the team owns.
Steal this workflow
Run this guide in your own assistant. The prompt carries the guide link and the workflow summary, so the assistant can adapt it to your project.
Read the guide "Using Better Design with shadcn/ui" at https://better-design.com/guides/better-design-with-shadcn-ui and help me apply it to my project.
Better Design uses shadcn's registry and editable components, then adds design-system context, agent guidance, and review.
Start by asking what I am building and which tools I use. Then walk me through the workflow step by step, adapted to my answers.Claude and ChatGPT open with the prompt filled in. Gemini copies the prompt to your clipboard first, so paste it when the app opens.
Questions
How does Better Design use shadcn/ui?
Better Design uses the shadcn registry format and editable-component model, then adds design-system context, agent guidance, and review rules.
Do Better Design components remain editable?
Yes. Registry components are installed as source code in the project, so the team can inspect and customize them.
Can a project keep its existing shadcn components?
Yes. For an established product, the safest path is to preserve existing components and tokens, then use Better Design guidance to extend the same system.