AugmentClaude
UI/UXFrontendUI/UX

MockupLM

By nimbalyst· nimbalyst/nimbalyst· 0

Create interactive HTML mockups to design and plan UI layouts visually.

Installation

  1. Make sure Claude is on your device and in your terminal.

    Skills load from ~/.claude/skills/ when Claude Code starts up — so you need it on your machine first. If you don't have it yet, install it once with the command below, then run claude in any terminal to verify.

    One-time setup
    npm i -g @anthropic-ai/claude-code

    Already have it? Skip ahead.

  2. Paste into Claude Code or into your terminal.
    Install
    Sign up to copy
    Sign up free to reveal

    This copies the whole skill folder into ~/.claude/skills/mockuplm-nimbalyst/ — the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.

    Faster alternative (instruction-only skills)

    Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates — they won't be downloaded and the skill will fail when it tries to load them.

    Quick install (SKILL.md only)
    Sign up to copy
    Sign up free to reveal
  3. Restart Claude Code.

    Quit and reopen Claude Code (or any other agent that loads from ~/.claude/skills/). New skills are picked up on startup.

  4. Just ask Claude.

    Skills auto-activate when your request matches the skill's description — no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the “What this skill does” section above.

Prefer to read the source first? Open on GitHub.

When Claude uses it

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.

What this skill does

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

  • 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:

  1. Check nimbalyst-local/existing-screens/ for cached replicas
  2. If no replica exists, create a pixel-perfect HTML/CSS replica first
  3. Copy to nimbalyst-local/mockups/ and apply modifications there
  4. Never modify the original in existing-screens directly

File Naming

Use kebab-case with .mockup.html extension:

  • settings-page.mockup.html
  • checkout-flow.mockup.html
  • user-profile-card.mockup.html

Related skills

L

Logo Creator

SamurAIGPT

Generate minimalist, scalable vector logos using geometric shapes and negative space.

D

Design Audit

thedotmack

Score a design against Dieter Rams' principles and create a plan to improve it.

E

Excalidraw

nimbalyst

Create flowcharts, architecture diagrams, and visual sketches with Excalidraw.

W

Workflow Audit

Terryc21

Analyze SwiftUI app flows to find navigation issues and broken user paths.

Apache-2.0