Some people upload images from dribbble to Claude to give it a sense of what kind of style they want it to generate with its website code.
Ottodev is planning to add that feature soon.
An interesting option there could be to have a number of pre-selected UI images that are bundled with Ottodev, so that you can choose one of them as a reference for it to work with.
Of course, for people who have tried to do this, you likely know that it often fails to get the style right the first time.
What could be done about that, if it was being built as a feature though, is that when the developers are choosing the templates, they could also take notes on what tweaks were required to get a template to an acceptable level.
And then you could add in those notes, alongside the reference image, when first passing it to the model when the template is selected. So that it has a higher chance of getting it right in one go.
A point of consideration here:
The copyright for Dribbble images realistically belongs to whoever made them. So you can’t just package dribbble images in.
But you could use screenshots of the UIs you developed using whatever references.
I should also mention that Midjourney can actually produce some nice looking reference UIs - even if it’ll mangle the text.
So, you could use one of those generations as a reference, build a nice looking UI, and then take a screenshot of that to use as the final template to package with Ottodev.
This is a fantastic suggestion @ioulaum, thank you so much!
Maybe even instead of passing in extra notes to the LLM, you could somehow have it start with specific styling in a CSS file or something like that? Because those notes aren’t always going to get the same results from the LLM, and it might help different LLMs in different ways.
Well, let’s say that you aren’t using a library like Tailwind, then yes, you could start off with a CSS style sheet, and sample code for the entire page also - preferably with easily understandable CSS class names, so that the LLM can understand their intent when it reads them.
That should enough to make things pretty predictable.
With Tailwind, much of the styling would be in the HTML itself - which can again be shared as a reference alongside the image, so that the LLM has greater clarity on what kind of structure is expected of it.
I’ve had decent luck in doing that… Like, once I have a page with good styles, I can use that as a reference, for how I want new pages to look like.
Note:
Things like this will increase the token usage. So ideally you wouldn’t want to pass the image and extra template references anymore once it has finished styling the page - except maybe as a short summary of style notes… Which I personally expect to not be needed much.
This may be better as a separate feature - where you go into a styling mode (for an existing app), select a template, and have it applied to all the views / pages in one go (or maybe one separate chat session, if we assume that you may still need to iterate some).
That would be like switching to a different project with the same files.
Yeah what you’re saying makes sense! So for Tailwind basically just giving an entire HTML page as a reference since all the classes are defined in the HTML and also speaks to where to use these styles? Certainly seems worth the extra tokens to me!
I think the extra Tailwind tokens are perfectly fine.
My point was mainly that keeping images and reference UIs in context would be wasteful when you’re not doing UI styling related work.
I think it wouldn’t be too hard to add in an option for side-projects under a larger project - with all the files shared between those projects - and that way people can reduce their spend.
Not that my spend with OttoDev is that high. But it does tend to go up as your conversation gets longer, and all of your past history is now input tokens.
with a new OTToDev logo … and UI I leave this here 