skills.rest
luckybbjason1
luckybbjason1COMMUNITY
Explore all skills by this author →
GitHub

sketch

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a UI design direction without seeing options leads to costly rework. This Skill produces disposable, interactive HTML mockups so you can compare 2-3 distinct design stances side-by-side before committing to one. ## Core Features & Use Cases - Variant Generation: Builds 2-3 self-contained HTML files, each taking a different design stance (density, emphasis, aesthetic, layout) rather than superficial color tweaks. - 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 rationale. - 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 three design variants of your app's home screen 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 create HTML mockups to compare design directions?▼

Describe the screen you want and the feel you are after, then the skill builds 2-3 standalone HTML variants with different design stances. Each variant is a single file with inline styles that you open directly in a browser.

What makes a good design variant for comparison?▼

Good variants differ along one clear axis such as density, emphasis, aesthetic, or layout, not just accent colors. Each variant should commit to a distinct stance so the trade-offs between options are visible.

Can I use Tailwind CSS in throwaway HTML mockups?▼

Yes, Tailwind via the CDN script tag works well for quick mockups since it requires no build step. Alternatively, use inline styles with system fonts or a single Google Font link to keep each file self-contained.

When should I not use throwaway HTML sketches?▼

Skip sketching when the design is already locked and you just need to build it, when you need a production-ready component, or when you want a diagram rather than a UI mockup. Sketches are for exploring directions, not shipping code.

How interactive should a design mockup be?▼

A mockup needs at least one clickable primary action with a visible result, one meaningful state transition like a filter or toggle, and hover affordances on buttons. More than that is over-engineering a disposable artifact.

Related Skills

Explore More Design & Creative Skills→
Spectra29115Spectra29115

branding-generator

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

Community
Advanced
raphaelmansraphaelmans

prototype

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

Community
Intermediate
xcrrrxcrrr
4

design-critiquer

Convert UI design feedback into structured, actionable critiques.

Community
Advanced
Clos01Clos01
3

wireframe-sketch

Create low-fidelity hand-drawn wireframe layouts with variant tabs and annotations.

Community
Intermediate