Wireframe Portal
Enter the admin password to manage wireframes.
Enter the admin password to manage wireframes.
All client wireframe review portals.
Copy this prompt into Claude along with your client's project brief to generate a website wireframe.
This prompt teaches Claude how to build website wireframes matching the Spark system. Copy it, paste it into a new Claude conversation, then paste the client brief, meeting notes and sitemap below it. Claude will output a complete index.php you can deploy using the "+ New Wireframe" button.
Copy this prompt into Claude along with the client's content to generate a print capability statement wireframe.
This prompt teaches Claude how to build A4 booklet wireframes for capability statements. It uses reverse-scaled A4 pages, spread layouts, and the print annotation system. Copy it, paste it into Claude, then add the client's company info, page plan and content below it.
Portal configuration.
Displayed in the browser tab.
Minimum 4 characters.
A guide for the Spark Interact team — how to create wireframes, collect feedback, manage approvals, and understand the technical structure behind the system.
The portal handles the full review lifecycle — from AI-generated wireframe to client sign-off — with no external tools required.
Clients access a clean review interface — no login required. They browse pages via the left nav and leave comments on any section using the + badges.
The portal supports two different wireframe formats, each with its own AI prompt and layout system.
Scrollable multi-page layout simulating a real website. Each page is a tab, each section gets a comment badge. Clients review the full site structure in their browser.
A4 booklet format with reverse-scaled pages displayed side by side. Designed for print-ready capability statements — each "spread" is two pages viewed like an open book.
Every wireframe is a folder on the server. The shared engine, CSS, and JS live in _shared/ — client wireframes only contain their unique content.
The shared engine and portal dashboard take care of everything so wireframes stay lean — just content, no backend code.
Clients click + on any section to leave a comment. Saved instantly to comments.json. Exportable as CSV or Markdown.
Clients draw a signature in-browser. Approval is saved with their name, company, timestamp, and signature image.
Every update via the Edit modal saves a version snapshot before overwriting. Restore any previous version with one click.
Export all comments as structured CSV (for spreadsheets) or Markdown (for Notion/docs), grouped by page and section.
The dashboard shows every wireframe's approval status. Approved wireframes display the signatory name, company, date, and signature.
Everything is flat JSON files. No MySQL, no migrations, no dependencies. Works on any PHP host. Easy to back up — just copy the folder.
Once a client approves, the wireframe is locked. No new comments can be added. The topbar shows the approval status with the signatory's details.
The approval badge appears in the portal topbar and on the dashboard card. The sign-off record includes: signatory name, company, timestamp, and base64 signature image — permanently stored in approval.json. To re-open a wireframe for revision, use "Revoke Approval" from the dashboard.
65 Elementor blocks + 14 CS patterns. Reference when briefing the AI or building wireframes.