Freelancers using Figma in Odessa OblastFreelancers using Figma in Odessa Oblast
Webflow Developer | Official Partner | Figma to Webflow |
5.0
Rating
2
Followers
Webflow Developer | Official Partner | Figma to Webflow |
Ai driven Ui/Ux & graphic designer
52
Followers
Ai driven Ui/Ux & graphic designer
Cover image for Figma Make isn't just a
Figma Make isn't just a prototyping tool. I used it to ship a Claude-powered design system generator. Most designers treat Figma Make as a quick vibe-coding sketchpad. I wanted to show it's something deeper — a full vibe-coding platform that integrates with external APIs. The connection nobody writes about There are three ways Claude connects to Figma today. Figma MCP — Claude reads and writes Figma files via MCP server. Figma's built-in AI — Figma calls its own models internally. And mine — a React app inside Figma Make that calls Claude API directly from the browser. Claude responds to the code, not to Figma. Figma Make is the hosting. The new pipeline Old approach: get brandbook and references from client → generate moodboard → align → write prompts for UI Kit. Separate steps, human in the center every time. My approach: collapse all of that into one step. Run an AI analysis and output structured data — input for machines, not a result for humans. We don't ask AI how the brand looks. We run an MRI on it and get structured data that machines use to build code. What gets generated 11 files, all consistent with each other because they share one analysis. For Figma specifically: tokens.json — W3C DTCG 3-tier format (primitive → semantic → component), imports directly into Figma Variables via Tokens Studio or Figma Make prompt design-system.css — all tokens as CSS custom properties, ready to import starter.tsx — paste into Figma Make, full design system renders instantly figma-make.md (http://figma-make.md) — session context, paste once and the AI knows the entire design system Add a content plan on top — generate a full design in one run with minimal token spend. The entire tool was built and shipped inside Figma Make. No external hosting. No separate codebase. → vibecodingdsgen.figma.site (http://vibecodingdsgen.figma.site) #ConfigMakeathon #FigmaMake #DesignSystem #VibeCoding #ClaudeAPI #BuildInPublic
1
17
722
Cover image for Title:

I built a design system
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 (http://vibecodingdsgen.figma.site) Add your Claude API key and try it with your own moodboard. #FigmaMake #DesignSystem #VibeCoding #AI #Claude #UXUI #DesignSystems #ConfigMakeathon
7
25
900
Brand Identity Designer for Luxury & Minimalist Brands
New to Contra
Brand Identity Designer for Luxury & Minimalist Brands