From page structure to clear requirements.
Lazy Ape is a low-fidelity prototyping tool. It helps express page layout and behavior, not the final visual design.
1. Create a project and keep its link
Enter a project name in the workspace to create a project without signing up. Keep its link, or save its project ID to your account. Anyone with the link can access and edit the project; an unsaved link cannot be recovered.
2. Build on the grid
Choose a component from the sidebar or right-click an empty canvas area. Positions move in 4px half-steps; sizes change in 8px steps. Double-click to edit text, use arrow keys to nudge, ⌘ / Ctrl + D to duplicate, and Delete to remove.
Choose a 384 × 832 portrait phone canvas or a 1440 × 960 desktop canvas for each new page. Mix both types in one project. Canvas type is fixed at creation; larger canvases scroll within the workspace.
Organize pages with single-level folders. Choose a folder at creation or move a page later in Page settings. Deleting a folder moves its pages to the root without deleting them. Moving or renaming folders does not affect page content or history.
Use text, buttons, inputs, blocks, image placeholders, feature regions, tables, lists, dropdowns, radios, checkboxes, and switches. Set their overall size, short text, and notes. Cells and options are not individually configured; describe data and rules in the notes.
When content does not fit, set Canvas height in Page settings to 1–5 times the base height. Width and component sizes stay unchanged. Move components inside the new bounds before shrinking. Height is included in autosave, undo and version restores; previews and PNG exports retain the full canvas.
3. Separate interface content from notes
A component name identifies it, such as “Place-order button.” Display text is what users see, such as “Place order.” Implementation notes describe behavior, conditions, and constraints.
Dashed feature regions express structure such as “a product list goes here.” They are not real controls or containers. Components with notes receive matching annotation numbers.
Use Project brief for background, goals, and business rules, and Design guidelines for design principles. Save each document explicitly; page autosave does not save these documents.
4. Check the preview
The preview shows only the page canvas, without a notes sidebar. PNG downloads match the preview and retain the full canvas and annotation numbers. Notes are saved separately.
5. Share with your agent
Use the MCP connection guide to connect Codex. Read the project brief and design guidelines before retrieving page prototypes. Each page returns one image and complete numbered notes in one call. Page changes autosave; the next agent read sees the latest saved content.
Save page versions
Pages autosave your current draft. Choose “Save version” to keep a checkpoint, then preview historical pages under Versions without replacing the live page. Agents can save checkpoints and compare later edits. Restore a version from its preview while preserving the current state in history. Each save of the project brief or design guidelines has its own history; page versions do not include these documents.
Saving and conflicts
Save status appears in the toolbar. Keep your draft if saving fails. If another window changes the same page, stale writes stop and you can explicitly reload. Deleted pages and projects cannot be restored.