Ui mockup

Generate HTML/CSS mockups for UI design. Produces browser-previewable mockup files with placeholder data. Use when the user says ui-mockup, mockup, design UI, wireframe, or needs visual reference for a feature.From its SKILL.md

Install

npx -y skills add yugasun/aiops --skill ui-mockup

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.4 KB, as published. Nobody here has run it

UI Mockup

Generate static HTML mockups as visual reference for Builder implementation.

Output structure

.scratch/<feature>/mockups/
├── index.html              # Entry page linking to all mockups
├── <page-name>.html        # One HTML per page/state
└── design-notes.md         # Design decisions and interactions

Mockup rules

HTML

Self-contained: open directly in browser, no build step
Inline CSS via <style> or CDN frameworks (Tailwind CDN preferred)
Semantic HTML structure
Placeholder data marked with [placeholder]

CSS

8px grid spacing system
CSS variables for colors and spacing
Responsive: Desktop (>1024px), Tablet (768-1024px), Mobile (<768px)
Use media queries for responsive breakpoints

States

Show key states as separate files or CSS classes:

Default
Hover / Active
Error / Validation
Loading / Empty
Success

No JavaScript logic

No event handlers
No dynamic data fetching
Interactions described in design-notes.md
CSS :hover, :active, :focus allowed for visual states

Template

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Page Name] — Mockup</title>
  <style>
    :root {
      --color-primary: #1a73e8;
      --color-error: #d93025;
      --color-success: #188038;
      --spacing-unit: 8px;
      --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: var(--font-family); padding: calc(var(--spacing-unit) * 3); }
    /* page-specific styles */
  </style>
</head>
<body>
  <!-- mockup content -->
</body>
</html>

index.html

Entry page with links to all mockup files:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Mockups — [Feature Name]</title>
  <style>
    body { font-family: sans-serif; padding: 32px; max-width: 600px; }
    h1 { margin-bottom: 16px; }
    ul { list-style: none; }
    li { margin: 8px 0; }
    a { color: #1a73e8; text-decoration: none; }
    a:hover { text-decoration: underline; }
  </style>
</head>
<body>
  <h1>[Feature Name] Mockups</h1>
  <ul>
    <li><a href="page-name.html">Page Name</a> — description</li>
  </ul>
</body>
</html>

Design notes format

Write design-notes.md with:

Pages — table of all mockup files and their purpose
Design Decisions — colors, fonts, spacing rationale
Interactions — describe hover, click, transitions in words
Responsive — breakpoint behavior for each page
Components — table of UI components used and their variants

Flow

Read .scratch/<feature>/NOTES.md and tech-spec.md for context
Identify pages and states needed
Generate index.html first
Generate each page HTML
Write design-notes.md
Report: list of generated files + open browser command

Integration with design systems

If the target project has a design system:

Use its color tokens as CSS variables
Match its component patterns
Reference its component names in design-notes.md