skills.rest
matthew-johnson
matthew-johnsonCOMMUNITY
Explore all skills by this author →
GitHub

sketch

Generate 2-3 self-contained HTML mockup variants with inline CSS for side-by-side evaluation.

Updated Apr 20, 2026
Search Tags:#design#ui#prototype#variants#mockup#sketch
One-click install
npx skills add https://github.com/matthew-johnson/hermes-agent --skill sketch-matthew-johnson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sketch
Source: https://github.com/matthew-johnson/hermes-agent/tree/main/skills/creative/sketch
Command: npx skills add https://github.com/matthew-johnson/hermes-agent --skill sketch-matthew-johnson

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Throwaway HTML mockups: 2-3 design variants to compare.

Core Features & Use Cases

  • Lightweight, disposable sketches generated to explore UI directions without affecting production code.
  • Generates 2-3 variants that differ in design stance (density, layout, emphasis) for side-by-side comparison.
  • Each variant is a self-contained HTML artifact with inline CSS, ready to open in a browser and compare.
  • Use cases include early design exploration, stakeholder review, and rapid validation before committing to a single approach.

Quick Start

Create 2-3 interactive HTML mockup variants and place them under a sketches/ directory for side-by-side comparison.

Frequently Asked Questions about sketch

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

FAQPage Schema
How do I generate UI mockup variants for side-by-side design comparison?▼

To generate UI mockup variants for comparison, this Skill produces 2-3 interactive HTML files that each take a different design stance, such as varying density or layout emphasis. Each variant is a self-contained HTML file with inline CSS, ready to open in a browser.

What is the best way to explore UI directions without affecting production code?▼

The best way to explore UI directions without affecting production code is to create disposable HTML mockups. This Skill generates 2-3 throwaway variants placed in a sketches directory, allowing you to validate different approaches before committing to a single design.

Can I use this for rapid stakeholder review and early design exploration?▼

Yes, you can use this for rapid stakeholder review and early design exploration. It generates lightweight, disposable sketches that differ in layout and emphasis, providing self-contained HTML artifacts that stakeholders can immediately open and evaluate side-by-side.

Do I need any external dependencies or frameworks to create these HTML mockups?▼

No external dependencies or frameworks are required to create these HTML mockups. The Skill generates completely self-contained HTML files with inline CSS, ensuring each variant operates independently and can be opened directly in any web browser without additional setup.

How do the generated design variants differ from each other?▼

The generated design variants differ by taking distinct design stances. Each of the 2-3 variants adjusts visual density, layout structure, and element emphasis to provide contrasting UI directions, accompanied by a README file describing the specific variant's approach.

Related Skills

Explore More Design & Creative Skills→
rakovi4rakovi4
45

mockups

Generate HTML interface mockups for user stories with desktop and mobile parity.

Community
Intermediate
bizzybaebizzybae

design-shotgun

Generate AI design variants, assemble a comparison board, and collect structured feedback.

Community
Advanced
KhoiwallKhoiwall

mockup-to-code

Convert UI mockups into React, Vue, or plain HTML code.

Community
Advanced
Shaarav4795Shaarav4795

wireframe-prototyping

Automate creation of wireframes and interactive prototypes for UI feedback.

Community
Intermediate