At $DAYJOBSTARTUP, we do hackathons twice a year. At the most recent one, an engineer sat down with a designer and set him up with Cursor. The designer looked like a kind in a candy shop, he was so excited to be able to rapidly prototype with natural language and not be clicking in Figma for hours.
A month later, he comes back to the engineering team with a 10k line "index.html" file asking "How do I hand this off?" (he was definitely smart enough to know that just passing that file to us was not gonna fly). We decided to copy the designs into Figma for the handoff, both because that was the existing way we did design/engineering handoffs and also because creating high fidelity designs (e.g., "this color from our design system" and "this standard spacing value") isn't in Cursor's wheelhouse.
We're probably going to spend more time working on a better setup for him. At the very least he should be working against our codebase and components and colors and design tokens. But I'm very curious to see where it goes from here.
This is doable. I set something similar up at scale. Figma Variables/Tokens -> Token Studio (Style Dictionary, essentially) -> Our Component library <-> Storybook -> MCP
Atomic component system, good page level template coverage, great prop support.
The LLM consumer nor the designer is allowed to write directly back to the library. Those changes need to go through a governance process to prevent drift as their are multiple product teams consuming it and we still don't have a reliable way to make sure Figma and the component library are always 1:1. Maybe in a company of a single designer.
So while this setup is arguably more fleshed out than what you have it still requires multiple humans in the loop.
Sure, there are a billion Medium articles about how it can be done with tokens but its much messier at any kind of scale.
Haha I did the same with our product manager and designers. One of our designers just got her first (tiny) PR merged this week.
I am somewhat fearful of having created a monster, but at the same time I think it’s good to knock down barriers to knowledge and learning. All else equal, I think a designer or PM with some exposure to code is better than one without.
What I’m fearful of are 10k line PRs and pressure from product to “just ship it.” Past a certain threshold a PR will be really tough to review, to the point that it would be preferable for an engineer to have handled it from the start.
I think we will need deeper integration between figma and the codebase/storybook. Shared color palette definitions, integration of storybook components with figma components, stuff like that.
The Figma MCP that you can use to handover to your agent and simply say “implement this” is already pretty impressive.
Why not just give him a branch? I've found underestimating "non-technical" people a folly in the AI era. They can easily boot up projects with agentic AI assistance.
Same here. Really curious on where this leads. Firstly, I feel that the speed and complexity increase that comes with agents can only be dealt with people adept both in the domain and in general AI tools.
Basically, to really leverage this I think just knowing Figma perfectly previously or being a noobie and knowing Claude Code perfectly isn't gonna cut it.
Building things is fast, but building something that is gonna stick is gonna be more difficult now you have so many options.
I'm curious to understand more about your use case. I've been working on getting fellow designers out of Figma since it's easier to express intent in code now using LLMs.
I still have a lot of assets living in Figma, and for some things it’s simply faster to prototype there before moving to code.
Personally, I’d really like to automate part of the workflow around exporting from Figma and assembling a design system into components — right now there’s just too much manual work involved.
I fully agree with the comment but CLI tools don't do auth and session management in a consistent way. Besides, imagine if now every vendor out there need to distributed custom binaries for their services. Some of them do. Many don't.. but overall it is just increased security risk for the end user when the functionality that is delivered is simply an interface to an API.
I remember that a llm agents often store those in clear text files (I think claude-code beeing one of them). Many of the CLIs I use have a better secret hygiene than that i.e. allow passwords commands or use secret apis.
I can attest that ai agent executing cli binaries is better than use of an mcp, just because of the limitations of mcp, also figma mcp requires a pro license. Does the figma cli require a pro license as well ?
This is interesting, and I keep waiting for figma to release prompt to design without going thru Make. It must be touch to crack-or it will hurt their business model. The plug-ins in the space don’t respect components in the toolkit. Curious how far you can push this
“Make a login form using my component library “
“Create no new design layouts of the selected frame”
Can’t wait to try this out!
Nice use case! I built something along similar lines.. an ASCII wireframe generator to jump straight from idea to code with zero friction: https://bareminimum.design/. Also handy for quick UI critiques. Curious what you think.
As a product designer, this looks really interesting! I'm curious if you've experimented throwing caution to the wind and asking it to make an entire design system (colors, text, components), and if so, how well it's worked.
This is huge. As someone who's put together a somewhat cohesive product but wants to take the next step in "formalizing" components there is a huge missing piece for design.
If I know my backend works I can use claude to add sufficient tests and iterate from there, improving code maturity. If my UX looks good how can I formalize it and do the same?
I can't wait to try this out. My current workflow has been use MCP to screenshot the whole app --> Use a tool like Codia to go from screenshot to components, as a non-designer its miserable though.
So if you map your design tokens to Figma variables first, components will reference them. Parsing CSS/Tailwind configs automatically could be a good feature though.
If I’m understanding correctly, you’d likely combine this with Figma MCP for reading? Ie. have Claude Code read the file to understand a request, then use this tooling to make modifications?
At $DAYJOBSTARTUP, we do hackathons twice a year. At the most recent one, an engineer sat down with a designer and set him up with Cursor. The designer looked like a kind in a candy shop, he was so excited to be able to rapidly prototype with natural language and not be clicking in Figma for hours.
A month later, he comes back to the engineering team with a 10k line "index.html" file asking "How do I hand this off?" (he was definitely smart enough to know that just passing that file to us was not gonna fly). We decided to copy the designs into Figma for the handoff, both because that was the existing way we did design/engineering handoffs and also because creating high fidelity designs (e.g., "this color from our design system" and "this standard spacing value") isn't in Cursor's wheelhouse.
We're probably going to spend more time working on a better setup for him. At the very least he should be working against our codebase and components and colors and design tokens. But I'm very curious to see where it goes from here.
This is doable. I set something similar up at scale. Figma Variables/Tokens -> Token Studio (Style Dictionary, essentially) -> Our Component library <-> Storybook -> MCP
Atomic component system, good page level template coverage, great prop support.
The LLM consumer nor the designer is allowed to write directly back to the library. Those changes need to go through a governance process to prevent drift as their are multiple product teams consuming it and we still don't have a reliable way to make sure Figma and the component library are always 1:1. Maybe in a company of a single designer.
So while this setup is arguably more fleshed out than what you have it still requires multiple humans in the loop.
Sure, there are a billion Medium articles about how it can be done with tokens but its much messier at any kind of scale.
Haha I did the same with our product manager and designers. One of our designers just got her first (tiny) PR merged this week.
I am somewhat fearful of having created a monster, but at the same time I think it’s good to knock down barriers to knowledge and learning. All else equal, I think a designer or PM with some exposure to code is better than one without.
What I’m fearful of are 10k line PRs and pressure from product to “just ship it.” Past a certain threshold a PR will be really tough to review, to the point that it would be preferable for an engineer to have handled it from the start.
I think we will need deeper integration between figma and the codebase/storybook. Shared color palette definitions, integration of storybook components with figma components, stuff like that.
The Figma MCP that you can use to handover to your agent and simply say “implement this” is already pretty impressive.
Why not just give him a branch? I've found underestimating "non-technical" people a folly in the AI era. They can easily boot up projects with agentic AI assistance.
Same here. Really curious on where this leads. Firstly, I feel that the speed and complexity increase that comes with agents can only be dealt with people adept both in the domain and in general AI tools.
Basically, to really leverage this I think just knowing Figma perfectly previously or being a noobie and knowing Claude Code perfectly isn't gonna cut it.
Building things is fast, but building something that is gonna stick is gonna be more difficult now you have so many options.
The game has changed.
I'm curious to understand more about your use case. I've been working on getting fellow designers out of Figma since it's easier to express intent in code now using LLMs.
Not OP, but my interest in Figma is that when a human designer needs to take over, UI/UX designers know Figma.
Yeah, agreed.
I still have a lot of assets living in Figma, and for some things it’s simply faster to prototype there before moving to code.
Personally, I’d really like to automate part of the workflow around exporting from Figma and assembling a design system into components — right now there’s just too much manual work involved.
I like how MCP is not shoved into our face anymore after people realised more mcp servers eat into context and agents can easily use CLI tools.
I fully agree with the comment but CLI tools don't do auth and session management in a consistent way. Besides, imagine if now every vendor out there need to distributed custom binaries for their services. Some of them do. Many don't.. but overall it is just increased security risk for the end user when the functionality that is delivered is simply an interface to an API.
I remember that a llm agents often store those in clear text files (I think claude-code beeing one of them). Many of the CLIs I use have a better secret hygiene than that i.e. allow passwords commands or use secret apis.
MCP tools do not do auth and session management in a consistent way based on just the seven or so I use regularly.
And how do the agents use the CLI tools, exactly?
Same way you would in a terminal.
You can provide the agent details to use either through skills or commands that provide reference and context to use. The agent can load when needed.
Having cli tool access provides me option to run the tools when I want to look at or do something as well.
I can attest that ai agent executing cli binaries is better than use of an mcp, just because of the limitations of mcp, also figma mcp requires a pro license. Does the figma cli require a pro license as well ?
I don’t think so. This CLI mostly relies on the plugin API, which is free.
Can it make a SVG of a pelican riding a bicycle?
"Humanity's last exam" HN edition
I am a human and I can't...
looks like you failed your last exam, please exit through the red door down the aisle.
Will add vector path manipulation soon!
Just shipped in 0.6.0! New path commands:
SKILL.md updated toocan you now generate pelican driving a bicycle now?
What's your opinion on PenPot - Figma's biggest rival? I think PenPot is more dev-friendly. Their "Code" mode is 100% free
This is interesting, and I keep waiting for figma to release prompt to design without going thru Make. It must be touch to crack-or it will hurt their business model. The plug-ins in the space don’t respect components in the toolkit. Curious how far you can push this “Make a login form using my component library “ “Create no new design layouts of the selected frame” Can’t wait to try this out!
It’s not too challenging, but it requires additional context from the design system to achieve a good result.
Nice use case! I built something along similar lines.. an ASCII wireframe generator to jump straight from idea to code with zero friction: https://bareminimum.design/. Also handy for quick UI critiques. Curious what you think.
Wish there were examples without a signup
As a product designer, this looks really interesting! I'm curious if you've experimented throwing caution to the wind and asking it to make an entire design system (colors, text, components), and if so, how well it's worked.
This is huge. As someone who's put together a somewhat cohesive product but wants to take the next step in "formalizing" components there is a huge missing piece for design.
If I know my backend works I can use claude to add sufficient tests and iterate from there, improving code maturity. If my UX looks good how can I formalize it and do the same?
I can't wait to try this out. My current workflow has been use MCP to screenshot the whole app --> Use a tool like Codia to go from screenshot to components, as a non-designer its miserable though.
Nice work!
How does it do applying styles from an existing codebase?
We have style guides, strong base css, etc. If that was represented when it built in Figma, that could be interesting.
Thanks! Right now it doesn't parse CSS directly, but you can bind colors to Figma variables:
Then reference them in JSX render: So if you map your design tokens to Figma variables first, components will reference them. Parsing CSS/Tailwind configs automatically could be a good feature though.Thanks. Definitely planning on checking this out!
If I’m understanding correctly, you’d likely combine this with Figma MCP for reading? Ie. have Claude Code read the file to understand a request, then use this tooling to make modifications?
> MCP servers exchange verbose JSON. CLIs are token-efficient
Extra chars from JSON are the least of our problems with MCP.
Any thoughts on why Citty, or if there's any other cli tools you might recommend?
Personal preference — because I love UnJS (https://unjs.io) ecosystem