page-specifications

Generate page-level specifications by creating PAGE-SPEC-*.md files that detail layout, sections, components, states, and responsive behavior. This bridges product strategy and concrete design, ensuring consistent design-system alignment from PRD through implementation.

A page specification document maps each page to layout, components, and responsive rules. You need one to fill the gap between product strategy and concrete design by producing granular specs for every screen, ensuring consistent design-system alignment.

Document responsive behavior and component states by generating a PAGE-SPEC-Landing.md file. Given a PRD and content strategy, it details the header, hero, features, and responsive states, ready for design and dev handoff.

Yes, you need a PRD and content strategy before creating page specifications. The process requires referencing MASTER.md, SHARED-LAYOUT.md, and CONTENT-STRATEGY to output a complete Page Spec with SEO, accessibility notes, and responsive rules.

Yes, you can use page specifications for dashboards, admin panels, and onboarding flows. It applies across MVP pages, enabling consistent design-system alignment and producing granular, page-level specs for every screen in a project.

The best way to ensure design-system alignment is generating PAGE-SPEC-*.md files for each page. This automates mapping layout, components, and responsive rules, maintaining consistency from PRD through implementation across all project screens.