Skip to main content

Stage 4 — Mockup Wireframe

⏱️ At a Glance Before any real code is written, DeX generates a static HTML/CSS preview of the application's screens — pulled directly from your FSD. It's a fast way to sanity-check the UI direction before committing to a full Build.

Purpose: Generate a static mockup wireframe — a raw HTML and CSS layout preview — based on the verified specification requirements, using Gemini AI.

📍 Pipeline position: Stage 4 of 9 — see the full pipeline map.

How It Works​

The wireframe tool reads your project's FSD (Functional Specification Document) and extracts:

  • User screens
  • Navigation elements
  • Input fields
  • Database schema references

From that, it generates a single-page HTML layout with modern, responsive CSS — a rough but functional preview of what the application's screens will look like, before any backend or real frontend code exists.

⚠️ Prerequisite: Make sure Stage 2 — Specification (FSD) is saved before generating a wireframe. The wireframe tool reads directly from the saved FSD; an unsaved or incomplete FSD will produce an incomplete layout.

Steps​

  1. Open Stage 4 — Mockup Wireframe on your project.
  2. Confirm the Specification (FSD) step shows as saved — if not, return to Stage 2 — Specification first.
  3. Click "Generate Mockup Wireframe."
  4. Watch the Wireframe Generation Log Console for real-time output as the layout is built. It shows [CONSOLE IDLE] until generation starts.
  5. Once generation completes, review the layout in the UI/UX Layout Preview panel.
  6. Use Clear on the console if you want to re-run generation with a clean log.

🧩 The wireframe is intentionally rough — a single-page static layout, not a pixel-perfect design. Its job is to validate screen structure and navigation flow early, before Build turns the FSD into real, runnable code.

Worked Example — Gate Secure​

For Gate Secure, the wireframe tool read the FSD's defined screens — a vehicle entry log form, an exit log form, and a security officer's daily log view — and generated a single-page HTML preview showing all three as a connected flow, before any backend code was written.

What's Next​

➡️ Stage 5 — Build — Compile the verified specification and approved plan into a real, runnable codebase.