Natalia Trusova
Ai driven Ui/Ux & graphic designer
New to Contra
Natalia is building their profile!
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 (http://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 (http://Claude.md) Claude Projects Claude reads it automatically every session
DESIGN.md (http://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 (http://components-api.md) Dev reference Component props, variants, and usage documentation
prompts.md (http://prompts.md) All AI tools Ready-made prompts for every AI tool in your stack
web-skills.md (http://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
(http://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 (http://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
13
12
272
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 (https://figma-make.md) For Figma Make Full design system context — paste once, build everything in Make
design-system.css (https://design-system.css) Any project All tokens as CSS custom properties, ready to import
tokens.json (https://tokens.json) Figma Variables W3C Design Tokens — import directly to Figma Variables
starter.tsx (https://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 (https://Claude.md) Claude Projects Claude reads it automatically every session
DESIGN.md (https://DESIGN.md) Documentation Human-readable design decisions and rationale
llms.txt (https://llms.txt) Any LLM Machine-readable brand context, like robots.txt but for AI
components-api.md (https://components-api.md) Dev reference Component props, variants, and usage documentation
prompts.md (https://prompts.md) All AI tools Ready-made prompts for every AI tool in your stack
web-skills.md (https://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 (http://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.
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 (http://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 post https://www.instagram.com/stories/trusovanata.design/3922621806816713616?utm_source=ig_story_item_share&igsh=aHd3aWEyMG9obHdq
#ConfigMakeathon #FigmaMake #DesignSystem #VibeCoding #ClaudeAPI
0
94