skills.rest
xu1713
xu1713COMMUNITY
Explore all skills by this author →
GitHub

sketch

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a UI direction without seeing options leads to costly rework. This Skill produces multiple disposable HTML mockups of the same screen so you can compare design stances visually 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, layout, aesthetic) rather than minor styling 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 a README per variant documenting design choices. - Use Case: You are unsure whether a dashboard should be dense and utilitarian or calm and editorial. Ask for sketches, open the generated HTML files in a browser, compare the variants, and pick a winner or request a hybrid. ## Quick Start Ask the assistant to sketch two or three design variants of your screen as interactive HTML mockups so you can compare them side by side.

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 UI design options?▼

Describe the screen and the feel you want, and the skill generates 2-3 standalone HTML variants, each taking a different design stance. Open each file in a browser, review the comparison table, and pick a winner or request a hybrid.

What makes a good design variant for comparison?▼

Variants should differ along one clear axis such as density, emphasis, layout, or aesthetic, not just accent colors. Each variant is a complete interactive HTML file with realistic content, hover states, and at least one state transition.

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

Yes. Variants are self-contained HTML files that may use Tailwind via CDN, one Google Font link, or system font stacks. Shared design tokens can live in a sketches/themes/tokens.css file imported by each variant.

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, a diagram, or when the design is already locked. In those cases build the real component or use a dedicated diagram or design skill instead.

How are sketch variants verified before being shown?▼

Each variant is opened in a browser via browser_navigate and inspected with browser_vision, which describes what actually rendered and returns a screenshot. Layout bugs like collapsed flex containers or failed font imports are fixed before presentation.

Related Skills

Explore More Design & Creative Skills→
LYGOLANGLYGOLANG

design-brief-builder

Interviews users to define visual direction and generates a Design-Brief.md specification document.

Community
Advanced
anilcan-karaanilcan-kara

sketch

Generate disposable HTML sketches with inline CSS for design comparisons.

Community
Basic
GenEducationGenEducation

design-shotgun

Generate multiple UI design variants and compare them side by side.

Official
Advanced
trungdo9trungdo9
3

excalidraw

Generate hand-drawn diagrams and wireframes with Excalidraw.

Community
Basic