plan_screen_architecture
Architect and decompose UI screen creation or edits into ordered build steps, typography, 8pt grid, and layout constraints before Figma canvas changes; outputs roadmap for user confirmation.
Instructions
Architect and plan a multi-section UI screen creation OR design edit/refactor before code generation. Decomposes the UI into an ordered sequence of structured steps, establishes typography scale, 8pt grid dimensions, and layout constraints (wrapping, auto-layout directions, stretch alignment) to guarantee zero overflow/overlap. MANDATORY PROTOCOL GATE: Once this tool returns, the LLM MUST present the generated roadmap to the user for explicit confirmation before executing any canvas mutations.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| mode | No | Planning mode: 'create' for new screens from scratch, 'edit' for refactoring/improving existing nodes | create |
| preset | No | Target frame preset (required for 'create', optional for 'edit') | |
| changes | No | Ordered array of atomic modifications (for 'edit' mode) | |
| palette | No | Color token palette | |
| sections | No | Ordered array of sections to build sequentially (for 'create' mode) | |
| archetype | No | Typography archetype | institutional |
| screenName | Yes | Screen or component name, e.g. 'Institutional Consulting Landing Page' or 'Hero Section Refactor' | |
| refactorGoals | No | Key refactoring objectives (e.g. 'Fix tag row overflow', 'Elevate typography to 8pt scale') | |
| targetNodeIds | No | Figma node IDs to be edited/refactored (for 'edit' mode) |