skills.rest
jedmamosto
jedmamostoCOMMUNITY
Explore all skills by this author →
GitHub

gsd-sketch

Generate 2–3 throwaway HTML UI sketch variants into `.planning/sketches/`.

Updated May 21, 2026
Search Tags:#workflow automation#design handoff#design variants#ui sketch#html mockups#frontier mode
One-click install
npx skills add https://github.com/jedmamosto/m-and-ms --skill gsd-sketch-jedmamosto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsd-sketch
Source: https://github.com/jedmamosto/m-and-ms/tree/main/.agents/skills/gsd-sketch
Command: npx skills add https://github.com/jedmamosto/m-and-ms --skill gsd-sketch-jedmamosto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It reduces the risk and time cost of building the wrong UI by helping you quickly explore and compare throwaway interface directions before committing to implementation.

Core Features & Use Cases

  • Throwaway HTML UI sketching: Convert a design direction into 2–3 concrete visual variants for comparison.
  • Frontier analysis mode: Propose next sketch directions by reviewing the existing sketch landscape for consistency and novelty.
  • Structured workflow + handoff readiness: Uses predefined sketch intake, decomposition, target stack research, variant evaluation, and manifest/commit patterns, writing results into .planning/sketches/.

Quick Start

Run gsd-sketch with your next design idea to generate 2–3 HTML sketch variants in .planning/sketches/.

Frequently Asked Questions about gsd-sketch

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

FAQPage Schema
How do I explore UI design variants before committing to implementation?▼

You can explore UI design variants by generating throwaway HTML mockups for 2–3 visual directions. This allows product teams to quickly compare interaction patterns and component approaches before writing production code.

What is the frontier analysis mode in UI sketching?▼

Frontier analysis mode proposes next UI sketching directions by reviewing your existing mockup landscape. It evaluates current HTML mockups for consistency and novelty to recommend new design variants to explore.

How do I structure a design handoff using HTML mockups?▼

Structure your design handoff by running an end-to-end workflow: intake, decomposition, stack research, and variant evaluation. The mockups and findings are persisted into a `.planning/sketches/` directory for team review.

Can I save design exploration findings after creating HTML mockups?▼

Yes, you can save design exploration findings by using the `--wrap-up` flag. This triggers a wrap-up workflow that persists your variant evaluation results and mockup manifests into the `.planning/sketches/` directory.

Do I need any specific design tools to generate UI mockups?▼

No specific design tools are required to generate UI mockups. The workflow operates independently without dependencies, using throwaway HTML files to rapidly visualize and compare design directions.

Related Skills

Explore More Design & Creative Skills→
lxh755818-botlxh755818-bot

sketch

Generate disposable HTML mockups for comparing UI/UX design variants.

Community
Intermediate
tinner-deinnotinner-deinno

gsd-sketch

Generate throwaway HTML mockup variants for UI design exploration.

Community
Intermediate
EntroVyxEntroVyx
3

spike

Run disposable experiments to validate technical feasibility and compare implementation approaches.

Community
Intermediate
davpatel605-beepdavpatel605-beep

sketch

Generate disposable HTML UI mockups with interactive states for design comparison.

Community
Intermediate