prototype-orchestrator-pro

Convert informal notes into a product spec and single-file HTML prototype.

16|2|Updated Mar 12, 2026

Search Tags:#requirements #rendering #prototype #mock-data #frontend-design #product-spec #hash-routing

Ready to run

npx skills add https://github.com/Nanford/Nanford-skills --skill prototype-orchestrator-pro

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: prototype-orchestrator-pro
Source: https://github.com/Nanford/Nanford-skills/tree/main/skills/prototype-orchestrator-pro
Command: npx skills add https://github.com/Nanford/Nanford-skills --skill prototype-orchestrator-pro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

Converts informal inputs (spoken notes, meeting minutes, chat transcripts) into a precise product specification and a self-contained HTML prototype, enabling fast review and iteration.

Core Features & Use Cases

Input normalization: unify diverse notes into a consistent set of requirements and user stories.
Product spec generation: produce a succinct ProductSpec with roles, pages, entities, and flows.
Prototype rendering plan: outline a 1-file HTML prototype with hash routing, design presets, and mock data for rapid visualization.
Use case example: transform a project kickoff chat into an overview page, a task list, and a prototype render prompt.

Quick Start

Provide a concise product spec and an initial single-file HTML prototype plan based on the provided notes.

Frequently Asked Questions about prototype-orchestrator-pro

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

FAQPage Schema

How do I convert meeting notes into an HTML prototype?▼

To convert meeting notes into an HTML prototype, the Skill normalizes informal inputs like chat transcripts into product specs, then renders a single-file HTML prototype with hash routing and mock data.

What is the best way to generate mock-data scaffolding for a frontend design prototype?▼

Generating mock-data scaffolding for a frontend design prototype is handled automatically during the rendering handoff, embedding industrial design presets and mock data directly within a self-contained HTML file.

Can I use chat transcripts to generate a product spec for B2B workflows?▼

Yes, you can use chat transcripts to generate a product spec for B2B workflows by unifying diverse notes into consistent requirements, user stories, and a precise model with roles, pages, entities, and flows.

How to plan page rendering for a single-file HTML prototype?▼

Planning page rendering for a single-file HTML prototype involves outlining a step-by-step rendering handoff to frontend-design, enforcing hash-routing and restricting interactions to navigation, tabs, filters, drawers, and toasts.

Does the prototype rendering support complex interactions like custom forms?▼

No, prototype rendering does not support custom forms; it explicitly restricts prototype-level interactions to navigation, tabs, filters, drawers, and toasts for PC-first B2B workflows.

What do I need to create a single-file HTML prototype from spoken notes?▼

To create a single-file HTML prototype from spoken notes, you only need informal requirements like meeting minutes; the Skill handles input normalization, product modeling, and page planning without external dependencies.