Pixel Perfect Design System in Claude Design
👉 Design tokens file (full version): https://chyrkov.lemonsqueezy.com/chec... (Use FANS10 for 10% off)
💌 Need help? Or join my newsletter and learn more: https://sergeichyrkov.com/learn
More videos on the topic:
• There's a Better Way Than Figma MCP — Export designs from Claude Code to Figma using html.to.design plugin
• Claude + Figma = Design System Components — Claude + Figma = Design System Components
• Figma Variables Explained! Build a Scalabl... — Figma Variables Explained! Build a Scalable Design System Step by Step
Stop letting AI invent your design system — give it one instead.
In this video, I show you how to export your Figma design tokens as a JSON file and feed them directly into Claude Design, so your AI-generated screens use the exact spacing, colors, corner radii, and typography from your real design system — no cleanup required.
If you've ever opened an AI-generated Figma file and found hundreds of random variables, inconsistent spacing, and styles that look fine at first glance but fall apart on inspection, this video is for you. The fix is simpler than you think.
In this video:
✅ Why AI generates messy, inconsistent design tokens (and it's not the tool's fault)
✅ How to export your Figma variables as JSON (base, aliases, typography)
✅ How to merge multiple JSON collections into one design-system.json using Claude
✅ How to prompt Claude Design to use only your design tokens
✅ A live walkthrough comparing the results — pixel-perfect spacing, correct radii, and consistent styles
______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — / sergeichyrkov
▸ Instagram — / chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — / sergeichyrkov
______________________________
Other Useful stuff:
👉 Build websites in minutes with Framer — https://framer.link/chyrkov
👉 Record your screen like a Pro — https://screenstudio.lemonsqueezy.com...
👉 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referra...
👉 Cursor (get 50% off first month on all plans) — https://cursor.com/referral?code=MTHG...
______________________________
📝 Chapters:
0:00 — introduction. The problem: AI-generated design token chaos
1:28 – Revisiting the messy variables from the last video
2:21 – The design tokens template file explained
4:42 – Exporting Figma variables as JSON (base, aliases, typography)
5:30 – Merging JSON collections into one design-system.json using Claude
6:38 – Loading the design system file into Claude Design
6:57 – Writing the prompt (the key instruction to include)
7:36 – Reviewing the result: colors, spacing, typography
9:09 – Inspecting specific elements (buttons, headings, borders, avatars)
10:35 – Wrap-up & key takeaway
______________________________
😍 Monetarily Supporting The Channel:
If you like what I do and wish to support the channel monetarily, you can donate me with some coffee here: https://www.buymeacoffee.com/sergeich...
This is appreciated and helps the channel, but please don't feel that it is necessary to enjoy my content.
______________________________
📃 Disclaimer:
Some of the links in my video descriptions are affiliate links, which means at no extra cost to you, I will make a small commission if you click them and make a qualifying purchase.
______________________________
#Figma #Claude #ClaudeDesign #designsystems #figmatutorial #webdesign