wireframes

/architect:wireframes

CRITICAL — Output Format

You MUST write .json files only. This is not optional.

✅ Correct	❌ Wrong
dashboard.json	dashboard.html
users-list.json	wireframes.html
_manifest.json	Any .html, .css, .tsx, .jsx file

If you are about to write an HTML file, STOP. This command does not generate HTML. Archon renders the JSON natively — no HTML is needed or wanted.

Why JSON (not HTML)

JSON specs are ~20 lines per screen. Archon renders them as polished wireframes natively. Generating HTML would:

• Exceed the output token limit (15 screens × 200 lines HTML = 3,000 lines)
• Produce files Archon cannot render
• Defeat the purpose of this command

Each screen = one .json file, ~20-30 lines. 15 screens = ~400 lines total. All in one run.

Workflow

Step 1: Check Manifest

Check if architecture-output/wireframes/_manifest.json exists with a non-empty generated array. If all screens already exist, output [WIREFRAMES_DONE] and stop.

Step 2: Read Context

First, check for architecture-output/_state.json. If it exists, read it in full and extract:

• project.name → appName
• design → primary, secondary, accent, personality, heading_font, body_font, mono_font, border_radius, shadow, component_library — use all of these in the theme field of each spec
• design.tokens_file → if present, read that file (e.g. architecture-output/design-system/design-tokens.json) to get precise token values for spacing, border radius, shadows, and motion — use these values in the theme object for complete fidelity
• entities → field names for realistic placeholder values in specs

If _state.json.entities is absent, read domain.entities[] from SDL as the entity list fallback (check solution.sdl.yaml first; if absent, check sdl/data.yaml or the relevant sdl/ module). This provides entity names for generating data-display wireframe screens.