alekspetrov/navigator/product-design

cd skills/product-design
./setup.sh

# Get Navigator plugin path
PLUGIN_PATH=$(dirname "$(dirname "$(dirname "$PWD")")")
 
# Check if venv exists
if [ ! -d "$PLUGIN_PATH/skills/product-design/venv" ]; then
  echo "❌ product-design skill not set up"
  echo ""
  echo "Run setup (30 seconds):"
  echo "  cd $PLUGIN_PATH/skills/product-design && ./setup.sh"
  echo ""
  echo "Or use manual workflow (no Python needed)"
  exit 1
fi

# Python functions now handle MCP connection automatically
from figma_mcp_client import FigmaMCPClient
async with FigmaMCPClient() as client:
    # Progressive refinement - fetch only what's needed
    metadata = await client.get_metadata()
    components = extract_components(metadata)
    # Fetch details only for complex components
    for comp in components:
        if comp['complexity'] == 'high':
            comp['detail'] = await client.get_design_context(comp['id'])
    # Get design tokens
    variables = await client.get_variable_defs()

**Ask user for design information**:
 
What is the feature name? [e.g., "Dashboard Redesign"]
 
Figma link (optional): [figma.com/file/...]
 
**Design Tokens**:
List new or modified tokens:
-Colors (name: value, e.g., "primary-600: #2563EB")
-Spacing (e.g., "spacing-lg: 24px")
-Typography (e.g., "heading-xl: 36px/600")
-Other (radius, shadow, etc.)
 
**Components**:
List components in design:
-Component name
-Type (atom, molecule, organism)
-Variants (if any, e.g., "Button: primary/secondary, sm/md/lg")
-Similar to existing component? (name if known)
 
**Proceed to Step 2** after gathering information

# Prepare input (MCP or manual JSON)
# MCP: Already have /tmp/figma_metadata.json
# Manual: Create JSON from user input
 
python3 functions/design_analyzer.py \
  --figma-data /tmp/figma_combined.json \
  --ui-kit-inventory .agent/design-system/ui-kit-inventory.json \
  --output /tmp/analysis_results.json

python3 functions/token_extractor.py \
  --figma-variables /tmp/figma_variables.json \
  --existing-tokens .agent/design-system/design-tokens.json \
  --output /tmp/token_extraction.json

python3 functions/component_mapper.py \
  --figma-components /tmp/analysis_results.json \
  --code-connect-map /tmp/figma_code_connect.json \
  --project-root . \
  --output /tmp/component_mappings.json

# Combine data for auditor
python3 functions/design_system_auditor.py \
  --figma-data /tmp/combined_figma.json \
  --code-data /tmp/combined_code.json \
  --output /tmp/audit_results.json

python3 functions/implementation_planner.py \
  --task-id "TASK-{{next_task_number}}" \
  --feature-name "{{feature_name}}" \
  --analysis-results /tmp/combined_analysis.json \
  --review-reference ".agent/design-system/reviews/{{date}}-{{feature-slug}}.md" \
  --output .agent/tasks/TASK-{{next_task_number}}-{{feature-slug}}.md

**If PM tool configured** (Linear, GitHub Issues, Jira):
-Create ticket with task summary
-Link to task document and design review
-Assign to frontend developer or team
 
**If no PM tool**:
-Skip ticket creation
-Task document serves as source of truth

**Update files**:
1.`.agent/tasks/TASK-{{number}}-{{feature}}.md` (created in Step 3)
2.`.agent/design-system/reviews/{{date}}-{{feature}}.md` (design review)
3.`.agent/DEVELOPMENT-README.md` (add task to index)
 
**Use TodoWrite** to track implementation phases

✅ Design review complete for {{Feature Name}}
 
**Generated Documentation**:
-Design review: `.agent/design-system/reviews/{{date}}-{{feature}}.md`
-Implementation plan: `.agent/tasks/TASK-{{number}}-{{feature}}.md`
{{#if pm_configured}}- PM ticket: {{ticket_id}} (status: ready for development){{/if}}
 
**Summary**:
-Design Tokens: {{new_count}} new, {{modified_count}} modified
-Components: {{new_components}} new, {{extend_components}} to extend
-Estimated Time: {{total_hours}} hours
-Complexity: {{complexity_level}}
{{#if breaking_changes}}- ⚠️  Breaking Changes: {{breaking_count}} component(s){{/if}}
 
**Next Steps**:
[1] Start implementation now
[2] Review plan first (load task document)
[3] Modify plan before starting
 
**Recommended**: After implementation, set up visual regression testing:
  "Set up visual regression for {{components}}"
 
This ensures pixel-perfect implementation and prevents future drift (15 min setup).
 
Reply with choice or "Start implementation"

1.Load task document: `Read .agent/tasks/TASK-{{number}}-{{feature}}.md`
2.Load design review: `Read .agent/design-system/reviews/{{date}}-{{feature}}.md`
3.Begin Phase 1 (typically design tokens)
4.Follow autonomous completion protocol when done
5.After completion, suggest: "Set up visual regression for {{components}}" (optional but recommended)

1.Load and display task document
2.Highlight key phases and acceptance criteria
3.Ask: "Ready to start or need changes?"

1.Load task document
2.Ask what modifications needed
3.Edit task document
4.Regenerate if major changes
5.Then proceed to implementation

python3 functions/design_analyzer.py \
  --figma-data /path/to/figma_mcp_combined.json \
  --ui-kit-inventory .agent/design-system/ui-kit-inventory.json \
  --output /tmp/analysis.json

{
  "metadata": { ... },  // get_metadata response
  "variables": { ... }, // get_variable_defs response
  "code_connect_map": { ... } // get_code_connect_map response (optional)
}

python3 functions/token_extractor.py \
  --figma-variables /path/to/figma_variables.json \
  --existing-tokens .agent/design-system/design-tokens.json \
  --format full \
  --output /tmp/tokens.json

{
  "color": {
    "primary": {
      "500": {
        "$value": "#3B82F6",
        "$type": "color",
        "$description": "Primary brand color"
      }
    }
  }
}

python3 functions/component_mapper.py \
  --figma-components /path/to/analysis_results.json \
  --code-connect-map /path/to/code_connect.json \
  --project-root . \
  --output /tmp/mappings.json

python3 functions/design_system_auditor.py \
  --figma-data /path/to/combined_figma.json \
  --code-data /path/to/combined_code.json \
  --output /tmp/audit.json