design-exploration

name	design-exploration
description	Use Design for UI/UX exploration, side-by-side design directions, interactive prototype previews, user selection, iteration, and design-to-code handoff through the hosted Design MCP app.
metadata	{"visibility":"exported"}

Design Exploration

Use the Design app when a workflow needs visual UI exploration, prototype iteration, or a human-in-the-loop choice among design directions.

Choose The Path

• Use create-design first to create a project shell. Do not report the design as ready until it has renderable HTML.
• For open-ended UX exploration, generate distinct, compact, complete HTML directions (2-5, three by default) and call present-design-variants. Each direction should be one representative screen or directional snapshot, not a full app per variant. Design saves every option as a normal screen on the overview board and renders an inline chat choice with one button per screen name. After the user picks, delete the unchosen variant screens and continue from the kept screen by first calling get-design-snapshot with that screen's fileId, then calling edit-design on that same fileId in a bounded single-file pass. Use mode: "replace-file" when expanding the representative placeholder into the full chosen direction. Do not call generate-design after a variant pick.
• If the chat choice buttons are not available in the host, ask the user to tell you the screen name they prefer. The variants are already real screens on the board, so do not ask them to paste HTML or copy a generated handoff summary.
• For direct refinements to an already chosen direction, call , edit from the current tuned HTML, and use for surgical changes or for a bounded selected-file replacement. Use for new files only.