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
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 built a multiplayer surrealist drawing game with Figma Make.
The Exquisite Corpse is a 100-year-old game where each player draws their section of a figure in secret. Nobody sees the full picture until the reveal. Head, middle, legs. Strangers become collaborators. The result is always unexpected.
I rebuilt it for the web real-time, multiplayer, ready to play in 30 seconds.
Here's how Figma Make changed my process:
I started with a design prototype in Figma. Then I prompted Figma Make to turn it into a working codebase and it did. What used to take days of scaffolding took hours. From there I took it local, pushed it further: Firebase for real-time multiplayer sync, Lottie animations in the background, a growing gallery that collects every creature players create together.
The workflow felt like having a co-pilot who never gets tired. Figma Make handled the heavy lifting. I handled the craft.
What I'm proud of:
→ Players draw on a shared canvas in real-time, each seeing only a sliver of the previous section (the classic "fold" technique)
→ A gallery that grows with every game played a living archive of collaborative weirdness
→ Reference markers guide proportions so the final reveal actually connects
What I still want to polish:
The bones are there. The fun is real. But I need your feedback to make it better. Try it, break it, tell me where you got lost.
👉 Play it here: mock-amity-90210032.figma.site
Create a room → send the code to a friend → draw your section without peeking → reveal.
Drop your creature in the comments.
Obsesseddd
I built Nexora AI for the Config Makeathon.
It’s an AI fintech landing page concept designed around one idea:
What if your money could think before it moves?
Nexora AI is a futuristic financial command center that helps users understand cashflow, detect risk, forecast spending, and make smarter financial decisions through AI.
For the visual direction, I wanted it to feel less like a normal SaaS dashboard and more like a premium finance cockpit. Dark cinematic UI, glowing dashboard cards, AI insight panels, predictive analytics, and a full landing page experience built with Figma Make.
This project was a fun challenge because I focused on creating something that feels strategic, interactive, and visually sharp while still being useful as a real fintech product concept.
Live demo: https://karate-stung-91133916.figma.site/
Working Figma Make file: https://www.figma.com/make/fk8AU6jHScqpxHwFMQHDwF/Nexora-AI?t=6KOjQ1tW6ZFsV7Og-1
Would love to hear your thoughts on the design and experience.
I was just scrolling and this honestly made me stop for a moment. The dark fintech look, the glowing dashboard details, and the whole AI command center feeling are so clean. This feels really premium and well thought out.
For the Config Makeathon, I've built Interdimensional Snake, an experimental game that blends beautiful mathematics with design.
I built it to expose more people to mathematical ideas, and to show they can be experienced visually in a way that's genuinely fun.
It's a reimagining of the classic game Snake, but in 3D, with two modes:
Escher - crawl across all six faces of a cube, slipping through wormholes as gravity reorients around you.
Metamorph - survive on dynamically morphing topologies (sphere, torus, Klein bottle, Möbius band, etc), it's tougher, but the more visually striking of the two.
The game has one technical core wearing 5 different design identities that can be swapped at runtime using cool transition effects of your liking (just press "T" on your keyboard). Check it out!
Built using Figma, Figma Make and Figma MCP.
Try it here: https://appeal-sepia-75259552.figma.site
Community Link: https://www.figma.com/community/file/1648067291389831150
Social Post: https://x.com/Devon07979992/status/2066232223976554842
Holy smokes, I'm sold! 🙌
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?