Hi all. Scenario: I would like to use generative AI (specifically Claude 3.5 Sonnet) to quickly lay out my pages based on some highly specific instructions and visual queues from Figma. Question: Do the toddle objects (the underlying structures if you cut from the toddle.dev editor and paste into a notepad) have to be created first in the editor in order to 'claim' a unique 'source' identifier? ...or is there a way that I can allow Claude to create new ones outside of toddle and then paste in successfully? I have already done the 'build in toddle, cut and paste into Claude, have Claude refine, and cut and paste back into toddle' successfully, but obviously those identifiers already existed. Thoughts?
Chris Laupama
1 month ago
Oct 23, 2024, 6:54 PM
You can name them whatever you want, I have my new ui generator creating them for me.
Just ensure that every single one of them is unique
mdxwired
1 month ago
Oct 23, 2024, 6:55 PM
Thanks! Is there any full documentation on the toddle object structure? ...or do I just need to extract it one element at a time?
mdxwired
1 month ago
Oct 23, 2024, 7:27 PM
@Chris Laupama Perhaps I am asking the wrong question the wrong way... I know that the structure is based upon the standard Virtual DOM schema... but there seem to be a lot of deviations designed to work best for the editor and low/no-code system. How were you able to instruct your AI-driven UI generator to make sure that it is using all of the correct structures? ...or is that too big of an ask? If so, I would certainly understand.
Tod
1 month ago
Oct 23, 2024, 7:27 PM
Great energy @mdxwired! Your continuous contribution to the toddle Community just made you advance to Community Level 6!
Chris Laupama
1 month ago
Oct 23, 2024, 7:33 PM
There’s no documentation, yeah it’s just a node tree. Truth is that everything you need is available via copy paste. Design something, copy it and feed it to your AI so it understands the structure.
mdxwired
1 month ago
Oct 23, 2024, 7:35 PM
Yeah, that's what I have been dong thus far... but it is still getting the structures wrong whenever it sees anything 'new.' It also does not have any understanding of the standard events and so on.... OK. Just gotta grab as many examples as possible!
Lucas G
1 month ago
Oct 23, 2024, 8:21 PM
Should we just make the doc I shared with you public @Chris Laupama?
Yeah I believe there’s no reason in not sharing it? But I feel like @mdxwired was talking about UI elements?
Lucas G
1 month ago
Oct 23, 2024, 8:24 PM
I thought both, but yeah, either way
It could be the first community doc lol
We just need to add more UI JSON to it
mdxwired
1 month ago
Oct 23, 2024, 8:28 PM
Thanks @Lucas G and @Chris Laupama! I am currently hard at work just extracting the JSON UI elements one at a time and in relevant nested combinations. Slow and steady!
@Lucas G- @Mark Green just dm'd me about the UI gen prompt too, so we could collab on something. I actually have a super basic documentation template in toddle that connects to a github repo and follows the folder structure and utilises markdown .md files for content - so using github as a headless CMS - we could use that? @mdxwired there's not much need to go through each element individually, you just need to provide it with example outputs, given it's just a flat node tree the LLM's are smart enough to fill in the lines, just make a simple UI giving an example and it's smart to fill in the rest. But, I think a community project on utilising AI for generation is great! I am wanting to completely rebuild my ui generator from scratch with the new prompt I'm using, but also implement tailwind conversion etc too.
👍2
Lucas G
1 month ago
Oct 23, 2024, 8:40 PM
Meanwhile Andreas already built all of this in the AI built into the editor 😂
😂1
But yes, it would likely be helpful to have all of it documented publicly
Chris Laupama
1 month ago
Oct 23, 2024, 8:42 PM
and @Andreas Møller would've done it in like 1 hour too lol
Lucas G
1 month ago
Oct 23, 2024, 8:44 PM
He already has a Tailwind parser
At least most of one
He said he was finishing it up a while ago
Andreas Møller
1 month ago
Oct 23, 2024, 10:08 PM
We will release the types etc for toddle soon as part of the process of making it open source.
That should help
Lucas G
1 month ago
Oct 23, 2024, 10:09 PM
Figured that would come
mdxwired
1 month ago
Oct 24, 2024, 3:36 AM
Glad this sparked so much interest. As a UX guy of 30+ years, I am looking forward to having a simple AI tool that can reliably look at an image exported from Figma and design a completely toddle-compliant matching page or component. It will hopefully save me countless hours if I get it right. VERY glad to turn it into a community project.
Sadly, it's because I lack the programming skills. I used to be a coder but have spent the past two decades focused on IA/UX/UCD and thus my coding skills are so out of date that I no longer have the time required for the learning curve to bring them up to date. Hence my interest in toddle.
Andreas Møller
1 month ago
Oct 24, 2024, 2:23 PM
We are planning to add a figma plugin. We are looking for a freelancer who can help.
👍1
mdxwired
1 month ago
Oct 24, 2024, 3:01 PM
Well, I just had Claude 3.5 Sonnet (new) take a beginning whack at it (the plugin)... I'll let you know how the process goes.
mdxwired
1 month ago
Oct 24, 2024, 3:13 PM
Obviously, it is not going to be 'production ready' or anything as it will lack the data dictionaries and so on to ensure perfect 1:1 export, but I figured, "While I'm at it..."
