Skills

Designlang Tokens

Use when styling UI for v0.dev, references the extracted design system tokens instead...

Install

npx skills add Manavarya09/design-extract --skill designlang-tokens -g -a claude-code -y
Category
Design
Updated
4d ago
License
MIT
Context cost
Lightabout 173 tokens
Runs scripts
No, instructions only

What it does

Use when styling UI for v0.dev, references the extracted design system tokens instead of inventing colors, spacing, or typography.

designlang tokens

Source: https://v0.dev Extracted by designlang v7.0.0 on 2026-06-25T08:31:40.971Z

Semantic tokens (use these)

  • color.action.primary: #d2d2d2
  • color.surface.default: #f4f4f4
  • color.text.body: #000000
  • radius.control: 4px
  • typography.body.fontFamily: GeistSans

Regions

  • content
  • nav
  • nav
  • testimonials
  • hero
  • testimonials
  • content
  • hero
  • cta
  • footer
  • footer

How to use

  • Prefer semantic.* tokens over primitive.*.
  • Never invent new tokens or hex values; reuse the ones above.
  • When a value is missing, pick the closest existing semantic token and flag the gap.
  • Reference tokens by their dotted path (e.g. semantic.color.action.primary).

More in Design