skills.rest
tinner-deinno
tinner-deinnoCOMMUNITY
Explore all skills by this author →
GitHub

gsd-sketch

Generate throwaway HTML mockup variants for UI design exploration.

1|Updated May 24, 2026
Search Tags:#product discovery#workflow integration#design variants#html mockups#ui sketching#frontier planning
One-click install
npx skills add https://github.com/tinner-deinno/innova-skills-lib --skill gsd-sketch-tinner-deinno
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsd-sketch
Source: https://github.com/tinner-deinno/innova-skills-lib/tree/main/core/gsd/gsd-sketch
Command: npx skills add https://github.com/tinner-deinno/innova-skills-lib --skill gsd-sketch-tinner-deinno

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Reduces costly design thrash by turning uncertain UI ideas into quick throwaway HTML mockups and comparable variants before committing to implementation.

Core Features & Use Cases

  • Throwaway HTML Mockups: Produces lightweight sketches to explore layout, interaction, and information density without heavy engineering overhead.
  • 2–3 Variant Comparison: Generates a small set of alternative directions so you can compare tradeoffs clearly.
  • Frontier Mode for Consistency: Analyzes the existing sketch landscape and proposes what to sketch next to maintain direction and momentum.
  • GSD Workflow Integration: Aligns outputs with commit patterns, state tracking, and handoff workflows while saving results into .planning/sketches/.

Quick Start

Use gsd-sketch to create 2–3 throwaway HTML mockup variants for a new UI direction.

Frequently Asked Questions about gsd-sketch

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

FAQPage Schema
How do I create HTML mockups to explore UI design directions before implementation?▼

You can create throwaway HTML mockups to explore UI design directions by generating lightweight sketches that test layout and interaction ideas without heavy engineering overhead, reducing design thrash before committing to implementation.

What is the best way to compare UI design variants and tradeoffs?▼

Comparing UI design variants is best handled by generating 2–3 alternative throwaway HTML mockups, allowing you to review different directions side by side and evaluate tradeoffs clearly before moving forward.

When do I need throwaway HTML mockups for product discovery?▼

Throwaway HTML mockups are needed for product discovery when you must de-risk uncertain UI ideas, explore information density, and guide frontier planning by comparing existing sketches toward the next set of variations.

Can I save UI sketches to a planning directory with commit pattern compatibility?▼

Yes, UI sketches can be saved to a .planning/sketches/ directory with commit pattern compatibility, supporting state tracking and workflow handoff while aligning with GSD commit patterns.

How do I plan what UI to sketch next for consistent product direction?▼

To plan what UI to sketch next, frontier mode analyzes the existing sketch landscape and proposes new mockups, maintaining design direction and momentum across the product discovery workflow.

Does this UI sketching tool support quick mode and wrap-up workflow flags?▼

Yes, the tool supports workflow flags like --quick for rapid sketching and --wrap-up for finalizing, fulfilling the requirements to run either the sketch workflow or the wrap-up workflow.

Related Skills

Explore More Design & Creative Skills→
deerawandeerawan
1

gsd-sketch

Generate throwaway HTML mockup variants for early UI design comparison.

Community
Advanced
Poom5741Poom5741

gsd-sketch

Generate 2-3 throwaway HTML UI sketches for design comparison.

Community
Intermediate
hadpadrahulhadpadrahul

gsd-sketch

Generate 2-3 throwaway HTML mockups for UI component comparison.

Community
Intermediate
campbellmcgregorcampbellmcgregor

design-assistant

Create UI/UX mockups, wireframes, and visual designs in React, HTML, or SVG.

Community
Basic