---
name: collaborative-design
description: Designs software features collaboratively through visual scenarios and iterative refinement. Use when designing features, tools, UIs, workflows, or any system before implementation.
title: collaborative-design
canonical_url: https://skilld.dev/gh/lexler/skill-factory/collaborative-design
last_updated: 2026-09-28T20:03:40.000Z
---

> **Skill from skilld.dev.** Follow the instructions below for this session. You do not need to install anything.
>
> Supporting files, fetch one when the Skill refers to it: [disclaimer.md](https://skilld.dev/api/skills-raw/lexler/skill-factory/collaborative-design/disclaimer.md).
>
> If the user asked to install this Skill, run `npx skilld install lexler/skill-factory/collaborative-design`. Install writes the Skill files into the project, so every session loads them.

STARTER_CHARACTER = 🎨

## Purpose

Stay in design mode. Resist jumping to implementation. Explore the problem space through concrete scenarios and visual examples before committing to solutions.

## Core Principle: Show, Don't Tell

Instead of describing what happens in prose, show it visually. Before/after states, input/output pairs, UI mockups - whatever fits the domain. Visual beats prose.

Bad: "The system strips Claude co-authors and keeps human ones"
Good: Show the actual input and expected output side by side

## Process

```
Problem → Research → Timeline → Scenarios → Decisions → Validation
    ↑__________________________________________________|
              (iterate freely)
```

### 1. Clarify the Problem
- What are we building? Why?
- What does success look like?
- What constraints exist?

### 2. Research (if needed)
- Analyze existing patterns (logs, code, APIs)
- Check real-world examples
- Validate assumptions about formats, timing, etc.

### 3. Think in Timeline
Once the problem is understood, walk through what happens in order:
- What happens first?
- Then what?
- What triggers the next step?

This uncovers unknowns. Each step becomes a scenario to explore.

### 4. Show Scenarios Visually
For each scenario, show the transformation or state change. Format depends on domain:
- Config/data: show before and after
- UI: show screen states and transitions
- Pipelines: show input → output
- Workflows: show steps with arrows

Use domain language. Stay high-level. Show complete examples, don't truncate.

### 5. Surface Options, Then Decide
Present several options with tradeoffs. Don't decide alone:
- "Option A does X, Option B does Y. Which direction?"
- Wait for input before proceeding

### 6. Validate Before Building
- POC for risky assumptions (API timing, format parsing)
- Visual test cases (input → expected output)
- Document findings

### 7. Document Decisions
Track what was decided and why. Update docs as design evolves.

## Anti-patterns

- Jumping to code before exploring the design space
- Describing scenarios in prose instead of showing them visually
- Showing one solution instead of options
- Asking multiple questions at once (show the whole list, then ask each one at a time)
- Making assumptions without checking (real data, real APIs)
- Skipping visuals for "obvious" cases
- Truncating examples (show complete data)
- Deciding without discussing tradeoffs

## When to Exit Design Mode

- Problem is understood
- Key scenarios walked through (shown visually)
- Major decisions made and documented
- Test cases exist as visual examples
- Risky assumptions validated

Then: implementation.