skills.rest
CHENHUI-X
CHENHUI-XCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

sketch

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

Updated Jul 3, 2026
Search Tags:#html#prototype#ui design#wireframe#variants#mockup#design exploration
One-click install
npx skills add https://github.com/CHENHUI-X/toolbox --skill sketch-chenhui-x
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sketch
Source: https://github.com/CHENHUI-X/toolbox/tree/main/custom-skills/creative/sketch
Command: npx skills add https://github.com/CHENHUI-X/toolbox --skill sketch-chenhui-x

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a UI design direction without seeing concrete options leads to costly rework later. This Skill produces multiple disposable, interactive HTML mockups so you can compare visual directions side-by-side before committing to one. ## Core Features & Use Cases - Variant Generation: Builds 2-3 self-contained HTML mockups, each taking a distinct design stance (density, emphasis, aesthetic, layout) rather than minor pixel differences. - Visual Verification: Uses browser navigation and vision tools to render each variant and catch layout bugs before presenting them. - Head-to-Head Comparison: Presents variants in an opinionated comparison table with trade-offs, plus per-variant READMEs documenting design choices. - 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 combine two into a hybrid. ## Quick Start Ask the assistant to sketch two or three design variants of your screen as interactive HTML mockups so you can compare them side by side.

Frequently Asked Questions about sketch

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

FAQPage Schema
How do I compare multiple UI design directions before building?▼

Generate 2-3 standalone HTML mockup variants, each taking a different design stance such as density, emphasis, or layout. Open them side-by-side in a browser and use the comparison table of trade-offs to pick a winner or combine approaches.

What makes a good HTML mockup variant for design exploration?▼

Each variant should be a single self-contained HTML file with inline styles, realistic fake content, and at least one interactive state transition. Variants must differ in design stance, not just colors, so the comparison is meaningful.

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

Yes, Tailwind via CDN script tag and one Google Font via link tag are acceptable in throwaway mockups. If the project has a visual identity, shared tokens can live in a themes/tokens.css file imported by each variant.

When should I not use throwaway HTML mockups?▼

Skip mockups when the design is already locked and you should just build it, when you need a production component, or when you need a diagram rather than a UI screen. Mockups are for exploring undecided directions only.

How do I verify an HTML mockup renders correctly?▼

Open the file in a browser and visually inspect it rather than trusting the source code. Browser vision tools can catch issues like failed font imports, collapsed flex containers, or overlapping text that code review misses.

Related Skills

Explore More Design & Creative Skills→
hfadhlullahhfadhlullah

PRD Generator

Generate Product Requirements Documents through an interview process.

Community
Advanced
samuelpatrosamuelpatro
3

real-prototype

Implement design variants directly on a live app route with a switcher for in-context comparison.

Community
Intermediate
qprjack86qprjack86

excalidraw

Create hand-drawn whiteboard diagrams and wireframes as editable Excalidraw JSON.

Community
Intermediate
big4council-progbig4council-prog

sketch

Generate 2-3 interactive HTML mockup variants for UI/UX comparison.

Community
Intermediate