catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-12 02:37:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Refactor and enhance brainstorming workflow commands

Browse Source 
- Removed deprecated `gemini-init.md` command and migrated its functionality to a new structure under `.claude/commands/gemini/`.
- Introduced `auto-parallel.md` for parallel brainstorming automation with dynamic role selection and concurrent execution.
- Added `auto-squeeze.md` for sequential command coordination in brainstorming workflows, ensuring structured execution from framework generation to synthesis.
- Updated `plan.md` to improve clarity on project structure analysis and command execution strategies.
- Enhanced error handling and session management across all commands to ensure robustness and user guidance.
- Improved documentation for generated files and command options to facilitate user understanding and usage.
This commit is contained in:
catlog22
2025-09-29 15:48:42 +08:00
parent 99a8c0d685
commit c7ec9dd040
17 changed files with 2051 additions and 2084 deletions
Download Patch File Download Diff File Expand all files Collapse all files

429
.claude/commands/workflow/brainstorm/ui-designer.md
View File

@@ -1,328 +1,205 @@
---
name: ui-designer
description: UI designer perspective brainstorming for user experience and interface design analysis
usage: /workflow:brainstorm:ui-designer <topic>
argument-hint: "topic or challenge to analyze from UI/UX design perspective"
description: Generate or update ui-designer/analysis.md addressing topic-framework discussion points
usage: /workflow:brainstorm:ui-designer [topic]
argument-hint: "optional topic - uses existing framework if available"
examples:
- /workflow:brainstorm:ui-designer
- /workflow:brainstorm:ui-designer "user authentication redesign"
- /workflow:brainstorm:ui-designer "mobile app navigation improvement"
- /workflow:brainstorm:ui-designer "accessibility enhancement strategy"
allowed-tools: Task(conceptual-planning-agent), TodoWrite(*)
allowed-tools: Task(conceptual-planning-agent), TodoWrite(*), Read(*), Write(*)
---
## 🎨 **Role Overview: UI Designer**
## 🎨 **UI Designer Analysis Generator**
### Role Definition
Creative professional responsible for designing intuitive, accessible, and visually appealing user interfaces that create exceptional user experiences aligned with business goals and user needs.
### Purpose
**Specialized command for generating ui-designer/analysis.md** that addresses topic-framework.md discussion points from UI/UX design perspective. Creates or updates role-specific analysis with framework references.
### Core Responsibilities
- **User Experience Design**: Create intuitive and efficient user experiences
- **Interface Design**: Design beautiful and functional user interfaces
- **Interaction Design**: Design smooth user interaction flows and micro-interactions
- **Accessibility Design**: Ensure products are inclusive and accessible to all users
### Core Function
- **Framework-based Analysis**: Address each discussion point in topic-framework.md
- **UI/UX Focus**: User experience, interface design, and accessibility perspective
- **Update Mechanism**: Create new or update existing analysis.md
- **Agent Delegation**: Use conceptual-planning-agent for analysis generation
### Focus Areas
- **User Experience**: User journeys, usability, satisfaction metrics, conversion optimization
- **Visual Design**: Interface aesthetics, brand consistency, visual hierarchy
- **Interaction Design**: Workflow optimization, feedback mechanisms, responsiveness
- **Accessibility**: WCAG compliance, inclusive design, assistive technology support
### Analysis Scope
- **User Experience Design**: Intuitive and efficient user experiences
- **Interface Design**: Beautiful and functional user interfaces
- **Interaction Design**: Smooth user interaction flows and micro-interactions
- **Accessibility Design**: Inclusive design meeting WCAG compliance
### Success Metrics
- User satisfaction scores and usability metrics
- Task completion rates and conversion metrics
- Accessibility compliance scores
- Visual design consistency and brand alignment
## ⚙️ **Execution Protocol**
## 🧠 **Analysis Framework**
@~/.claude/workflows/brainstorming-principles.md
### Key Analysis Questions
**1. User Needs and Behavior Analysis**
- What are the main pain points users experience during interactions?
- What gaps exist between user expectations and actual experience?
- What are the specific needs of different user segments?
**2. Interface and Interaction Design**
- How can we simplify operational workflows?
- Is the information architecture logical and intuitive?
- Are interaction feedback mechanisms timely and clear?
**3. Visual and Brand Strategy**
- Does the visual design support and strengthen brand identity?
- Are color schemes, typography, and layouts appropriate and effective?
- How can we ensure cross-platform consistency?
**4. Technical Implementation Considerations**
- What are the technical feasibility constraints for design concepts?
- What responsive design requirements must be addressed?
- How do performance considerations impact user experience?
## ⚡ **Two-Step Execution Flow**
### ⚠️ Session Management - FIRST STEP
Session detection and selection:
### Phase 1: Session & Framework Detection
```bash
# Check for active sessions
active_sessions=$(find .workflow -name ".active-*" 2>/dev/null)
if [ multiple_sessions ]; then
prompt_user_to_select_session()
else
use_existing_or_create_new()
fi
# Check active session and framework
CHECK: .workflow/.active-* marker files
IF active_session EXISTS:
session_id = get_active_session()
brainstorm_dir = .workflow/WFS-{session}/.brainstorming/
CHECK: brainstorm_dir/topic-framework.md
IF EXISTS:
framework_mode = true
load_framework = true
ELSE:
IF topic_provided:
framework_mode = false # Create analysis without framework
ELSE:
ERROR: "No framework found and no topic provided"
```
### Step 1: Context Gathering Phase
**UI Designer Perspective Questioning**
### Phase 2: Analysis Mode Detection
```bash
# Determine execution mode
IF framework_mode == true:
mode = "framework_based_analysis"
topic_ref = load_framework_topic()
discussion_points = extract_framework_points()
ELSE:
mode = "standalone_analysis"
topic_ref = provided_topic
discussion_points = generate_basic_structure()
```
Before agent assignment, gather comprehensive UI/UX design context:
#### 📋 Role-Specific Questions
1. **User Experience & Personas**
- Primary user personas and their key characteristics?
- Current user pain points and usability issues?
- Platform requirements (web, mobile, desktop)?
2. **Design System & Branding**
- Existing design system and brand guidelines?
- Visual design preferences and constraints?
- Accessibility and compliance requirements?
3. **User Journey & Interactions**
- Key user workflows and task flows?
- Critical interaction points and user goals?
- Performance and responsive design requirements?
4. **Implementation & Integration**
- Technical constraints and development capabilities?
- Integration with existing UI components?
- Testing and validation approach?
#### Context Validation
- **Minimum Response**: Each answer must be ≥50 characters
- **Re-prompting**: Insufficient detail triggers follow-up questions
- **Context Storage**: Save responses to `.brainstorming/ui-designer-context.md`
### Step 2: Agent Assignment with Flow Control
**Dedicated Agent Execution**
### Phase 3: Agent Execution with Flow Control
**Framework-Based Analysis Generation**
```bash
Task(conceptual-planning-agent): "
[FLOW_CONTROL]
Execute dedicated ui-designer conceptual analysis for: {topic}
Execute ui-designer analysis for existing topic framework
## Context Loading
ASSIGNED_ROLE: ui-designer
OUTPUT_LOCATION: .brainstorming/ui-designer/
USER_CONTEXT: {validated_responses_from_context_gathering}
OUTPUT_LOCATION: .workflow/WFS-{session}/.brainstorming/ui-designer/
ANALYSIS_MODE: {framework_mode ? "framework_based" : "standalone"}
Flow Control Steps:
[
{
\"step\": \"load_role_template\",
\"action\": \"Load ui-designer planning template\",
\"command\": \"bash($(cat ~/.claude/workflows/cli-templates/planning-roles/ui-designer.md))\",
\"output_to\": \"role_template\"
}
]
## Flow Control Steps
1. **load_topic_framework**
- Action: Load structured topic discussion framework
- Command: Read(.workflow/WFS-{session}/.brainstorming/topic-framework.md)
- Output: topic_framework_content
Conceptual Analysis Requirements:
- Apply ui-designer perspective to topic analysis
- Focus on user experience, interface design, and interaction patterns
- Use loaded role template framework for analysis structure
- Generate role-specific deliverables in designated output location
- Address all user context from questioning phase
2. **load_role_template**
- Action: Load ui-designer planning template
- Command: bash($(cat ~/.claude/workflows/cli-templates/planning-roles/ui-designer.md))
- Output: role_template_guidelines
Deliverables:
- analysis.md: Main UI/UX design analysis
- recommendations.md: Design recommendations
- deliverables/: UI-specific outputs as defined in role template
3. **load_session_metadata**
- Action: Load session metadata and existing context
- Command: Read(.workflow/WFS-{session}/.brainstorming/session.json)
- Output: session_context
Embody ui-designer role expertise for comprehensive conceptual planning."
## Analysis Requirements
**Framework Reference**: Address all discussion points in topic-framework.md from UI/UX perspective
**Role Focus**: User experience design, interface optimization, accessibility compliance
**Structured Approach**: Create analysis.md addressing framework discussion points
**Template Integration**: Apply role template guidelines within framework structure
## Expected Deliverables
1. **analysis.md**: Comprehensive UI/UX analysis addressing all framework discussion points
2. **Framework Reference**: Include @../topic-framework.md reference in analysis
## Completion Criteria
- Address each discussion point from topic-framework.md with UI/UX design expertise
- Provide actionable design recommendations and interface solutions
- Include accessibility considerations and WCAG compliance planning
- Reference framework document using @ notation for integration
"
```
### Progress Tracking
TodoWrite tracking for two-step process:
```json
[
{"content": "Gather ui-designer context through role-specific questioning", "status": "in_progress", "activeForm": "Gathering context"},
{"content": "Validate context responses and save to ui-designer-context.md", "status": "pending", "activeForm": "Validating context"},
{"content": "Load ui-designer planning template via flow control", "status": "pending", "activeForm": "Loading template"},
{"content": "Execute dedicated conceptual-planning-agent for ui-designer role", "status": "pending", "activeForm": "Executing agent"}
]
## 📋 **TodoWrite Integration**
### Workflow Progress Tracking
```javascript
TodoWrite({
todos: [
{
content: "Detect active session and locate topic framework",
status: "in_progress",
activeForm: "Detecting session and framework"
},
{
content: "Load topic-framework.md and session metadata for context",
status: "pending",
activeForm: "Loading framework and session context"
},
{
content: "Execute ui-designer analysis using conceptual-planning-agent with FLOW_CONTROL",
status: "pending",
activeForm: "Executing ui-designer framework analysis"
},
{
content: "Generate analysis.md addressing all framework discussion points",
status: "pending",
activeForm: "Generating structured ui-designer analysis"
},
{
content: "Update session.json with ui-designer completion status",
status: "pending",
activeForm: "Updating session metadata"
}
]
});
```
### Phase 4: Conceptual Planning Agent Coordination
```bash
Task(conceptual-planning-agent): "
Conduct UI designer perspective brainstorming for: {topic}
## 📊 **Output Structure**
ROLE CONTEXT: UI Designer
- Focus Areas: User experience, interface design, visual design, accessibility
- Analysis Framework: User-centered design approach with emphasis on usability and accessibility
- Success Metrics: User satisfaction, task completion rates, accessibility compliance, visual appeal
USER CONTEXT: {captured_user_requirements_from_session}
ANALYSIS REQUIREMENTS:
1. User Experience Analysis
- Identify current UX pain points and friction areas
- Map user journeys and identify optimization opportunities
- Analyze user behavior patterns and preferences
- Evaluate task completion flows and success rates
2. Interface Design Assessment
- Review current interface design and information architecture
- Identify visual hierarchy and navigation issues
- Assess consistency across different screens and states
- Evaluate mobile and desktop interface differences
3. Visual Design Strategy
- Develop visual design concepts aligned with brand guidelines
- Create color schemes, typography, and spacing systems
- Design iconography and visual elements
- Plan for dark mode and theme variations
4. Interaction Design Planning
- Design micro-interactions and animation strategies
- Plan feedback mechanisms and loading states
- Create error handling and validation UX
- Design responsive behavior and breakpoints
5. Accessibility and Inclusion
- Evaluate WCAG 2.1 compliance requirements
- Design for screen readers and assistive technologies
- Plan for color blindness and visual impairments
- Ensure keyboard navigation and focus management
6. Prototyping and Testing Strategy
- Plan for wireframes, mockups, and interactive prototypes
- Design user testing scenarios and success metrics
- Create A/B testing strategies for key interactions
- Plan for iterative design improvements
OUTPUT REQUIREMENTS: Save comprehensive analysis to:
.workflow/WFS-{topic-slug}/.brainstorming/ui-designer/
- analysis.md (main UI/UX analysis)
- design-system.md (visual design guidelines and components)
- user-flows.md (user journey maps and interaction flows)
- accessibility-plan.md (accessibility requirements and implementation)
Apply UI/UX design expertise to create user-centered, accessible, and visually appealing solutions."
### Framework-Based Analysis
```
.workflow/WFS-{session}/.brainstorming/ui-designer/
└── analysis.md # Structured analysis addressing topic-framework.md discussion points
```
## 📊 **Output Specification**
### Output Location
```
.workflow/WFS-{topic-slug}/.brainstorming/ui-designer/
├── analysis.md # Primary UI/UX analysis
├── design-system.md # Visual design guidelines and components
├── user-flows.md # User journey maps and interaction flows
└── accessibility-plan.md # Accessibility requirements and implementation
```
### Document Templates
#### analysis.md Structure
### Analysis Document Structure
```markdown
# UI Designer Analysis: {Topic}
*Generated: {timestamp}*
# UI Designer Analysis: [Topic from Framework]
## Executive Summary
[Key UX findings and design recommendations overview]
## Framework Reference
**Topic Framework**: @../topic-framework.md
**Role Focus**: UI/UX Design perspective
## Current UX Assessment
### User Pain Points
### Interface Issues
### Accessibility Gaps
### Performance Impact on UX
## Discussion Points Analysis
[Address each point from topic-framework.md with UI/UX expertise]
## User Experience Strategy
### Target User Personas
### User Journey Mapping
### Key Interaction Points
### Success Metrics
### Core Requirements (from framework)
[UI/UX perspective on requirements]
## Visual Design Approach
### Brand Alignment
### Color and Typography Strategy
### Layout and Spacing System
### Iconography and Visual Elements
### Technical Considerations (from framework)
[Interface and design system considerations]
## Interface Design Plan
### Information Architecture
### Navigation Strategy
### Component Library
### Responsive Design Approach
### User Experience Factors (from framework)
[Detailed UX analysis and recommendations]
## Accessibility Implementation
### WCAG Compliance Plan
### Assistive Technology Support
### Inclusive Design Features
### Testing Strategy
### Implementation Challenges (from framework)
[Design implementation and accessibility considerations]
## Prototyping and Validation
### Wireframe Strategy
### Interactive Prototype Plan
### User Testing Approach
### Iteration Framework
### Success Metrics (from framework)
[UX metrics and usability success criteria]
## UI/UX Specific Recommendations
[Role-specific design recommendations and solutions]
---
*Generated by ui-designer analysis addressing structured framework*
```
## 🔄 **Session Integration**
### Status Synchronization
Upon completion, update `workflow-session.json`:
### Completion Status Update
```json
{
"phases": {
"BRAINSTORM": {
"ui_designer": {
"status": "completed",
"completed_at": "timestamp",
"output_directory": ".workflow/WFS-{topic}/.brainstorming/ui-designer/",
"key_insights": ["ux_improvement", "accessibility_requirement", "design_pattern"]
}
}
"ui_designer": {
"status": "completed",
"framework_addressed": true,
"output_location": ".workflow/WFS-{session}/.brainstorming/ui-designer/analysis.md",
"framework_reference": "@../topic-framework.md"
}
}
```
### Cross-Role Collaboration
UI designer perspective provides:
- **User Interface Requirements** → System Architect
- **User Experience Metrics and Goals** → Product Manager
- **Data Visualization Requirements** → Data Architect
- **Secure Interaction Design Patterns** → Security Expert
- **Feature Interface Specifications** → Feature Planner
## ✅ **Quality Assurance**
### Required Design Elements
- [ ] Comprehensive user journey analysis with pain points identified
- [ ] Complete interface design solution with visual mockups
- [ ] Accessibility compliance plan meeting WCAG 2.1 standards
- [ ] Responsive design strategy for multiple devices and screen sizes
- [ ] Usability testing plan with clear success metrics
### Design Principles Validation
- [ ] **User-Centered**: All design decisions prioritize user needs and goals
- [ ] **Consistency**: Interface elements and interactions maintain visual and functional consistency
- [ ] **Accessibility**: Design meets WCAG guidelines and supports assistive technologies
- [ ] **Usability**: Operations are simple, intuitive, with minimal learning curve
- [ ] **Visual Appeal**: Design supports brand identity while creating positive user emotions
### UX Quality Metrics
- [ ] **Task Success**: High task completion rates with minimal errors
- [ ] **Efficiency**: Optimal task completion times with streamlined workflows
- [ ] **Satisfaction**: Positive user feedback and high satisfaction scores
- [ ] **Accessibility**: Full compliance with accessibility standards and inclusive design
- [ ] **Consistency**: Uniform experience across different devices and platforms
### Implementation Readiness
- [ ] **Design System**: Comprehensive component library and style guide
- [ ] **Prototyping**: Interactive prototypes demonstrating key user flows
- [ ] **Documentation**: Clear specifications for development implementation
- [ ] **Testing Plan**: Structured approach for usability and accessibility validation
- [ ] **Iteration Strategy**: Framework for continuous design improvement based on user feedback
### Integration Points
- **Framework Reference**: @../topic-framework.md for structured discussion points
- **Cross-Role Synthesis**: UI/UX insights available for synthesis-report.md integration
- **Agent Autonomy**: Independent execution with framework guidance