ajaywadhara/figma-sync
skills/figma-sync/SKILL.md
Optional: Sync design tokens from Figma, compare against code, flag drift, update visual baselines.
$ install --global
skillsauthnpx skillsauth add ajaywadhara/agentic-sdlc-plugin figma-syncInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 2, 2026, 8:57 PM57.8s1 file scanned
SKILL.md
- name:
- figma-sync
- description:
- Optional: Sync design tokens from Figma, compare against code, flag drift, update visual baselines.
- user_invocable:
- true
Prerequisites:
- Figma MCP configured in .mcp.json
- A Figma file URL provided by the user
STEP 1 — INGEST DESIGN TOKENS
Connect to the Figma file. Extract all design tokens:
- Colours (hex values + semantic names)
- Typography (font family, sizes, weights, line heights)
- Spacing scale
- Border radii
- Shadows and elevation
Save to: design-system/tokens.json
Compare against current CSS variables in src/. Generate a drift report: qa/figma-drift.md
Format: | Property | Figma Value | Current Code | Delta | Action | |----------------|-------------|--------------|--------|--------| | Primary colour | #6366F1 | #6467F2 | off | Fix | | Body font size | 16px | 16px | exact | None | | Card padding | 24px | 20px | 4px | Fix |
STEP 2 — COMPONENT COMPARISON
For each component in the Figma file:
- Find the matching component in src/
- Compare rendered CSS against Figma spec
- Tolerance: +/-4px for spacing, exact match for colours
- Flag anything outside tolerance as a design debt item
STEP 3 — VISUAL BASELINE UPDATE
After fixing drift items: Run: npx playwright test --project=visual --update-snapshots New snapshots now represent Figma-aligned UI. Commit updated baselines.
STEP 4 — ONGOING SYNC
Add to CI: after every Figma file update (via webhook or manual trigger), run /figma-sync to catch new drift before it accumulates.
Related Skills
ajaywadhara/wireframe
tools
VerifiedTrustedCommunity
Generate clickable HTML wireframes for every screen in the PRD. No design tool needed — open in browser.
1SKILL.mdUpdated Apr 2, 2026
ajaywadhara/test-ui
tools
VerifiedTrustedCommunity
Interactive browser testing via Playwright MCP. Navigates the live app, tests every screen, flow, and viewport — then generates permanent .spec.ts test files.
1SKILL.mdUpdated Apr 2, 2026
ajaywadhara/start
documentation
VerifiedTrustedCommunity
Turn a vague idea into a structured PRD through guided conversation. The agent asks questions — you just talk.
1SKILL.mdUpdated Apr 2, 2026
ajaywadhara/research
testing
VerifiedTrustedCommunity
Market reality check — find competitors, read 1-star reviews, identify your angle. Run after /start.
1SKILL.mdUpdated Apr 2, 2026