Ui mockup skill

Skill paipaipai666/ui-mockup-skill

Create standalone HTML mockup files — either recreating an existing project's UI from source code, or designing original UIs from a brief. Produces pixel-perfect self-contained HTML+CSS files placed in designs/ directory. Use this skill when the user wants to "recreate UI as HTML", "make a mockup from code", "build a design reference", "一比一复刻", "做成html", "UI还原", "页面还原", OR when they want to "design a UI", "做个页面", "设计一个界面", "原型设计", "mockup a design", "create a UI prototype", "design a landing page", "build a dashboard mockup", or any request to produce a visual HTML design — whether based on existing code or from scratch.From its SKILL.md

Install

npx -y skills add paipaipai666/ui-mockup-skill

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

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 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

10.0 KB, ~2.4k tokens by cl100k_base, as published. Nobody here has run it

UI Mockup Generator

Two modes, one output format:

Mode	Input	When to Use	Reference
Recreate	Existing source code	User says "复刻", "还原", "mockup from code"	Read `references/recreate.md`
Design	A brief or description	User says "设计", "做个页面", "design a UI"	Read `references/design.md`

Both produce the same output: a single self-contained HTML file in designs/, scrollable, all pages/states laid out vertically.

How to choose: If the user pointed you at a codebase or said "recreate/replicate/复刻/还原", use Recreate mode. If they described what they want or said "design/设计/做个", use Design mode. When ambiguous, ask.

Output Format

File Location

designs/<project-name>-ui-mockup.html (recreate) or designs/<design-name>-design.html (design). Create designs/ if it doesn't exist.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Name — UI Mockup</title>
  <!-- Animation libraries (CDN) — include if the source project uses them -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script> -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/framer-motion@11/dist/framer-motion.js"></script> -->
  <style>
    /* 1. Design tokens (:root CSS variables) */
    /* 2. Global reset and base styles */
    /* 3. All component styles (inlined) */
    /* 4. Page section layout styles */
  </style>
</head>
<body>
  <div class="page-section">
    <div class="section-label">Page Name</div>
    <div class="frame" style="width:1280px;height:800px;">
      <!-- Full app layout here -->
    </div>
  </div>
  <script>
    /* Animation code here — GSAP timelines, scroll triggers, etc. */
  </script>
</body>
</html>

Layout Rules

Single HTML file — all CSS inlined, all JS inlined or loaded via CDN. No build step.
All pages vertical — each in <div class="page-section">, separated by border-top, scrollable
Section labels — small uppercase label above each section
Frames — wrap full-window layouts in .frame (rounded corners, shadow, looks like a window)
Inline overlays — modals, dialogs, context menus shown in context (not as real overlays)
All states visible — default, hover, active, disabled, error, empty, loading states side by side
JS allowed — use inline <script> for animations, generated content (grids, charts), and interactivity
CDN allowed — include animation libraries via CDN when the source project uses them (GSAP, Framer Motion, anime.js, Lottie, etc.)
Annotations — complex interactions get visual annotation cards with connecting lines

Responsive & Mobile

When the user requests mobile or responsive mockups, include multiple viewport frames:

Viewport	Frame Size	When to Include
Mobile	`375px × 812px`	Mobile apps, responsive landing pages
Tablet	`768px × 1024px`	Tablet layouts, responsive breakpoints
Desktop	`1280px × 800px`	Default — always include
Wide	`1440px × 900px`	Dashboards, admin panels

For responsive designs, show the same page at multiple widths side by side. Use the .frame wrapper for each:

<div class="page-section">
  <div class="section-label">Homepage — Responsive</div>
  <div style="display:flex;gap:24px;flex-wrap:wrap;">
    <div>
      <div class="section-label">Mobile 375</div>
      <div class="frame" style="width:375px;height:812px;">...</div>
    </div>
    <div>
      <div class="section-label">Desktop 1280</div>
      <div class="frame" style="width:1280px;height:800px;">...</div>
    </div>
  </div>
</div>

For mobile-specific UI patterns, include:

Bottom navigation bar (not sidebar)
Touch-friendly tap targets (min 44px)
Swipe gestures (annotate with arrows)
Collapsed hamburger menus
Full-width cards instead of grids

Animation Handling

Recreate mode: If the source project uses an animation library, include it via CDN and recreate the animations in <script>. Match the original timing, easing, and sequence as closely as possible.

Source Library	CDN	Notes
GSAP	`https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js`	Include plugins as needed (ScrollTrigger, etc.)
anime.js	`https://cdn.jsdelivr.net/npm/animejs@3/lib/anime.min.js`
Lottie	`https://cdn.jsdelivr.net/npm/lottie-web@5/build/player/lottie.min.js`	Embed animation JSON inline or via URL
Three.js	`https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js`	Use `<script type="module">`
Framer Motion	No CDN — React-only. Approximate with CSS or GSAP instead.

Design mode: Use animation libraries when they add value to the design. Prefer GSAP for timeline-based motion, CSS for simple transitions.

Pure CSS fallback: For simple animations (hover effects, pulse, breathe, shimmer, slide-in), always use CSS. Only reach for JS libraries when CSS can't express the animation (complex timelines, scroll-triggered sequences, physics-based easing).

Required Sections (scroll order)

User Flow Diagram — page topology showing all screens and navigation relationships
Grid & Spacing Reference — 12-column grid, type scale, spacing scale
Component Library — every component × every state, laid out for review
Page Views — each page/frame with full layout
States Reference — empty states, loading states, error states, toast notifications

Essential Base CSS

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-ui); font-size: 13px; color: var(--text-primary); background: var(--bg-app); }
button { border: none; background: none; color: inherit; font: inherit; cursor: pointer; }
input { border: none; background: none; color: inherit; font: inherit; }

/* Page sections */
.page-section { padding: 60px 40px 40px; }
.page-section + .page-section { border-top: 1px solid rgba(255,255,255,0.06); }
.section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin-bottom: 20px; }

/* Frame (window-like container) */
.frame { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 16px 64px rgba(0,0,0,0.5); position: relative; }

Component Reference

Read references/components.md when you need ready-to-use CSS patterns for specific components. It includes:

Theme system — dark and light theme CSS variables (swap :root to switch)
Core UI — Button (4 variants × 4 states), Input, Toggle, Checkbox, Radio, Badge
Feedback — Toast, Skeleton Loader, Progress Bar, Tooltip
Overlay — Modal, Context Menu
Data Display — Table / Data Grid, Card, Avatar
Navigation — Sidebar, Topbar, Tabs, Breadcrumb, Pagination, Dropdown / Select
Layout — Glass Panel, Grid Reference, Status Bar
Utility — List Item, Annotation, Attention Pulse

All components are theme-agnostic — they reference CSS variables, not hardcoded colors.

Output Validation

After generating the HTML, verify it passes this checklist. Fix any failures before presenting to the user.

Tips

Read before writing. In recreate mode, thorough exploration prevents inaccuracies. In design mode, thinking before coding prevents generic output.
One file, no build. Single HTML with inline CSS/JS. CDN imports are fine; no local dependencies or build tools.
Show states, not just happy paths. Empty states, error states, loading states, and edge cases are what make a mockup useful.
Use real-ish data. "Lorem ipsum" is fine for text-heavy layouts, but for dashboards and tools, use plausible names, numbers, and labels.
Design with constraints. Pick a specific aesthetic direction and commit to it. "Clean and modern" is not a direction — "dark glassmorphism with indigo accent" is.
Match the source's animation stack. If the original uses GSAP, don't rewrite it in CSS — use GSAP via CDN. The goal is fidelity, not purity.

What ships with it: 5 files

106.1 KB alongside SKILL.md

examples/

taskflow-ui-mockup.html60.6 KB

references/

components.md20.2 KB
design.md13.6 KB
recreate.md6.3 KB

README.md5.3 KB