From UI Mockup to Prototype with GPT-6 Astra
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.
