skills.rest
Poom5741
Poom5741COMMUNITY
Explore all skills by this author →
GitHub

gsd-sketch

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

Updated Mar 15, 2026
Search Tags:#workflow#design#ui#prototype#mockup#variant#sketch
One-click install
npx skills add https://github.com/Poom5741/eggo-world-pb --skill gsd-sketch-poom5741
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsd-sketch
Source: https://github.com/Poom5741/eggo-world-pb/tree/main/.qwen/skills/gsd-sketch
Command: npx skills add https://github.com/Poom5741/eggo-world-pb --skill gsd-sketch-poom5741

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Rapidly explore and validate UI and design directions by producing throwaway HTML mockups, enabling quick comparison before committing to implementation.

Core Features & Use Cases

  • 2-3 design variants per idea to compare directions quickly.
  • Auto-organization of sketches in .planning/sketches/ with state tracking and handoff readiness.
  • No project bootstrap required — it auto-creates necessary folders when needed.

Quick Start

Provide 2-3 throwaway UI sketches for the given design idea and store them under .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 quickly generate HTML UI mockups to compare design directions?▼

The Skill produces 2-3 throwaway HTML mockups to explore design directions and enable quick comparison before implementation. It auto-creates necessary folders like .planning/sketches/ without requiring project bootstrap, storing sketches with state tracking and handoff readiness.

What is the best way to organize throwaway UI sketches for design handoff?▼

Throwaway UI sketches are auto-organized in the .planning/sketches/ directory with state tracking and handoff readiness. This structure supports integration with GSD commit patterns and handoff workflows, ensuring sketches are prepared for the next development phase.

Do I need to set up a project structure before creating UI mockups?▼

No project bootstrap is required to create UI mockups. The system auto-creates necessary folders, such as the .planning/sketches/ directory, when needed, allowing you to start generating design variants immediately without manual environment setup.

Can I generate multiple design variants for a single UI idea?▼

Yes, you can generate 2-3 design variants per idea to compare different directions quickly. These throwaway HTML sketches allow you to validate UI concepts and explore multiple approaches before committing to a final implementation.

How does rapid UI sketching fit into a commit and handoff workflow?▼

Rapid UI sketching integrates with GSD commit patterns and handoff workflows by auto-organizing generated HTML mockups into .planning/sketches/ with state tracking. This ensures your throwaway design variants are documented and ready for downstream development handoff.

Related Skills

Explore More Design & Creative Skills→
mulyovedmulyoved

plan-design-review

Identify missing design decisions in gstack UI plans and generate mockups.

Community
Advanced
GenEducationGenEducation

design-html

Convert approved design mockups into production HTML and CSS with computed layout.

Official
Advanced
hadpadrahulhadpadrahul

gsd-sketch

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

Community
Intermediate
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate