skills.rest
m4an5you6
m4an5you6COMMUNITY
Explore all skills by this author →
GitHub

sketch

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

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

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 so you can compare design stances visually 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, layout, aesthetic) 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: You are unsure whether a dashboard should feel calm and editorial or dense and utilitarian. The Skill interviews you on feel, references, and core action, then builds both directions as clickable HTML so you can pick a winner. ## Quick Start Ask the agent 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, the feel you want, reference apps, and the core user action. The Skill builds 2-3 standalone HTML variants with different design stances, then presents a comparison table so you can pick a winner or iterate.

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 support Tailwind via CDN script tag, system font stacks, or one Google Font via link. Shared design tokens can live in a themes/tokens.css file imported by each variant when a project has an existing visual identity.

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 HTML mockup variants verified for layout 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 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
hpsgdhpsgd

component-spec

Generate machine-parseable component specifications for UI design systems.

Official
Advanced
krzemienskikrzemienski
2

responsive-validation

Validate responsive UI layouts across device viewports and breakpoints.

Community
Advanced
gabrielnsmntogabrielnsmnto
3

ux-create-wireframe

Creates wireframes, interaction flows, and component inventories for developer handoff.

Community
Intermediate