AgentStack
Browse Sign in
Browse Why AgentStack Sell Docs
Sign in
SKILL verified Apache-2.0 Self-run

Figma Design System Sync

skill-sergekostenchuk-ui-ux-agent-skill-system-figma-design-system-sync · by sergekostenchuk

Sync and audit design-system contracts between Figma and code. Use this skill when the user asks about Figma Variables, styles, tokens, component libraries, variants, Code Connect, effect styles, naming drift, token exports/imports, library governance, or keeping implementation and Figma design systems aligned under the UI/UX skill system.

↗ Repository
— No reviews yet
0 installs
17 views
0.0% view→install

Install

$ agentstack add skill-sergekostenchuk-ui-ux-agent-skill-system-figma-design-system-sync

✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ✓ Environment & secrets No
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

View the full security report →

Verified badge

Passed review? Show it. Paste this badge into your README, it links to the public security report.

AgentStack Verified badge Links to your public security report.
[![AgentStack Verified](https://agentstack.voostack.com/badges/verified.svg)](https://agentstack.voostack.com/security/report/skill-sergekostenchuk-ui-ux-agent-skill-system-figma-design-system-sync)

Reliability & compatibility

✓ Security review passed
0 installs to date
— no reviews yet
● 1mo ago

Declared compatibility

Claude CodeClaude Desktop

Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.

Preview Execution monitoring

We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.

How agent discovery & health will work →
Are you the author of Figma Design System Sync? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

Figma Design System Sync

Use this skill when Figma work touches reusable system contracts: variables, styles, components, variants, effects, assets, Code Connect, and local code tokens.

Modes

  • audit: compare Figma system artifacts to local code conventions.
  • sync-plan: plan variable/style/component updates.
  • token-map: map Figma variables to local tokens.
  • component-map: map components and variants to code components.
  • code-connect: create or review Code Connect files through the installed Figma skill.
  • governance: propose naming, versioning, and rollout rules.

Workflow

  1. Read Figma context with figma-context-reader unless a current context brief exists.
  2. Inspect the local code tokens/components before recommending sync actions.
  3. If Code Connect is requested, invoke figma:figma-code-connect when present.
  4. Build a diff: Figma source, code target, status, risk, and proposed change.
  5. For mutations, route to figma-canvas-editor or figma-apply-effects with explicit scope.
  6. Validate JSON/token outputs locally before treating them as evidence.

Guardrails

  • Do not rename or delete variables/components/styles without a migration map.
  • Do not treat generated code or generated variables as source of truth until reviewed.
  • Record which direction is authoritative for each artifact: Figma to code, code to Figma, or reconcile manually.
  • Keep variable binding promises compatible with current Figma Plugin API support.

Safety And Privacy

  • Treat unpublished tokens, library names, component inventories, and source component code as sensitive.
  • Do not push variable/component renames without an explicit migration map and rollback path.
  • Do not upload private token exports or component snapshots to external services without approval.

Output Shape

Use [assets/design-system-sync-report.md](assets/design-system-sync-report.md).

Resources

  • Read $CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.md for current capability checks.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet, be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in Content & Media