Hello again :)
I actually built a tool I want to use - you may find it helpful too.
Explaining design styles/layouts/components is a nightmare for non-designers, they have their own language. So I wanted to build a site with a bunch of pre-filled styles that I could tweak or shuffle to get the right words to tell my agent what I want.
Introducing Design Words.
It’s still work in progress so I’d love you to try it and let me know what I need to improve and any feature requests :)
The idea
I’ve been thinking about this for sometime and kind of accidentally ended up working on it this week.
It’s like a prompt or instruction builder - you select the styles and components you’d like and it’ll give you the text to prompt your agent.
This was what I started with:
I'm thinking of building a simple idea which would let users effectively browse different themes and UI styles. …It would have some selectors on the left, and it would just display different styles that you can select that then would show websites with that style, and then it would give you a text prompt that you could copy to your agent to ask certain things in a certain style.
So if I was building this website now and I potentially have an idea for what the website style should look like, I would go to this website and pick which one I'd like the look of. I might be rounded corners. I might be no radius. There might be drop shadows. No drop shadows. Menu accents. And obviously there's things like themes. I don't know how to think about what everything would be in one place. …is it a design system, a design system picker. And then… how do we then either find or generate a bunch of different websites with that style? …whether it would be better that we just generate a bunch of them.
it's quite confusing for a non-technical person… that just ends up with this default style that agents pick, and then it's quite hard to then iterate on that style. So let's discuss this.
I kicked this off in Pi using Fable 5.1 - I just wanted to brainstorm and play with a few ideas first, when I wanted to build it for real I used Factory’s Droid.
Prototyping
I generated 11 versions in total in this round. Here’s some of them:
This last one was v8 which was my front-runner. So I took that one and started tweaking more. Using subagents with fresh context to try and give me some fresh perspectives on what I was trying to do:
spawn a claude fable 5.1 high subagent to think about what we're trying to do.
I'm still unsure on what should happen. The way I'm looking at it or thinking about this is I'm trying to get a set of instructions that I would take to my agent's MD to reproduce styles in a certain way, or it could be that I want to design some website that I've got an idea for in a different way, and I want a different theme, buttons, and all the rest of it. So my initial thinking was if we have a grid of many different generated styles, that would be good to be able to look through and say, "Okay, I'm going to go off this one." This is the base of where I'm going to start. But then I'd want to potentially tweak it and have different corner radius, different shadows, palettes, fonts, different font weights throughout lots of different things like that.
The prompt is important, but it's not the main thing. The main thing you want to do is see the thing visually, and then the copy prompt button is all we really need.
The user is trying to look at what does the website and the visual look like. Can I tweak it? To make it look like how I want it to look and then from there I can copy the prompt and send that into my agent.
I started a new thread with Fable.
So v8 is currently my front runner. I guess some things I'm seeing when I load it.
When I use AI to generate anything and I don't really give it any specific instructions, it always comes out with these boilerplate templates that AI has been trained on to produce things.
Because what I'm trying to do here is say I'm thinking about an idea. Okay, I've got an idea that I want to pull out all of the archives of annual reports for public companies that are all in the AI data semiconductor chip space. If that was an idea I had, what I want to do in this style picker is figure out a design system, a design style for what my agent could then make variations of for that idea. I might have the idea before I go to the style picker, I might have the idea after I go to the style picker, and I might use the style picker to just pick. These are the typical sets of instructions that I give to an agent anytime I want to design anything that is a simple site. Get a prototype up, have a look at a few different versions, feel out the idea before I even start working on anything.
So I don't know if I'm really building on the right thing or not, and I genuinely do not know. I'm not saying I do or don't.
Used a subagent to do a design critique:
On one hand, yes, this is what I would want, but on the other hand, it feels quite flat and not enough variety or something. All the controls aren’t enough to really see a difference. Spawn an Opus 5 subagent to do a critical critique of what this tool does.
The purpose is for a non-technical person who is thinking about some ideas, or they are thinking about generating their own unique or very specific doesn’t need to be unique, but their own style of sites and tools and things that they want to build on the web, and they use this tool in order to help them understand what visual that they want that looks and feels like what they want to produce, which then in turn gives them the prompt that they can then give as their agent instructions to consistently produce designs that look like this page. It needs to be really intuitive and easy to use.
You should be able to feel like you could be on this site almost forever, generating new random ideas all the time that mix different styles and components and all the rest of it. But equally, you should be able to get to something that you are happy with and you like the look of in as quick a time as possible.
And often I’ll do these kinds of prompts about the feeling I’m going for and what feels like it’s missing. A lot of it is for me to see the response and give me ideas to explore.
This tool still doesn’t feel right to me. I’m not sure why. I don’t know whether it feels like there’s too many sites with not enough variation. It’s just something that I can’t quite use the site to find a style that I like to then use.
Another option is: is there a definitive list of words, design vocabulary, if you will, that would help to understand what a style picker type could look like? So obviously there’s editorial, geo tone, brutalist, swiss, all of these kinds of words. How many are they and how many categories do they fit in?
So by a category I might mean the layout could be a tool or data display or something, or maybe it’s a grid or maybe something else. There’s obviously so many different ways you can lay out a page, style it. I’m just trying to think about a really good way to have text and the visual in one place so that a user could see the text and the visual together so they would know what to ask for when talking to agents.
Typical AI design with a million more words than is necessary and just generally function over form - pretty difficult to navigate.
So I spent a bunch of time tightening up things, hiding text, making it more usable. Also added bigger previews so you can see things more clearly. And some of the UI started to feel a lot closer to something I was happy with.
And I often throw in prompts like this to see what will come back:
What would take this site up 10x?
Building
As with a lot of my prototyping phases, a lot of the building work is kind of done. I need to see things and use them before I can feel out what is needed and what’s not. Or change direction completely.
But at some stage I want to get things set up properly so agents can work on this without a load of bloated context of previous decisions and prototypes misleading it.
So I created a new folder ‘style-picker’, moved the leading prototype there and then got Droid to setup a design.md (a text file to explain the design system of the actual site). Droid is great because you can switch models easily and they have open-source models in their ‘Droid Core’ which gives you so much more tokens to use than if you use Fable/Astra.
For once, I tried to stick within my limits and used GLM 5.3 (via Droid Core) a lot for moving things around and general quick fixes. I only used Fable for bigger design rehauls or thinking about the build, the ux, the intended audience etc. I also used Fable as an orchestrator for other models like Luna because it’s good at computer use so it could spin up the site and test a bunch of stuff quickly.
make a plan, write briefs for subagents to complete the tasks, give very specific design details and verification steps - agents must view their work. spawn codex gpt luna high subagents. you orchestrate. parallelise the tasks, you have up to 20 concurrent subagents available. we should probably have a design.md for this site first to save you briefing the same subagents with that? if you think anything else like that would be helpful for the subagents, you can create a file.
I don’t usually mess around so much mixing this many models but I do want to get into using open-source models (I have since started using Deepseek v4 Flash as a daily driver and really enjoying it - as well as GLM 5.3).
One of the ideas from my previous critiques and ‘10x’ prompts was a shuffle button. You click shuffle and it generates a site for you in those styles - this felt great, you could see what your choices would look like in place.
Many more back and forths later…
Our shuffle and preview my style mechanism is just awful. I don’t feel like as I’m shuffling I’m going through and seeing genuinely different layouts, mixing up all the different types of styles and elements we’ve got on our page to find something that I like or would want to potentially copy the prompt and do it.
what we’re trying to show here is like shuffle to generate a new version of a landing page or website, a single page site that you can get a template for a build you want to do, then or potentially a build, like several bills you want to do in a certain style, so they could look very different. It could be a data project, it could be a personal website, it could be a news feed, it could be like all sorts of weird and wonderful things, which I think is part of the problem, but also like part of our opportunity here. And we just need to make this like a thousand times better. So what do you recommend we do?
haha - I’ve gone from ‘make it 10x better’ to ‘make it a thousand times better’…
But it worked! It created some prototypes that I really liked. So I got Droid to build them out properly and I’m still making tweaks here and there - so please any feedback let me know!
Publishing
For all my sites I try to use here.now - It’s a super simple tool, massive limits, quick and easy for agents to use. But bensbites.com is hosted on Cloudflare so I didn’t know how (or if) we could do that.
can we publish this to bensbites.com/design-words ? via here.now, even tho bensbites.com is on cloudflare thats what i want this renamed to 'design words', update it.
Turns out you can use a Cloudflare Worker proxy - so the site still is deployed on here.now but the url works. I didn’t have to login or learn to use Cloudflare for this at all. It basically just points the one address to the other.
Behind-the-build
38 sessions (including subagent threads). 116 prompts. 2 days of on and off work.
In each phase, which agents and models used:
Tokens used:
Idea - 150K
Prototype - 27.4M
Build - 353.5M
This is so neat (and useful!). Thank you both for sharing it, and for thoughtfully documenting your thought processes around it.
I've recently started vibe coding and -- while I never have a lack of ideas for features and functionality! -- I just haven't yet developed a great design sense, so this is a really great starting point :)
I made a seamless pattern generator—seamlessify (https://seamlessify.com/). It eliminates image edge seams to create infinitely tileable patterns (also supports AI generation from prompts).