skills.rest
jakubbartnik
jakubbartnikCOMMUNITY
Explore all skills by this author →
GitHub

sketch

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a UI design direction without seeing options leads to costly rework. This Skill produces multiple disposable HTML mockups so you can compare visual approaches side-by-side before committing to production code. ## Core Features & Use Cases - Variant Generation: Builds 2-3 standalone 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 like broken fonts or collapsed containers. - Comparison Table: Presents variants head-to-head with an opinionated recommendation, plus per-variant READMEs documenting trade-offs. - Use Case: Before building a 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 app's home screen 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 options?▼

Describe the screen you want and the feel you're after, and the skill builds 2-3 standalone HTML variants with different design stances. Each variant opens directly in a browser so you can compare them side-by-side before choosing a direction.

What makes a good design variant for comparison?▼

Variants should differ along one clear axis such as density, emphasis, aesthetic, or layout rather than minor styling tweaks. Two variants that differ only in accent color waste effort because users cannot meaningfully distinguish them.

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. Each file remains self-contained with no build step, so it opens directly in any browser.

When should I not use throwaway HTML sketches?▼

Skip sketching when you need production-ready components, polished one-off artifacts like landing pages, or diagrams. Also skip it when the design is already locked and you should just build the real thing.

How interactive should a design mockup be?▼

A mockup needs a clickable primary action with visible feedback, one meaningful state transition like a filter or toggle, and hover affordances on buttons. More than that is over-engineering a throwaway; less is just a screenshot.

Related Skills

Explore More Design & Creative Skills→
Spectra29115Spectra29115

branding-generator

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

Community
Advanced
diane-deforesdiane-defores

sf-audit-components

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

Official
Advanced
qprjack86qprjack86

excalidraw

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

Community
Intermediate
davepoondavepoon
3.4k

gsd:sketch

Generates throwaway HTML mockup variants to explore UI design directions before implementation.

Community
Advanced