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, labels, placeholder content
   • Color extraction: primary, secondary, accent, background, text colors (hex values)
   • Typography: font sizes, weights, hierarchy observed
   • Interactive states: hover effects, active tabs, selected items, toggles
   • Data patterns: what data populates lists/tables/cards — this drives seed data

3. Build a page map showing navigation flow between prototype pages.

0c. Resource inventory

List all files in ./resources/ and map each to where it appears in the prototypes. Every resource file must be used in the final application where relevant.