mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-28 09:23:08 +08:00
feat: Add 4 new team skills with Generator-Critic loops, shared memory, and dynamic pipelines
Create team-brainstorm (ideator↔challenger GC, quick/deep/full pipelines), team-testing (generator↔executor GC, L1/L2/L3 test layers), team-iterdev (developer↔reviewer GC, task-ledger sprint tracking), and team-uidesign (designer↔reviewer GC, CP-9 dual-track with sync points). Each team includes SKILL.md router, 5 roles, and team-config.json.
This commit is contained in:
catlog22
330
.claude/skills/team-uidesign/roles/designer.md
Normal file
330
.claude/skills/team-uidesign/roles/designer.md
Normal file
@@ -0,0 +1,330 @@
|
||||
# Role: designer
|
||||
|
||||
Design token architect and component specification author. Defines visual language, component behavior, and responsive layouts. Acts as Generator in the designer↔reviewer Generator-Critic loop.
|
||||
|
||||
## Role Identity
|
||||
|
||||
- **Name**: `designer`
|
||||
- **Task Prefix**: `DESIGN`
|
||||
- **Responsibility Type**: Code generation (design artifacts)
|
||||
- **Responsibility**: Design token definition, component specs, layout design
|
||||
- **Toolbox**: Read, Write, Edit, Glob, Grep, Task(code-developer, universal-executor)
|
||||
|
||||
## Message Types
|
||||
|
||||
| Type | When | Content |
|
||||
|------|------|---------|
|
||||
| `design_ready` | Design artifact complete | Summary + file references |
|
||||
| `design_revision` | GC fix iteration complete | What changed + audit feedback addressed |
|
||||
| `design_progress` | Intermediate update | Current progress |
|
||||
| `error` | Failure | Error details |
|
||||
|
||||
## Execution
|
||||
|
||||
### Phase 1: Task Discovery
|
||||
|
||||
```javascript
|
||||
const tasks = TaskList()
|
||||
const myTasks = tasks.filter(t =>
|
||||
t.subject.startsWith('DESIGN-') &&
|
||||
t.owner === 'designer' &&
|
||||
t.status === 'pending' &&
|
||||
t.blockedBy.length === 0
|
||||
)
|
||||
if (myTasks.length === 0) return
|
||||
const task = TaskGet({ taskId: myTasks[0].id })
|
||||
TaskUpdate({ taskId: task.id, status: 'in_progress' })
|
||||
|
||||
// Detect task type
|
||||
const isTokenTask = task.subject.includes('令牌') || task.subject.includes('token')
|
||||
const isComponentTask = task.subject.includes('组件') || task.subject.includes('component')
|
||||
const isFixTask = task.subject.includes('fix') || task.subject.includes('修订')
|
||||
```
|
||||
|
||||
### Phase 2: Context Loading + Shared Memory Read
|
||||
|
||||
```javascript
|
||||
const sessionFolder = task.description.match(/Session:\s*(.+)/)?.[1]?.trim()
|
||||
|
||||
// Read shared memory
|
||||
let sharedMemory = {}
|
||||
try {
|
||||
sharedMemory = JSON.parse(Read(`${sessionFolder}/shared-memory.json`))
|
||||
} catch {}
|
||||
|
||||
// Read research findings
|
||||
let research = {}
|
||||
try {
|
||||
research = {
|
||||
designSystem: JSON.parse(Read(`${sessionFolder}/research/design-system-analysis.json`)),
|
||||
inventory: JSON.parse(Read(`${sessionFolder}/research/component-inventory.json`)),
|
||||
a11y: JSON.parse(Read(`${sessionFolder}/research/accessibility-audit.json`))
|
||||
}
|
||||
} catch {}
|
||||
|
||||
// If GC fix task, read audit feedback
|
||||
let auditFeedback = null
|
||||
if (isFixTask) {
|
||||
const feedbackMatch = task.description.match(/审查反馈:\s*(.+)/s)
|
||||
auditFeedback = feedbackMatch?.[1]?.trim()
|
||||
// Also read the audit file
|
||||
const auditFiles = Glob({ pattern: `${sessionFolder}/audit/audit-*.md` })
|
||||
if (auditFiles.length > 0) {
|
||||
auditFeedback = Read(auditFiles[auditFiles.length - 1])
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 3: Core Execution
|
||||
|
||||
#### Token System Design (DESIGN-001 in system/full-system pipeline)
|
||||
|
||||
```javascript
|
||||
if (isTokenTask) {
|
||||
const existingTokens = research.designSystem?.existing_tokens || {}
|
||||
const stylingApproach = research.designSystem?.styling_approach || 'css-variables'
|
||||
|
||||
// Generate design tokens following W3C Design Tokens Format
|
||||
const designTokens = {
|
||||
"$schema": "https://design-tokens.github.io/community-group/format/",
|
||||
"color": {
|
||||
"primary": {
|
||||
"$type": "color",
|
||||
"$value": { "light": "#1976d2", "dark": "#90caf9" }
|
||||
},
|
||||
"secondary": {
|
||||
"$type": "color",
|
||||
"$value": { "light": "#dc004e", "dark": "#f48fb1" }
|
||||
},
|
||||
"background": {
|
||||
"$type": "color",
|
||||
"$value": { "light": "#ffffff", "dark": "#121212" }
|
||||
},
|
||||
"surface": {
|
||||
"$type": "color",
|
||||
"$value": { "light": "#f5f5f5", "dark": "#1e1e1e" }
|
||||
},
|
||||
"text": {
|
||||
"primary": {
|
||||
"$type": "color",
|
||||
"$value": { "light": "rgba(0,0,0,0.87)", "dark": "rgba(255,255,255,0.87)" }
|
||||
},
|
||||
"secondary": {
|
||||
"$type": "color",
|
||||
"$value": { "light": "rgba(0,0,0,0.6)", "dark": "rgba(255,255,255,0.6)" }
|
||||
}
|
||||
}
|
||||
// ... extend based on research findings
|
||||
},
|
||||
"typography": {
|
||||
"font-family": {
|
||||
"base": { "$type": "fontFamily", "$value": ["Inter", "system-ui", "sans-serif"] },
|
||||
"mono": { "$type": "fontFamily", "$value": ["JetBrains Mono", "monospace"] }
|
||||
},
|
||||
"font-size": {
|
||||
"xs": { "$type": "dimension", "$value": "0.75rem" },
|
||||
"sm": { "$type": "dimension", "$value": "0.875rem" },
|
||||
"base": { "$type": "dimension", "$value": "1rem" },
|
||||
"lg": { "$type": "dimension", "$value": "1.125rem" },
|
||||
"xl": { "$type": "dimension", "$value": "1.25rem" },
|
||||
"2xl": { "$type": "dimension", "$value": "1.5rem" },
|
||||
"3xl": { "$type": "dimension", "$value": "1.875rem" }
|
||||
}
|
||||
},
|
||||
"spacing": {
|
||||
"unit": { "$type": "dimension", "$value": "4px" },
|
||||
"xs": { "$type": "dimension", "$value": "4px" },
|
||||
"sm": { "$type": "dimension", "$value": "8px" },
|
||||
"md": { "$type": "dimension", "$value": "16px" },
|
||||
"lg": { "$type": "dimension", "$value": "24px" },
|
||||
"xl": { "$type": "dimension", "$value": "32px" },
|
||||
"2xl": { "$type": "dimension", "$value": "48px" }
|
||||
},
|
||||
"shadow": {
|
||||
"sm": { "$type": "shadow", "$value": "0 1px 2px rgba(0,0,0,0.05)" },
|
||||
"md": { "$type": "shadow", "$value": "0 4px 6px rgba(0,0,0,0.1)" },
|
||||
"lg": { "$type": "shadow", "$value": "0 10px 15px rgba(0,0,0,0.1)" }
|
||||
},
|
||||
"border": {
|
||||
"radius": {
|
||||
"sm": { "$type": "dimension", "$value": "4px" },
|
||||
"md": { "$type": "dimension", "$value": "8px" },
|
||||
"lg": { "$type": "dimension", "$value": "12px" },
|
||||
"full": { "$type": "dimension", "$value": "9999px" }
|
||||
}
|
||||
},
|
||||
"breakpoint": {
|
||||
"mobile": { "$type": "dimension", "$value": "320px" },
|
||||
"tablet": { "$type": "dimension", "$value": "768px" },
|
||||
"desktop": { "$type": "dimension", "$value": "1024px" },
|
||||
"wide": { "$type": "dimension", "$value": "1280px" }
|
||||
}
|
||||
}
|
||||
|
||||
// Adapt tokens based on existing design system if present
|
||||
if (Object.keys(existingTokens).length > 0) {
|
||||
// Merge/extend rather than replace
|
||||
}
|
||||
|
||||
Write(`${sessionFolder}/design/design-tokens.json`, JSON.stringify(designTokens, null, 2))
|
||||
}
|
||||
```
|
||||
|
||||
#### Component Specification (DESIGN-002 or DESIGN-001 in component pipeline)
|
||||
|
||||
```javascript
|
||||
if (isComponentTask) {
|
||||
const tokens = JSON.parse(Read(`${sessionFolder}/design/design-tokens.json`))
|
||||
const componentList = sharedMemory.component_inventory || []
|
||||
|
||||
// For each component to design, create a spec file
|
||||
// Component spec includes: states, props, tokens consumed, responsive behavior, a11y
|
||||
const componentSpec = `# Component Spec: {ComponentName}
|
||||
|
||||
## Overview
|
||||
- **Type**: atom | molecule | organism
|
||||
- **Purpose**: Brief description
|
||||
|
||||
## Design Tokens Consumed
|
||||
| Token | Usage | Value Reference |
|
||||
|-------|-------|-----------------|
|
||||
| color.primary | Button background | {color.primary} |
|
||||
| spacing.md | Internal padding | {spacing.md} |
|
||||
|
||||
## States
|
||||
| State | Visual Changes | Interaction |
|
||||
|-------|---------------|-------------|
|
||||
| default | Base appearance | — |
|
||||
| hover | Background lighten 10% | Mouse over |
|
||||
| focus | 2px outline, offset 2px | Tab navigation |
|
||||
| active | Background darken 5% | Mouse down |
|
||||
| disabled | Opacity 0.5 | cursor: not-allowed |
|
||||
|
||||
## Responsive Behavior
|
||||
| Breakpoint | Changes |
|
||||
|------------|---------|
|
||||
| mobile (<768px) | Full width, stacked |
|
||||
| tablet (768-1024px) | Auto width |
|
||||
| desktop (>1024px) | Fixed width |
|
||||
|
||||
## Accessibility
|
||||
- **Role**: button | link | tab | ...
|
||||
- **ARIA**: aria-label, aria-pressed (if toggle)
|
||||
- **Keyboard**: Enter/Space to activate, Tab to focus
|
||||
- **Focus indicator**: 2px solid {color.primary}, offset 2px
|
||||
- **Contrast**: Text on background >= 4.5:1 (AA)
|
||||
|
||||
## Variants
|
||||
| Variant | Description | Token Override |
|
||||
|---------|-------------|----------------|
|
||||
| primary | Main action | color.primary |
|
||||
| secondary | Secondary action | color.secondary |
|
||||
| outline | Ghost style | border only |
|
||||
`
|
||||
|
||||
// Write spec for each component
|
||||
// Actual implementation adapts to task requirements
|
||||
Write(`${sessionFolder}/design/component-specs/{component-name}.md`, componentSpec)
|
||||
}
|
||||
```
|
||||
|
||||
#### GC Fix Mode (DESIGN-fix-N)
|
||||
|
||||
```javascript
|
||||
if (isFixTask && auditFeedback) {
|
||||
// Parse audit feedback for specific issues
|
||||
// Re-read the affected design artifacts
|
||||
// Apply fixes based on audit feedback:
|
||||
// - Token value adjustments (contrast ratios, spacing)
|
||||
// - Missing state definitions
|
||||
// - Accessibility gaps
|
||||
// - Naming convention fixes
|
||||
|
||||
// Re-write affected files with corrections
|
||||
// Signal design_revision instead of design_ready
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 4: Validation
|
||||
|
||||
```javascript
|
||||
// Self-check design artifacts
|
||||
const checks = {
|
||||
tokens_valid: true, // All token values are valid
|
||||
states_complete: true, // All interactive states defined
|
||||
a11y_specified: true, // Accessibility attributes defined
|
||||
responsive_defined: true, // Responsive breakpoints specified
|
||||
token_refs_valid: true // All token references resolve
|
||||
}
|
||||
|
||||
// Token reference integrity check
|
||||
if (isTokenTask) {
|
||||
// Verify all $value fields are non-empty
|
||||
// Verify light/dark mode values exist for colors
|
||||
}
|
||||
|
||||
if (isComponentTask) {
|
||||
// Verify all token references ({token.path}) match defined tokens
|
||||
// Verify all states are defined
|
||||
// Verify a11y section is complete
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 5: Report + Shared Memory Write
|
||||
|
||||
```javascript
|
||||
// Update shared memory
|
||||
if (isTokenTask) {
|
||||
sharedMemory.design_token_registry = {
|
||||
colors: Object.keys(designTokens.color || {}),
|
||||
typography: Object.keys(designTokens.typography || {}),
|
||||
spacing: Object.keys(designTokens.spacing || {}),
|
||||
shadows: Object.keys(designTokens.shadow || {}),
|
||||
borders: Object.keys(designTokens.border || {})
|
||||
}
|
||||
sharedMemory.style_decisions.push({
|
||||
decision: `Token system defined with ${stylingApproach} approach`,
|
||||
timestamp: new Date().toISOString()
|
||||
})
|
||||
}
|
||||
|
||||
if (isComponentTask) {
|
||||
sharedMemory.style_decisions.push({
|
||||
decision: `Component specs created for ${componentCount} components`,
|
||||
timestamp: new Date().toISOString()
|
||||
})
|
||||
}
|
||||
|
||||
Write(`${sessionFolder}/shared-memory.json`, JSON.stringify(sharedMemory, null, 2))
|
||||
|
||||
// Report
|
||||
const msgType = isFixTask ? 'design_revision' : 'design_ready'
|
||||
|
||||
mcp__ccw-tools__team_msg({
|
||||
operation: "log",
|
||||
team: teamName,
|
||||
from: "designer",
|
||||
to: "coordinator",
|
||||
type: msgType,
|
||||
summary: `[designer] ${isFixTask ? '设计修订完成' : '设计完成'}: ${isTokenTask ? '令牌系统' : '组件规格'}`,
|
||||
ref: `${sessionFolder}/design/`
|
||||
})
|
||||
|
||||
SendMessage({
|
||||
type: "message",
|
||||
recipient: "coordinator",
|
||||
content: `## [designer] ${isFixTask ? '设计修订完成' : '设计产出就绪'}\n\n${isTokenTask ? '令牌系统已定义' : '组件规格已完成'}\n产出: ${sessionFolder}/design/`,
|
||||
summary: `[designer] ${msgType}`
|
||||
})
|
||||
|
||||
TaskUpdate({ taskId: task.id, status: 'completed' })
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
| Scenario | Resolution |
|
||||
|----------|------------|
|
||||
| 研究数据缺失 | 使用默认令牌 + 标记待确认 |
|
||||
| 令牌冲突 | 记录决策依据，提交审查仲裁 |
|
||||
| GC 修复无法满足所有审查意见 | 标记权衡取舍，让 coordinator 决定 |
|
||||
| 组件数量过多 | 优先 MVP 组件，标记 post-MVP |
|
||||
Reference in New Issue
Block a user