Mockups (Mod+5) is where you create and review visual designs. It is a three-pane workspace: a mockup browser on the left, a live preview in the center, and an agent chat on the right.
The three panes
Left — Mockup browser. Browse and search your mockups. Each mockup shows a thumbnail, name, and when it was last updated. Click a mockup to open it in the preview pane.
Center — Preview. The selected mockup renders in a sandboxed browser preview. Mockups are self-contained HTML with inline styles — no external dependencies, no scripts. This ensures they render consistently across machines.
The preview updates live as you edit a mockup. When kui (the UI designer agent) edits a mockup via the chat pane, the preview refreshes automatically to show the new version.
Right — Mockup chat. Chat with the agent assigned to this mockup. The chat is bound to the mockup session — any changes the agent makes are reflected in the preview.
Creating a mockup
Open Mockups (Mod+5). In the left pane, click New Mockup. Give it a name and describe what you're designing.
In the right pane, ask kui to create it:
Use kui to create two variants of a settings page: one with a sidebar layout and one with tabs.kui generates HTML mockups that render in the preview pane. Each variant is a separate mockup that you can compare side by side.
Reviewing mockups
When you have multiple variants, the review modal appears. Navigate between variants with arrow buttons. Select the one you want to keep and click Submit. Add an optional comment explaining your choice.
The selected mockup becomes the active version. kui updates the PRD to link to this mockup so downstream agents (klead, kdev) can reference the visual design.
Working with agents
The mockup chat pane is where you iterate on designs. Ask for changes:
Make the sidebar narrower and add a search box at the top.kui edits the mockup and the preview updates. This loop continues until the design is right.
When a mockup is linked to an initiative, any agent working on that initiative can see it. kdev references the mockup when implementing frontend code. ktest checks that the implementation matches the approved design.
When to use mockups
Use mockups when a feature has visual implications and you need to decide between approaches before writing code. A mockup is cheaper than an implementation — you can iterate on design without touching production code.
Good uses:
- Comparing two layout options for a new page
- Getting team feedback on a navigation redesign
- Exploring interaction patterns for a complex feature
Related pages
- Documents — written artifacts that complement mockups
- Use mockups in review — the review workflow
- Agents — kui, the UI designer agent