skills.rest
deerawan
deerawanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsd-sketch

Generate throwaway HTML mockup variants for early UI design comparison.

1|Updated Sep 6, 2015
Search Tags:#product design#handoff#workflow planning#design variants#html mockups#frontier mode#ui sketching
One-click install
npx skills add https://github.com/deerawan/dotfiles --skill gsd-sketch-deerawan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsd-sketch
Source: https://github.com/deerawan/dotfiles/tree/main/claude/skills/gsd-sketch
Command: npx skills add https://github.com/deerawan/dotfiles --skill gsd-sketch-deerawan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a lightweight way to explore and pressure-test UI/design directions before committing to implementation, reducing rework and misalignment.

Core Features & Use Cases

  • Throwaway HTML mockups: Turn a design direction into quick, comparable sketches rather than debating in the abstract.
  • 2–3 variant output per sketch: Produce multiple alternatives to evaluate interaction and layout tradeoffs side-by-side.
  • Frontier mode for consistency: Analyze the existing sketch landscape and propose the next consistent “frontier” sketches.
  • Integrated planning workflow: Auto-manage .planning/sketches/ and align with commit patterns, state tracking, and handoff workflows for smoother build handoffs.

Quick Start

Run the gsd-sketch skill with a design idea like “Design an onboarding step that asks users to choose goals” to generate 2–3 HTML mockup variants in the planning sketches folder.

Frequently Asked Questions about gsd-sketch

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

FAQPage Schema
How do I quickly generate HTML mockups to compare UI design variants?▼

Generating throwaway HTML mockups in 2–3 variants is done by running the sketch workflow with a design idea, allowing you to compare interaction and layout tradeoffs side-by-side before committing to implementation.

What is frontier mode for UI sketching and when do I need it?▼

Frontier mode for UI sketching analyzes existing sketches to propose the next consistent design directions. You need it when iterating on interaction patterns and proposing next steps across a landscape of early UI designs.

Can I integrate design variants into my project planning workflow?▼

Yes, you can integrate design variants into a planning workflow that auto-manages files under the .planning/sketches/ directory, aligning with commit patterns and state tracking for smoother build handoffs.

What's the best way to pressure-test UI directions before implementation?▼

The best way to pressure-test UI directions before implementation is creating lightweight, throwaway HTML mockups rather than debating in the abstract, reducing rework and misalignment before committing to the final build.

Does the sketching workflow support design handoff and state tracking?▼

Yes, the sketching workflow supports design handoff and state tracking by preserving workflow gates and coordinating planning storage, aligning sketches with commit patterns for downstream development.

Related Skills

Explore More Design & Creative Skills→
PiaoxuemoliPiaoxuemoli

sketch

Generate disposable HTML mockup variants from user design preferences.

Community
Intermediate
TaylorHustonTaylorHuston
69

ui-design

Generate HTML UI design variants stored in ideas/[project]/docs/ui-designs/.

Community
Basic
aslaiiaslaii

gsd-sketch

Generate 2-3 throwaway HTML UI sketch variants per idea into .planning/sketches/.

Community
Intermediate
davpatel605-beepdavpatel605-beep

sketch

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

Community
Intermediate