playbooks

home / skills / phrazzld / claude-config / design-sprint

design-sprint skill

/skills/design-sprint

This skill guides a design sprint from audit to build, exploring visual options before implementation to ensure validated UI decisions.

npx playbooks add skill phrazzld/claude-config --skill design-sprint

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
1.4 KB
---
name: design-sprint
description: |
  Full design cycle: audit, catalog, pick, theme, build.
  Explores visual options before committing to implementation.
  Use when: redesigning UI, exploring visual directions, design system work.
  Composes: /design-audit, /design-catalog, /design-theme, /build.
argument-hint: "[route-or-url]"
effort: high
---

# /design-sprint

Explore before you implement.

## Role

Design lead guiding visual exploration through structured options.

## Objective

Full UI/UX design cycle for `$ARGUMENTS` (route, URL, or component). End with implemented, validated design.

## Latitude

- Research current trends via Gemini
- Generate multiple proposals before committing
- Multiple iteration rounds are expected
- User picks direction; you execute

## Workflow

1. **Audit** — `/design-audit` (token inventory, consistency, debt, accessibility)
2. **Catalog** — `/design-catalog $1` (5-8 visual proposals, validated against ui-skills + RAMS)
3. **Select** — User browses catalog, picks direction (hybrids OK)
4. **Theme** — `/design-theme` (tokens in CSS `@theme`, component updates, accessibility)
5. **Build** — `/build` (implement on feature branch)
6. **Cleanup** — Remove catalog artifacts with user approval

## Output

Design system implemented. Report: audit findings, proposals generated, selection, tokens defined, components updated.

Overview

This skill guides a full design cycle from audit to implemented UI, helping teams explore visual options before coding. It leads visual exploration, generates multiple validated proposals, and delivers themed tokens and component updates ready for implementation. The end result is a documented, accessible design system implemented on a feature branch.

How this skill works

I inspect the target route, URL, or component to produce an audit of tokens, consistency issues, accessibility gaps, and technical debt. I generate 5–8 distinct visual proposals and validate them against UI principles and reliability/accessibility criteria. After you select a direction (or a hybrid), I convert the chosen approach into CSS-friendly theme tokens and update component styles. Finally, I implement the design on a feature branch and prepare a cleanup plan to remove catalog artifacts.

When to use it

  • Redesigning a page or flow and wanting visual options before implementation
  • Exploring multiple visual directions to align product and design stakeholders
  • Building or extending a design system with token-driven theming
  • Validating accessibility and consistency before committing engineering effort
  • Preparing a feature branch with ready-to-implement component updates

Best practices

  • Start with a focused audit to surface hidden consistency and accessibility issues
  • Limit each catalog to 5–8 proposals to keep decisions practical and comparable
  • Validate proposals against accessibility, performance, and maintenance (RAMS) criteria
  • Encourage hybrid selections—combine strengths of multiple proposals when useful
  • Plan iterations: expect several refinement rounds before finalizing tokens and components

Example use cases

  • Audit a legacy dashboard, propose modernized visual directions, and implement chosen theme
  • Create a catalog of header/nav treatments for a major site refresh and standardize tokens
  • Explore color and typographic systems for a new product, then export CSS @theme tokens
  • Convert a selected visual direction into updated component styles and implement on a feature branch
  • Run accessibility-focused redesign for a high-traffic component and deliver remediation and tests

FAQ

How many proposals will I get?

Typically 5–8 distinct visual proposals to keep comparisons manageable while showing meaningful variety.

Do you produce production-ready code?

Yes: theme tokens and component updates are implemented on a feature branch; final integration and QA are coordinated with engineering.

Can I mix elements from multiple proposals?

Yes. Hybrid selections are supported and often recommended to combine the best aspects of multiple directions.