← Back to blog

Setting Up Your Design System for AI — A Practical Starter Guide

Getting AI to generate UI that matches your design system takes more than a good prompt. Here's how to set up your project so AI works with your system, not against it.

Amarneethi·
Setting Up Your Design System for AI — A Practical Starter Guide

The Gap Between Prompt and Output

You've built a design system. You want AI to use it. You paste a component, write a prompt, and the output is almost right — the right structure, but the wrong tokens. Or it uses your component names but ignores your prop API. Or it generates plain HTML instead of your components.

This gap is fixable. It's a setup problem, not a model problem.

Step 1: Choose Your Interface

The right Claude interface depends on how much context you need AI to hold:

For most designers building with a design system, Claude Projects is the right starting point. You invest setup time once and benefit continuously.

Step 2: Prepare Your Design System Context

For Claude Projects, your knowledge base should include:

1. Component inventory — A list of your components with their import paths:

Button → import { Button } from '@/components/ui/Button'
Input → import { Input } from '@/components/ui/Input'
Modal → import { Modal } from '@/components/ui/Modal'

2. Key props for your most-used components — Just the essentials:

Button props: variant (primary|secondary|ghost|destructive), size (sm|md|lg), disabled, onClick

3. Design tokens — Colour palette, spacing scale, typography. If you use Tailwind, your tailwind.config values.

4. A short style guide — Two or three sentences on your design aesthetic: "Clean, minimal, high contrast. Use indigo as the primary colour. Prefer rounded-xl corners."

Step 3: Write a System Prompt

In Claude Projects, you can add a system prompt — instructions that apply to every conversation. Use it to establish defaults:

"You are a UI engineer working with our design system. Always use our existing components (listed in the knowledge base) rather than creating new ones. Use Tailwind CSS for any additional styling. When you generate code, use TypeScript. Keep components small and focused."

This eliminates a class of recurring problems — AI reaching for HTML when you want your components, or generating CSS when you use Tailwind.

Step 4: Compress What You Attach

The full source of a component is usually too long to attach efficiently. Compress it:

A compressed component reference is 5–10× smaller than the full source and contains most of what AI needs to use it correctly.

Step 5: Test With Standard Prompts

Once set up, test with a few representative tasks:

Review whether AI is using your components, your tokens, and your patterns. Adjust your knowledge base and system prompt based on what's missing or wrong.

The Ongoing Practice

A well-configured AI setup isn't a one-time task. As your design system evolves:

Treat the Claude Projects knowledge base as living documentation — maintained for the AI, but useful as a human reference too.

What You Get

A well-set-up AI environment produces output that:

The investment in setup is paid back within the first few sessions. After that, every AI-assisted design session starts from a much better baseline.