Phase 02 · Product Design

The Design Skill reads requirements.md and generates a self-contained HTML prototype — a visual reference for every screen the user will interact with. No code logic, no backend — pure UI structure.

What it produces

logos/resources/prd/2-product-design/ containing one or more .html files, each a screen from your product.

How to run it

1. Click Phase 2 → Product Design.
2. RunLogos passes your requirements.md to the Design Skill automatically.
3. A prototype is generated and previewed in the RunLogos side panel.

Iterating on the prototype

Click Preview to see the rendered HTML side-by-side with the spec.

To request changes:

1. Add inline comments directly to the HTML file (HTML comments work: <!-- Make the CTA button larger -->).
2. Run the Design Skill again — it reads your comments and revises.

Repeat until the prototype matches your intent.

Why this matters for the Spec Chain

The prototype is the visual contract. Every subsequent phase — scenarios, API design, test cases — references this prototype to confirm that the system being built matches the product that was designed.

If the prototype changes, the downstream artifacts may need updating too.

Next step

→ Phase 03 · Scenario Mapping