skills.rest
hadpadrahul
hadpadrahulCOMMUNITY
Explore all skills by this author →
GitHub

gsd-sketch

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

Updated Apr 22, 2026
Search Tags:#design#ui#prototyping#handoff#sketch#multiple-variants
One-click install
npx skills add https://github.com/hadpadrahul/school-erp --skill gsd-sketch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsd-sketch
Source: https://github.com/hadpadrahul/school-erp/tree/main/.codex/skills/gsd-sketch
Command: npx skills add https://github.com/hadpadrahul/school-erp --skill gsd-sketch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers often need quick, low-fidelity visuals to compare UI directions before committing to implementation. This Skill provides throwaway HTML mockups to explore multiple variants rapidly, reducing decision time and rework.

Core Features & Use Cases

  • Generate 2-3 throwaway HTML sketches per UI component for side-by-side comparison.
  • Organize sketches under .planning/sketches/ with clear versioning and handoff-ready artifacts for designers and engineers.
  • Use case: a product team wants to compare header navigation styles across 3 variants and capture feedback in a single thread.

Quick Start

Ask the AI to generate two to three throwaway HTML sketches for a given UI component to compare directions.

Frequently Asked Questions about gsd-sketch

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

FAQPage Schema
How do I generate multiple HTML mockups for UI design exploration?▼

To generate HTML mockups for UI design exploration, you can prompt the AI to create two to three throwaway HTML sketches for a specific UI component. These variants are automatically stored under .planning/sketches/ for side-by-side comparison.

What is the best way to compare UI variants before committing to implementation?▼

The best way to compare UI variants is by generating 2-3 low-fidelity throwaway HTML mockups per component. This allows you to explore multiple visual directions rapidly, reducing decision time and rework before actual implementation begins.

Do I need an existing project setup to create throwaway HTML sketches?▼

No, you do not need a pre-existing project to create throwaway HTML sketches. The workflow auto-creates necessary directories like .planning/sketches/ and guides you through sketch execution without requiring prior project structure or dependencies.

How does prototyping with HTML sketches integrate with developer handoffs?▼

Prototyping with HTML sketches integrates with developer handoffs by organizing artifacts under .planning/sketches/ with clear versioning. It leverages GSD commit patterns and state tracking to ensure designers and engineers capture feedback in a single thread.

Can I use this approach to sketch navigation styles across different options?▼

Yes, you can use this approach to sketch navigation styles by generating multiple throwaway HTML mockups. For example, a product team can compare header navigation styles across three variants and capture feedback in a single organized thread.

Related Skills

Explore More Design & Creative Skills→
u9401066u9401066

project-init

Initialize a new project from a template with Git reset and configuration.

Community
Basic
KhoiwallKhoiwall

mockup-to-code

Convert UI mockups into React, Vue, or plain HTML code.

Community
Advanced
aslaiiaslaii

gsd-spike

Create single-question feasibility spikes stored in .planning/spikes.

Community
Intermediate
jeffwweeejeffwweee

ui-designer

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

Community
Intermediate