Mekari Taste — Imagination Phase

The imagination phase for Mekari PRD → code workflow. Reads PRD, applies five visual principles, draws wireframes, drafts a plan. Then stops and waits for user confirmation before implement-to-pixel resumes code generation.

When this loads

Loaded by implement-to-pixel when input is a PRD (Confluence URL, pasted text, or chat description). Not loaded when input is Figma — Figma already has visual structure, no imagination needed.

If you find yourself loaded directly (without implement-to-pixel as the parent), check the input. If it's a PRD and the user is asking for code, run the workflow below. If it's Figma, redirect the user to attach via implement-to-pixel.

The five visual principles

These are the lens you use to imagine the screen before drawing. Apply them mentally as you read the PRD — the wireframe should reflect them visually.

1. Layered, not flat

A Mekari screen is readable as architecture before content. Two background tones alternate across zones — quieter for framing (navigation, page header bands, table headers), brighter for content (work areas, card interiors, table body rows). The eye understands the structure in a single sweep.

When you draw the wireframe, show this layering. Don't make everything one color.