skills.rest
Chia1104
Chia1104COMMUNITY
Explore all skills by this author →
Website𝕏@chia7423GitHub

sketch

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

1|Updated Aug 11, 2026
Search Tags:#html#comparison#prototype#ui design#wireframe#mockup#design variants
One-click install
npx skills add https://github.com/Chia1104/agent-air --skill sketch-chia1104
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sketch
Source: https://github.com/Chia1104/agent-air/tree/main/skills/hermes/creative/sketch
Command: npx skills add https://github.com/Chia1104/agent-air --skill sketch-chia1104

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a UI design direction is hard when you can only imagine it in the abstract. This Skill produces 2-3 disposable, interactive HTML mockups of the same screen so you can compare real visual directions before committing to one. ## Core Features & Use Cases - Multi-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 before presenting them. - Head-to-Head Comparison: Presents variants in an opinionated comparison table with trade-offs, plus per-variant READMEs documenting design stance and best-fit use cases. - Use Case: You are unsure whether a dashboard should be compact and tool-like or airy and editorial. Ask for sketches and receive three clickable HTML variants you can open in a browser and compare side-by-side. ## Quick Start Ask the agent to sketch three design variants of your app's home screen so you can compare the directions in a 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?▼

Ask for 2-3 sketch variants of the screen. Each variant is a standalone interactive HTML file taking a different design stance, presented with a comparison table of trade-offs so you can pick a winner or combine approaches.

What makes a good HTML mockup variant?▼

Each variant should differ in design stance, not pixel values: density, emphasis, aesthetic, or layout. It must be a self-contained HTML file with realistic content, clickable actions, and at least one visible state transition.

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

Yes. Variants are single self-contained HTML files with inline styles, and Tailwind via CDN or one Google Font link is acceptable. No build step or external CSS files are required.

When should I not use throwaway HTML sketches?▼

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

How are sketch variants verified for visual bugs?▼

Each variant is opened in a browser via browser_navigate and inspected with browser_vision, which returns an AI description and screenshot. This catches rendering issues like failed font imports or collapsed layouts that source inspection misses.

Related Skills

Explore More Design & Creative Skills→
519lab519lab
2

sketch

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

Official
Intermediate
SethyPagnaSethyPagna

claude-design

Design local HTML artifacts for prototypes, decks, and UI modifications.

Community
Advanced
qprjack86qprjack86

excalidraw

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

Community
Intermediate
tinner-deinnotinner-deinno

gsd-sketch

Generate throwaway HTML mockup variants for UI design exploration.

Community
Intermediate