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>
    /* Inline CSS here */
  </style>
</head>
<body>
  <!-- Mockup content -->
</body>
</html>

Workflow

1. Create mockup file in nimbalyst-local/mockups/[descriptive-name].mockup.html
2. Build the mockup with HTML and inline CSS
3. 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:

1. Capture a screenshot to see what they marked
2. Interpret their visual feedback
3. Update the mockup accordingly

Design Guidelines