| name | mockuplm |
| description | Create visual UX mockups using HTML/CSS files (.mockup.html). Use when the user wants to design UI, wireframes, visual layouts, or plan features visually. |
MockupLM - Visual Planning
MockupLM is Nimbalyst's visual mockup system for UI/UX design and planning. Create .mockup.html files with HTML and inline CSS to share and iterate on designs with users.
When to Use MockupLM
- Planning new UI features or screens
- Designing layouts and visual hierarchy
- Creating wireframes or prototypes
- Visualizing proposed changes to existing screens
- Any situation where visual communication helps
Do NOT use for implementation - MockupLM is for planning only. If you're implementing actual code, don't create mockup files.
File Format
- Extension:
.mockup.html
- Location:
nimbalyst-local/mockups/ for new designs, nimbalyst-local/existing-screens/ for replicas of existing UI
- Structure: Standalone HTML with inline CSS, no external dependencies
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
Workflow
- Create mockup file in
nimbalyst-local/mockups/[descriptive-name].mockup.html
- Build the mockup with HTML and inline CSS
- Verify visually using the Task tool to spawn a sub-agent that will:
- Capture screenshot with
mcp__nimbalyst__capture_editor_screenshot
- Analyze for layout/visual issues
- Fix with Edit tool if needed
- Re-capture and iterate until correct
User Annotations
Users can draw directly on mockups in the editor (circles, arrows, highlights). These annotations are NOT in the HTML source.
To see user annotations: Use mcp__nimbalyst__capture_editor_screenshot to capture a screenshot that includes the annotations.
When the user draws on a mockup:
- Capture a screenshot to see what they marked
- Interpret their visual feedback
- Update the mockup accordingly
Design Guidelines
- Realistic appearance: Mockups should look like finished UI, not sketches
- Clean HTML/CSS: Use semantic HTML and minimal, well-organized CSS
- Modern patterns: Use flexbox, grid, CSS variables
- Placeholder content: Use realistic sample data (lorem ipsum, example names, etc.)
- Responsive design: Consider mobile breakpoints when appropriate
For Existing Screens
When modifying existing UI:
- Check
nimbalyst-local/existing-screens/ for cached replicas
- If no replica exists, create a pixel-perfect HTML/CSS replica first
- Copy to
nimbalyst-local/mockups/ and apply modifications there
- Never modify the original in existing-screens directly
File Naming
Use kebab-case with .mockup.html extension:
settings-page.mockup.htmlcheckout-flow.mockup.htmluser-profile-card.mockup.html
