Wednesday, September 9

From UI Mockup to Prototype with GPT-6 Astra | XPLORED

Wednesday, September 9

From UI Mockup to Prototype with GPT-6 Astra

Image source: UX Planet · Nick Babich

1. Define the visual target with GPT-6 Astra

Start by making the intended screen concrete as an image mockup.

In ChatGPT, use a Markdown prompt to communicate the functional layout, visual style, and platform requirements.
- Define the required sections and components alongside colors, spacing, and typography.
In the author’s comparison, medium effort produced sufficient results for initial ideation.
- Explore based on generation speed and results rather than always choosing a higher setting.

2. Capture the mockup’s design rules in DESIGN.md

Document the chosen image’s visual characteristics as a reference for implementation.

Include colors, typography, spacing, components, and usage rules in `DESIGN.md`.
- Make criteria that are difficult to convey through images alone explicit to narrow the gap between mockup and implementation.
Provide the specification to follow when requesting the file.
- The article uses Google’s DESIGN.md specification to structure the document.

3. Build an interactive prototype with Claude Code

Pass along both the UI image and its design rules to turn the concept into a working screen.

Establish the visual direction with GPT-6 Astra, then implement it within the codebase using Claude Code.
- This division of work brings the design into code while accounting for the existing architecture and components.
In the article, the mockup image and `DESIGN.md` are placed in the working directory and used with a design plugin.
- The prototype takes shape through visual review of the result.

XPLORED View

This example shows how to carry an AI-generated mockup into implementation by communicating both the image and its design rules.

When to read

When you like an AI mockup but its details change during implementation
When you want to organize a workflow from visual exploration to prototyping

Takeaways

Keep the colors, spacing, and component rules to preserve alongside the mockup image
Distinguish the role of visual exploration from implementation within a codebase