How Do You Prompt Admin Page Designs

[wbmnfktr]

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]

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/

[wbmnfktr]

🤯 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.

[maximus]

[wbmnfktr]

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!

[Peter Knight]

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?

 

 

[maximus]

I think Opus is a sledgehammer, and Codex is quite an ordinary hammer.

[wbmnfktr]

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:

1. pointing at existing modules and how they did it, or just copy and paste the code (which isn't that easy sometimes)
2. 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.

[maximus]

I would still recommend following the following scenario, at least that's how I did the Job Board, not just everything chaotically, but purposefully in stages.

1. You need to write a module specification, explain the idea, and ask the AI to ask you questions interactively - this will help you open up better.

2. Once the specification is ready, you can start coding. Sometimes you have to bet big, like in a casino. That's what I did with Opus 4.7—the cost of a week's worth of code was $5—meaning I'd burned through the weekly limit.

3. Launching in the environment. Previously, I simply uploaded files, debugged using screenshots - I worked like this for quite a long time, copied the code from the chat window to an FTP file, made an update, and then continued testing. 

4. Buy a $99 license for MAMP and specify the folder with files for Claude Code or Codex.

5. Request a technical analysis, preferably cross-analysis using several models—sometimes they can contradict each other. Fix critical bugs.

6. Continue testing. Sometimes, when I don't like the interface, I tell the AI, "Simplify the interface in WireWall or add more data to the Dashboard in Job Board."

7. Manual testing of inputs and checkboxes. However, this can be replaced with Claude Cowork. You just need to describe the task to it and then ask it to generate a report so you can continue making the code work.

8. Sometimes the AI doesn't know what's inside or how the data is stored. You need to install TracyDebugger with Adminer or, alternatively, write a small tool that receives the data and then saves it as JSON so it can debug itself.

In general, this simple plan will help you write a good application.

I like Processwire for its interactivity and the fact that you can build the architecture of 3-4 full-fledged websites within it. Teams and investors with bloated staffs are no longer needed. Everything can be done solo. 

Thanks to @ryan for your work, the forum and the people who move this platform forward!