sketch

Generate 2-3 interactive HTML mockup variants with inline CSS for UI comparison.

Updated May 26, 2026
One-click install
npx skills add https://github.com/ruiyangruiyi/hermes-agent --skill sketch-ruiyangruiyi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sketch
Source: https://github.com/ruiyangruiyi/hermes-agent/tree/main/skills/creative/sketch
Command: npx skills add https://github.com/ruiyangruiyi/hermes-agent --skill sketch-ruiyangruiyi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Users need a fast way to explore multiple UI/UX directions before committing to a single design, without investing in production-ready code.

Core Features & Use Cases

  • 2-3 HTML design variants: creates throwaway, self-contained HTML mockups for side-by-side comparison.
  • Interactive prototypes: includes real clickable elements and at least one meaningful state transition so the user can evaluate behavior, not just layout.
  • Structured comparison workflow: guides users from intake (feel, references, core action) through variant generation to head-to-head selection (including iteration or hybridizing winners).

Quick Start

Use the sketch skill to generate 2-3 interactive HTML variants for a UI direction like "sketch this settings screen in calm editorial, utilitarian dense, and playful split takes."

Frequently Asked Questions about sketch

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

FAQPage Schema
How do I generate interactive HTML mockups to compare multiple UI design directions?

To generate interactive HTML mockups, you provide a UI direction and receive 2-3 self-contained HTML variants with inline CSS, realistic content, and visible state transitions for head-to-head evaluation. This allows rapid comparison of layout stances before committing to production code.

What is the best way to explore screen ideation and layout stances before writing production code?

Exploring layout stances requires generating disposable HTML UI mockups. This approach produces 2-3 interactive variants with real clickable elements and state transitions, enabling rapid head-to-head evaluation of different UI/UX directions without investing in production-ready code.

Can I create clickable prototypes with state transitions using self-contained HTML?

Yes, creating clickable prototypes involves generating self-contained HTML files that include inline CSS and at least one meaningful state transition per variant. This allows you to evaluate interactive behavior and real clickable elements, not just static layouts.

How do I structure a UI/UX comparison workflow for multiple design variants?

Structuring a UI/UX comparison workflow involves guiding intake of desired feel, references, and core actions, generating 2-3 HTML design variants, and performing head-to-head selection. You can then iterate on or hybridize the winning mockups based on the comparison.

Do I need any external dependencies to generate self-contained HTML UI mockups?

No external dependencies are required to generate self-contained HTML UI mockups. The process creates throwaway files with inline CSS and realistic content, ensuring the variants are completely standalone and ready for immediate side-by-side comparison.

When should I use disposable HTML prototypes instead of production-ready code for UI design?

Use disposable HTML prototypes when you need to rapidly explore multiple UI/UX directions before committing to a single design. This method avoids the investment of production-ready code by generating throwaway, self-contained variants for quick head-to-head evaluation.