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
A lightweight Windows desktop widget that instantly transforms basic ideas into professional, high performance AI prompts.
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
We're emotional beings. Our tools rarely are.
Emotions can't really be taught. They arrive through lived experience, already packaged with a thousand tiny feelings and nuances we carry without thinking. So what if an interface tapped into that?
Meet Clothesline 🧺, a to-do list with feelings.
Instead of "an urgent, high-priority, do-or-die task," you simply have a bedsheet-sized goal for the year and a sock-sized one for today. One glance and you know exactly how much you're holding.
Create, save, and track your goals right in your browser, the same way you'd hang, dry, and fold your laundry. Close the tab or restart your browser and your line stays exactly how you left it, so nothing ever slips away.
The rope sags under the weight you carry, a little bird drops by with daily inspiration, and finished goals get folded away. It even makes a lovely little second-monitor companion to glance at while you sip your coffee and work.
Built end to end in Figma: Design, Weave, MCP, Make, Sites, and Slides.
🧑🏼🎨 A small experiment in emotional interface design, software that doesn't just track your goals but feels alive alongside them.
It still amazes me how fast an idea can travel from your head to something real, alive, and in your browser.
Notes for reviewers: the overdue state (storm and rain) normally triggers when a goal passes its due date. To preview it without waiting for real time to pass, add a goal and press 'n' for +1 day, 'm' for +1 month, or 'r' to reset. You'll see the sky turn and the line react, so you can fold fast or change the due date.
Links:
--------------------------------------------------------------
Live site
--------------------------------------------------------------
Community file
--------------------------------------------------------------
Process/BTS slides deck (To Learn-Apply-Amplify)
* videos might take some time to load
--------------------------------------------------------------
Linkedin ✦ Instagram
Song playing: "What A Wonderful World" - Louis Armstrong
#emotionalinterfacedesign #goalsetting #todolist #goals #ConfigMakeathon
#Storytelling #Userexperiencedesign @Figma @Contra
Woahhh!!! ✨
Same here, man.
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.
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.
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.
#ConfigMakeathon #FigmaMake #DesignSystem #VibeCoding #ClaudeAPI
One thing worth highlighting that isn't obvious from the description:
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...
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?