mockuplm

Featured

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.

Web & Frontend 1,691 stars 249 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 87/100

Stars 20%

100

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

# 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 ```html <!DOCTYPE html> <html> <head> <style> /* Inline CSS here */ </style> </head> <body>  </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...

Details

Author: nimbalyst
Repository: nimbalyst/nimbalyst
Created: 10 months ago
Last Updated: yesterday
Language: TypeScript
License: MIT

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

mockup

Composes a component-based mockup (mockup.json) from the standard themed component library. Uses the data model when available to structure the views. The interactive HTML is generated by the backend on demand.

2 Updated 1 months ago

Federico-Anastasi

AI & Automation Listed

ui-mockup

Render a UI mockup image from a one-line feature description — an LLM turns the description plus a style guide into a precise screenshot-style image prompt, then an image model renders it. Use to show the user what a screen could look like before writing any frontend code, or to settle "option A or option B" layout questions by rendering both.

0 Updated 5 days ago

nanoodlecom

Web & Frontend Listed

mockup-first

Use when a request changes how an interface looks or is arranged — a new screen, block, form, table, card, or chart; a different layout; a new screen state (empty, error, loading, limit exceeded); "make it look good", "redo the styling", "redesign this page". Do not use for one-off tweaks to a color, size, spacing, font, or copy, for fixing a broken layout, or when told "just do it, no mockup".

0 Updated 2 days ago

leogodnik