You don't need to know what a CSS variable is to use Matchkit. You don't need to understand design tokens or component libraries. You just need to know what you want your product to feel like.
This guide is for non-technical founders, marketers, and product people who are building with AI tools like Claude Code and Cursor. In 6 steps, you'll have a design system that makes everything your AI builds look intentional.
Step 1: Open the Configurator
Go to https://matchkit.io/configure.
That's it. You don't need to create an account yet. The configurator is visual and free to explore.
When the page loads, you'll see a live preview on the right and four large cards on the left: Clarity, Soft, Glass, and Brutal. These are design presets. Think of them like Instagram filters for your entire app.
Each preset has a different personality, and you can tweak any of them to match your vibe.
Step 2: Pick a Starting Point (Presets Explained in Plain English)
Let's say you're building a project management tool. Here's how to think about each preset:
Clarity is sharp and structured. It's got clean corners, organized spacing, and a professional feel. It looks like enterprise software, but not boring. Use this if you want your app to feel authoritative and organized.
Soft is rounded and warm. It's got smooth corners, generous breathing room, and a friendly feel. It looks approachable and modern. Use this if you want your product to feel welcoming and consumer-focused.
Glass is translucent and modern. It's got frosted glass effects, depth, and a contemporary vibe. It looks creative and trendy. Use this if you're building a creative tool or something that needs to feel cutting-edge.
Brutal is bold and angular. It's got sharp corners, high contrast, and an edgy feel. It looks rebellious and energetic. Use this if you're building something for gaming, music, or high-energy niches.
For a project management tool, Clarity is a natural fit. Click the Clarity card.
The preview on the right updates to show Clarity's style. You're seeing example buttons, cards, forms, and layouts in this style.
Step 3: Adjust the Sliders
Now you see 11 sliders. Don't worry about the names right now. Just think of them as adjustments to the base preset.
Here's what each slider does in plain language:
Radius: How rounded are corners? Slide left for sharp corners, right for rounded corners. You already picked a preset, so this fine-tunes it.
Button-style: How should buttons look? Solid (filled) vs. outlined vs. ghost (text-only). Stick with what the preset suggests unless you have a strong preference.
Element-separation: How much space between elements? Slide right if your UI feels cramped, left if it feels too spread out.
Spacing-density: How packed is your layout? Left = spacious and airy, right = compact and dense. Think about whether your users are on mobile (more space) or desktop (can be denser).
Shadow-style: How prominent are shadows? Left = subtle shadows (modern flat design), right = strong shadows (depth). This affects how 3D your UI feels.
Color-temp: Warm vs. cool? Slide left for warm (oranges, reds, yellows), right for cool (blues, purples). This sets the emotional tone.
Color-saturation: Muted vs. vibrant? Slide left for muted, earthy colors (calming), right for bright, saturated colors (energetic).
Font-personality: Geometric vs. serif? Geometric fonts feel modern and clean, serif fonts feel classic and formal. Stick with geometric unless you're building something that needs a traditional look.
Font-weight-bias: How bold are your text and labels? Light and elegant vs. bold and heavy.
Motion-speed: How fast are animations? Slide left for slow, graceful animations (feels deliberate), right for snappy animations (feels responsive).
Border-weight: How thick are your borders? Thin borders feel modern and minimal, thick borders feel solid and structured.
Play with the sliders. Watch the preview change in real-time. There's no wrong answer. You're building something that feels right for your product.
For a project management tool, you might:
- Keep Radius moderate (not too sharp, not too rounded)
- Keep Element-separation moderate to right (so projects and tasks feel distinct)
- Set Spacing-density to the right (desktop app, can be denser)
- Keep Shadow-style subtle (modern and clean)
- Set Color-temp neutral to slightly cool (professional but not cold)
- Keep Color-saturation moderate (enough personality without being distracting)
- Keep Font-personality geometric (modern)
- Keep Font-weight-bias moderate (readable but not heavy)
- Set Motion-speed moderate (responsive but not distracting)
- Keep Border-weight moderate (visible but not heavy)
Slide each one until the preview looks right. If you hate it, reset and start over. This is exploratory.
Step 4: Pick Your Brand Color
Now you need to pick a primary brand color. This is the color that'll be used for buttons, links, highlights, and important elements throughout your app.
You'll see a color picker. Pick a color that represents your brand. If you don't have a brand color yet, stick with the default (usually a nice blue). You can always change it later.
For a project management tool, a professional blue or teal works well. For a consumer wellness app, a warm green or purple might feel better.
Once you pick a color, the preview updates. All the buttons, links, and accents now use your brand color.
If you upload your company logo (there's an option for this on Pro tier), Matchkit can extract your brand color automatically from your logo. That's the easiest path if you've got a logo.
Step 5: Connect to Your AI Tool
Now you have a few options.
If you're on the free tier: Click "Download ZIP". You'll get a ZIP file with all your design system files. Extract it into your project folder. Done. This gives you everything: components, tokens, styles, and all the files your AI tool needs. The limitation: if you change your design later, you re-download and extract.
If you're on Pro (€9/mo): Click "Connect to Project". Matchkit will ask for your project path. Give it the folder where you're building your app. Matchkit sets up a CLI sync, which means your AI tool automatically gets updates if you change your design later. Pro also includes URL extraction (paste your website URL, Matchkit scans it and builds a matching design system) and logo upload.
For most non-technical people, the free tier is a great starting point. You get everything you need to build. If you find yourself tweaking the design a lot, Pro removes the friction of re-downloading.
Step 6: Build Something and See the Results
Now you've got your design system. Time to see it in action.
Open Claude Code, Cursor, or whatever AI tool you're using. Start a new project.
Ask your AI tool to build something simple:
Build a dashboard page showing:
- Welcome message with the user's name
- Three stat cards showing key metrics
- A button to export data as CSV
Use the design system. Make it look intentional.
Your AI tool will generate a page. If everything's connected properly, you'll see:
- Colors from your brand color
- Spacing that feels consistent
- Buttons and cards styled with your preset's personality
- Typography that matches your font choices
- Overall look and feel that matches the vibe you picked
If it doesn't look right, check:
- Did you download the ZIP (free tier) or connect via CLI (Pro)?
- Is the design system in your project folder?
- Is your AI tool reading the design system? (Most AI tools have documentation for this.)
Once it's working, ask your AI tool to build more pages. Every page will use the same design system, so your whole app will look cohesive.
Try prompts like:
- "Build a settings page"
- "Build a login form"
- "Build a team members list"
- "Build an onboarding flow"
Each time, your AI will use your design system automatically. No manual styling needed.
Frequently Asked Questions
Do I need to know CSS to use Matchkit?
No. The configurator is entirely visual. You pick between options using sliders and swipe cards. Matchkit generates the CSS, design tokens, components, and AI rules file automatically. You never see or edit code unless you want to. If you do want to tweak something later, the generated files are readable and organized, but it's not required.
Which Matchkit preset should I choose?
Think about your product's personality. Clarity for clean, structured, enterprise products (think project management tools, dashboards, analytics). Soft for friendly, approachable consumer products (think wellness apps, education, social features). Glass for modern, translucent interfaces (think creative tools, design apps). Brutal for bold, angular, high-energy products (think gaming, music, content creation). Start with the closest match and adjust from there using the sliders.
Can I change my design choices after setting up Matchkit?
Yes. Go back to the Matchkit configurator anytime, adjust the sliders and color, and regenerate. If you're on the free tier, download the new ZIP and extract it again. If you're on Pro, the sync updates automatically. Existing pages won't change automatically, but any new pages your AI tool generates will follow the updated design system. To update existing pages, ask your AI tool: "Rebuild this page using the current design system."
What if I want my app to look different from these presets?
Adjust the sliders to create a custom vibe. Each slider moves on a spectrum, so you can blend elements from different presets. If you want Clarity's structure with Soft's warmth, adjust the radius and color-temp sliders. The combinations are endless. You're not locked into a preset; you're using it as a starting point.
Is Matchkit free?
Yes, the free tier gives you all themes, all components, and all design axes. You download everything as a ZIP file. That's a complete design system for any visual style. The limitation: no sync. If you update your design, you re-download. Pro (€9/mo) adds CLI sync so your AI agent pulls updates automatically, plus URL extraction for matching existing websites and logo upload for brand color extraction. Team (€29/mo) adds 5 seats and shared organization configs.
Can I use Matchkit with tools other than Claude Code and Cursor?
Yes. Matchkit generates design systems for Claude Code, Cursor, GitHub Copilot, Windsurf, and others. The generated files are standard (Tailwind CSS, React components, design tokens), so any AI tool that understands web development can use them. If your AI tool isn't in Matchkit's list, use the downloaded ZIP files directly in your prompts or project.
What happens if my AI tool generates something that doesn't match my design system?
It happens sometimes, especially early on. You can either (a) ask your AI tool to regenerate using the design system, or (b) manually edit the generated code to match. Most of the time, if your design system is set up correctly, the AI respects it. If it consistently ignores your design system, the rules file might not be in the right place. Check the setup guide for your AI tool.
Can I export my design system to other formats?
Yes. The Matchkit ZIP includes Tailwind configuration, CSS variables, React components, and design tokens. You can adapt these to other formats (CSS-in-JS, styled-components, etc.) if needed. The core tokens (colors, spacing, typography) are universal and can be moved to any system.
Do I lose my design if I upgrade from free to Pro?
No. Your design choices are saved. If you're on the free tier and decide to upgrade to Pro, your design system is preserved. You'll just get the additional features (CLI sync, URL extraction, logo upload).
Can multiple people on my team use the same Matchkit design system?
Yes. Team tier (€29/mo) gives 5 seats and shared organization configs. Everyone on the team can access the same design system and make updates. The sync keeps everyone's projects in sync with the latest design choices. Free and Pro tiers are single-user, so you'd need to share the ZIP file or regenerate for each person.