Skip to content
Ileen Docs

Frontend Mockup Generation

The frontend mockup generator creates production-quality HTML+CSS mockups based on your project’s structured requirements. The mockup is generated by an AI agent and becomes a first-class design artefact that automatically informs Tech Lead milestones, Team Lead tasks, and Coder implementation.

For even more control, you can provide a reference website URL — the system will analyse the target site’s design system (colours, typography, layout, components) and generate a mockup that matches its visual identity while implementing your specific functional requirements.

Applies to: Design Mode — Architect stage

Opening the mockup panel

If your account has access to the feature:

  1. Open a project and stay in the Architect stage.
  2. In the header toolbar, click the Mockup button (palette icon).
  3. The mockup panel opens on the right side of the screen.

If the button is not visible, the feature may not be enabled for your account yet. See the Feature Flags guide.

Generating a mockup

Without a reference design

  1. Open the mockup panel.
  2. Click the Generate button (refresh icon) in the panel header.
  3. The AI analyses your project requirements and generates an interactive HTML+CSS mockup using a professional design system tailored to your project’s domain.
  4. When generation completes, the Live Preview updates automatically.

With a reference design (Advanced)

The reference design feature lets you match the visual identity of an existing website.

  1. Open the mockup panel.
  2. In the Reference Design section, paste a URL in the input field (e.g. https://stripe.com).
  3. A green Active badge will appear next to the input, confirming the reference will be used.
  4. Click Generate.

The system will:

  1. Explore the reference site — an AI agent navigates the reference URL, scrolls through the page, and takes screenshots.
  2. Analyse the design — the agent extracts colours, typography, spacing, component patterns, layout structure, and interactive states.
  3. Build the mockup — the coding agent generates HTML+CSS that follows the reference visual identity while implementing your project’s functional requirements.

Keeping the mockup in sync with requirements

As you chat with the Architect and refine your project requirements, the mockup may become outdated. The system tracks this automatically:

  • When the Architect introduces new functional requirements, pages, or features that are not reflected in the current mockup, it marks the mockup as stale.
  • A warning banner appears in the mockup panel: ⚠ The mockup may be outdated — the architect has updated the project requirements. Consider regenerating.
  • Click the Generate button to regenerate the mockup with the latest requirements.

Iterating on the mockup

To update an existing mockup:

  1. Optionally update the reference URL in the input field.
  2. Click the Generate button (refresh icon).
  3. The agent regenerates the mockup, applying your latest requirements and reference design (if provided) to the existing HTML and CSS.

The URL input retains the previously used reference URL so you don’t need to re-enter it unless you want to change it.

How the mockup flows into development

The mockup is not just a visual reference — it becomes part of your project’s design specification and is automatically injected into every downstream step:

  1. Mockup saved — when generation completes, the HTML and CSS are stored securely alongside your project (kept separate from project documents to avoid bloating them).

  2. Architect awareness — every Architect interaction automatically receives the mockup as context. The Architect sees the UI you’ve designed and can plan architecture, components, and services that are consistent with it.

  3. Tech Lead — when generating milestones, the Tech Lead receives the mockup as the primary frontend design input. Milestones directly reference UI components and pages identified in the mockup.

  4. Team Lead — each developer task includes a reference to the mockup so every task knows which UI components it must implement and how the frontend is structured.

  5. Coder — the coding agent is instructed to read the mockup files to match exact layout, colours, spacing, and responsive breakpoints when implementing each task.

This means a mockup you generate directly shapes the architecture, milestones, and final code — it is not a throwaway prototype.

Preview controls

The mockup panel includes several controls to inspect and interact with the generated design:

  • Refresh — reloads the iframe preview without regenerating.
  • Expand — opens the mockup in a full-viewport overlay for easier navigation of large designs.
  • Close — closes the mockup panel. The generated mockup is preserved and will be available when you reopen the panel.

Technical details

  • Sandboxed preview: The preview iframe uses sandbox="allow-scripts allow-same-origin allow-forms allow-modals allow-popups" for full interactivity while keeping the parent page safe.
  • Separate HTML + CSS: The mockup is stored as two artefacts — HTML (markup) and CSS (styling).
  • Real images: The generated mockup uses real photographs from Unsplash (via PicSum) for product images, hero backgrounds, and avatars. Placeholder divs and gradient blobs are never used as product imagery.
  • Stale detection: The Architect automatically flags the mockup as outdated when conversation introduces new requirements that are inconsistent with the current UI.
  • Feature flag: This feature is controlled by a feature flag and may not be available to all accounts. See the Feature Flags guide for details.

Mobile responsiveness

On mobile devices (screens narrower than 768px), the mockup panel takes over the full viewport when opened:

  • The Architect chat is hidden while the mockup panel is open.
  • Closing the mockup panel returns you to the Architect chat.
  • All mockup functionality works identically on mobile and desktop.

Limitations

  • The mockup’s visual analysis may not fully capture every design nuance of a reference website — it’s an AI interpretation, not a precise clone.
  • Some websites implement anti-bot protections that may prevent the reference design analysis from accessing the site. The generation will fall back to using your project requirements only.
  • Complex interactive behaviours (form validation, API calls, state management) are simulated with placeholder logic in the mockup — they are design references, not production implementations.

Next steps