PRD Design Proposal Generator

Problem

Between requirements and implementable design, teams often lack page layout, module boundaries, and component semantics. phase-design addresses that gap: it accepts a PRD or system requirement description and produces a design proposal that downstream processes can consume, reducing manual work to infer layouts, fields, and component mappings.

How It Works

The skill uses L4 layout + L5 module structure:
- L4 selects a page skeleton from LayoutPage-1 to LayoutPage-7, such as admin consoles, dashboards, tabbed backends, or hybrid portals.
- L5 organizes modules into sections like Header, Filter, Content, and Action, using BEM naming to describe placement.
- Component tokens such as GEN::Button::primary and NAV::Menu::sidebar express component semantics without being hard-bound to a specific BEM container.
It produces three independent artifacts: design.md for human review, design.json for automation, and design.yaml for frontend engineering configuration. The Python engine is used conservatively for helpers like match_layout and get_page_layout; the LLM performs the main analysis and generation.

Boundaries and Caveats

This skill does not replace requirements analysis and does not directly generate implementation code. It currently does not reference the L3 pattern library, and the standalone L6 page library has been merged into L4. It fits cases where functional requirements are already clear and need to be structured into design specs; it is not intended for pixel-level visual design, business rule derivation, or full frontend engineering generation.