Design System

Reviewed 2026-10-14codingPrompt / Rule# design-tokens # design-system # css-variables # tailwind # slides

Design token skill from the UI UX Pro Max repo: three-layer tokens, component specs, Tailwind integration and token-based HTML slides.

Security Reviewed

Local token and slide scripts: they write the files you name, make no network requests and need no API keys; generated slides load Chart.js and fonts from CDNs when opened.

Install Design System in Google Antigravity

Antigravity loads skills from .agents/skills/ in your project or ~/.gemini/config/skills/ for all projects (official docs). Full guide

EasiestOption 1: paste this to your Antigravity agent

Install the "Design System" skill for Google Antigravity.
Follow the steps at https://www.antigravityskills.org/install/design-system.md (source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/design-system).
Before running anything, show me what you will download and whether it includes scripts, and wait for my OK.
Install it into this project (.agents/skills/) unless I say global. When done, check that Antigravity lists it as an installed skill.

The agent reads the install file, shows you what it will download and waits for your OK.

Option 2: install it yourself

1. Download the repository

git clone --depth 1 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill /tmp/ui-ux-pro-max-skill

The skill lives in .claude/skills/design-system.

2. Copy the skill and its two dependencies into this project (workspace skills)
```
mkdir -p .agents/skills && for s in design-system brand ui-styling; do cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/$s .agents/skills/; done
```
Run from your project root. SKILL.md lists brand and ui-styling as dependencies, so copy all three.
3. Or install them for all projects (global skills)
```
mkdir -p ~/.gemini/config/skills && for s in design-system brand ui-styling; do cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/$s ~/.gemini/config/skills/; done
```
Use this instead of the previous step. For the Antigravity CLI the global folder is ~/.gemini/antigravity-cli/skills/.
4. Check that Antigravity sees it
Antigravity 2.0 app: start a new conversation and ask "What skills do you have?" (the app has no /skills command). Antigravity CLI: run /skills; in a session that was already open, run /skills reload first. design-system, brand and ui-styling are listed.

Alternative documented in the README: npm install -g ui-ux-pro-max-cli, then uipro init --ai antigravity in your project; it installs ui-ux-pro-max plus the 6 sub-skills (including design-system) into .agents/skills/. Needs Node.js and Python 3; no API keys.

Using Claude Code, Cursor or Codex? See other assistants below.

What is Design System?

Design System is a companion skill for developers who want an agent to build design tokens (primitive, semantic, component) and brand-matched HTML slide decks. It ships token reference docs, Node and Python scripts, and CSV rules for slide structure.

How to use Design System?

Ask for tokens in plain words, for example primitive, semantic and component tokens for your brand color, and let the agent run generate-tokens.cjs to write a CSS file. For slides, describe the deck; the agent searches the slide CSVs and writes HTML that uses your token CSS.

Key features of Design System

✓We counted at 477bcb2: 27 files, 182,631 bytes in .claude/skills/design-system; SKILL.md is 248 lines
✓We counted: 7 token reference docs, 1 starter token JSON, 3 Node (.cjs) and 6 Python scripts; SKILL.md's script table lists only 5 of those 9
✓We counted: 8 slide CSVs with 15 deck strategies, 25 layouts, 25 copywriting formulas and 25 chart types (header rows excluded)
✓We counted: the repo has 1 test file for the token validator; the example deck SKILL.md points to (assets/designs/slides/claudekit-pitch-251223.html) is not in the repo
✓README says the uipro CLI is the recommended installer; we counted 6 sibling sub-skills it copies next to ui-ux-pro-max (cli/assets/skills), this one among them

When to use Design System

1Create a three-layer token CSS file for a brand
2Check source files for hardcoded colors and values
3Generate a brand-token HTML pitch deck

Installation & Setup Guide

Agent Rules / Prompt Setup

Follow these steps (taken from the project's own docs) to configure Design System in your development environment.

Step 1: Claude Code: pluginclaude

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Documented in the repo README. The plugin manifest points at ./.claude/skills/, so design-system arrives together with ui-ux-pro-max.

Step 2: Cursor: uipro CLIcursor

npm install -g ui-ux-pro-max-cli && uipro init --ai cursor

Documented in the README for the CLI (also --global for ~/.cursor/skills/); the CLI copies the sub-skills next to ui-ux-pro-max.

Usage Example & Verification

Prompt / Request Example

1) SKILL.md example: /slides:create "10-slide investor pitch for ClaudeKit Marketing"
-> A Claude Code style command; in other agents say it in words. The agent picks a deck strategy from slide-strategies.csv, then layouts and copy, and writes HTML slides.

2) Our example: "Use the design-system skill to create primitive, semantic and component tokens for our brand blue and generate tokens.css."
-> It fills a token JSON from templates/design-tokens-starter.json and runs node scripts/generate-tokens.cjs --config tokens.json -o tokens.css.

3) Our example: "Check src/ for hardcoded colors that should be tokens."
-> It runs node scripts/validate-tokens.cjs --dir src/ and reports values to replace with var(--token).

Security Review

Static review

Reviewed Date

2026-10-14

Audited Ref / Commit

477bcb28c9812b385cb51a4605ddf30d7b2266e2

Reviewer

antigravityskills.org (static code review)

Local token and slide scripts: they write the files you name, make no network requests and need no API keys; generated slides load Chart.js and fonts from CDNs when opened.

Full review: scope, findings, risks

Audit Scope:nextlevelbuilder/ui-ux-pro-max-skill at 477bcb2, re-read on 2026-10-14 against HEAD 7246805 (2026-10-12): the design-system folder is unchanged (last commit 91c193a, 2026-09-03). Read SKILL.md, all scripts, the CSV data, references, README Antigravity section and the CLI template code.

Key Findings:Instructions plus local Node/Python scripts and CSV data. No script makes an outbound request; image and font URLs appear only as strings in generated HTML/CSS. Scripts write files you point them at; no API keys.

Identified Operational Risks & Permissions:Low. Scripts write CSS/HTML into your project; generated slides load Chart.js and Google Fonts from the internet when opened in a browser.

Static review at 477bcb2 (folder unchanged at HEAD 7246805). scripts/generate-tokens.cjs reads a JSON config and writes CSS with fs.writeFileSync to the output path you pass; validate-tokens.cjs only reads source files; embed-tokens.cjs is a local helper. generate-slide.py writes HTML to assets/designs/slides relative to the skill location (parents[4]) and only accepts http, https, # and / URL schemes. fetch-background.py holds a hard-coded list of images.pexels.com URLs and a search-link builder; it makes no request. slide-token-validator.py uses subprocess.run only to call the sibling html-token-validator.py with sys.executable. html-token-validator.py and fetch-background.py read the optional environment variable DESIGN_SYSTEM_PROJECT_ROOT. No HTTP client, no API keys.

Operational Notes & Known Limitations

Known Limitations

•Needs Node.js for the .cjs scripts and Python 3 for the slide scripts; SKILL.md lists brand and ui-styling as skill dependencies
•Slide scripts expect project files such as docs/brand-guidelines.md and assets/design-tokens.json, and generate-slide.py writes to assets/designs/slides four folders above the script, which is your project root only when installed at <project>/.agents/skills/
•Generated slide HTML loads Chart.js from cdn.jsdelivr.net and Google Fonts when opened
•The repo README documents Antigravity only for the uipro CLI; none of the standalone folder instructions mention it

Frequently Asked Questions

Is the Design System skill safe?

In our static review of commit 477bcb2 the scripts are local: generate-tokens.cjs writes the CSS file you name, generate-slide.py writes HTML under assets/designs/slides, fetch-background.py only returns a built-in list of Pexels URLs, and no script makes network requests or needs an API key.

How do I install Design System in Antigravity?

Clone nextlevelbuilder/ui-ux-pro-max-skill, copy .claude/skills/design-system, brand and ui-styling into .agents/skills/ (or ~/.gemini/config/skills/), then ask "What skills do you have?" (CLI: /skills). Or run uipro init --ai antigravity.

How is it related to UI UX Pro Max?

Same repository, same installers. UI UX Pro Max searches a style and palette database; Design System builds token files and slide decks from your brand.

Does it support Tailwind?

Yes. references/tailwind-integration.md covers mapping tokens into a Tailwind config.

Supported Platforms

antigravityclaudecursorgemini

View Source on GitHub

Keep exploring this topic

Browse the full Antigravity skills directory for more source-linked skills with install steps and static safety reviews.

More coding skills #design-tokens #design-system #css-variables #tailwind Use cases

Related Skills

💻

shadcn/ui

@shadcn-ui

Official shadcn/ui skill: project-aware rules for adding, searching, composing and styling shadcn components via the shadcn CLI.

Tested in AntigravityStatic reviewinstalls packagesnetwork accesswrites files

shadcn-uireact

💻

UI Styling

@nextlevelbuilder

Companion skill from the UI UX Pro Max repo for shadcn/ui components, Tailwind CSS styling, dark mode, theming and canvas visuals.

Static reviewruns scriptswrites filesnetwork access

tailwindshadcn-ui

🎨

UI/UX Pro Max

@nextlevelbuilder

Comprehensive UI/UX design intelligence skill for AI coding assistants. Injects structured design tokens, color theory, typography scales, accessibility guidelines, and component patterns into Claude Code, Cursor, and Windsurf.

Tested in AntigravityStatic reviewinstalls packagesnetwork accesswrites files

mediaui