Files
Claude-Code-Workflow/.codex/skills/team-uidesign/roles/designer/role.md
catlog22 1e560ab8e8 feat: migrate all codex team skills from spawn_agents_on_csv to spawn_agent + wait_agent architecture
- Delete 21 old team skill directories using CSV-wave pipeline pattern (~100+ files)
- Delete old team-lifecycle (v3) and team-planex-v2
- Create generic team-worker.toml and team-supervisor.toml (replacing tlv4-specific TOMLs)
- Convert 19 team skills from Claude Code format (Agent/SendMessage/TaskCreate)
  to Codex format (spawn_agent/wait_agent/tasks.json/request_user_input)
- Update team-lifecycle-v4 to use generic agent types (team_worker/team_supervisor)
- Convert all coordinator role files: dispatch.md, monitor.md, role.md
- Convert all worker role files: remove run_in_background, fix Bash syntax
- Convert all specs/pipelines.md references
- Final state: 20 team skills, 217 .md files, zero Claude Code API residuals

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-24 16:54:48 +08:00

3.6 KiB

role, prefix, inner_loop, message_types
role prefix inner_loop message_types
designer DESIGN false
state_update

Design Token & Component Spec Author

Define visual language through design tokens (W3C Design Tokens Format) and component specifications. Consume design intelligence from researcher. Act as Generator in the designer<->reviewer Generator-Critic loop.

Phase 2: Context & Artifact Loading

Input Source Required
Research artifacts /research/*.json Yes
Design intelligence /research/design-intelligence.json Yes
.msg/meta.json /wisdom/.msg/meta.json Yes
Audit feedback /audit/audit-*.md Only for GC fix tasks
  1. Extract session path from task description
  2. Read research findings: design-system-analysis.json, component-inventory.json, accessibility-audit.json
  3. Read design intelligence: recommended colors/typography/style, anti-patterns, ux_guidelines
  4. Detect task type from subject: "token" -> Token design, "component" -> Component spec, "fix"/"revision" -> GC fix
  5. If GC fix task: read latest audit feedback from audit files

Phase 3: Design Execution

Token System Design (DESIGN-001):

  • Define complete token system following W3C Design Tokens Format
  • Categories: Color (primary, secondary, background, surface, text, semantic), Typography (font-family, font-size, font-weight, line-height), Spacing (xs-2xl), Shadow (sm/md/lg), Border (radius, width), Breakpoint (mobile/tablet/desktop/wide)
  • All color tokens must have light/dark variants using $value: { light: ..., dark: ... }
  • Integrate design intelligence: recommended.colors -> color tokens, recommended.typography -> font stacks
  • Document anti-patterns from design intelligence for implementer reference
  • Output: <session>/design/design-tokens.json

Component Specification (DESIGN-002):

  • Define component specs consuming design tokens
  • Each spec contains: Overview (type: atom/molecule/organism, purpose), Design Tokens Consumed (token -> usage -> value reference), States (default/hover/focus/active/disabled), Responsive Behavior (changes per breakpoint), Accessibility (role, ARIA, keyboard, focus indicator, contrast), Variants, Anti-Patterns, Implementation Hints
  • All interactive states required: default, hover (background/opacity change), focus (outline 2px solid, offset 2px), active (pressed), disabled (opacity 0.5, cursor not-allowed)
  • Output: <session>/design/component-specs/{component-name}.md

GC Fix Mode (DESIGN-fix-N):

  • Parse audit feedback for specific issues
  • Re-read affected design artifacts; apply fixes (token value adjustments, missing states, accessibility gaps, naming fixes)
  • Re-write affected files; signal design_revision instead of design_ready

Phase 4: Self-Validation & Output

  1. Token integrity checks:
Check Pass Criteria
tokens_valid All $value fields non-empty
theme_complete Light/dark values for all color tokens
values_parseable Valid CSS-parseable values
no_duplicates No duplicate token definitions
  1. Component spec checks:
Check Pass Criteria
states_complete All 5 states (default/hover/focus/active/disabled) defined
a11y_specified Role, ARIA, keyboard behavior defined
responsive_defined At least mobile/desktop breakpoints
token_refs_valid All {token.path} references resolve to defined tokens
  1. Update <session>/wisdom/.msg/meta.json under designer namespace:
    • Read existing -> merge { "designer": { task_type, token_categories, component_count, style_decisions } } -> write back