devteam-design
npx machina-cli add skill michael-harris/devteam/devteam-design --openclawCurrent session: !source "${CLAUDE_PLUGIN_ROOT}/scripts/state.sh" && get_current_session 2>/dev/null || echo "No active session"
Active sprint: !source "${CLAUDE_PLUGIN_ROOT}/scripts/state.sh" && get_kv_state "active_sprint" 2>/dev/null || echo "None"
Failure count: !source "${CLAUDE_PLUGIN_ROOT}/scripts/state.sh" && get_kv_state "consecutive_failures" 2>/dev/null || echo "0"
DevTeam Design Command
Command: /devteam:design [target] [options]
Coordinate UX/UI design work across platforms. Launches the UX System Coordinator to orchestrate design specialists.
Usage
# Design for current task/sprint
/devteam:design
# Design specific component
/devteam:design "User settings page"
# Platform-specific design
/devteam:design "Navigation" --platform web
/devteam:design "Navigation" --platform mobile
/devteam:design "Navigation" --platform desktop
# Design system work
/devteam:design --system
/devteam:design --system "Color palette refresh"
# Cost-optimized
/devteam:design "Login form" --eco
Options
| Option | Description |
|---|---|
--platform <platform> | Target platform: web, mobile, desktop, all |
--system | Focus on design system architecture |
--eco | Cost-optimized execution |
--skip-interview | Skip clarifying questions |
Your Process
Phase 0: Initialize Session
source "${CLAUDE_PLUGIN_ROOT}/scripts/state.sh"
source "${CLAUDE_PLUGIN_ROOT}/scripts/events.sh"
SESSION_ID=$(start_session "/devteam:design $*" "design")
log_session_started "/devteam:design $*" "design"
Phase 1: Launch UX System Coordinator
Delegate to the ux:ux-system-coordinator agent, which will:
- Analyze design requirements
- Select appropriate UX specialists based on platform
- Coordinate design system architecture if needed
- Ensure consistency across components
- Validate against design system tokens and patterns
const result = await Task({
subagent_type: "ux:ux-system-coordinator",
prompt: `Design coordination request: ${target}
Platform: ${platform || 'auto-detect'}
Design system mode: ${systemMode}
Coordinate the appropriate UX specialists to produce:
1. Component specifications
2. Layout and interaction patterns
3. Design tokens (colors, typography, spacing)
4. Accessibility requirements
5. Responsive behavior specifications`
})
Phase 2: Quality Gates
- Design consistency check against existing design system
- Accessibility compliance validation
- Cross-platform consistency (if multi-platform)
Phase 3: Completion
log_session_ended('completed', 'Design work complete')
end_session('completed', 'Success')
See Also
/devteam:design-drift- Check for design inconsistencies/devteam:implement- Implement designed components/devteam:plan- Create plans that include design tasks
Source
git clone https://github.com/michael-harris/devteam/blob/main/skills/devteam-design/SKILL.mdView on GitHub Overview
devteam-design coordinates UX/UI work across web, mobile, and desktop, launching the UX System Coordinator to manage design specialists. It ensures consistency with design system tokens and patterns across platforms and aligns components for a cohesive user experience.
How This Skill Works
Running /devteam:design initializes a session and can target a component, platform, or system task. It delegates coordination to the ux-system-coordinator to assemble platform-specific designers, producing component specs, layout and interaction patterns, and design tokens. After design work, quality gates check consistency and accessibility before completion.
When to Use It
- Designing for the current sprint or task without platform specificity.
- Designing a specific component, e.g., a User Settings page.
- Platform-specific design work for web, mobile, or desktop (Navigation example).
- Design system work such as a color palette refresh.
- Cost-optimized design pass using --eco for lightweight tasks.
Quick Start
- Step 1: Run the design command with your target and options (e.g., /devteam:design "Navigation" --platform web).
- Step 2: The UX System Coordinator assembles platform-specific designers and generates component specs and tokens.
- Step 3: Complete with quality gates for consistency and accessibility, then end the session.
Best Practices
- Specify target platform and system scope (or auto-detect) at the start with --platform and --system.
- Let the UX System Coordinator select specialists based on platform needs.
- Ensure design tokens (colors, typography, spacing) are produced and aligned across components.
- Run accessibility validation and cross-platform consistency checks as quality gates.
- Prefer multi-platform validation for cohesive UX across web, mobile, and desktop.
Example Use Cases
- /devteam:design
- /devteam:design "User settings page"
- /devteam:design "Navigation" --platform web
- /devteam:design --system "Color palette refresh"
- /devteam:design "Login form" --eco