This page is the master index of the wireframe set that grounds every design decision in DomiDo. The complete set contains fifty-four screens across forty-one customer-facing surfaces and thirteen admin surfaces, each rendered in both portrait (mobile-first) and landscape (tablet and desktop) orientations — one hundred and eight images total. Every wireframe is produced in the winning Garden Modern hybrid visual style with production-ready component styling so the wireframes serve as high-fidelity references rather than structural sketches. The index below walks through the customer surface in nine groups (core design flow, 3D viewers, catalogue, cart and checkout, gallery and social, account, authentication and onboarding, error and empty states, and the screens added during examination resolution), then through the thirteen admin surfaces, and finally through the orientation differences, the per-screen accessibility annotations, the component-library reference that every wireframe composes from, and the dark-mode variants that validate the dark palette.
The customer surface is organised into nine groups.
Core design flow (screens one through nine). Home is the landing screen with the rotating hero, the three quick-action cards, the trending designs strip, and the bottom tab bar. Mode Selector chooses between upload and Artificial Intelligence (AI) modes; both cards show the credit cost up front. The upload screen offers a drag-and-drop zone, a file picker, and inline format and size validation. The Processing screen tracks the twelve-stage pipeline with Server-Sent Events. The AI Prompt screen carries the prompt text area, example chips, the reference-image upload, and the credit-cost notice next to the Generate button. The Projection Workflow handles the eight-angle approval loop with the auto-generate accelerator above the fold. Model Generation lists the outcome-based quality options. The 3D Preview shows the generated model in an interactive viewer. Design Review pairs the viewer with the Bill of Materials, the price, and the sticky purchase call-to-action.
Three-dimensional viewers (screens ten and eleven). The Assembly Viewer drives step-by-step assembly with playback controls, ghost blocks, and a step counter in the thumb zone. The Explode Viewer offers a horizontal slider with per-block inspection.
Catalogue (screens twelve and thirteen). Catalogue Grid surfaces the use-case categories the platform enables. Product Detail pairs a 3D preview with parametric size sliders that recalculate price and block count in real time.
Cart and checkout (screens fourteen through sixteen). Cart lists items with thumbnails, quantities, and prices and a sticky checkout call-to-action. Checkout Confirmation surfaces in the manufacturing phase with the order number, estimated delivery, and the Assembly Viewer link. Pre-order Confirmation surfaces in the early launch phase with the prominent "card has been verified but will not be charged" notice.
Gallery and social (screens seventeen through twenty-three). Gallery Browse uses curated tabs and a masonry grid. Gallery Search adds filter chips and a faceted sidebar. Gallery Design Detail pairs the 3D viewer with the sticky purchase call-to-action and social actions. Comments support threading with moderation badges. Designer Profile carries the portfolio with follow controls. Collections work like Pinterest-style boards.
Account (screens twenty-four through thirty-one). My Designs surfaces every design with its status badge including the AI-In-Progress badge with a Resume button. My Orders separates orders from pre-orders. Order Detail uses a timeline stepper with tracking and a return request control. Pre-order Management cards show the card-verified status and a cancel control. Return Request and Return Status handle the returns flow. Settings groups the profile, the subscription summary, and the General Data Protection Regulation controls. Subscription compares the four tiers and shows credit usage.
Authentication and onboarding (screens thirty-two and thirty-three). Sign In offers Open Authorisation through Google, Microsoft, and Apple. Onboarding is a three-step swipe with a Skip control.
Error and empty states (screens thirty-four and thirty-five). Pipeline Error shows stage-specific recovery actions. No Designs Yet offers a friendly empty state with the two creation buttons.
Screens added during examination resolution (screens forty-nine through fifty-four). Gallery Publish is the publish form with title, description, tags, category, and moderation notice. Gallery Empty State serves launch day with a "Be the first to share" message. Voice Search and Image Search are modal surfaces. Moderation Rejection appears on My Designs with an appeal link. Pre-order Card Expiry warns of an approaching card expiry with a countdown and an update call-to-action.
Thirteen admin screens follow the dark-forest sidebar pattern with progressive widget loading. Overview shows four metric cards plus revenue and category-share charts. Orders List is a filterable table with status badges. Order Detail carries customer information, the order timeline, tracking, items, payment, manual actions (refund, resend email, add note), and a history audit log. Returns Queue surfaces graded returns with inspection photos. Pipeline Monitor shows the success-rate trend, ninety-fifth percentile latency, queue depth, and a failed-jobs panel. Revenue Dashboard tracks the monthly metrics with trends and breakdowns. Customer Support exposes a customer three-hundred-and-sixty-degree view. AI Credit Usage shows daily spend and per-provider cost breakdown. Manufacturing and Inventory tracks stock, purchase orders, demand forecast, and payment milestones. Purchase Order Detail follows the lifecycle from Draft to Received. Pre-orders shows the early-launch threshold and an activation control. System Health is a service-status grid with uptime and error counts. Content Moderation reviews AI-flagged content with confidence scores.
Every screen has a portrait and a landscape wireframe. The three-dimensional viewer occupies forty to fifty per cent of the viewport height on portrait phones and fifty to sixty per cent on portrait tablets. In landscape on tablets and desktops the viewer goes side-by-side with content, occupying around sixty per cent of the width. The gallery grid is two columns in portrait and three or four in landscape. Design Review stacks (viewer, then content, then sticky call-to-action) in portrait and goes side-by-side in landscape (viewer left at sixty per cent, content right at forty per cent). The Assembly Viewer is full-screen in both orientations with bottom controls in portrait and a side panel for step details in landscape. The cart stacks item cards in portrait and runs items-on-the-left, summary-on-the-right in landscape. Admin tables horizontal-scroll with a frozen first column in portrait and use the full width in landscape. The Mode Selector stacks cards in portrait and shows them side-by-side in landscape.
Every wireframe carries accessibility annotations. Touch targets, focus management, alt text, Accessible Rich Internet Applications (ARIA) role assignments, keyboard equivalents for every gesture, and screen-reader reading order are all called out per screen. Status badges always carry the colour-plus-icon-plus-text triple coding. Charts always have data-table alternatives. The 3D viewer carries a static fallback image and a keyboard control specification on every instance.
The wireframe set draws from a twelve-sheet visual component reference covering buttons, cards, inputs, navigation, status badges, modals and sheets, progress and loading, the 3D viewer chrome, typography, colour palette, icons and imagery, and spacing and grid. The reference defines every variant, every state, and every dimension. Wireframes are produced by composing components from the reference rather than designing fresh.
Ten key screens have dark-mode renders to validate the dark palette: Home, AI Prompt, Design Review, Assembly Viewer, Catalogue, Gallery Browse, Gallery Detail, My Designs, Settings, and the Admin Overview. The dark palette swaps the warm-white background for a forest-tinted dark neutral while keeping every brand colour unchanged for brand consistency. Auto-detection through the operating-system colour-scheme preference is the default, with a manual override in Settings.