---
id: "action-mockup-to-code"
type: "action-item"
source_timestamps: ["00:19:45", "00:20:00"]
tags: ["software-engineering", "ui-development"]
related: ["framework-reference-ui-workflow", "entity-images-2-0", "entity-codex", "entity-claude-opus-4-7"]
action: "Generate a visual mockup first, then feed it to Codex to build the UI."
outcome: "A functional application that maintains high visual quality without relying on the coder-model's raw aesthetic taste."
speakers: ["Nate B. Jones"]
sources: ["s26-gpt55-claude-gemini"]
sourceVaultSlug: "s26-gpt55-claude-gemini"
originDay: 26
---
# Use Reference-to-Code Workflow

## Action
To overcome an LLM's lack of visual taste when coding:
1. **Generate a high-fidelity mockup** using [[entity-images-2-0|Images 2.0]] or [[entity-claude-opus-4-7|Claude Opus]].
2. **Pass the image into [[entity-codex|Codex]]** and instruct [[entity-gpt-5-5|GPT-5.5]] to build the application shell matching the reference.
3. **Test and ship** the UI.

## Why
LLMs are weak at inventing visual taste from blank prompts but strong at **matching visual references**. This workflow bypasses the weakness by separating taste (visual model) from build (coder model). Full framework: [[framework-reference-ui-workflow]].

## Expected Outcome
A functional application that maintains high visual quality without relying on the coder-model's raw aesthetic taste.

## Use When
- Building a niche dashboard or product UI.
- Aesthetic quality and information density both matter.
- You don't have a designer to produce mockups manually.