106.9K+Download
Skip to the usage guide
Design Tokensby julianoczkowski

Design Tokens Skill.

Translate a chosen design direction into reusable theme values.

  • Tokens
  • Tailwind
Download OpenDesignView Usage Guide
Source Review · design-tokensSKILL.md
Task Translate a chosen design direction into reusable theme values. Produces A token file or theme extension in the format the project uses. Before You Start The source directs the agent to extend a present system rather than overwrite it.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Translate a chosen design direction into reusable theme values

Generate or extend CSS, Tailwind or theme tokens for color, spacing, typography, layout and motion from an existing design brief.

Source-based workflowNot an execution benchmark

The Working Approach

Design Tokens establishes the values that new components will reference. It starts by inspecting existing CSS variables, theme providers, token files and framework dependencies, then reads the feature's design brief. If a system already exists, the skill extends its gaps rather than replacing it.

The output follows the project's stack: CSS custom properties, Tailwind configuration or a theme module. Both light and dark palettes are part of the documented workflow, along with spacing, typography, layout, motion and responsive values. The agent explains the chosen visual direction and any decisions that depart from it.

Expected Deliverables

  • A token file or theme extension in the format the project uses.
  • Intentional light and dark palettes with semantic roles.
  • A short account of the design direction and implementation choices.
See the Example Brief

From Brief to Review

  1. 01
    Inspect existing foundations

    Search for CSS variables, Tailwind configuration, theme providers and token exports. Identify gaps such as missing dark mode or motion values before generating anything.

  2. 02
    Connect the brief to the stack

    Read the active feature brief and its aesthetic direction. Choose the token format that matches the application, defaulting to CSS custom properties when the stack is unclear.

  3. 03
    Define related scales

    Create semantic colors and consistent spacing, typography and layout values. Include motion and breakpoint categories that components can reference.

  4. 04
    Build both theme modes

    Design dark values deliberately and support the source's system-preference and manual-theme patterns. Explain how the new values extend the existing system.

02 When to Use It

When to Use It

The source directs the agent to extend a present system rather than overwrite it.

A Good Fit

  • Before component constructionA new feature needs consistent values before its visual pieces are built.
  • Incomplete foundationsAn existing theme lacks categories or intentional dark-mode values.

Limits to Check

  • Preserve existing tokensThe source directs the agent to extend a present system rather than overwrite it.
  • Design direction requiredWhen no brief exists, establish the intended direction. A named aesthetic philosophy draws its parameters from the companion frontend-design skill.
  • Values need application checksA generated palette still needs contrast and rendering verification in actual components.

Bring These Inputs

  • Feature briefSupply the accepted visual direction and relevant design decisions.
  • Theme sourceProvide current variables, configuration files and token exports.
  • Application stackIdentify CSS, Tailwind or a theme-provider implementation.

03 Decisions That Matter

Decisions That Matter

  1. Semantic reuse

    Components can refer to roles such as text, surface and focus instead of arbitrary values.

  2. Intentional modes

    Dark mode is designed alongside light mode.

  3. Stack fit

    Tokens are delivered where the current application can consume them.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

Supply the accepted visual direction and relevant design decisions.

Upstream Source File
https://github.com/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/design-tokens/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use design-tokens to extend the theme for our new reporting feature. Read the approved design brief and inspect existing CSS variables, Tailwind settings and theme providers first. Preserve current token names and fill only documented gaps. We need semantic chart surfaces, status colors, spacing and typography values that work in light and dark mode. Use the project's existing format and explain how manual theme selection interacts with system preference. Include a mapping of new values to intended roles and flag any palette combinations that still need rendered contrast checks.

Inspect the Result

Check the actual output against these observable criteria.

  • Existing token definitions remain intact unless a change is explicitly justified.
  • Both themes cover the intended semantic roles.
  • New components can consume the output in the project's actual styling system.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
julianoczkowski
Repository
julianoczkowski/designer-skills
Skill File
SKILL.md
License
Apache-2.0
Reviewed Snapshot
2026-11-02 · c259656c76d9
Editorial Source Summary
Translate a chosen design direction into reusable theme values.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does it always create a new tokens.css file?

No. The source chooses CSS variables, Tailwind configuration or a theme module according to the stack.

How should dark mode be derived?

The source calls for intentional palette choices rather than a simple inversion of light colors.

Can it work with an existing system?

Yes. It begins by finding existing tokens and extending their gaps.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/design-tokens/SKILL.md