skills.rest
BeWaterMyFriend7
BeWaterMyFriend7COMMUNITY
Explore all skills by this author →
GitHub

prototype-design

Convert product requirements into interactive HTML prototypes.

46|3|Updated Feb 14, 2026
Search Tags:#design#prototype#requirements-analysis#interactive-html#output-design#design-rule#web-prototype
One-click install
npx skills add https://github.com/BeWaterMyFriend7/SKILL-PROJECT --skill prototype-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype-design
Source: https://github.com/BeWaterMyFriend7/SKILL-PROJECT/tree/main/.opencode/skills/prototype-design
Command: npx skills add https://github.com/BeWaterMyFriend7/SKILL-PROJECT --skill prototype-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts written requirements into actionable, testable prototypes by generating an interactive HTML design artifact that can be reviewed and iterated with stakeholders.

Core Features & Use Cases

  • Ingests a requirements document (output/requirements-analysis-review.md or user-provided) and decomposes it into core design elements.
  • Produces an interactive HTML prototype in the output/design-output folder, including basic UI flows and structure.
  • Validates against reference/design-rule.md to ensure a calm, accessible, web-friendly design.

Quick Start

Ingest the current requirements and generate a runnable interactive HTML prototype in output/design-output.

Frequently Asked Questions about prototype-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert product requirements into an interactive HTML prototype?▼

To convert product requirements into an interactive HTML prototype, ingest a requirements document to decompose core needs into design components and output a testable web-ready HTML artifact.

What is the process of turning written requirements into a testable web prototype?▼

Turning written requirements into a testable web prototype involves reading the document, validating against design rules, and structuring UI flows into an output folder for stakeholder review.

Can I use a custom requirements document to generate an interactive HTML prototype?▼

Yes, you can use a custom user-provided requirements document to generate an interactive HTML prototype if the default requirements analysis review file is not available.

Does the generated HTML prototype enforce accessibility and web design rules?▼

Yes, the generated HTML prototype enforces accessibility and web design rules by validating all output artifacts against a dedicated design rule reference file.

What is the best way to structure UI flows from a requirements analysis document?▼

The best way to structure UI flows from a requirements analysis document is to decompose key needs into design components and output them as a runnable interactive HTML structure.

Related Skills

Explore More Design & Creative Skills→
penwyppenwyp
139

doc-code-review-report

Verify document claims against the codebase and produce an evidence-backed findings report.

Community
Advanced
kftofkftof

ui-kit-prototype

Convert a static HTML UI kit into an interactive prototype with data-nav-target navigation.

Community
Advanced
kamenskamens
26

hstack-wiki-ingest

Classifies raw health and research files into wiki pages with linked sources.

Community
Advanced
TairitsuaTairitsua
13

mo-ui-design

Create interactive HTML prototypes for MudBlazor/Blazor UI designs.

Community
Intermediate