Get the FREE Ultimate OpenClaw Setup Guide →

devteam-design

npx machina-cli add skill michael-harris/devteam/devteam-design --openclaw
Files (1)
SKILL.md
3.2 KB

Current 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

OptionDescription
--platform <platform>Target platform: web, mobile, desktop, all
--systemFocus on design system architecture
--ecoCost-optimized execution
--skip-interviewSkip 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:

  1. Analyze design requirements
  2. Select appropriate UX specialists based on platform
  3. Coordinate design system architecture if needed
  4. Ensure consistency across components
  5. 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

  1. Step 1: Run the design command with your target and options (e.g., /devteam:design "Navigation" --platform web).
  2. Step 2: The UX System Coordinator assembles platform-specific designers and generates component specs and tokens.
  3. 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

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers