skills.rest
aslaii
aslaiiCOMMUNITY
Explore all skills by this author →
GitHub

gsd-sketch

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

Updated Jan 28, 2025
Search Tags:#workflow#ui#html#prototype#mockups#variants#design-sketching
One-click install
npx skills add https://github.com/aslaii/dotfiles --skill gsd-sketch-aslaii
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsd-sketch
Source: https://github.com/aslaii/dotfiles/tree/main/claude/skills/gsd-sketch
Command: npx skills add https://github.com/aslaii/dotfiles --skill gsd-sketch-aslaii

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Quickly generate throwaway HTML UI sketches to explore multiple design directions, enabling fast comparison before committing to full implementation.

Core Features & Use Cases

  • 2-3 variant sketches per idea to compare different UI directions.
  • Sketches are stored in .planning/sketches/ and integrate with GSD commit patterns, state tracking, and handoff workflows.
  • No dedicated project bootstrap is required; the system auto-creates .planning/sketches/ if needed.

Quick Start

Describe a design idea and run the sketch workflow to generate 2-3 variants.

Frequently Asked Questions about gsd-sketch

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

FAQPage Schema
How do I generate UI mockups to compare different design directions?▼

You can rapidly generate throwaway HTML UI sketches by describing a design idea, which creates 2-3 variant sketches to compare different UI directions before full implementation.

What is the best way to create throwaway HTML UI sketches for prototyping?▼

The best way to create throwaway HTML UI sketches is using a rapid sketching workflow that generates 2-3 variants per idea, storing them in .planning/sketches/ to explore multiple directions quickly.

Do I need to manually set up a project directory before generating design sketches?▼

No dedicated project bootstrap is required to generate design sketches. The system auto-creates the .planning/sketches/ directory if it does not already exist when you run the sketch workflow.

Can I streamline the intake process when generating multiple UI variants?▼

Yes, you can streamline the intake process for generating UI variants by using the --quick flag, which accelerates the sketch workflow and reduces initial input requirements.

Does the HTML sketch workflow integrate with state tracking and commit patterns?▼

Yes, the HTML sketch workflow integrates with GSD commit patterns, state tracking, and handoff workflows, storing all generated mockup variants in .planning/sketches/ for project continuity.

What file format are the UI variant mockups stored in?▼

The UI variant mockups are stored as HTML files within the .planning/sketches/ directory, allowing them to be easily opened in web browsers for rapid design evaluation.

Related Skills

Explore More Design & Creative Skills→
yusaduymazyusaduymaz

gsd-sketch

Create throwaway HTML mockups to explore UI and product concepts.

Community
Advanced
lgwanailgwanai
4

gsd-sketch

Generate throwaway HTML mockup variants from design ideas.

Community
Intermediate
hadpadrahulhadpadrahul

gsd-sketch

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

Community
Intermediate
deerawandeerawan
1

gsd-sketch

Generate throwaway HTML mockup variants for early UI design comparison.

Community
Advanced