The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Title:
I built a design system generator inside Figma Make. Here's the workflow.
The problem I kept running into: every new client project meant re-explaining the brand to every AI tool from scratch. Figma Make didn't know the colors. Cursor didn't know the tokens. Claude didn't know the rules. I was the shared memory — and I kept losing things.
So I built Design System Gen. Entirely inside Figma Make. Powered by Claude API.
The workflow:
Upload brand references → Claude API analyzes them across 8 dimensions (palette, mood, typography, composition, lighting, texture, motion, UI DNA) → structured data, not vibes → generates 11 files, each formatted for a specific tool in your stack.
figma-make.md → paste once, Figma Make knows your entire design system
design-system.css → all tokens as CSS custom properties
tokens.json → W3C format, imports directly into Figma Variables
starter.tsx → React starter with tokens already bound
.cursorrules → Cursor knows your system from root
Claude.md → Claude reads it automatically every session
+ 5 more for docs, LLMs, prompts, components
Every tool gets its own context file. All consistent with each other.
The part I'm most proud of: I'm a designer. I don't write code. The entire tool — UI, API integration, file generation logic — was built and shipped inside Figma Make. No external hosting. No separate codebase.
Live at: vibecodingdsgen.figma.site
Add your Claude API key and try it with your own moodboard.
#FigmaMake #DesignSystem #VibeCoding #AI #Claude #UXUI #DesignSystems #ConfigMakeathon
Woow, awesome! 😍😍😍
The depth of this project is incredible 🚀 You’ve solved a huge pain point that so many teams struggle with - keeping AI tools aligned with a single design system source of truth. Huge respect for this project! 🐐
As someone who constantly jumps between Figma, Claude, ChatGPT, Cursor, Lovable, and other AI tools, this problem feels very familiar 😅
The tools are getting smarter, but keeping context consistent is still surprisingly manual. Love seeing people tackle that gap.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
I’ve created a Local Secret project to share local places with everybody else, hidden jams that you can find only in there.
I used Claude to brainstorm ideas, prompts, tools to use before jumping into Figma. And I used free plan for it.
After above, I’ve prepared 9 prompts that should give me the final result in #Figmamake but in reality it took me 72 prompts and almost 13,000 tokens for AI.
I’ve also connected Supabase for backend memory and Github for saving the code. It’s incredible what you can do!
With next iteration, I’ll fix the uploading of photos, however your secrets can be already shared with everybody.
Link is here
for limited time while this competition is on 🫶 #ConfigMakeathon and @figma
also you can check the file how it was created 😜 https://www.figma.com/make/31kRzc6pePdxdoTaRi0OdS/Local-Secret?t=X8Zuoi6Gh7Pvn8t4-1
I wanted to share in community but because it’s connected to Supabase, it’s not possible, so just a link for you to the file.
you can also find my app for freelancers on App Store called stePlan 🤘 Thank you for being an awesome community!
The simplicity here is what makes it powerful. Clean work.
Most AI products show you results.
I wanted to show you the process.
So I built MIRROR — a cinematic AI surveillance interface designed entirely in Figma Make.
Instead of static sections and generic cards, every interaction reveals how the system thinks:
• Real-time identity analysis
• Object detection overlays
• Behavioral tracking
• Detection systems and capabilities
• Live subject profiling
• Technical specifications
• Interactive data visualizations
• Hover states, reveals, and system reactions
The goal wasn't to design another dashboard.
The goal was to create an experience that feels like you're inside a classified intelligence system.
Every screen was designed to feel alive.
Every section responds.
Every interaction reveals something new.
Built with Figma Make as part of the Config Makeathon.
Would love to hear what feature or interaction you'd add next.
The level of detail in this is insane. Every section feels like it belongs to the same universe.
Rich & Detailed all day!
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?