Design Shit Properly - A complete design workflow system for Claude Code with state management, implementation generation, and goal-backward verification.
npm install design-shit-properlyA complete design workflow system for Claude Code. Takes you from vague requirements to polished, reviewed implementations with state management, implementation generation, and goal-backward verification.




```
/dsp:start → /ux-jesus → /ux → /dsp:execute → /ui → /dsp:execute → /design-engineer → /dsp:verify
(wireframe) (polished)
`bash`
npx design-shit-properly
`bash`
npx design-shit-properly --global # Install to ~/.claude/ (all projects)
npx design-shit-properly --local # Install to ./.claude/ (current project)
npx design-shit-properly --uninstall # Remove DSP
`bash`
npx design-shit-properly --check-update # Check for updates
npx design-shit-properly --update # Update to latest version
npx design-shit-properly@latest # Or install latest directly
- Implementation Generation - /dsp:execute creates working React components/dsp:verify
- Two-Stage Execution - Wireframe (after UX) + Polished (after UI)
- Goal-Backward Verification - checks truths, artifacts, and wiring.design/
- Full State Management - Persistent workflow state in
- 5 Specialized Skills - ux-jesus, ux, ui, design-engineer, ux-research
``
/dsp:start # Begin a new design workflow
/dsp:progress # Check where you are
/dsp:execute # Generate implementation
/dsp:verify # Verify completeness
| # | Phase | Command | Output |
|---|-------|---------|--------|
| 1 | Discovery | /ux-jesus | DISCOVERY.md |/ux
| 2 | UX | | UX-DECISIONS.md |/dsp:execute
| 2a | Execute | | Wireframe components |/ui
| 3 | UI | | UI-SPEC.md |/dsp:execute
| 3a | Execute | | Polished components |/design-engineer
| 4 | Review | | REVIEW.md |/dsp:verify
| 5 | Verify | | Verification report |
| Command | Description |
|---------|-------------|
| /dsp:start | Initialize a new design project |/dsp:progress
| | View workflow status with progress bar |/dsp:execute
| | Generate implementation (wireframe or polished) |/dsp:discuss
| | Capture decisions before a phase |/dsp:verify
| | Goal-backward verification |/dsp:skip
| | Skip current phase |/dsp:back
| | Return to previous phase |
| Skill | Purpose |
|-------|---------|
| /ux-jesus | Discovery agent - interrogates requirements with heavy challenge mode |/ux
| | UX principles - user flows, states, accessibility |/ui
| | Visual design - grids, tokens, B2B patterns |/design-engineer
| | Code review - a11y, React patterns, spec alignment |/ux-research
| | Research planning - interviews, usability tests, synthesis |
DSP 2.1 generates working code at two checkpoints:
$3
- Production-ready components
- Full Tailwind + shadcn/ui
- Design tokens applied
- Output: src/components/{feature}/`
UX Decisions → /dsp:execute → Test Flow → UI Spec → /dsp:execute → Final Component
↓ ↓
Wireframe Polished
`State Management
DSP creates a
.design/ directory to track progress:`
.design/
├── config.json # Workflow settings
├── PROJECT.md # Design vision & constraints
├── REQUIREMENTS.md # Trackable requirements
├── STATE.md # Current state and context
└── phases/
├── DISCOVERY.md # Phase 1 output
├── UX-DECISIONS.md # Phase 2 output
├── UI-SPEC.md # Phase 3 output
└── REVIEW.md # Phase 4 output
`Verification
/dsp:verify performs goal-backward verification:- Truths - What must be TRUE (problem defined, user understood, etc.)
- Artifacts - What must EXIST (phase documents)
- Wiring - What must CONNECT (requirements → UX → UI → Review)
Configuration
`json
{
"settings": {
"depth": "standard", // quick | standard | thorough
"challenge_mode": "heavy" // light | heavy
},
"phases": {
"ux": { "include_accessibility": true },
"ui": { "include_b2b": true }
}
}
`Standalone vs Workflow
All skills detect
.design/config.json`:- Workflow mode - Full context, state updates, structured handoffs
- Standalone mode - Independent operation, inline output
- Claude Code CLI
- Node.js 14+
MIT
---
Made with frustration at half-assed designs.