← ClaudeAtlas

prototype-guidelisted

Generates self-contained HTML prototypes with design context from project files. Read design principles, personas, and hypothesis files, then produce a working prototype for Usability and Value risk validation. Use when creating prototypes or validating through tangible artifacts.
Florellaoccipital551/claude-code-discover · ★ 0 · Web & Frontend · score 75
Install: claude install-skill Florellaoccipital551/claude-code-discover
# Prototype Generation Guide ## Purpose Prototypes are **hypothesis validation tools**, not final implementations. They test Usability and Value risks by making ideas tangible enough for evaluation. ## Output Format Generate a **single self-contained HTML file** in `docs/discovery/prototypes/`. The file must: - Open directly in a browser (double-click) with no build step - Use Tailwind CSS via CDN and Google Fonts for typography - Include all CSS and JavaScript inline - Use mock data instead of real APIs ## Design Context Injection Before generating, read the relevant project files to understand the full context: 1. **Design Principles** — read `docs/product/design-principles.md` 2. **Persona** — read relevant file from `docs/product/personas/` 3. **Hypothesis Under Test** — read the target hypothesis file from `docs/discovery/hypotheses/` 4. **Vision** — read `docs/product/vision.md` for tone and value proposition These files drive every design decision. A prototype built without reading them validates nothing. ### Blueprint Context (include when `docs/product/design/` exists) Read all available artifacts from `docs/product/design/` (information architecture, brand direction, user flows, content model, AI interaction model). When present, brand direction overrides ad-hoc aesthetic inference from design principles. ### Additional Context (include when available) 5. **State Design** — which states to demonstrate (Loading / Empty / Error / Partial / Success) 6. **Ac