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!

[szabesz]

13 hours ago, maximus said:

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.

For this, I recommend: https://buildermethods.com/prd-creator

Quote:

"PRD Creator is just markdown — not Claude Code-specific. If you’re using Codex, Antigravity, Cursor, or another agentic tool, download the bm-prd-creator folder from the bm-skills repo and install it as a custom skill, command, or rule per your tool’s convention. The workflow is identical."

These are the actual files: https://github.com/buildermethods/bm-skills/tree/main/plugins/bm-prd-creator/skills/bm-prd-creator 

You may also want to watch this from the author: https://youtu.be/g6VvvS46uCM

Edited 4 hours ago by szabesz
EDIT: added TY link/url

[wbmnfktr]

16 hours ago, maximus said:

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.[...]

We might have a minor misunderstanding here. 

Building modules, tools, apps, anything with little to a lot of logic and functions is not the issue here.

My problem is not that there are functions or config fields (Admin UI) missing or not working in a way or form I imagined them to work.

The problem is that the Agents and LLMs are not ready yet to build module backends (Admin UI) - even when outlined in high detail.

Sometimes they are almost there or at least it looks like it, sometimes they invent something totally new and won't even use existing field types, wrappers, and classes.

Having an existing module, adding new functionality, new config settings, or even pages works incredibly well. That's because the Agent/LLMs can re-use existing structure of backend code.

 

Besides that I totally support your step-by-step process and workflow.

You can't just throw a vague idea towards whatever tool and expect a wonder. That's for sure.

 

Little side note: I asked Kimi and Opus to build a module that's only purpose is to showcase module pages, all sorts of inputs and outputs. So I have a working base for interfaces I can point at later on.

The prompt for those interested:

Quote

Write a complete ProcessWire module designed exclusively as a boilerplate reference for building backend administrative interfaces. Please provide the necessary PHP code and file structure to demonstrate how to implement module configuration pages, custom admin subpages with dedicated menu entries, and dashboard-style layouts. The module must include practical examples of forms utilizing all available ProcessWire input field types, specifically focusing on repeater fields, dropdowns, button groups, and buttons with dropdown menus for executing multiple actions. Additionally, incorporate examples of rendering data using tables, lists, and card layouts within the ProcessWire admin UI.