design-ops

Name: design-ops
Author: cuellarfr

119installs3forks

How to install design-ops?

cuellarfr/design-skills/design-ops

$npx -y skills add cuellarfr/design-skills --skill design-ops

Installs into the current project.

Summary

Run design sprints, manage handoff, establish team rituals, documentation standards, and design QA processes. Covers the operational side of design — how teams organize work, collaborate with engineering, and ship quality.

Files · 1

View on GitHub

SKILL.md

1	# Design Ops & Handoff
2
3	Operational processes that make design teams effective — sprints, handoff, rituals, documentation, and quality assurance.
4
5	---
6
7	## Design Sprints
8
9	A 5-day process for solving big problems and testing ideas before committing engineering resources. Based on Jake Knapp's Sprint methodology developed at Google Ventures.
10
11	### When to Sprint
12
13	\| Signal \| Sprint Is Right \| Sprint Is Wrong \|
14	\|--------\|----------------\|-----------------\|
15	\| Problem clarity \| Big problem, unclear solution \| Solution already known — just build it \|
16	\| Stakes \| High — wrong direction costs months \| Low — easy to course-correct later \|
17	\| Team alignment \| Disagreement on approach \| Team already aligned \|
18	\| Time pressure \| Need answers this week \| Can run a longer discovery process \|
19	\| Complexity \| Cross-functional problem \| Single-discipline task \|
20
21	### The 5-Day Structure
22
23	\| Day \| Focus \| Key Activity \| Output \|
24	\|-----\|-------\|-------------\|--------\|
25	\| Monday \| Map \| Define the challenge, set a 2-year goal, map the problem space, pick a target \| Sprint questions, problem map, target area \|
26	\| Tuesday \| Sketch \| Review existing solutions, each person sketches solutions individually \| Solution sketches (one per person) \|
27	\| Wednesday \| Decide \| Present sketches, vote (dot voting + decider picks), create storyboard \| Storyboard for prototype \|
28	\| Thursday \| Prototype \| Build a realistic facade — just enough to test \| Testable prototype \|
29	\| Friday \| Test \| 5 user interviews, observe together, identify patterns \| Go/no-go decision with evidence \|
30
31	### Sprint Team
32
33	\| Role \| Count \| Responsibility \|
34	\|------\|-------\|---------------\|
35	\| Decider \| 1 \| Has authority to make final calls. Usually PM or founder \|
36	\| Facilitator \| 1 \| Runs the process, keeps time, manages energy \|
37	\| Designer \| 1-2 \| Leads sketching, builds prototype \|
38	\| Engineer \| 1-2 \| Feasibility gut-checks, helps prototype \|
39	\| Domain expert \| 1-2 \| Customer support, sales, marketing — whoever knows the user \|
40	\| Total \| 5-7 \| More than 7 is counterproductive \|
41
42	### Sprint Rules
43
44	1. No devices during working sessions — full attention
45	2. Work alone together — individual sketching, not group brainstorming
46	3. The Decider decides — democracy is slow; one person breaks ties
47	4. Prototype, don't build — facade quality, not production quality
48	5. 5 users is enough — you'll see 85% of usability issues with 5 participants
49
50	---
51
52	## Design-to-Development Handoff
53
54	Handoff is the #1 source of quality loss in product teams. The goal: engineers should never have to guess.
55
56	### Handoff Maturity Levels
57
58	\| Level \| Description \| Symptom \|
59	\|-------\|------------\|---------\|
60	\| 1. Screenshot \| Designer sends a static image \| Engineers guess spacing, states, behavior \|
61	\| 2. Annotated mockup \| Redlines, spacing callouts \| Better, but still missing states and edge cases \|
62	\| 3. Interactive spec \| Figma/design tool with inspect mode, component links \| Engineers can extract values, but behavior is undocumented \|
63	\| 4. Full spec \| All states, transitions, error handling, responsive behavior, tokens \| Engineers build exactly what was designed \|
64	\| 5. Integrated \| Design and code share a component system; handoff is a conversation, not a document \| Minimal spec needed — shared language does the work \|
65
66	Target: Level 4 minimum. Level 5 for mature teams.
67
68	### What a Complete Handoff Includes
69
70	Every screen or component handoff must cover:
71
72	\| Category \| Required Items \|
73	\|----------\|---------------\|
74	\| Layout \| Spacing (in tokens, not pixels), alignment, responsive breakpoints, container behavior \|
75	\| Content \| Final copy (not lorem ipsum), character limits, truncation rules, localization notes \|
76	\| States \| Default, hover, focus, active, disabled, loading, empty, error, success — for every interactive element \|
77	\| Behavior \| What happens on click/tap, keyboard interaction, drag, swipe. Transition details \|
78	\| Responsive \| How the layout adapts at each breakpoint. What reflows, stacks, hides, or changes \|
79	\| Tokens \| Color tokens, typography tokens, spacing tokens — never raw hex/px values \|
80	\| Accessibility \| Focus order, ARIA roles, screen reader announcements, touch targets, color contrast \|
81	\| Edge cases \| Long strings, empty data, error recovery, offline behavior, permissions \|
82	\| Assets \| Icons (SVG), images (with alt text), animations (specs or files) \|
83
84	### Handoff Anti-Patterns
85
86	\| Anti-Pattern \| Problem \| Fix \|
87	\|-------------\|---------\|-----\|
88	\| "It's in Figma" \| No context, engineer must reverse-engineer intent \| Write behavior notes on every frame \|
89	\| Happy path only \| Only the ideal flow is designed \| Design all states before ha

People who liked this also viewed

6 picks

Type

design-ops

119installs3forks

View on GitHub

How to install design-ops?

cuellarfr/design-skills/design-ops

$npx -y skills add cuellarfr/design-skills --skill design-ops

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Design Ops & Handoff
2
3	Operational processes that make design teams effective — sprints, handoff, rituals, documentation, and quality assurance.
4
5	---
6
7	## Design Sprints
8
9	A 5-day process for solving big problems and testing ideas before committing engineering resources. Based on Jake Knapp's Sprint methodology developed at Google Ventures.
10
11	### When to Sprint
12
13	\| Signal \| Sprint Is Right \| Sprint Is Wrong \|
14	\|--------\|----------------\|-----------------\|
15	\| Problem clarity \| Big problem, unclear solution \| Solution already known — just build it \|
16	\| Stakes \| High — wrong direction costs months \| Low — easy to course-correct later \|
17	\| Team alignment \| Disagreement on approach \| Team already aligned \|
18	\| Time pressure \| Need answers this week \| Can run a longer discovery process \|
19	\| Complexity \| Cross-functional problem \| Single-discipline task \|
20
21	### The 5-Day Structure
22
23	\| Day \| Focus \| Key Activity \| Output \|
24	\|-----\|-------\|-------------\|--------\|
25	\| Monday \| Map \| Define the challenge, set a 2-year goal, map the problem space, pick a target \| Sprint questions, problem map, target area \|
26	\| Tuesday \| Sketch \| Review existing solutions, each person sketches solutions individually \| Solution sketches (one per person) \|
27	\| Wednesday \| Decide \| Present sketches, vote (dot voting + decider picks), create storyboard \| Storyboard for prototype \|
28	\| Thursday \| Prototype \| Build a realistic facade — just enough to test \| Testable prototype \|
29	\| Friday \| Test \| 5 user interviews, observe together, identify patterns \| Go/no-go decision with evidence \|
30
31	### Sprint Team
32
33	\| Role \| Count \| Responsibility \|
34	\|------\|-------\|---------------\|
35	\| Decider \| 1 \| Has authority to make final calls. Usually PM or founder \|
36	\| Facilitator \| 1 \| Runs the process, keeps time, manages energy \|
37	\| Designer \| 1-2 \| Leads sketching, builds prototype \|
38	\| Engineer \| 1-2 \| Feasibility gut-checks, helps prototype \|
39	\| Domain expert \| 1-2 \| Customer support, sales, marketing — whoever knows the user \|
40	\| Total \| 5-7 \| More than 7 is counterproductive \|
41
42	### Sprint Rules
43
44	1. No devices during working sessions — full attention
45	2. Work alone together — individual sketching, not group brainstorming
46	3. The Decider decides — democracy is slow; one person breaks ties
47	4. Prototype, don't build — facade quality, not production quality
48	5. 5 users is enough — you'll see 85% of usability issues with 5 participants
49
50	---
51
52	## Design-to-Development Handoff
53
54	Handoff is the #1 source of quality loss in product teams. The goal: engineers should never have to guess.
55
56	### Handoff Maturity Levels
57
58	\| Level \| Description \| Symptom \|
59	\|-------\|------------\|---------\|
60	\| 1. Screenshot \| Designer sends a static image \| Engineers guess spacing, states, behavior \|
61	\| 2. Annotated mockup \| Redlines, spacing callouts \| Better, but still missing states and edge cases \|
62	\| 3. Interactive spec \| Figma/design tool with inspect mode, component links \| Engineers can extract values, but behavior is undocumented \|
63	\| 4. Full spec \| All states, transitions, error handling, responsive behavior, tokens \| Engineers build exactly what was designed \|
64	\| 5. Integrated \| Design and code share a component system; handoff is a conversation, not a document \| Minimal spec needed — shared language does the work \|
65
66	Target: Level 4 minimum. Level 5 for mature teams.
67
68	### What a Complete Handoff Includes
69
70	Every screen or component handoff must cover:
71
72	\| Category \| Required Items \|
73	\|----------\|---------------\|
74	\| Layout \| Spacing (in tokens, not pixels), alignment, responsive breakpoints, container behavior \|
75	\| Content \| Final copy (not lorem ipsum), character limits, truncation rules, localization notes \|
76	\| States \| Default, hover, focus, active, disabled, loading, empty, error, success — for every interactive element \|
77	\| Behavior \| What happens on click/tap, keyboard interaction, drag, swipe. Transition details \|
78	\| Responsive \| How the layout adapts at each breakpoint. What reflows, stacks, hides, or changes \|
79	\| Tokens \| Color tokens, typography tokens, spacing tokens — never raw hex/px values \|
80	\| Accessibility \| Focus order, ARIA roles, screen reader announcements, touch targets, color contrast \|
81	\| Edge cases \| Long strings, empty data, error recovery, offline behavior, permissions \|
82	\| Assets \| Icons (SVG), images (with alt text), animations (specs or files) \|
83
84	### Handoff Anti-Patterns
85
86	\| Anti-Pattern \| Problem \| Fix \|
87	\|-------------\|---------\|-----\|
88	\| "It's in Figma" \| No context, engineer must reverse-engineer intent \| Write behavior notes on every frame \|
89	\| Happy path only \| Only the ideal flow is designed \| Design all states before ha

People who liked this also viewed

6 picks

Type