ryanthedev/design-for-ai/prototype

Prototype turns design tokens and page specs into a viewable artifact — a single self-contained .html file that opens in any browser with no build step.

When this applies

• "Show me what it looks like" / "make a mock" / "build a prototype" / "render a wireframe"
• Visualizing a page from a JOURNEY.md page spec
• Checking token application before writing production code
• Supplying a screenshot for the design-review-agent to critique

Procedure

1. Gather inputs

Collect three inputs:

If DESIGN.md is absent, note it and proceed in wireframe mode — emit the .html with a comment: <!-- No DESIGN.md found — wireframe mode: greyscale defaults. Run /design-for-ai to establish tokens. -->.

2. Build the mock

Load references/mock-recipe.md. Follow the recipe for the chosen fidelity:

• Wireframe: HTML structure + CSS custom properties defaulting to greys; semantic sectioning (<header>, <main>, <nav>, <section>, <aside>, <footer>); placeholder labels ([Hero headline], [Body copy], [CTA]); no color, no imagery.
• Styled: All DESIGN.md tokens applied to :root as CSS custom properties; type scale, color, spacing, and surface constraints from DESIGN.md honored. Webfont <link> included when DESIGN.md names one.

Both fidelities: single file, all CSS in <style>, prefers-reduced-motion media query suppressing transitions, touch targets ≥44×44px on mobile surfaces, semantic HTML.

Write the file to <project-root>/mocks/<page-name>.html (create mocks/ if needed), or to ./mock.html when no project root is clear.

3. Render and screenshot (graceful protocol)

When the browser MCP is connected:

1. browser_connect(mode: "launch", channel: "chrome", headless: true) — or reuse existing connection.
2. browser_navigate(url: "file://<absolute-path-to-html>", allow_internal: true) — local file render; allow_internal is required.
3. browser_screenshot() — returns {path} (a PNG).
4. Dispatch a Haiku subagent to read the PNG and return a text summary (payload discipline: large artifact stays out of main context).
5. Return: the .html path, the screenshot path, and the Haiku summary.

When the browser MCP is not connected (graceful fallback):

Emit the .html path and note: "Open <path> in your browser to view — browser MCP not connected so no screenshot was captured." No error. The mock is still the deliverable.

Detection: if browser_connect fails, fall to the fallback. Never block on MCP availability.

4. Handoff

Suggest running /design-for-ai:mock (which dispatches the design-review-agent) to critique the rendered result, or build for a full gated review.

References