---
prompt-id: "22"
name: Extended Thinking — layout architecture for complex screens
status: live
mcp: none
model: Opus 4.7 with Extended Thinking enabled (Sonnet 4.6 + Extended Thinking is a budget-constrained fallback)
environment: claude.ai or Claude Desktop with Extended Thinking
inputs:
  - Screen name and purpose
  - Responsive breakpoints
  - List of nested component types
  - Token rules from archetype spec
  - Accessibility requirements
  - Layout archetype (e.g., W1 Multi-Pane, W2 Full-Table)
outputs:
  - Reasoned layout architecture document with constraint resolution
  - Followed by a rendered Artifact (HTML/CSS) implementing the layout
chains: []
prereqs: []
documented-in: Ch17 — Claude Design (Extended Thinking section)
---

# Prompt 22 — Extended Thinking Layout Architecture

For multi-constraint layout problems where Claude needs to reason through which constraint takes precedence at each decision point. Extended Thinking surfaces the reasoning chain so you can audit the logic, not just the output. Costs more time and tokens than standard mode — engage deliberately.

## When to use

Engage when:
- Responsive layouts across 3+ breakpoints with 5+ nested component types
- Token system architecture decisions (new semantic layers, palette extensions)
- Multiple constraints in tension (e.g., Lattice density vs. WCAG touch-target floor)

Do NOT engage for:
- Single-component generation
- Single-screen critique
- Rapid iteration loops where speed > depth

## Output shape

Two-part output:
1. **Reasoning section** — addresses the four prompt questions explicitly (which template applies? which constraints are in tension? component hierarchy? what breaks at narrowest breakpoint?)
2. **Rendered Artifact** — the layout implemented as HTML/CSS

## Chain memberships

- None. Specialised standalone tool for genuinely hard layout problems.

## Prompt body

```
LAYOUT ARCHITECTURE — Extended Thinking

[Paste spec blocks if not in a Project]

Screen: [name and purpose of the screen]

Constraints — resolve all of these simultaneously:
  Responsive: [list breakpoints, e.g. 375px / 768px / 1280px]
  Components: [list nested component types, e.g. data table, filter bar,
               detail drawer, command palette]
  Token rules: [key constraints, e.g. Lattice 2px spacing base,
                flat elevation only, 32px row height default]
  Accessibility: [e.g. keyboard-navigable, WCAG AA contrast,
                  skip-link required]
  Layout archetype: [e.g. W1 Multi-Pane, W2 Full-Table — from spec]

Think through each constraint before proposing the layout:
  1. Which layout workspace template applies? Why?
  2. Which constraints are in tension? How do you resolve each conflict?
  3. What component hierarchy satisfies all constraints simultaneously?
  4. What would break at the narrowest breakpoint — and how do you
     prevent it within the archetype's rules?

Then produce the layout as an Artifact (rendered HTML/CSS).

META-FOOTER (chain runner)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
USE WITH
  Extended Thinking enabled in claude.ai or Claude Desktop.
  Opus 4.7 recommended; Sonnet 4.6 + Extended Thinking is a
  valid fallback for budget-constrained workflows.

VERIFY
  Reasoning section addresses all four questions explicitly.
  Layout renders correctly at each named breakpoint.
  No silent constraint resolutions — every conflict has a
  reasoned answer.

HANDOFF
  "Layout architecture proposed. Review the reasoning section
   first; if any conflict resolution is wrong, re-run with the
   corrected constraint priority. Once the architecture is
   approved, generate components into it via Chain 3."
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```