skills.rest
AvaTar-ArTs
AvaTar-ArTsCOMMUNITY
Explore all skills by this author →
GitHub

sketch

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a UI direction from abstract descriptions is risky and slow. This Skill produces multiple disposable, interactive HTML mockups so you can compare real design directions in a browser 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. - Structured Intake: Elicits feel, references, and the core user action before designing, so variants serve the actual goal. - 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 so you can pick a winner, hybridize, or iterate. - Use Case: Ask for three takes on a dashboard home screen; receive three clickable HTML files with per-variant READMEs explaining design stances, then compare them side-by-side. ## Quick Start Sketch three different design variants for my app's settings screen so I 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 compare multiple UI design directions before building?▼

Generate 2-3 standalone HTML variants that each take a different design stance, such as density or layout axis, then open them side-by-side in a browser. A comparison table of trade-offs helps you pick a winner or combine approaches.

How to create quick interactive HTML mockups without a build step?▼

Write a single self-contained HTML file with inline styles, system fonts or one Google Font, and optionally Tailwind via CDN. Add realistic content and at least one state transition like a toggle or modal so the mockup is clickable.

When should I use throwaway sketches instead of production components?▼

Use sketches when the design direction is undecided and you need to explore options cheaply. Once a direction is locked, build the real component properly rather than polishing a disposable mockup.

Can HTML mockups use Tailwind or custom design tokens?▼

Yes, Tailwind via CDN script tag works in a single-file mockup. For projects with a visual identity, shared tokens like colors and fonts can live in a tokens.css file imported by each variant.

Why do my HTML mockups look broken in the browser?▼

Common causes include failed font imports, collapsed flex containers, or missing CSS resets. Load the file in a browser and inspect it visually rather than trusting the source code, then fix and re-check.

Related Skills

Explore More Design & Creative Skills→
AO-HySAO-HyS

shape

Plans UX and UI through a multi-round discovery interview producing a user-confirmed design brief.

Official
Basic
samuelpatrosamuelpatro
3

real-prototype

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

Community
Intermediate
laik184laik184

mockup-sandbox

Prototype UI mockups in a Vite-powered sandbox with live iframe previews.

Community
Advanced
inbharataiinbharatai
22

wireframe-builder

Generate low-fidelity wireframes and user-flow diagrams with interaction annotations.

Community
Basic