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

design-prototype-docs

Generate structured UI mockup design documents from RFP/SFR requirements.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill bridges the gap between abstract functional requirements and actionable technical specifications by automatically generating structured UI mockup design documents.

Core Features & Use Cases

  • Requirement Analysis: Transforms RFP/SFR documents into clear, screen-by-screen design specifications.
  • Standardized Output: Produces Markdown documents compatible with the create-prototype skill, including screen flows, layout patterns, and dummy data.
  • Use Case: When starting a new feature implementation, use this Skill to define the screen structure, navigation flow, and component requirements before writing a single line of code.

Quick Start

Use the design-prototype-docs skill to analyze the requirements in the attached document and generate a mockup design specification.

Frequently Asked Questions about design-prototype-docs

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

FAQPage Schema
How do I generate UI mockup design documents from functional requirements?▼

UI mockup design documents are needed during the software design phase when translating abstract functional requirements into actionable technical specifications. They provide screen-level specifications, component definitions, and navigation flow diagrams required before implementation begins.

What is the best way to translate RFP documents into screen-level specifications?▼

The best way to translate RFP documents into screen-level specifications is by applying an automated requirement analysis process. This extracts functional needs and generates standardized Markdown documents containing screen structures, navigation flows, and dummy data for technical teams.

Can I use Markdown documentation for automated prototyping tools?▼

Before generating standardized mockup design documents, you need structured functional requirements or RFP/SFR documents as input. These inputs are analyzed to identify layout patterns and define component requirements for the resulting technical specifications.

Does this approach work for defining navigation flow diagrams and component definitions?▼

Yes, this approach works for defining navigation flow diagrams and component definitions. It processes functional requirements to output structured technical documentation that includes detailed screen flows, layout patterns, and specific component requirements for developers.

Related Skills

Explore More Software Engineering Skills→
jesseotremblayjesseotremblay
1

processing-data

Transform, clean, and extract structured information from CSV and JSON data.

Community
Basic
AIS-Commercial-Business-UnitAIS-Commercial-Business-Unit

ais-ux-prototype-review

Evaluate AI-generated UI/UX prototypes against design and accessibility standards.

Official
Intermediate
htlin222htlin222
77

sc-design

Designs system architecture, APIs, component interfaces, and technical specifications for software development.

Community
Intermediate
Vivekmano27Vivekmano27

ui-wireframes

Generate structured UI wireframes and component specifications in Markdown.

Community
Intermediate