Direct answer
Use design systems for direction, guardrails for consistency, guides for workflows, and MCP when the agent needs live context.
Choose the resource that fits the decision
Each resource answers a different question. Use the narrowest one that moves the current task forward, then combine them when the product needs a repeatable workflow.
Choose a design system
Browse complete visual systems when the product needs a recognizable point of view, shared tokens, and reusable components.
Add AI guardrails
Download project rules for Claude Code, Cursor, or Codex when an agent keeps inventing spacing, components, states, or review shortcuts.
Follow a practical guide
Use the guides for concrete questions about vibe coding, AI-native design systems, UI drift, retrofits, and visual review.
Install Better Design MCP
Connect Better Design when the coding agent should retrieve the active system, UI and UX principles, icons, and review rules inside the task.
Start from a template
Use a production-ready screen pattern when the product direction is known and the next job is assembling a credible starting point.
Build a presentation
Use the Slides workflow when the outcome is a clear narrative, evidence-led deck, or presentation system rather than product UI.
Use the resources as one workflow
The strongest workflow moves from a shared direction to durable constraints, task-specific guidance, and rendered evidence.
- Set the direction: Choose the visual system and confirm the audience, product job, and constraints before the agent styles a screen.
- Give the agent durable rules: Store approved tokens, components, behavior, states, and review steps in the repository instead of repeating them in every prompt.
- Load only the context the task needs: Retrieve the relevant UI and UX principles, then let the agent implement one observable change at a time.
- Review the rendered result: Inspect the interface at desktop and mobile widths, test the keyboard flow, and run project checks before shipping.
Questions
Where should I start?
Start with a design system if the product has no clear visual language. Start with AI guardrails if a system already exists but the coding agent does not follow it consistently.
Do I need Better Design MCP to use the guides?
No. The public guides and downloadable guardrails work on their own. The MCP lets a compatible coding agent retrieve design-system context and review guidance during implementation.
Can I keep an existing design system?
Yes. Existing tokens and components should remain the source of truth. Better Design can help an agent extract that system, extend it, and review new work against it.
Do these resources guarantee production quality?
No. They reduce avoidable inconsistency and make review more repeatable, but teams still need testing, accessibility checks, security review, and human ownership.
Sources
These public pages define the product, the downloadable rules, and the connection workflow summarized here.