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

Design Tokens Emit

skill-zacharticulatev-designer-pro-and-seo-design-tokens-emit · by ZachArticulateV

Convert a design system spec into code-deliverable token files — CSS variables, a Tailwind config fragment, SCSS variables, or Style-Dictionary JSON. Trigger when the user says "emit tokens", "tailwind config", "css variables", "style dictionary", "convert design system to code", or wants to bridge from spec to implementation.

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

Install

$ agentstack add skill-zacharticulatev-designer-pro-and-seo-design-tokens-emit

✓ 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-zacharticulatev-designer-pro-and-seo-design-tokens-emit)

Reliability & compatibility

✓ Security review passed
0 installs to date
— no reviews yet
● 2mo 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 Design Tokens Emit? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

design-tokens-emit

Family: design Status: Stable

Purpose

Bridge "we have a design system spec" to "we have tokens we can import." Takes a design-system-gen result and emits real token files in the chosen format(s), so the palette/typography/effects become part of the build instead of staying a doc.

Triggers

  • "emit tokens" / "convert design system to code"
  • "tailwind config" / "css variables" / "style dictionary"
  • "tokens for [tailwind/css/scss]"

Inputs

  • A design system as engine JSON from design-system-gen (re-run it in JSON

mode if you only have a saved MASTER.md — the emitter reads JSON, not Markdown)

  • Target format: css | tailwind | scss | json | all
  • Output directory

Steps

  1. Get the design JSON. Run design-system-gen (JSON mode) or read a saved one.
  2. Emit tokens:

`` python3 "${CLAUDE_PLUGIN_ROOT}/scripts/design/tokens_emit.py" --design-json ds.json --format all --out-dir tokens/ ` On Windows, use py if python3 is absent; in PowerShell the variable is $env:CLAUDEPLUGINROOT. Produces tokens.css (:root custom properties), tailwind.tokens.js (merge into theme.extend), _tokens.scss, and tokens.json (Style-Dictionary shape). Use --print` to preview without writing.

  1. Wire it in. Tell the user where each file goes (import the CSS, merge the

Tailwind fragment, @use the SCSS) and include the contrast-safe on_primary color for button text.

  1. Keep it in sync. Re-run when the design system changes; tokens are generated,

not hand-maintained.

Outputs

  • One token file per requested format (CSS / Tailwind / SCSS / JSON)
  • Wiring notes for the target stack

Dependencies

  • scripts/design/tokens_emit.py (required) — Python 3.10+, standard library only
  • design-system-gen (required) — upstream source of the design JSON the emitter reads

Notes

Pairs with design-build (which consumes the tokens) and design-system-persist (which stores the source design system). SwiftUI/Compose targets are on the roadmap; web formats ship today.

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 Agent Skills