Anyone using a non-WHMCS tool to prototype client portal screens?

[charlotteclark]

I run a small hosting setup and use WHMCS for billing and client management. Our clients keep asking for a cleaner portal, and I've been trying to sketch some layout ideas before committing anything to the WHMCS templates. I'm not a designer, so I started poking at a few AI-style prototyping tools to see if one could help me mock up a dashboard and order page faster. I've only read about them online, so I don't really know how accurate or practical the output is for this kind of screen. My main concern is whether these tools can handle realistic elements like service lists, invoice tables and the usual client-area navigation, or if they just produce generic marketing layouts. I'd rather not waste time on something that can't match WHMCS's structure at all. Has anyone here tried mocking up WHMCS client-area screens in an outside prototyping tool, and did it save you time or create more rework? Keen to hear what worked.

[Waqas Ahmed Waseer]

@charlotteclark I haven't used one of those AI prototyping tools against WHMCS myself, so I won't claim how accurate their output is. I can tell you where outside mockups usually help and where they create rework.

They're useful for layout, spacing and nav hierarchy: what stays on the dashboard, what moves into the sidebar, what gets dropped. They go wrong when you try to match them pixel for pixel. The client area is template-driven (homepage.tpl, clientareahome, sidebars, panels/widgets), and the real markup and theme classes won't match a mock. Service lists and invoice tables are dynamic, so a mock with invented columns just means more work when you wire it up.

What I'd do:

1. Screenshot your current client area (Twenty-One, Nexus, Lagom, whatever you run) and mark keep / drop / move on each page.

2. Design around the columns WHMCS actually outputs for services and invoices, not ones you'd like it to have.

3. Treat the order/cart separately. That's its own order-form template set, and mocking it as a marketing page will mislead you.

4. Implement with a child theme so updates don't wipe your edits. New folder under templates/, theme.yaml with the parent set (for Twenty-One that's config.parent: twenty-one), copy only the tpl files you change (homepage.tpl, clientareahome.tpl, etc.), then select the child theme under System Settings > General Settings.

 

If you still want a prototyping tool, keep it to rough wireframes and treat the live templates as the source of truth. Starting from screenshots of the real screens usually saves more time than starting from a blank AI mock.