Add figma-design-extract and design-fidelity-verify skills#1934
Open
jeltehomminga wants to merge 2 commits into
Open
Add figma-design-extract and design-fidelity-verify skills#1934jeltehomminga wants to merge 2 commits into
jeltehomminga wants to merge 2 commits into
Conversation
Two composable, tool-agnostic skills for design-to-code fidelity: - figma-design-extract: read exact values (tokens, sizes, structure) out of a Figma node via the Figma MCP into a build-ready design-spec table mapped to your repo's own tokens, instead of eyeballing a screenshot. - design-fidelity-verify: run a bounded vision+numeric loop that reads the actually-rendered values off the live app (web getComputedStyle / mobile native view props) and walks every spec row to PASS/FAIL+delta. Mobile/web mechanics live in on-demand references/. They compose: extract produces the spec table, verify consumes it. Canonical source: github.com/jeltehomminga/figma-design-skills (MIT). Passes npm run skill:validate; docs/README.skills.md regenerated via npm run build. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
github-actions
Bot
added
new-submission
Contributor
🔍 Skill Validator Results
Summary
Full validator output```text Found 2 skill(s) [design-fidelity-verify] 📊 design-fidelity-verify: 2,018 BPE tokens [chars/4: 2,165] (detailed ✓), 17 sections, 1 code blocks [figma-design-extract] 📊 figma-design-extract: 2,588 BPE tokens [chars/4: 2,673] (standard ~), 18 sections, 2 code blocks [figma-design-extract] ⚠ Skill is 2,588 BPE tokens (chars/4 estimate: 2,673) — approaching "comprehensive" range where gains diminish. [figma-design-extract] ⚠ No numbered workflow steps — agents follow sequenced procedures more reliably. ✅ All checks passed (2 skill(s)) ``` |
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds two new skills to support a Figma → spec extraction workflow and a measured design-fidelity verification loop (web + mobile references), and registers them in the skills index.
Changes:
- Added
figma-design-extractskill documentation for extracting exact Figma values into a design-spec table. - Added
design-fidelity-verifyskill documentation plus platform reference guides for web and mobile numeric verification. - Updated
docs/README.skills.mdto list/install the new skills.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| skills/figma-design-extract/SKILL.md | New skill doc for extracting Figma structured values into a spec table + token mapping guidance |
| skills/design-fidelity-verify/SKILL.md | New skill doc describing the bounded verification loop and spec-driven numeric checks |
| skills/design-fidelity-verify/references/verify-web.md | Web-specific reference for capture + getComputedStyle/getBoundingClientRect measurements |
| skills/design-fidelity-verify/references/verify-mobile.md | Mobile-specific reference for capture + native/React Native inspection strategies |
| docs/README.skills.md | Registers the two new skills in the documentation index |
| @@ -0,0 +1,79 @@ | |||
| # Verify backend — Web | |||
| @@ -0,0 +1,55 @@ | |||
| # Verify backend — Mobile (iOS / Android) | |||
Comment on lines
+124
to
+126
| git diff --unified=0 | grep -nE '^\+' \ | ||
| | grep -iE '#[0-9a-f]{3,8}\b|rgba?\(|[^a-z-][0-9]+px|font-weight:\s*[0-9]{3}' \ | ||
| && echo "raw values found — map them to tokens" || echo "clean" |
Comment on lines
+45
to
+46
| width: r.width, height: r.height, // rendered box (sizing) | ||
| x: r.x, y: r.y, // position (alignment/placement) |
- design-fidelity-verify: replace parent-traversal link to the companion skill with the absolute canonical URL (skill-validator forbids `../` references that leave the skill directory). - Rename reference titles "Verify backend — Web/Mobile" → "Verify UI —" and the SKILL.md "Pick your backend" heading → "Pick your platform"; "backend" collided with the B0 "backend/API" preflight note. - figma-design-extract: narrow the no-raw-values grep gate from `^\+` to `^\+[^+]` so it no longer matches `+++ b/file` diff headers. - verify-web reference: document a ±1px / rounding tolerance for getBoundingClientRect fractional pixels to avoid noisy FAILs. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request Checklist
npm startand verified thatREADME.mdis up to date.stagedbranch for this pull request.Description
Adds two composable, tool-agnostic design-to-code fidelity skills:
figma-design-extract— reads exact values (tokens, sizes, structure) out of a Figma node via the Figma MCP into a build-ready design-spec table mapped to your repo's own design tokens, instead of eyeballing a screenshot.design-fidelity-verify— runs a bounded vision + numeric loop that reads the actually-rendered values off the live app (webgetComputedStyle/ mobile native view props) and walks every spec row to PASS/FAIL + delta. Web/mobile mechanics live in on-demandreferences/.They compose:
figma-design-extractproduces the spec table,design-fidelity-verifyconsumes it. Either works standalone.Both follow the Agent Skills spec (
skills/<name>/SKILL.md+ bundled assets). Canonical source: jeltehomminga/figma-design-skills (MIT).Type of Contribution
Additional Notes
npm run skill:validatepasses (all skills valid);docs/README.skills.mdregenerated vianpm run build.