skills.rest
CinderZhang
CinderZhangCOMMUNITY
Explore all skills by this author →
GitHub

represent-tokens

Define product design tokens for colors and typography using Tailwind CSS and Google Fonts.

3|1|Updated Jan 26, 2026
Search Tags:#typography#design#tailwind#tokens#colors#google fonts
One-click install
npx skills add https://github.com/CinderZhang/driver-plugin --skill represent-tokens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: represent-tokens
Source: https://github.com/CinderZhang/driver-plugin/tree/main/skills/represent-tokens
Command: npx skills add https://github.com/CinderZhang/driver-plugin --skill represent-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers define the visual identity of their product by selecting colors and typography, ensuring a consistent and appealing design.

Core Features & Use Cases

  • Color Selection: Guides users to choose primary and neutral colors from Tailwind's built-in palette.
  • Typography Selection: Assists in selecting heading, body, and monospace fonts from Google Fonts.
  • Use Case: A new web application needs a distinct visual style. This Skill helps the developer choose a modern color scheme and appropriate fonts that align with the brand's identity, outputting the choices into colors.json and typography.json files.

Quick Start

Use the represent-tokens skill to help me choose colors and typography for my new web app.

Frequently Asked Questions about represent-tokens

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

FAQPage Schema
How do I define product colors and typography using Tailwind CSS and Google Fonts?▼

To define product colors and typography, you select primary and neutral colors from Tailwind's built-in palette and heading, body, and monospace fonts from Google Fonts, outputting the results into JSON files.

What are design tokens and how do they help create a visual identity for web applications?▼

Design tokens are predefined resources like color palettes and font families that ensure adherence to design system constraints. They facilitate visual identity creation for web applications by maintaining a consistent and appealing style.

Can I use custom hex codes for my color palette instead of Tailwind's predefined colors?▼

No, you cannot use custom hex codes. This Skill ensures adherence to design system constraints by utilizing predefined resources only, guiding you to choose primary and neutral colors exclusively from Tailwind's built-in palette.

What files are generated when selecting fonts and colors for my web app?▼

When selecting fonts and colors for your web app, the process outputs your choices into two distinct files: `colors.json` for your primary and neutral color palettes, and `typography.json` for your selected Google Fonts families.

Does this approach support selecting different fonts for headings, body text, and monospace?▼

Yes, this approach supports selecting different fonts for headings, body text, and monospace. It assists in selecting appropriate font families from Google Fonts to align with your product's visual identity.

Related Skills

Explore More Design & Creative Skills→
petbrainspetbrains
13

frontend-google-fonts

Configure Google Fonts typography for Next.js and Tailwind projects.

Official
Basic
BradliebsBradliebs

frontend-design

Design and implement production-grade frontend interfaces with typography, color systems, and responsive layouts.

Community
Advanced
annaundfloraannaundflora

tailwind-v4-patterns

Configure Tailwind CSS v4 design tokens and component patterns using @theme.

Community
Intermediate
vultisigvultisig
19

Figma Design Implementation

Translate Figma UI designs into React components using MCP tools.

Official
Intermediate