skills.rest
DagimAlemayehuu
DagimAlemayehuuCOMMUNITY
Explore all skills by this author →
GitHub

sketch

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

Updated Jul 19, 2026
Search Tags:#comparison#tailwind#wireframe#ui prototype#design exploration#design variants#html mockup
One-click install
npx skills add https://github.com/DagimAlemayehuu/AgenticEngineering --skill sketch-dagimalemayehuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sketch
Source: https://github.com/DagimAlemayehuu/AgenticEngineering/tree/main/agentic-engineering/core/dependencies/design/sketch
Command: npx skills add https://github.com/DagimAlemayehuu/AgenticEngineering --skill sketch-dagimalemayehuu

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 visual directions 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: Loads each variant in a browser and inspects it with vision tooling to catch layout bugs before presenting. - Head-to-Head Comparison: Presents an opinionated comparison table with trade-offs so you can pick a winner, combine variants, or iterate. - Use Case: Before building a dashboard, ask for three takes on the home screen; receive calm-editorial, utilitarian-dense, and playful-split variants, each with a README explaining its stance and trade-offs. ## Quick Start Use the sketch skill to show me three design variants for the settings page before I build it.

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 compact versus airy density or content-first versus action-first emphasis. Review them side-by-side in a comparison table, then pick a winner or combine approaches.

What makes a good HTML mockup for design exploration?▼

A good mockup is a single self-contained HTML file with inline styles, realistic fake content instead of lorem ipsum, and at least one interactive state transition like a toggle or filter. It should open directly in a browser with no build step.

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

Yes. Tailwind via CDN script tag and one Google Font via link are acceptable for sketches. Keep everything inline in one file so the mockup stays disposable and requires no build tooling.

When should I not use HTML sketch variants?▼

Skip sketching when the design is already locked and you just need to build it, when you need a production component, or when you need a diagram rather than a UI mockup. Sketches are for exploring undecided directions only.

How do I verify HTML mockups render correctly?▼

Open each variant in a browser and inspect it visually rather than trusting the source code. Vision-based browser checks catch issues like failed font imports or collapsed flex containers that code review misses.

Related Skills

Explore More Design & Creative Skills→
aminianpaminianp

design-themes

Generate Tailwind themes from user preferences for design systems.

Community
Intermediate
lossless-grouplossless-group
4

deck-iteration-workflow

Enforce a phased iterative workflow for Astro-based fundraise slide decks.

Official
Advanced
ksciuskscius
2

responsive-testing

Capture screenshots across viewport sizes and report layout breakage.

Community
Intermediate
trungdo9trungdo9
3

excalidraw

Generate hand-drawn diagrams and wireframes with Excalidraw.

Community
Basic