Quick Start
Example Prompts Paste these directly into Claude Code
Apply to an existing interface:
Apply the Airtime design system from https://github.com/all-turtles/airtime-design-systemRedesign an existing interface:
Re-design this using Airtime design system from https://github.com/all-turtles/airtime-design-systemCreate something new:
Create a new settings panel using Airtime design system from https://github.com/all-turtles/airtime-design-systemClaude Code will read the CLAUDE.md file from the repository and apply the system's tokens, constraints, anti-patterns, and component patterns automatically.
Setup: Reference Mode No setup required — include the URL in your prompt
Just include the GitHub URL in your prompt. Claude Code will fetch the design system files directly from the repository each session. This is the simplest approach — no local files needed.
Use the Airtime design system from https://github.com/all-turtles/airtime-design-systemSetup: Clone Locally Recommended for repeated use
Clone the design system alongside your project:
git clone https://github.com/all-turtles/airtime-design-system.gitThen copy the design system files into your project:
cp -r airtime-design-system/generated/ your-project/design-system/generated/
cp -r airtime-design-system/components/ your-project/design-system/components/
cp -r airtime-design-system/tokens/ your-project/design-system/tokens/
cp airtime-design-system/CLAUDE.md your-project/design-system/CLAUDE.mdOr reference it as a sibling directory by adding this to your project's CLAUDE.md:
## Design System
Apply the Airtime design system from `../airtime-design-system/`.
Load `CLAUDE.md` from that repo for token values, anti-patterns, and component inventory.Key Files Which files to use and what they do
| File | What It Does |
|---|---|
CLAUDE.md | AI instructions — token reference, anti-patterns, component inventory |
generated/tokens.css | CSS custom properties — link this in your HTML |
components/*.css | Component styles — import the ones you need |
generated/icons.js | 742 SVG icons via AppIcons object |
generated/.design-rules.json | Machine-readable anti-pattern rules |
Using the CSS & Skills Link stylesheets and use slash commands
Link the token stylesheet and any component styles in your HTML:
<link rel="stylesheet" href="design-system/generated/tokens.css">
<link rel="stylesheet" href="design-system/components/button.css">
<link rel="stylesheet" href="design-system/components/input.css">
<!-- add other component files as needed -->Then use any of the 7 skills:
/apply-tokens Restyle existing UI with tokens
/frontend-design Generate new interfaces
/generate-tokens Compile token JSON into CSS
/figma-to-tokens Extract tokens from Figma
/audit-ux Design critique
/audit-accessibility WCAG compliance check
/audit-design-system Token coverage reportColors
Themed Colors
Modeless Colors
Typography
Spacing & Sizing
Radii
Shadows
Blur
Borders, Opacity, Z-index, Transitions
z-index: 0z-index: 100z-index: 200z-index: 300z-index: 400z-index: 500150ms300ms500msease-outease-inease-in-outButtons
Variants
Outline
Ghost
Icon only
Icon only · Large
With icon
Overlay
States
Inputs
Sizes
Styles
States
With icons
Split
Dropdown
Variants
Controls
Segmented Control
Checkbox
Radio
Slider
Progress
Loader
List Item
Default Row
Thumbnail Row
Account Row
Menus
Thumbnails
Thumbnail
Overlay button
Avatar
Sizes
Color
Color Picker
Swatches
Overlays
Coach Mark
Create a new presentation
Select a template
Coach mark without arrow
Tooltip
Utilities
Badge
Divider
Above
Below
Scrollbar
Icons
221 unique icons · 742 variants · Fill + Stroke styles · 16px / 24px sizes