wbmnfktr Posted yesterday at 08:16 PM Posted yesterday at 08:16 PM How do you prompt and guide Agents (or any AI tool) to get a good understanding of module pages? Below are screenshots of what I currently have (finally). Yet both could be much more beautiful or at least organised and looking more clean. Sure I could go fully custom here but i want it to work with AdminThemeUiKit (and all existing flavours of it). Do you add other modules as examples to the context or do you go this step as we did 5 years ago and code it yourself?
maximus Posted 23 hours ago Posted 23 hours ago I tried adding examples, but it doesn't always work. Sometimes he often doesn't understand what needs to be implemented and how. Sometimes he's pulling hardcode, sometimes something else. I usually write prompt in AI "apply the design system to the module https://github.com/mxmsmnv/pw-design-system" and then it makes a more conscious design. To ensure the design is consistent across both the old and new versions of the theme, you need to create a hardcoded framework like in my Collections module. Then it will look the same across all versions. If you write directly for the new design, some parts won't display in the old one. I've migrated almost all of my websites to the new theme. Clients just need to get used to it, then they'll say it's so cool. I'd also make a colored header module in the admin panel, but that's a whole other story. Design system https://mxmsmnv.github.io/pw-design-system/ 5
wbmnfktr Posted 23 hours ago Author Posted 23 hours ago 🤯 this might actually be the solution to everything wrong in my modules. I am not sure if I already read about it here somewhere but couldn't find it when looking up module theming/styling. I will give this a try. Might have to try a few variations as most projects, even new ones, still use the old styling.
wbmnfktr Posted 22 hours ago Author Posted 22 hours ago So... the very first iteration looks like this. Used a "Look there, apply to that"-prompt. We wiill get there. Now I have to dig a little bit deeper to fine-tune. Big help already! Thanks @maximus! 4
Peter Knight Posted 8 hours ago Posted 8 hours ago Which AI model are you using? I've found that high-end AI models, such as Opus 4.7 (Extra High), are great at complex data tasks. However, I've always had better visual and UI results with Sonnet 4.6 (outside of PW). Having said that, I've developed several non-ProcessWire professional tools with AI. If you have the benefit of using Tailwind or ShadCN, you can achieve very nice, clean and consistent UIs with little prompting or babysitting (even if they can be generic). I think the models have more training, data and Tailwind references to work from. When it comes to PW, I don't know why the models have such a hard time, even when you point them to working examples. You might have better luck having them scaffold something first with just HTML and CSS based on UIKIT and then get them to apply the interaction and functions? 1
maximus Posted 7 hours ago Posted 7 hours ago I think Opus is a sledgehammer, and Codex is quite an ordinary hammer. 1
wbmnfktr Posted 1 hour ago Author Posted 1 hour ago 6 hours ago, Peter Knight said: Which AI model are you using? So far I tried with: Z.AI GLM 5.1 Kimi K2.6 MiniMax 2.7 Opus 4.7 Codex 5.3 DeepSeek Pro & Flash V4 Results don't vary that much here in this case. I generated a few variations now and will pick the best parts from each variation. Huge context windows do help when I tell the agent to inspect a module that has a certain type of block i want to use/copy. Like tables or listing, like button groups or dropdown buttons. 6 hours ago, Peter Knight said: Having said that, I've developed several non-ProcessWire professional tools with AI. If you have the benefit of using Tailwind or ShadCN, you can achieve very nice, clean and consistent UIs with little prompting or babysitting (even if they can be generic). Outside of ProcessWire modules absolutely. They do a great first draft you can fine-tune then. I played a bit with ui.sh and impeccable.style to achieve quite good results. Even landing pages, newsletter templates, and everything non-dashboard type of design. Shadcn/TailwindCSS are great for fast prototyping of good looking interfaces. Even when using models like the older MiniMax 2.5. I did a small comparison a while back using older models and no skills or design frameworks. It was fine. https://log.nerd.to/log/ai-frontend-design-comparison/ 6 hours ago, Peter Knight said: When it comes to PW, I don't know why the models have such a hard time, even when you point them to working examples. You might have better luck having them scaffold something first with just HTML and CSS based on UIKIT and then get them to apply the interaction and functions? Pointing in 2 directions helps: pointing at existing modules and how they did it, or just copy and paste the code (which isn't that easy sometimes) pointing at static examples and design systems for the fine-tuning - in this case the one from @maximus. I'm complaining on a high level here. 😂 The main part, developing the module, took an hour. So there is room left to design the UI a bit. The module is up and running, does what it should do. I am happy for now. 1
Recommended Posts