sketch

Generate disposable HTML mockups with inline CSS and per-variant READMEs.

31|3|Updated May 7, 2026
One-click install
npx skills add https://github.com/markwang2658/hermes-windows-native --skill sketch-markwang2658
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sketch
Source: https://github.com/markwang2658/hermes-windows-native/tree/main/hermes-agent/skills/creative/sketch
Command: npx skills add https://github.com/markwang2658/hermes-windows-native --skill sketch-markwang2658

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly generate throwaway HTML design mockups to compare multiple UI directions in a lightweight, iteration-friendly workflow.

Core Features & Use Cases

  • Generate 2-3 standalone HTML variants to explore layout, density, and visual style.
  • Provide per-variant README with design rationale and trade-offs for fast decision-making.
  • Keep artifacts disposable and easily promote a variant to a real project if needed.

Quick Start

Ask for 2-3 disposable HTML mockups to compare UI directions.

Frequently Asked Questions about sketch

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate HTML mockups to compare different UI design directions?▼

Generate disposable HTML mockups by creating 2-3 standalone HTML files with inline CSS to explore different UI directions. Each variant includes simple interactivity and a companion README documenting design rationale and trade-offs for evaluating layout density and visual hierarchy during early product design.

What is the best way to explore layout density and visual hierarchy in early product design?▼

The best way to explore layout density and visual hierarchy is generating 2-3 disposable HTML design mockups as standalone files with inline CSS. This throwaway approach provides lightweight, iteration-friendly workflows for evaluating interaction cues and making fast decisions across multiple UI variants.

Can I use standalone HTML files with inline CSS for UI prototype variants?▼

Yes, you can use standalone HTML files with inline CSS for UI prototype variants. This approach generates disposable mockups that explore 2-3 UI directions, keeping artifacts easily promotable to a real project while providing simple interactivity to evaluate interaction cues during early product design.

How do I document design rationale and trade-offs for multiple UI mockup variants?▼

Document design rationale and trade-offs by providing a companion README for each HTML mockup variant. These READMEs explain the design decisions, layout density choices, and visual hierarchy strategies used across the 2-3 generated variants, enabling fast decision-making during early product design.

When do I need disposable HTML mockups instead of a full design prototype?▼

You need disposable HTML mockups when you want to quickly compare 2-3 UI directions in a lightweight, iteration-friendly workflow. This approach suits early product design phases for evaluating layout density and visual style without committing to full prototype development, keeping artifacts easily promotable if needed.