skills.rest
maopujie10-sys
maopujie10-sysCOMMUNITY
Explore all skills by this author →
GitHub

sketch

Generates 2-3 interactive HTML mockup variants for comparing UI design directions.

1|Updated Jun 24, 2026
Search Tags:#html#comparison#prototype#ui design#wireframe#variants#mockup
One-click install
npx skills add https://github.com/maopujie10-sys/Bailongma --skill sketch-maopujie10-sys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sketch
Source: https://github.com/maopujie10-sys/Bailongma/tree/main/skills/hermes-skills/creative/sketch
Command: npx skills add https://github.com/maopujie10-sys/Bailongma --skill sketch-maopujie10-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a UI design direction from abstract descriptions is risky and slow. This Skill produces multiple disposable, interactive HTML mockups so you can compare real design variants side-by-side before committing to one. ## Core Features & Use Cases - Variant Generation: Builds 2-3 standalone HTML mockups, each taking a distinct design stance (density, emphasis, aesthetic, layout) rather than minor styling tweaks. - Visual Verification: Loads each variant in a browser and uses vision-based inspection to catch layout bugs before presenting results. - Structured Comparison: Produces per-variant READMEs and a head-to-head comparison table with an opinionated recommendation. - Use Case: Before building a new dashboard, ask for three takes on the home screen — calm editorial, utilitarian dense, and playful split — then pick a winner or request a hybrid. ## Quick Start Ask the agent to sketch two or three design variants of your screen as interactive HTML mockups so you can compare them in the browser.

Frequently Asked Questions about sketch

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create HTML mockups to compare design variants?▼

Describe the screen and its core action, then the skill builds 2-3 standalone HTML files, each taking a different design stance such as density or layout. Open each file in a browser and use the generated comparison table to pick a direction.

What makes a good design variant for UI comparison?▼

Variants should differ along one clear axis like density, emphasis, aesthetic, or layout rather than minor styling changes. Each variant needs realistic content, clickable elements, and at least one visible state transition to be meaningfully comparable.

Can I use Tailwind or custom fonts in HTML mockups?▼

Yes, variants support Tailwind via CDN script tag and one Google Font via link tag, alongside inline styles. Shared design tokens can live in a themes/tokens.css file imported by each variant when a project has an existing visual identity.

When should I not use throwaway HTML mockups?▼

Skip mockups when the design is already locked and you should build directly, when you need a production component, or when you need a diagram rather than a UI screen. Mockups are for exploring directions, not shipping code.

How are HTML mockup variants verified for layout bugs?▼

Each variant is loaded in a browser via file URL and inspected with a vision tool that describes what actually renders on the page. This catches issues like failed font imports or collapsed flex containers that source inspection misses.

Related Skills

Explore More Design & Creative Skills→
Spectra29115Spectra29115

branding-generator

Generate brand identity kits with logos, color palettes, typography, and style guides.

Community
Advanced
DebindennyDebindenny

prototype

Builds multiple divergent UI variants behind a keyboard-driven picker for live comparison.

Community
Intermediate
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate
bughqbughq
2

stacks-imagegen-mobile

Generate platform-aware mobile app screen mockups and user flow visualizations.

Official
Advanced