Should I use this skill for Streamlit or Dash projects?

Generally, no. The skill specifically recommends skipping token definition for quantitative tools as those frameworks already provide excellent default styling.

What are design tokens in this context?

Design tokens are the visual atoms of your product, specifically the primary and neutral color choices and typography settings saved in JSON format for use in your frontend.

Can I use custom hex codes with this skill?

No, the skill enforces the use of Tailwind's built-in palette to maintain design system integrity and simplify implementation.

Where does the skill save my design choices?

It creates two files: /product/design-system/colors.json and /product/design-system/typography.json, which act as the single source of truth for your app's styling.

Why does the skill limit choices to Tailwind colors and Google Fonts?

This limitation follows the KISS principle to ensure high-quality results, easy web integration, and consistency without the maintenance burden of custom hex codes or local font files.

Design System Tokens

Name: Design System Tokens
Author: CinderZhang

byCinderZhang

•

デザインツール

Streamlines UI design by establishing standardized Tailwind color palettes and Google Fonts typography for web applications.

The represent-tokens skill acts as a 'Cognition Mate' to help developers define a cohesive visual identity without over-complicating the design process. By enforcing the use of Tailwind CSS built-in colors and Google Fonts, it ensures that web applications remain performant and easy to maintain. It intelligently references existing product documentation to make tailored suggestions and provides a specialized 'skip' path for quantitative tools like Streamlit or Dash that already feature robust defaults, adhering strictly to the KISS (Keep It Simple, Stupid) principle.

主な機能

01Google Fonts integration for headings, body, and monospace text

02Intelligent bypass logic for data-centric analytical frameworks

03Automated generation of design-system JSON configuration files

04Standardized Tailwind CSS color palette selection

05Context-aware design suggestions based on product overviews

062 GitHub stars

ユースケース

01Ensuring design consistency across a project by centralizing style tokens

02Rapidly prototyping themed user interfaces within the Claude Code environment

03Establishing a brand-aligned visual identity for a new web application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cinderzhang/driver-plugin represent-tokens

For use in Claude.ai and ChatGPT

Download Skill