Inspect, Build, and Sync Figma Design Systems1 skill
A single skill that audits design system files, creates or extends components and tokens, and optionally exports them to code.
Engineering Blueprint
Safety checkedInspect, Build, and Sync Figma Design Systems
0natdexterraMay 2026
A single skill that audits design system files, creates or extends components and tokens, and optionally exports them to code.
Design system inspectionComponent buildingToken managementCode export
Install Prompt
Copy this prompt and paste it into your AI agent to install.
What problem does this solve?
Inspects and builds Figma design systems end-to-end in two modes. Inspect mode audits components for token compliance, interactive states, WCAG accessibility, detached instances, naming quality, and description completeness, then pauses for your decision before proceeding. Build mode creates tokens with proper variable collections, constructs components with variable bindings and slots, writes structured descriptions, validates, and optionally generates tokens.css, audit scripts, and AI rules for your codebase. The skill bridges the design-to-code gap by keeping Figma structure and code exports in sync.
How does it work?
You invoke the skill with a request like 'audit my design system' or 'create a design system for fintech'. The skill detects mode automatically: inspect runs read-only audits with weighted scoring and always pauses before any changes; build proceeds through six sequential phases (discovery, foundations, file structure, components with slots, validation, optional code export). Within each phase, the skill pauses for your review and confirmation. Once you approve, it applies changes and validates the result before moving forward.
Included Skill Groups
What's the biggest win?
Design systems in Figma stay consistent with code because the skill exports tokens, audit rules, and AI instructions that reflect the same structure the agent reads from Figma, eliminating fabrication and drift between the design tool and the IDE.
What's required to run this?
Requires the figma-use skill and Figma MCP server (remote recommended). LineHeight variables must store pixel values, not percentages, because Figma variables are unitless and interpreted as pixels when bound. Every variable must have explicit scopes (not ALL_SCOPES) and codeSyntax.WEB set, so agents receive CSS token names instead of Figma internal names. The skill treats component descriptions as plain text (no markdown) to match MCP delivery format.
What should I watch out for?
Phase 6 (code export) requires file write access to your project available in Claude Code, Cursor, Codex, and similar MCP clients. When running in Claude.ai web or mobile, Phase 6 outputs files as text for you to copy manually. Inspect mode is read-only but Phase 6 can overwrite existing tokens.css if regenerated; ask the skill to append or skip if you have custom edits. The skill migration from v1.x to v2.0 changed the repo URL, so update any hardcoded links.
Key Features
Inspect mode (read-only)
Audits components with six weighted modules: token compliance with severity tiers, interactive state coverage, WCAG 2.1 AA compliance, detached instance detection, naming quality, and structured descriptions. Scores each component 0–100.
Build mode with six phases
Discovery → Foundations (variables, text styles) → File structure → Components with slots → Validation → Optional code export. Pauses between phases for your review.
Slots for compound components
Uses named slots instead of detach patterns for Card, Modal, Dialog, and similar components. Agents and users can't accidentally detach, and slot dropzones stay visible to AI.
Phase 6: Code export (optional)
Generates tokens.css with three-layer indirection, CI-ready audit script, and scoped AI rules for Claude Code, Cursor, or Codex. Phase 6 is off by default and only runs on explicit request.
Mandatory structured descriptions
Every public component requires PURPOSE, BEHAVIOR, COMPOSITION, USAGE, CODE NOTES sections. Figma MCP passes these to agents as context, so they understand intent instead of guessing from visual structure.
Tools in this Blueprint
About This Blueprint
- License
- MIT
- Industry
- Technology
- Skills
- 0 workflows, 0 sub-skills, 1 standalone
More Blueprints to explore
MarketingSafety checked
QR Code Generator with Customization: Build QR Codes That Match Your Brand
Choosing the best qr code generatorr is not simply about finding a tool that can turn a link into a scannable code. For business and marketing use, the right platform should make QR creation simple while also giving you useful options for customization, editing, tracking, and different types of digital content. What Makes a QR Code Generator Useful? A good QR code platform should support more than basic URL creation. Depending on your needs, you may want to create a website QR code, contact QR, WhatsApp code, WiFi code, menu QR, review QR, or a code for sharing files and product information. The creation process should also be straightforward. You should be able to enter your information, generate the code, test it with a smartphone, and download it in a suitable format. Static or Dynamic QR Code? One of the first things to consider is whether you need a static or dynamic QR code. A static QR code works well when the information will remain the same. For example, a permanent website address or WiFi details may not need future changes. A dynamic QR solution is more useful for campaigns, menus, packaging, and promotional materials where the destination may change. It can allow you to update the linked content without replacing the printed code. Customization and Branding For businesses, appearance can also matter. A branded QR code can include colors, logos, frames, and other design elements that fit your existing marketing materials. The important thing is to maintain good contrast and test the finished design before printing. A visually attractive code is only useful if customers can scan it easily. QR Code Tracking for Marketing If you are using QR codes for marketing, tracking can provide additional insight into campaign performance. Analytics may help you understand scan activity and how customers are interacting with a particular campaign. This is especially useful when the same type of QR code is used across flyers, packaging, posters, events, or other offline materials. Why Consider IMQRScan? IMQRScan is one option for users looking for a complete QR code solution rather than a basic code maker. Its platform supports static and dynamic QR codes, customization, scan tracking, and different business-focused QR types. For small businesses, marketers, restaurants, freelancers, and teams, having these features in one place can make QR code management easier.
IQ
IMQRScan Q.
QR Code Marketing Specialist
ProductivitySafety checked
A Key Tool for a Growing Company | Fovero
Fovero consolidates employee management, project tracking, attendance, and asset oversight into one platform, eliminating the need to switch between separate tools. Growing companies reduce administrative overhead and improve team visibility across HR, operations, and project execution from a single dashboard.
F
Fovero
Digital Marketing Specialist | SEO Expert
ContentSafety checked
Automated Blog Engine That Writes in Your Brand Voice From Your Own Documents
Generate on-brand blog posts daily in your verified voice without writing them yourself. The engine sources your own documents to ensure factual accuracy and voice consistency across multiple markets, then delivers WordPress-ready drafts for your final review.