skills.rest
ShineBreaker
ShineBreakerCOMMUNITY
Explore all skills by this author →
GitHub

sketch

Generates 2-3 interactive HTML design variants for side-by-side UI comparison.

2|Updated Jan 2, 2026
Search Tags:#comparison#wireframe#sketch#ui prototype#design exploration#design variants#html mockup
One-click install
npx skills add https://github.com/ShineBreaker/Guix-configs --skill sketch-shinebreaker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sketch
Source: https://github.com/ShineBreaker/Guix-configs/tree/main/dotfiles/mutable/agents/hermes/.local/share/hermes/skills/.archive/sketch
Command: npx skills add https://github.com/ShineBreaker/Guix-configs --skill sketch-shinebreaker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a UI direction without seeing options leads to costly rework. This Skill produces multiple throwaway HTML mockups so you can compare design stances visually before committing to one. ## Core Features & Use Cases - Variant Generation: Builds 2-3 self-contained HTML files, 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 request a hybrid. ## Quick Start Ask the agent to sketch three design variants of your settings page so you can compare layout directions before building it.

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?▼

Request 2-3 sketch variants that each take a different design stance, such as density, emphasis, or layout. Each variant is a standalone interactive HTML file you open in a browser, followed by a comparison table of trade-offs.

What makes a good HTML mockup for design exploration?▼

A good mockup is a single self-contained HTML file with inline styles, realistic fake content instead of lorem ipsum, and at least one interactive state transition. Variants should differ in design stance, not just accent colors.

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

Yes, Tailwind via CDN script tag and one Google Font via link tag are supported. System font stacks with a basic CSS reset are the default for fast starts, and shared theme tokens can live in a tokens.css file.

When should I not use throwaway HTML sketches?▼

Skip sketching when you need a production component, a polished one-off artifact like a landing page, or a diagram, or when the design is already locked. Sketches are disposable exploration tools, not shippable code.

How are sketch variants verified for visual 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→
hfadhlullahhfadhlullah

PRD Generator

Generate Product Requirements Documents through an interview process.

Community
Advanced
diane-deforesdiane-defores

sf-audit-components

Evaluate component design for duplication, poor abstractions, and headless primitives.

Official
Advanced
anouar1991anouar1991
1

responsive-design-tester

Audit web pages across six viewports for responsive design issues.

Community
Advanced
truongnattruongnat

ux-wireframe

Generates ASCII wireframes, HTML prototypes, and Figma handoff briefs for screen design.

Community
Intermediate