prototype-design

Name: prototype-design
Availability: InStock
Author: BeWaterMyFriend7

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

Ready to run

npx skills add https://github.com/BeWaterMyFriend7/SKILL-PROJECT --skill prototype-design

💬 Prompt for ChatGPT / Claude Chat▼

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.