skills.rest
timchap
timchapCOMMUNITY
Explore all skills by this author →
GitHub

sketch

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a UI direction from abstract descriptions alone leads to wasted build effort. This Skill produces multiple interactive HTML mockup variants so you can compare real, clickable design directions 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 trivial pixel differences. - Structured Comparison: Produces per-variant READMEs with trade-offs and an opinionated head-to-head comparison table to drive a decision. - Visual Verification: Uses browser navigation and vision tools to render each variant and catch layout bugs before presenting them. - Use Case: A product designer asks for three takes on a dashboard home screen; the Skill interviews for feel, references, and core action, then builds calm-editorial, utilitarian-dense, and playful-split variants with a comparison table. ## Quick Start Ask the assistant to sketch two or three HTML mockup variants of the screen you are designing so you can compare directions before building.

Frequently Asked Questions about sketch

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

FAQPage Schema
How do I create HTML mockup variants to compare UI designs?▼

Describe the screen you want explored, including the feel, reference products, and the core user action. The Skill builds 2-3 self-contained HTML variants with different design stances, then presents an opinionated comparison table so you can pick a winner.

What makes good design variants for comparison?▼

Good variants differ along one design axis such as density, emphasis, aesthetic, layout, or grounding, not just accent colors or pixel values. Each variant should be a complete interactive HTML file with realistic content and at least one state transition.

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

Yes. Variants are single self-contained HTML files with inline styles, and Tailwind via CDN script tag or one Google Font via link is acceptable. Shared design tokens can live in a themes/tokens.css file imported by each variant.

When should I not use disposable HTML mockups?▼

Do not use throwaway mockups when you need a production component, a polished one-off artifact like a landing page, or a diagram. Use a production design skill for shippable code and a diagram tool for visual explanations.

Why verify HTML mockups in a browser instead of reading the code?▼

Source inspection misses rendering bugs like failed font imports, collapsed flex containers, and overlapping text. Loading each variant in a browser and using vision-based inspection catches layout issues before the user sees them.

Related Skills

Explore More Design & Creative Skills→
519lab519lab
2

sketch

Generate HTML design mockups from user parameters for side-by-side comparison.

Official
Intermediate
AbsolutelySkilledAbsolutelySkilled
207

figma-to-code

Convert Figma design frames into HTML, CSS, and React components.

Official
Advanced
arayaromaarayaroma

responsive-audit

Audit and fix web layouts across mobile, laptop, and ultrawide viewports.

Community
Basic
gabrielnsmntogabrielnsmnto
3

ux-create-wireframe

Creates wireframes, interaction flows, and component inventories for developer handoff.

Community
Intermediate