SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsprototype

prototype

Design & creation

View repository

Updated 10-16 02:43

About this skill

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:

Input Source If absent
Tokens DESIGN.md at the project root (the CSS custom-property block from palette.mjs) Wireframe mode: greyscale defaults
Page spec JOURNEY.md page spec section, or user description Scaffold a generic page skeleton
Fidelity User request; "wireframe" = structure only, "styled" = full tokens Default to styled when DESIGN.md present, wireframe when not

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

Reference file Load when
references/mock-recipe.md Building any mock — the HTML/CSS recipe, token mapping, surface-constraint table, fidelity specs, and prefers-reduced-motion rule