Recursos

Prompt · hito 3

Prompt de diseño — instrucción

La capa corta que se escribe en la herramienta de diseño, junto con la especificación y los adjuntos.

Licencia: CC BY 4.0

Archivo prompts/gate-3-design-instruction.md · texto del kit, en inglés

The design prompt — short instruction layer

A method by Alexis Boyer · version 4.0 · September 22, 2026

Gate 3. What gets typed into the design tool alongside the long specification and the attachments. It is quoted here exactly as it appears in the core guide.

What you fill in

Eleven brackets, from the first line to the last list. You do not fill them by hand: the PM session — your coding agent — fills them from the PRD when it writes the design prompt. Give it this text if it does not have it already. Before it goes to the design tool, read it and check that no bracket is left.

The text to copy

Design [PRODUCT NAME], [SHORT PRODUCT DESCRIPTION].

Use the attached design system and product documents as source material. Treat the long design prompt as the full specification and this short prompt as the instruction layer.

Do not create a landing page or a concept dashboard. Start with the real product experience: [PRIMARY WORK SURFACE], [SECONDARY WORK SURFACE], [DETAIL WORKSPACE], [DEEPEST WORKFLOW].

Design deeply across the product, not only the top-level pages. Include states, variants, drawers, modals, empty, error and loading states, permission-restricted states, audit views, escalation, handoff, and safe output previews where relevant. Each main flow must be walkable end to end.

Core UX:
- [PRINCIPLE]
- [PRINCIPLE]

Must include:
- [SURFACE / FLOW]
- [CRITICAL STATE MODEL]
- [ROLE / PERMISSION VARIANTS]

Use compact, calm, high-density operational UI. Make it feel production-ready, not like a presentation.