sketch

Generate 2 to 3 self-contained HTML mockup variants with interactive states.

Updated May 14, 2026
One-click install
npx skills add https://github.com/SethyPagna/Secretary-Jarvis --skill sketch-sethypagna
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sketch
Source: https://github.com/SethyPagna/Secretary-Jarvis/tree/main/src/capabilities/skills/creative/sketch
Command: npx skills add https://github.com/SethyPagna/Secretary-Jarvis --skill sketch-sethypagna

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you explore a user interface before committing to implementation by turning a screen idea into disposable HTML mockups. It is meant for fast visual comparison when you are unsure which layout, density, or aesthetic direction will work best.

Core Features & Use Cases

  • Variant generation: Produces 2 to 3 distinct design directions so you can compare different stances instead of tiny cosmetic changes.
  • Interactive mockups: Builds self-contained HTML pages with inline styling and at least one visible state change, so the concepts are real enough to review in a browser.
  • Design decision support: Helps with screen sketches, layout exploration, and early product UI brainstorming before any production code is written.
  • Use case: You might use this to compare a calm editorial home screen against a dense tool-oriented version and a more playful split-pane layout.

Quick Start

Ask the sketch skill to create 2 or 3 disposable HTML variants for the screen or flow you want to explore.

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 directions?▼

Generating 2 to 3 self-contained HTML mockups with inline styles allows you to compare distinct UI design variants directly in a browser. Each variant includes at least one interactive state to evaluate visual feel, density, and interaction patterns before implementation.

What is the best way to explore layout variants before implementation?▼

Building disposable HTML mockups is the best way to explore layout variants before implementation. This process generates 2 to 3 distinct design directions with visible state changes, enabling you to compare aesthetic stances and interaction patterns rather than tiny cosmetic tweaks.

Can I generate interactive wireframes using self-contained HTML?▼

Yes, you can generate interactive wireframes using self-contained HTML. The mockups require inline styling and at least one visible state change, ensuring each variant is real enough to review interaction patterns directly in a browser without external dependencies.

How many UI variants should I compare during layout exploration?▼

You should compare 2 to 3 distinct UI variants during layout exploration. Generating contrasting design directions, such as a calm editorial screen versus a dense tool-oriented version, helps you evaluate different aesthetic stances instead of minor cosmetic differences.

Do I need external CSS files for these disposable HTML mockups?▼

No, you do not need external CSS files for these disposable HTML mockups. The generated mockups are entirely self-contained pages that use inline styling, ensuring each design variant can be opened and compared in a browser without external dependencies.

When should I use disposable HTML mockups for UI design?▼

You should use disposable HTML mockups for UI design when you are unsure which layout, density, or aesthetic direction will work best. They are meant for fast visual comparison during early product brainstorming, screen sketches, and layout exploration before committing to implementation.