prd-to-app

# PRD-to-App: Full-Stack Application Builder > **Language**: Respond in the same language the user uses. Code comments should match. Build a complete, deployed web application from PRD + prototypes + resources. The result must be fully reproducible via a single `bash start.sh`. **Origin**: Adapted from `zai-org/GLM-skills/glmv-prd-to-app` (Apache 2.0). ZHIPU API dependencies removed; replaced with Playwright + look_at for prototype analysis. --- ## Phase 0: Material Discovery & Analysis Before anything else, understand what you're working with. ### 0a. Locate all inputs ``` ./prd.md ← Product requirement document ./prototypes/*.jpg|*.png ← UI prototype images (the visual truth) ./resources/**/* ← Images, videos, icons, and other assets ``` If the materials are in a different location, adapt accordingly. Read the PRD fully. ### 0b. Deep prototype analysis For **every** prototype image: 1. **Read the image** using the `look_at` tool (or `Read` tool for images) — examine it directly. Extract: page identity, layout structure, component inventory, content inventory, color extraction (hex values), typography, interactive states, data patterns. 2. For each image, document: - **Page identity**: which page/view this represents - **Layout structure**: header, sidebar, main content, footer, modals - **Component inventory**: every button, form, card, table, list, nav element - **Content inventory**: all visible text, numbers...