Design System Gen A tool for rapid client project kickstart — built with Figma Make + Claude API The Problem Every new client project starts the same way. You receive a moodboard, some references, maybe a Pinterest link. You're expected to build something consistent — across Figma Make, Cursor, Claude — but there's no real foundation yet. No tokens. No rules. No shared context between tools. Most designers spend hours on setup before writing a single prompt. I got tired of doing that. So I built a tool to eliminate that stage entirely. What It Does Design System Gen turns a client moodboard into a ready-to-use design system foundation — in one click. Upload the client's references → the tool analyzes them across 8 dimensions: Palette / Mood/ Typography/ Composition/ Lighting/ Texture/ Motion/ UI DNA Hit "Apply all to form" — the entire design system form fills automatically. Then generate. You get 11 files, each tailored to a specific AI tool: File: figma-make.md For Figma Make Full design system context — paste once, build everything in Make design-system.css Any project All tokens as CSS custom properties, ready to import tokens.json Figma Variables W3C Design Tokens — import directly to Figma Variables starter.tsx React / Next.js React component starter with all tokens already bound cursorrules Cursor Cursor AI rules — drop in root, it knows your design system Claude.md Claude Projects Claude reads it automatically every session DESIGN.md Documentation Human-readable design decisions and rationale llms.txt Any LLM Machine-readable brand context, like robots.txt but for AI components-api.md Dev reference Component props, variants, and usage documentation prompts.md All AI tools Ready-made prompts for every AI tool in your stack web-skills.md Component library in vanilla HTML/CSS — buttons, cards, modals, nav Every tool gets its own customized kit — tokens, rules, prompts — all consistent with each other. Not one generic output. A separate file per tool. Figma Make Integration In Figma Make: add two files at the start of a session and you're ready to build immediately. Because the design system context is already loaded — Figma Make knows your colors, tokens, spacing, component rules — your prompts stay minimal. No need to re-explain the design system every time. You spend a fraction of the tokens you normally would. A full landing page — generated in a single run, with remarkably few tokens spent per prompt. No back and forth. No prompt engineering from scratch. The context file already did that. How It Was Built Built entirely in Figma Make + Claude.

Published as a live web app via Figma Make publish → vibecodingdsgen.figma.site Powered by Claude API.

Claude processes the uploaded moodboard and returns structured output — design parameters, tokens, and prompt sets — all formatted specifically for each target tool. Output connects directly to Figma Variables.

W3C Design Token format and can be imported into Figma Variables in three ways: via Tokens Studio plugin, through a Figma Make prompt, or using a custom Figma plugin — for teams who want full control over the import flow or one special file The entire tool — UI, logic, API integration, file generation — was built and shipped inside Figma Make. No external hosting. No separate codebase. Why I Built This Speed — rapid kickstart for every new project, starting from the client's own references, not templates. Consistency — every AI tool in your stack speaks the same design language from day one. Predictable output — a base that only needs refinement, not rebuilding. Token efficiency — a full landing page was generated in a single run. The tool is fully live — you can explore the demo without any setup.

→ vibecodingdsgen.figma.site

Want to generate your own design system? Add your Claude API key directly in the tool and try it with your own moodboard. The full generation takes 3–4 minutes and produces all 11 files ready to use.

Instagram https://www.instagram.com/reel/DZv662GCONK/?igsh=MTAzbWhwZHFnem1lMQ==

Linkedin

https://www.linkedin.com/posts/nataliatrusova_config-figma-share-7473584710724808704-YUVK/?utm_source=share&utm_medium=member_android&rcm=ACoAAAvbQN8B6uwRcvk-lCjSLHX3BLh7LL2LS0Y #ConfigMakeathon #FigmaMake #DesignSystem #VibeCoding #ClaudeAPI

This tool uses a connection model nobody seems to write about. There are currently three ways Claude connects to Figma: via MCP server, via Figma's built-in AI, and — what I built here — a React app running inside Figma Make that calls the Claude API directly from the browser....