skills.rest
hb9397
hb9397COMMUNITY
Explore all skills by this author →
GitHub

create-prototype

Generates standalone interactive HTML prototypes with Tailwind CSS from requirement IDs and descriptions.

Updated Mar 5, 2026
Search Tags:#ui#html#frontend#validation#prototype#mockup
One-click install
npx skills add https://github.com/hb9397/ai-agent-harness-docs --skill create-prototype-hb9397
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-prototype
Source: https://github.com/hb9397/ai-agent-harness-docs/tree/main/plugins/ai-agent-harness/runtime/claude/skills/create-prototype
Command: npx skills add https://github.com/hb9397/ai-agent-harness-docs --skill create-prototype-hb9397

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the gap between abstract design requirements and functional UI verification by generating interactive, browser-ready HTML prototypes that allow stakeholders to validate layouts and flows before actual development begins.

Core Features & Use Cases

  • Interactive Mockups: Creates functional HTML/CSS/JS prototypes using Tailwind CSS and Noto Sans KR that can be opened directly in any browser.
  • Requirement-Driven Generation: Maps specific requirement IDs (e.g., SFR, REQ) to structured UI components, ensuring traceability.
  • Use Case: When a project requires immediate visual validation of a new screen flow, this skill generates a complete, interactive prototype including navigation, modals, and dummy data, allowing for rapid feedback cycles without writing production code.

Quick Start

Use the create-prototype skill to generate an interactive HTML UI for the screen associated with requirement SFR-018.

Frequently Asked Questions about create-prototype

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

FAQPage Schema
How do I generate interactive HTML prototypes from requirement descriptions?▼

Generating interactive HTML prototypes involves mapping specific requirement identifiers and functional descriptions to structured UI components, producing standalone browser-executable mockups using HTML, CSS, and JavaScript for immediate visual validation.

Can I create a UI mockup with Tailwind CSS without writing production code?▼

Yes, you can create a UI mockup with Tailwind CSS without writing production code by generating standalone, browser-ready HTML files that use predefined design systems and Tailwind utility classes for rapid design verification.

What is the best way to validate web application screen flows before development?▼

The best way to validate web application screen flows before development is to generate interactive HTML prototypes that include navigation, modals, and dummy data, allowing stakeholders to provide rapid feedback on functional layouts.

Does the generated HTML prototype maintain separation of concerns between layout and logic?▼

Yes, the generated HTML prototype maintains strict separation of concerns between layout, logic, and data while adhering to predefined design systems, ensuring clean and structured frontend code for UI validation.

How are requirement IDs mapped to UI components during prototype generation?▼

Requirement IDs like SFR or REQ are mapped to structured UI components during prototype generation, ensuring complete traceability from abstract design requirements to functional interface elements and dummy data.

Are there limitations to using browser-executable mockups for rapid UI validation?▼

Browser-executable mockups for rapid UI validation are limited to frontend interaction and design verification, as they use dummy data and standalone HTML files rather than connecting to actual backend logic or production databases.

Related Skills

Explore More Design & Creative Skills→
Codeplain-aiCodeplain-ai

analyze-func-specs

Analyze functional specification pairs for conflicts and report conflicting pairs.

Official
Intermediate
BENYEKHLEF-AnouarBENYEKHLEF-Anouar

developpeur-front

Convert validated HTML mockups into production-ready frontend code.

Community
Advanced
Thanh-aperoThanh-apero
1

ui-styling

Build accessible user interfaces with shadcn/ui components and Tailwind CSS styling.

Community
Advanced
kimmyxpowkimmyxpow

canvas-design

Generate original visual art in PDF or PNG formats from a design philosophy.

Community
Advanced