skills.rest
mcampbellr
mcampbellrCOMMUNITY
Explore all skills by this author →
Website𝕏@mariocampbellrGitHub

gsd-sketch

Generate HTML UI mockup variants for GSD design workflows.

Updated Apr 22, 2025
Search Tags:#ui design#sketching#design ideation#html mockup#Get Stuff Done
One-click install
npx skills add https://github.com/mcampbellr/.dotfiles --skill gsd-sketch-mcampbellr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsd-sketch
Source: https://github.com/mcampbellr/.dotfiles/tree/main/claude/.claude/skills/gsd-sketch
Command: npx skills add https://github.com/mcampbellr/.dotfiles --skill gsd-sketch-mcampbellr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of exploring design ideas and creating throwaway HTML mockups, facilitating decision-making before implementation.

Core Features & Use Cases

  • Sketch UI Exploration: Generate HTML mockups for UI and design ideas.
  • Variant Generation: Produce 2-3 variants for comparison.
  • Integration with GSD: Works with GSD commit patterns, state tracking, and handoff workflows.
  • Data Grounding: Loads spike findings to ground mockups in real data shapes and validated interaction patterns.
  • Modes: Idea mode for specific design ideas and Frontier mode for proposing sketches based on existing landscape.

Quick Start

To create a sketch for a new design idea, use the gsd-sketch skill with the design concept as an argument. For example: 'sketch a login page design'.

Frequently Asked Questions about gsd-sketch

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

FAQPage Schema
How do I create HTML mockups for UI design ideation?▼

HTML mockups for UI design ideation are generated by sketching specific design ideas and producing 2-3 variants for comparison. This streamlines exploring design concepts and validating decisions before implementation begins.

What is the best way to generate UI design variants for comparison?▼

Generating UI design variants for comparison is done using modes that produce 2-3 HTML mockups. Idea mode sketches specific concepts, while Frontier mode automatically proposes sketches based on the existing design landscape.

Can I use HTML mockups with Get Stuff Done workflows?▼

Yes, HTML mockups integrate directly with Get Stuff Done (GSD) workflows. The sketching process supports GSD commit patterns, state tracking, and handoff workflows to manage design ideation efficiently.

How do I ground UI mockups in real data shapes and validated patterns?▼

You ground UI mockups in real data by loading spike findings into the design process. This data grounding ensures HTML mockups accurately reflect validated interaction patterns and actual data structures.

Do I need execution context files to sketch UI design ideas?▼

Yes, execution context files and references for design patterns and UI branding are required to sketch UI design ideas. These provide the necessary environment and styling constraints for accurate HTML mockup generation.

When should I use throwaway HTML mockups for design exploration?▼

Throwaway HTML mockups for design exploration are used when you need to facilitate decision-making before implementation. They allow rapid iteration of design ideas and variants without committing to final code.

Related Skills

Explore More Design & Creative Skills→
MrlykMrlyk

teach-impeccable

Collect design context and persist it in the AI configuration.

Community
Intermediate
TaylorHustonTaylorHuston
69

ui-design

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

Community
Basic
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