design-token

Generates standardized W3C DTCG design tokens and CSS variables for document genre theming.

68|25|Updated Jul 24, 2026
One-click install
npx skills add https://github.com/rojim666/SztuCode --skill design-token-rojim666
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-token
Source: https://github.com/rojim666/SztuCode/tree/main/py-runtime/src/sztu_code/core/prompts/workbuddy/skills/_builtin-plugins/tencent-docx/skills/design-token
Command: npx skills add https://github.com/rojim666/SztuCode --skill design-token-rojim666

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Document formatting pipelines need consistent typography, color, spacing, and layout decisions, but hardcoding style values leads to inconsistency. This Skill centralizes all style decisions by mapping a document genre to a precompiled set of design tokens compliant with Chinese national standards such as GB/T 9704 and GB/T 7713. ## Core Features & Use Cases - Genre-based theme selection: Maps five document genres (government-doc, academic-paper, business-report, marketing-doc, general) to curated theme files with a general fallback. - Zero-LLM static lookup: Reads precompiled JSON artifacts from tokens/compiled/ at runtime, returning a complete DesignTokenOutput with no model round-trips. - Standards-backed rules: Ships GB/T 9704 government document rules, GB/T 7713 academic layout rules, and GB/T 7714 citation format rules as traceable references. - Use Case: In a doc-formatter pipeline, pass genre "academic-paper" and receive typography, color, spacing, and layout tokens plus ready-to-inject CSS variables for the doc-typeset template. ## Quick Start Ask the doc-formatter agent to determine the typography and color theme for an academic paper document so the typesetting step can apply the correct styles.

Frequently Asked Questions about design-token

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I get design tokens for a specific document genre?▼

Pass a genre value such as government-doc, academic-paper, business-report, marketing-doc, or general as input. The skill looks up the precompiled JSON in tokens/compiled/index.json and returns the full DesignTokenOutput including tokens and CSS variables.

What document types does the design token theme mapping support?▼

Five genres are supported: government-doc for party and government official documents, academic-paper for theses, business-report, marketing-doc for creative campaigns, and general as the default fallback for unrecognized genres.

Does the design token lookup require an LLM call at runtime?▼

No. All themes are precompiled by scripts/build_tokens.py into static JSON artifacts under tokens/compiled/. Runtime execution is a pure static table lookup with zero LLM round-trips.

How are CSS variable names generated from design tokens?▼

CSS variable names are flattened token paths, for example typography.fontSize.h1 becomes --typography-fontSize-h1 and color.primary becomes --color-primary. Templates consume them via var() with fallbacks.

What happens after I edit a theme JSON file?▼

You must rerun python3 scripts/build_tokens.py to rebuild the tokens/compiled/ directory. The runtime only reads compiled artifacts, so theme source edits have no effect until recompiled.

Which Chinese national standards do the typography rules cover?▼

The rules references cover GB/T 9704-2012 for government document format, GB/T 7713-2022 for academic paper layout, and GB/T 7714-2015 for bibliographic citation formatting.