Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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.
| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-21 | ✗→✓ | ▲ Improved | -62% | 0% |
| case-22 | ✗→✓ | ▲ Improved | 87% | 0% |
| case-12 | ✗→✓ | ▲ Improved | -22% | 0% |
| case-07 | ✗→✓ | ▲ Improved | -28% | 0% |
| case-09 | ✗→✓ | ▲ Improved | -9% | 0% |
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.
Do NOT use for implementation - MockupLM is for planning only. If you're implementing actual code, don't create mockup files.
.mockup.htmlnimbalyst-local/mockups/ for new designs, nimbalyst-local/existing-screens/ for replicas of existing UIhtml<!DOCTYPE html> <html> <head> <style> /* Inline CSS here */ </style> </head> <body> <!-- Mockup content --> </body> </html>
nimbalyst-local/mockups/[descriptive-name].mockup.htmlmcp__nimbalyst__capture_editor_screenshotUsers 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:
When modifying existing UI:
nimbalyst-local/existing-screens/ for cached replicasnimbalyst-local/mockups/ and apply modifications thereUse kebab-case with .mockup.html extension:
settings-page.mockup.htmlcheckout-flow.mockup.htmluser-profile-card.mockup.htmlOther measured skills in the registry, with their headline benchmark lift.