BMAD-METHOD/devKalla-Fordonscervice/_wds/workflows/5-design-system/assessment/02-compare-attributes.md

Assessment Step 2: Compare Attributes

Purpose: Systematically compare current component to existing candidates.

Input: Current component spec + candidate list

Output: Detailed comparison of similarities and differences

---

Comparison Framework

Compare across 4 dimensions:

1. Visual Attributes

• Size (small, medium, large)
• Shape (rounded, square, pill)
• Color scheme
• Typography
• Spacing/padding
• Border style

2. Functional Attributes

• Purpose/intent
• User action
• Input/output type
• Validation rules
• Required/optional

3. Behavioral Attributes

• States (default, hover, active, disabled, loading, error)
• Interactions (click, hover, focus, blur)
• Animations/transitions
• Keyboard support
• Accessibility

4. Contextual Attributes

• Usage pattern (where it appears)
• Frequency (how often used)
• Relationship to other components
• User journey stage

---

Step 1: Visual Comparison

Compare visual attributes: - Extract visual properties from current spec - Extract visual properties from candidate - Calculate matches and differences

Example:

Visual Comparison: Current Button vs Button [btn-001]

Similarities:
✓ Size: medium (both)
✓ Shape: rounded (both)
✓ Color scheme: blue primary (both)

Differences:
✗ Current: Has icon on left
✗ btn-001: Text only
✗ Current: Slightly larger padding

---

Step 2: Functional Comparison

Compare functional attributes: - What does it do? - What's the user intent? - What's the outcome?

Example:

Functional Comparison: Current Button vs Button [btn-001]

Similarities:
✓ Purpose: Primary action trigger
✓ User action: Click to submit/proceed
✓ Outcome: Form submission or navigation

Differences:
✗ Current: "Continue to next step"
✗ btn-001: "Submit form"
✗ Current: Navigation action
✗ btn-001: Form submission action

---

Step 3: Behavioral Comparison

Compare behavioral attributes: - States - Interactions - Animations

Example:

Behavioral Comparison: Current Button vs Button [btn-001]

Similarities:
✓ States: default, hover, active, disabled (both)
✓ Hover: Darkens background (both)
✓ Disabled: Grayed out (both)

Differences:
✗ Current: Has loading state with spinner
✗ btn-001: No loading state
✗ Current: Icon rotates on hover

---

Step 4: Contextual Comparison

Compare contextual attributes: - Where is it used? - How often? - What's the pattern?

Example:

Contextual Comparison: Current Button vs Button [btn-001]

Similarities:
✓ Both: Primary action in forms
✓ Both: Bottom-right of containers
✓ Both: High-frequency usage

Differences:
✗ Current: Multi-step flow navigation
✗ btn-001: Single-page form submission
✗ Current: Always has "next" context

---

Step 5: Calculate Similarity Score

Score each dimension: - Visual: High/Medium/Low similarity - Functional: High/Medium/Low similarity - Behavioral: High/Medium/Low similarity - Contextual: High/Medium/Low similarity

Scoring Guide:

• High: 80%+ attributes match
• Medium: 50-79% attributes match
• Low: <50% attributes match

Example:

Similarity Score: Current Button vs Button [btn-001]

Visual:      High (90% match)
Functional:  Medium (60% match)
Behavioral:  Medium (70% match)
Contextual:  Medium (65% match)

Overall:     Medium-High Similarity

---

Step 6: Summarize Comparison

Present comparison summary:

📊 Comparison: Current Button vs Button [btn-001]

**Similarities:**
✓ Visual appearance (size, shape, color)
✓ Primary action purpose
✓ Standard states (default, hover, active, disabled)
✓ High-frequency usage pattern

**Differences:**
✗ Current has icon, btn-001 is text-only
✗ Current has loading state, btn-001 doesn't
✗ Current for navigation, btn-001 for submission
✗ Current has icon animation

**Similarity Score:** Medium-High (71%)

---

Step 7: Pass to Next Step

Pass comparison data to similarity calculation: - Detailed comparison - Similarity scores - Key differences

Next: 03-calculate-similarity.md

---

Edge Cases

Perfect match (100%):

✓ This component is identical to btn-001.

This is likely the same component with different content.

Recommend: Reuse existing component

Very low similarity (<30%):

✗ This component is very different from btn-001.

Despite being the same type, these serve different purposes.

Recommend: Create new component

Multiple candidates:

📊 Comparing to 2 candidates:

Button [btn-001]: 71% similarity
Icon Button [btn-002]: 45% similarity

btn-001 is the closest match.

Continue with best match

---

Output Format

For next step:

{
  "comparison": {
    "candidate_id": "btn-001",
    "visual_similarity": "high",
    "functional_similarity": "medium",
    "behavioral_similarity": "medium",
    "contextual_similarity": "medium",
    "overall_score": 0.71,
    "similarities": [...],
    "differences": [...]
  }
}

---

This step compares systematically. Interpretation happens in the next step.