Design Discrepancy Skill

Nickname: discrepancy:

Objective: Compare reference documentation (Figma, specs) with live system (via Relay ON), surface discrepancies for report.

When to Use

Trigger patterns:

•"compare X with Y"
•"check discrepancies between..."
•"design vs implementation"
•"Figma vs live site"
•Any reference ↔️ live system comparison

Suggestion conditions:

•User mentions differences between design and code
•Design review needed
•Component audit requested
•Quality assurance for design system

Exercise Types

Existing exercise:

•Consult matching MD (ask user if needed)
•Continue where left off

New exercise:

•Check for existing MD (groom if found)
•Create new MD if doesn't exist

5-Phase Protocol

Phase 1: Environment

Ask for files, check connections/parity, create MD for documentation.

Steps:

•Ask for reference: Figma link? Documentation URL?
•Ask for live system: Relay ON? Environment URL? Credentials?
•Ask for MD: Does exercise MD exist? Where?
•Check connections/parity: Review ~/.openclaw/workspace/connections/ for relevant info
•Create/update MD: Add all links (reference, live system, reports, Excel)

Template for MD:

markdown

## 📁 Documents (4 Sources)

**Reference (Documentation):**
- [Figma/Docs]: [URL]

**Live System:**
- [Environment]: [URL]
- [Access]: [credentials/relay status]

**Reports:**
- Markdown: [path to this file]
- Excel: [path to Excel file]
- Excel History: [history folder] (max 10 backups)

Phase 2: Matching

Per system page, detect components, list them. User will edit list.

Steps:

•
Per page in live system:
- •Inspect DOM (if Relay ON)
- •Take screenshot (if needed)
- •List all visible components
•
Organize components by scale:
- •Macro: Page layout, grid, sections
- •Meso: Component groups (tabs, forms, accordions)
- •Micro: Individual elements (buttons, inputs, text)

•

Output component list in MD:

markdown

## Components Found (Page: [name])

### Macro
- [ ] Page header
- [ ] Main grid layout
- [ ] Footer

### Meso
- [ ] Tab navigation
- [ ] Form group
- [ ] Data table

### Micro
- [ ] Primary button
- [ ] Input field
- [ ] Label text

•
User edits list: Add/remove components, confirm scope

Phase 3: Investigate

Per each component on the list, investigate discrepancies between system and documentation.

Properties to check:

•Color: Background, text, border (compare hex/rgb)
•Font: Family, weight
•Font size: px/rem/pt
•Spacing: Padding, margin
•Spacing between objects: Gap, grid spacing
•States: Hover, active, disabled, focus (simulate how? ⚠️ QUESTION)

Steps:

•
For each component:
- •Get reference specs (Figma/docs)
- •Get live system computed styles (Relay → getComputedStyle())
- •Compare properties
- •Document differences
•
How to simulate states? ⚠️
- •Hover: Trigger via DevTools?
- •Active: Click and inspect?
- •Disabled: Toggle attribute?
- •Focus: Tab navigation?
- •User confirm method per exercise
•
Log discrepancies:
- •Component name
- •Property (color, spacing, etc.)
- •Expected (reference)
- •Actual (live system)
- •Impact (minor/major/critical)

Phase 4: Document

In MD, document all findings. DO NOT touch Excel unless explicitly asked.

Workflow:

•List findings in MD (brief, systematic)
•User reviews MD
•User decides what goes to Excel (if anything)
•If asked: Assist with Excel EXACTLY as requested

Format in MD:

markdown

## 📊 Discrepancies Found

### [Page Name]

#### [Component Name]
- **Property:** [color/spacing/font/etc]
- **Expected (docs):** [value from Figma]
- **Actual (system):** [value from Relay]
- **Impact:** [minor/major/critical]

[Repeat per component]

Excel Rules:

•❌ DO NOT auto-populate Excel
•❌ DO NOT assume what user wants
•✅ ONLY do EXACTLY what's asked
•✅ ASK if unclear what to add

Column References (for when asked):

•Jira task: Check connections/jira.md, use =HYPERLINK(url, "CODE: TITLE")
•Library version: Figma API via connections/figma.md, use =HYPERLINK(url, "FILE: PAGE")
•System version: URL from Relay ON, use =HYPERLINK(url, "PAGE_NAME")

Phase 5: Excel (May Change)

Assist user with Excel (images, formulas) if asked.

Tasks:

•Insert images (screenshots, comparisons)
•Write formulas (if needed)
•Format cells
•Backup workflow (see connections/excel-onedrive.md)

Workflow:

•Duplicate active file → history folder
•Edit active file
•Kill Excel + reopen
•Cleanup history (keep last 10)

📋 TODO / Roadmap

⚠️ Open Questions

•
How to simulate component states? (Phase 3)
- •Hover (DevTools trigger? CSS pseudo-class?)
- •Active (click and inspect?)
- •Disabled (toggle attribute in DOM?)
- •Focus (tab navigation?)
- •Action: Research methods, test with Relay ON, document findings

🔧 Improvements Needed

•
Phase 4 syntax finalization (user working on it)
- •Define exact format for "Discrepancies Found"
- •Excel column descriptions (what goes in each)
- •MD vs Excel split (what's brief, what's detailed)
•
Phase 5 may change (Excel workflow)
- •Confirm if Excel stays in workflow
- •Alternative: All-MD approach?
- •Keep monitoring user preference

💡 Future Enhancements

•
Automation ideas:
- •Screenshot comparison (visual diff tools?)
- •Computed styles extraction script
- •Figma API integration (auto-fetch specs)
•
Template refinement:
- •Add more MD templates per exercise type
- •Component checklist templates (per UI pattern)

MD Template (New Exercise)

markdown

# [Project] Design Discrepancy Exercise

**Date:** [YYYY-MM-DD]
**Participants:** [Names]
**Status:** [IN PROGRESS / COMPLETE]

---

## 📁 Documents (4 Sources)

**Map (Design):**
- [Design source]: [URL]

**Territory (Live System):**
- [Environment]: [URL]
- [Access]: [credentials/method]

**Reports:**
- Markdown: [path to this file]
- Excel: [path to Excel file]
- Excel History: [history folder] (max 10 backups)

---

## 🎯 Objective

[Brief description of what's being compared and why]

---

## 📋 Process

### 1. Map Analysis
[How to review design source]

### 2. Territory Analysis
[How to review live system]

### 3. Comparison
[Systematic approach]

### 4. Documentation
[Where findings go]

---

## 📊 Discrepancies Found

### Columns (Excel Schema)

[List Excel columns with brief descriptions]

---

## ✅ Next Steps

[What happens next]

---

*Document created: [date]*
*Last updated: [date]*

Excel + History Workflow

See: ~/.openclaw/workspace/connections/excel-onedrive.md

Summary:

•Duplicate active file → history folder (with timestamp)
•Edit active file (NOT timestamped copy)
•Kill Excel + reopen (force reload)
•Cleanup history (keep last 10)

History folder structure:

code

File.xlsx                    ← Active file
File history/                ← Backups
  File-20260210-095530.xlsx
  File-20260210-101245.xlsx
  (max 10, delete oldest)

Key Rules

•ALWAYS ask for 2 sources (reference + live system)
•ALWAYS ask for exercise MD (or create)
•Document sources BEFORE comparing
•Systematic approach (macro → meso → micro)
•MD = brief, Excel = detailed
•This is Wiley work (not procrastination)
•🔴 READ-ONLY: Do NOT change system or documentation (Figma, SIT, etc.) - observation only
•EDIT ONLY: Exercise MD (findings, component lists, etc.)

Examples

Good Flow

code

User: "discrepancy: compare RPM Figma with SIT"

Me: "discrepancy: Preciso de:
     1. Figma link (mapa)
     2. Chrome Relay ON? (território)
     3. Onde está o MD desse exercício?"

User: [provides info]

Me: [opens MD, documents sources, starts comparison]

Bad Flow (Don't Do This)

code

User: "compare design with code"

Me: [starts comparing without asking for sources]
❌ WRONG - no sources documented!

Created: 2026-02-10
Location: ~/.openclaw/skills/design-discrepancy/SKILL.md