Generate throwaway HTML UI mockup variants for design exploration.
npx skills add https://github.com/BeiBei-Clic/ai-skills --skill gsd-sketch-beibei-clic
Please help me install this Agent Skill. Skill: gsd-sketch Source: https://github.com/BeiBei-Clic/ai-skills/tree/main/gsd-sketch Command: npx skills add https://github.com/BeiBei-Clic/ai-skills --skill gsd-sketch-beibei-clic
This Skill helps you turn vague UI or product ideas into concrete, testable directions before you commit engineering effort, reducing wasted build time and design churn.
.planning/sketches/ and connect outputs to GSD commit/state/hand-off workflows for future implementation conversations.Run the gsd-sketch skill with a design idea and optionally add --quick when the direction is already clear.
High-intent search queries and answers about installing and using this skill.
You create throwaway HTML UI mockups that explore 2–3 design variants to validate visual structure and interactivity before committing code. This approach reduces wasted build time and design churn by testing directions early.
Comparing design variants during product planning is done by generating 2–3 throwaway HTML mockups. This method grounds interaction assumptions and validates visual structure, allowing you to evaluate alternative design directions before committing engineering effort.
Throwaway HTML sketches can be used for frontend handoff by storing outputs in `.planning/sketches/` and connecting them to GSD commit and state tracking workflows. This integration supports future implementation conversations and validates implementation fit.
Analyzing an existing UI sketch landscape to find missing design gaps uses frontier mode to propose coherent next sketches. This evaluates current design directions and identifies gaps to maintain consistency across the product planning workflow.
Gsd-sketch works with GSD state tracking and commit patterns by integrating sketch planning into the workflow. It stores outputs in `.planning/sketches/` and optionally runs a wrap-up workflow to connect designs to hand-off processes.
You should avoid using throwaway HTML mockups when the design direction is already clear and does not require comparing multiple variants. In cases where visual structure and interactivity validation are unnecessary, committing directly to code bypasses the sketch planning phase.
The13thNodeScore UI design mockups across ten dimensions and generate markdown reports.
BENYEKHLEF-AnouarConvert validated HTML mockups into production-ready frontend code.
hadpadrahulGenerate 2-3 throwaway HTML mockups for UI component comparison.
aayushsoamGenerate interactive HTML mockups with design variants and comparison documentation.