Not surprising it can get it to parity for a casual user. One thing I find though is that a lot of the vibecloned apps miss or ignore power user features or implement edge case features incorrectly. This was very, very true of the artcraft clones - as soon as you get to the more advanced things, they start to fall apart.
For a lot of the Figma code, there are SO many gotchyas in there, that while I'd be curious to try it, I don't think agents would be able to derive the why, and thus would attempt to optimize the implementation leading to incorrect usage. I led the variables workstream at Figma, and it still is the most complex thing I've worked on in my 20 years of tech. The amount of edge cases / conditionals / exceptions in it are staggering, just to get it to a point where it seems like it's "simple" (for a power users' definition of simple).
One other thing to consider though is the value of something like Figma isn't the functionality so much as the multiplayer platform aspect. This is toats fine if you're just doing solo work, but the collab aspect means you have to fight against the social network dynamics, which also can't be vibe coded.
I was thinking exactly this. Example - a 3d app I worked on. There is a tool that does a set of complex modeling operations on geometry. The operation description seems simple, the attributes that control the tool are easy to understand. But underneath it there is 50k lines of code - 1k for the common case and 49k to handle all the (literal) edge cases you can have with complex real world data, which came in from dozens of customers over the course of decades, mostly highly proprietary one off models.
I think agents can absolutely write the default path correctly and it will work most of the time and seem to be feature complete. But I don't see how they will quickly handle all those dozens of edge cases.
Over time it can happen - each time a case fails, send it to an agent and have it implement the conditional case. But that will take a long time. There is a reason most solid CAD kernels are decades old - they have been battle hardened and just handle all those edge cases better than other kernels.
I'd expect, if the developers can "close the loop" (ie. have the AI try to use it for making actual designs as part of the development process), AI is going to write 1000x the edge cases you write.
And yes, this will multiply the time, and the cost.
Your statement about complexity is true with most SaaS offerings. They need to be everything to everybody so they can target as large a market as possible.
But as a user if you can identify the exact requirements you need your software to do, then it's very possible to vibe code a solution to do exactly what you're looking for. And your own offering doesn't need to be as complex, and can be tightly coupled to the other infrastructure you have.
I find AI as a good baseline for how 80% of users would approach something. The negative space or that 20% is where it often becomes blurry and contradictory for AI. That's where your expertise in the industry in whatever you're building comes into play, and where you steer the design and functionality from painting yourself into the same corner millions of others vibe-slopped themselves into.
I think one thing that's different now is that you have an agent that you can ask to handle those edge cases. UI/UX solves the very common paths and there is always a very powerful AI for actions and modifications to app.
Very curious if you try it and tell us how far it is from real figma
I feel like I'm missing something. Every time I attempt something similar, I end up with something that looks reasonable but doesn't hold up to scrutiny. To me, it feels like the models have become great at making demos more so than "fully featured clones". Admittedly, these demos keep getting better.
I wish there was a more standardized way of sharing these prompts, results and token usage.
Please share the exact initial prompt and any Claude code md instructions you used. Interested as well in harness settings you used: effort, ultra mode? /Loop ... etc...
I recognize this is somewhat of an ad for Mana, but us nerds want more details (as the other responder asked for). It would be cool to have a side by side comparison with results without Mana using the same/similar prompts (though may not be fully possible) or at least show how Mana is more efficient with token, more semantically aware of design details and can make smarter architectural decisions, etc.
This is an impressive result but I think you could go a step further and really sell where the secret sauce lives in your product. Devs need a strong mental model of what they are getting and what problem is being solved - Jev did a good job at this and I think your writeup is quite good but those tasty details could go a long way.
I literally did that. It's been running for 45+ min. I gave up waiting.
I would rather have a standardized way of comparing these things like a list of prompts, code outputted and tokens used. I'm wasting way too much time trying to even get to a point to compare these tools.
Hmm, does it ingest the knowledge base as part of its planning? I feel like AI often starts with the picture and works backwards, or goes room by room which kinda ends up Frankenstein-like. I wonder if one of the secrets to yours would be to grab the entire knowledge base, top Figma articles and those "10 things I wish I knew" for the edge cases, and have it iterate on a plan, kinda like someone creating a browser based on the test cases in the sense of building more holistically and realistically to how users would interact with it.
You can ask it to do either way. I think for this it did some research and also actually tried real figma in its browser. However, I think ultimately these models are trained on these products. It seems to know it already pretty well.
Who cares tbh. We know AI can do this stuff now. We should reserve posting for when people actually use these things at all or when it's actually relatively novel.
I think it's one thing if it's possible, it's another level if you can just one shot it. I agree usage matters more but it's a paradigm shift. Even one month ago you couldn't do this I think it's specifically opus 5.5. Astra or Fable 5.1 can't do it as far as I tested
I think it's less about the code and more about the functionality. I didn't guide the llm to add features etc. I just told it don't stop until it's feature complete. Even 2 months ago I'd have to hand hold it a lot with UX and detailed features.
I think if you do this outside mana it's 2-3x amount of code. You don't need to replicate all of mana. I'm bullish on mana making general figma level apps possible in one shot but I think for any specific one you can build your own. It's more about how good models have gotten in understanding UX and writing complex code
Ex-figma.
Not surprising it can get it to parity for a casual user. One thing I find though is that a lot of the vibecloned apps miss or ignore power user features or implement edge case features incorrectly. This was very, very true of the artcraft clones - as soon as you get to the more advanced things, they start to fall apart.
For a lot of the Figma code, there are SO many gotchyas in there, that while I'd be curious to try it, I don't think agents would be able to derive the why, and thus would attempt to optimize the implementation leading to incorrect usage. I led the variables workstream at Figma, and it still is the most complex thing I've worked on in my 20 years of tech. The amount of edge cases / conditionals / exceptions in it are staggering, just to get it to a point where it seems like it's "simple" (for a power users' definition of simple).
One other thing to consider though is the value of something like Figma isn't the functionality so much as the multiplayer platform aspect. This is toats fine if you're just doing solo work, but the collab aspect means you have to fight against the social network dynamics, which also can't be vibe coded.
I was thinking exactly this. Example - a 3d app I worked on. There is a tool that does a set of complex modeling operations on geometry. The operation description seems simple, the attributes that control the tool are easy to understand. But underneath it there is 50k lines of code - 1k for the common case and 49k to handle all the (literal) edge cases you can have with complex real world data, which came in from dozens of customers over the course of decades, mostly highly proprietary one off models.
I think agents can absolutely write the default path correctly and it will work most of the time and seem to be feature complete. But I don't see how they will quickly handle all those dozens of edge cases.
Over time it can happen - each time a case fails, send it to an agent and have it implement the conditional case. But that will take a long time. There is a reason most solid CAD kernels are decades old - they have been battle hardened and just handle all those edge cases better than other kernels.
I'd expect, if the developers can "close the loop" (ie. have the AI try to use it for making actual designs as part of the development process), AI is going to write 1000x the edge cases you write.
And yes, this will multiply the time, and the cost.
Your statement about complexity is true with most SaaS offerings. They need to be everything to everybody so they can target as large a market as possible.
But as a user if you can identify the exact requirements you need your software to do, then it's very possible to vibe code a solution to do exactly what you're looking for. And your own offering doesn't need to be as complex, and can be tightly coupled to the other infrastructure you have.
I find AI as a good baseline for how 80% of users would approach something. The negative space or that 20% is where it often becomes blurry and contradictory for AI. That's where your expertise in the industry in whatever you're building comes into play, and where you steer the design and functionality from painting yourself into the same corner millions of others vibe-slopped themselves into.
I think one thing that's different now is that you have an agent that you can ask to handle those edge cases. UI/UX solves the very common paths and there is always a very powerful AI for actions and modifications to app.
Very curious if you try it and tell us how far it is from real figma
you can try it here: https://www.mana.space/home/rZfbotNWAXegQypmpkzaAPFC6Mp1/App...
Got an edit access version?
sorry made it editable
I feel like I'm missing something. Every time I attempt something similar, I end up with something that looks reasonable but doesn't hold up to scrutiny. To me, it feels like the models have become great at making demos more so than "fully featured clones". Admittedly, these demos keep getting better.
I wish there was a more standardized way of sharing these prompts, results and token usage.
My prompt was literally make something figma-level, have feature parity and do it in a way that a user can't feel a difference.
You can try mana, curious how it compares to your previous experiences. You can sign up here if you like: https://mana.space/invite/MANA-NPNV
Please share the exact initial prompt and any Claude code md instructions you used. Interested as well in harness settings you used: effort, ultra mode? /Loop ... etc...
I recognize this is somewhat of an ad for Mana, but us nerds want more details (as the other responder asked for). It would be cool to have a side by side comparison with results without Mana using the same/similar prompts (though may not be fully possible) or at least show how Mana is more efficient with token, more semantically aware of design details and can make smarter architectural decisions, etc.
This is an impressive result but I think you could go a step further and really sell where the secret sauce lives in your product. Devs need a strong mental model of what they are getting and what problem is being solved - Jev did a good job at this and I think your writeup is quite good but those tasty details could go a long way.
I literally did that. It's been running for 45+ min. I gave up waiting.
I would rather have a standardized way of comparing these things like a list of prompts, code outputted and tokens used. I'm wasting way too much time trying to even get to a point to compare these tools.
> Claude wrote about 8,200 lines of React for the editor's core logic, including rendering, hit testing and undo.
I'm pretty sure figma clone cannot be done in 8k lines. Are you only cloned part of the logic?
I thought the same, please try it :)
My agent did it in one prompt: it git cloned https://github.com/open-pencil/open-pencil
This was from scratch
Work smarter, not harder. Mine even preserved the commit history.
It used mana and typescript and whatever
Hmm, does it ingest the knowledge base as part of its planning? I feel like AI often starts with the picture and works backwards, or goes room by room which kinda ends up Frankenstein-like. I wonder if one of the secrets to yours would be to grab the entire knowledge base, top Figma articles and those "10 things I wish I knew" for the edge cases, and have it iterate on a plan, kinda like someone creating a browser based on the test cases in the sense of building more holistically and realistically to how users would interact with it.
You can ask it to do either way. I think for this it did some research and also actually tried real figma in its browser. However, I think ultimately these models are trained on these products. It seems to know it already pretty well.
Who cares tbh. We know AI can do this stuff now. We should reserve posting for when people actually use these things at all or when it's actually relatively novel.
I think it's one thing if it's possible, it's another level if you can just one shot it. I agree usage matters more but it's a paradigm shift. Even one month ago you couldn't do this I think it's specifically opus 5.5. Astra or Fable 5.1 can't do it as far as I tested
> P.S. I did this is on Mana which is our startup making it easier for LLMs to do it
Can Mana clone Mana yet?
we can try :)
No Comic Sans font option? edit: or should I say, Comic Relief, as that is the open version of Comic Sans.
let me add :)
added
Thanks!
i wonder whether these were in the training set for the models
yeah maybe they trained on the RL envs or maybe it's from computer use
Surprised this made it to the front page. No git Repo
we have a different structure than repo but I'll share the code in a minute
here I added a button to the editor so you can see code. or you can use this link: https://www.mana.space/home/rZfbotNWAXegQypmpkzaAPFC6Mp1/App...
I think it's less about the code and more about the functionality. I didn't guide the llm to add features etc. I just told it don't stop until it's feature complete. Even 2 months ago I'd have to hand hold it a lot with UX and detailed features.
Nice. How long does it take to generate a Mana clone? How about a Mana cloner clone?
I think if you do this outside mana it's 2-3x amount of code. You don't need to replicate all of mana. I'm bullish on mana making general figma level apps possible in one shot but I think for any specific one you can build your own. It's more about how good models have gotten in understanding UX and writing complex code
Nice advertisement. Truth doesn't matter, just poop out something that visually looks like the correct thing and use it to shill your harness.
It’s not an ad just try it
you can try the editor here: https://www.mana.space/home/rZfbotNWAXegQypmpkzaAPFC6Mp1/App...
feels like magic! photoshop is there too :))