domains / design / sketch-ui-design / sketch

sketch

Skill card

combined

The two copies use the same skill name for completely different tasks. The davepoon copy is a workflow that generates throwaway HTML mockups to explore design directions, while the bergside copy is a static design-system guideline for a specific 'hand-drawn sketch' visual theme. Neither is a reproduction of the other; they are distinct procedures that happen to share a name.

Repositories

Other copies

Combined skill

# Sketch Skill

This skill handles two distinct design tasks. Determine the user's intent to select the correct mode.

## Mode 1: Design Exploration (Mockups)
**Intent:** The user wants to explore a design idea, see variants, or generate a mockup.
**Procedure:**
1. Accept a design idea or 'frontier' command.
2. Create a `.planning/sketches/` directory if it does not exist.
3. Generate 2-3 throwaway HTML mockup variants for the idea.
4. Save the mockups and update the MANIFEST.
5. Commit the changes using GSD patterns.

## Mode 2: Design System Guidelines (Hand-drawn Theme)
**Intent:** The user wants to apply the 'Sketch' design system or generate guidelines for it.
**Procedure:**
1. Apply the 'Hand-drawn Sketch' visual style: warm cream paper background, soft teal accents (#1DAD97), and 'Delicious Handrawn' font.
2. Use rounded pill controls, dashed card outlines, and chunky offset shadows.
3. Follow the spacing scale (4/8/12/16/24/32) and typography scale (12/14/16/20/24/32).
4. Ensure WCAG 2.2 AA compliance and keyboard-first interactions.
5. When generating guidelines, follow the structure: Context, Tokens, Component Rules, Accessibility, Content, Anti-patterns, QA Checklist.

## Conflicts
- **davepoon/buildwithclaude** focuses on generating code (HTML mockups) for exploration.
- **bergside/awesome-design-skills** focuses on defining a static visual identity and providing guidelines for that identity.