SkillsAdd

ryanthedev/design-for-ai

prototype

Produces self-contained HTML/CSS mockups and wireframes from design tokens and page specs — the output is always a viewable .html file, not guidance or code. Use when the request is to see a design, make a mock, build or show a prototype, create a wireframe, render a preview, or visualize what a page looks like before writing production code. Reads DESIGN.md tokens and JOURNEY.md page specs when present; uses greyscale wireframe defaults when absent. Renders via the browser MCP and returns a sc…

First seen Jun 21, 2026

Installation

$ npx skills add ryanthedev/design-for-ai --skill prototype
View on skills.sh ↗ GitHub repository ↗

Summary

  • Produces self-contained HTML/CSS mockups and wireframes from design tokens and page specs — the output is always a viewable .html file, not guidance or code.
  • Use when the request is to see a design, make a mock, build or show a prototype, create a wireframe, render a preview, or visualize what a page looks like before writing production code.
  • Reads DESIGN.md tokens and JOURNEY.md page specs when present; uses greyscale wireframe defaults when absent.
  • Renders via the browser MCP and returns a screenshot path when connected; emits the .html with an open note when not.
  • Not for: choosing or defining fonts, colors, visual identity, or design tokens (use core design); critiquing, auditing, or reviewing an existing design (use core audit); planning IA, flows, or page specs (use journey); building a design token system or component library (use design-systems).

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

agent-browser Shared topics
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Shared topics
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Shared topics
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
azure-enterprise-infra-planner Shared topics
microsoft/azure-skills

Architect and provision enterprise Azure infrastructure from workload descriptions. For cloud a…

402.8K installs

Also in this package

Other skills from ryanthedev/design-for-ai · top by installs.

npx skills add ryanthedev/design-for-ai
design-for-ai 99 usability 33 data-viz 33 clarify 31 deceptive-patterns 4 behavioral 4 design-systems 4 content-design 4 ai-native 4 journey 4

Browse all from ryanthedev/design-for-ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 289
License MIT
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 4,389 B
  • docs SUMMARY.md 884 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 31 installs

SKILL.md

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. browsernavigate(url: "file://<absolute-path-to-html>", allowinternal: 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