gsd-sketch
Tools to draft and iterate on UI design ideas using quick HTML mockups.
Install
mkdir -p .claude/skills/gsd-sketch && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18601" && unzip -o skill.zip -d .claude/skills/gsd-sketch && rm skill.zipInstalls to .claude/skills/gsd-sketch
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Rapidly sketch UI/design ideas using throwaway HTML mockups with multi-variant explorationKey capabilities
- →Generate throwaway HTML mockups for UI ideas
- →Produce 2-3 variants for design comparison
- →Integrate with GSD commit patterns and state tracking
- →Auto-create `.planning/sketches/` directory if needed
- →Support multi-variant exploration for frontend concepts
- →Decompose design ideas into buildable components
How it works
The skill executes a sketch workflow that generates HTML mockups with multiple variants for UI design exploration.
Inputs & outputs
When to use gsd-sketch
- →Prototype UI layout variations
- →Quickly sketch component ideas
- →Explore design variants using HTML
About this skill
<codex_skill_adapter>
A. Skill Invocation
- This skill is invoked by mentioning
$gsd-sketch. - Treat all user text after
$gsd-sketchas{{GSD_ARGS}}. - If no arguments are present, treat
{{GSD_ARGS}}as empty.
B. AskUserQuestion → request_user_input Mapping
GSD workflows use AskUserQuestion (Claude Code syntax). Translate to Codex request_user_input:
Parameter mapping:
header→headerquestion→question- Options formatted as
"Label" — description→{label: "Label", description: "description"} - Generate
idfrom header: lowercase, replace spaces with underscores
Batched calls:
AskUserQuestion([q1, q2])→ singlerequest_user_inputwith multiple entries inquestions[]
Multi-select workaround:
- Codex has no
multiSelect. Use sequential single-selects, or present a numbered freeform list asking the user to enter comma-separated numbers.
Execute mode fallback:
- When
request_user_inputis rejected (Execute mode), present a plain-text numbered list and pick a reasonable default.
C. Task() → spawn_agent Mapping
GSD workflows use Task(...) (Claude Code syntax). Translate to Codex collaboration tools:
Direct mapping:
Task(subagent_type="X", prompt="Y")→spawn_agent(agent_type="X", message="Y")Task(model="...")→ omit (Codex uses per-role config, not inline model selection)fork_context: falseby default — GSD agents load their own context via<files_to_read>blocks
Parallel fan-out:
- Spawn multiple agents → collect agent IDs →
wait(ids)for all to complete
Result parsing:
- Look for structured markers in agent output:
CHECKPOINT,PLAN COMPLETE,SUMMARY, etc. close_agent(id)after collecting results from each agent </codex_skill_adapter>
Does not require $gsd-new-project — auto-creates .planning/sketches/ if needed.
</objective>
<execution_context> @/Users/sasikumar/Documents/n8n/.codex/get-shit-done/workflows/sketch.md @/Users/sasikumar/Documents/n8n/.codex/get-shit-done/references/ui-brand.md @/Users/sasikumar/Documents/n8n/.codex/get-shit-done/references/sketch-theme-system.md @/Users/sasikumar/Documents/n8n/.codex/get-shit-done/references/sketch-interactivity.md @/Users/sasikumar/Documents/n8n/.codex/get-shit-done/references/sketch-tooling.md @/Users/sasikumar/Documents/n8n/.codex/get-shit-done/references/sketch-variant-patterns.md </execution_context>
<runtime_note>
Copilot (VS Code): Use vscode_askquestions wherever this workflow calls AskUserQuestion.
</runtime_note>
Available flags:
--quick— Skip mood/direction intake, jump straight to decomposition and building. Use when the design direction is already clear. </context>
When not to use it
- →When the design direction is already clear, use the `--quick` flag to skip mood/direction intake.
- →When a new project needs to be initialized, use `$gsd-new-project` instead.
- →When the task is not related to UI/design ideas or HTML mockups.
Limitations
- →This skill does not require `$gsd-new-project`.
- →This skill does not support `multiSelect` for user input.
- →This skill does not use inline model selection.
How it compares
This skill automates the generation of multiple UI design variants, which differs from manually creating individual mockups.
Compared to similar skills
gsd-sketch side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| gsd-sketch (this skill) | 0 | 3mo | No flags | Beginner |
| ui-ux-pro-max | 1,909 | 4mo | Review | Intermediate |
| svg-precision | 527 | 3mo | Review | Intermediate |
| mobile-android-design | 101 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by skbsasikumar-rgb
View all by skbsasikumar-rgb →You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
svg-precision
dkyazzentwatwa
Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.
mobile-android-design
wshobson
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
frontend-slides
sickn33
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".