Skip to content
cccskills
FreePublished on GitHub

designlang-tokens

Style UI using colors, fonts, and corner settings extracted from resend.com. The skill guides agents to reuse named design values, keep styling consistent with those definitions, and flag missing values.

OriginalShow the original description

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

Run score Not tested

See how to install

Good for

  • Style UI using resend.com design values
  • Check defined colors, fonts, and corner settings
  • Identify missing design values

Files included (1)

  • SKILL.md937 B

SKILL.md (original)

Review the instructions the agent will receive before you install.

designlang tokens

Source: https://resend.com Extracted by designlang v7.0.0 on 2026-06-25T08:26:02.698Z

Semantic tokens (use these)

  • color.action.primary: #d6ebfd
  • color.surface.default: #000000
  • color.text.body: #ffffff
  • radius.control: 4px
  • typography.body.fontFamily: inter

Regions

  • nav
  • cta
  • content
  • hero
  • nav
  • footer
  • testimonials
  • hero
  • content
  • pricing
  • nav
  • sidebar
  • hero
  • features
  • testimonials
  • cta
  • footer
  • content

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).

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Style UI for perplexity.ai with extracted design tokens, named settings for colors, corner rounding, and fonts. Apply the provided values consistently and identify missing settings when substituting the closest available token.

  • Style UI using values extracted from perplexity.ai
  • Align colors, corner rounding, and body fonts
  • Identify gaps in the available style settings
Manavarya09/design-extract4.3KUpdated Oct 23, 2026

Style UI for posthog.com using extracted design tokens, named values for colors, corner radius, and fonts. Reuse the supplied settings and identify missing values when the available tokens do not cover a styling need.

  • Style UI with the extracted posthog.com colors
  • Apply the supplied corner radius and body font
  • Identify missing settings while reusing existing tokens
Manavarya09/design-extract4.3KUpdated Oct 23, 2026

Style UI for framer.com using extracted design tokens, named values for colors, corner radius, and fonts. Reuse the supplied settings and identify missing values when the available tokens do not cover a styling need.

  • Style UI with the extracted framer.com colors
  • Apply the supplied corner radius and body font
  • Identify missing settings while reusing existing tokens
Manavarya09/design-extract4.3KUpdated Oct 23, 2026

Style UI for planetscale.com with extracted design tokens, named settings for colors, corner rounding, and fonts. Reuse the defined values and report missing settings when selecting the closest available alternative.

  • Style UI using values extracted from planetscale.com
  • Align colors, corner rounding, and body fonts
  • Identify gaps in the available style settings
Manavarya09/design-extract4.3KUpdated Oct 23, 2026

Style UI for discord.com using extracted design tokens, named settings for visual properties. Reference the supplied colors, 12px corner radius, and Ggsans font, and flag missing values when choosing the closest existing token.

  • Style UI using the extracted discord.com values
  • Check colors, corner radius, and font against defined tokens
  • Identify missing values in the token set
Manavarya09/design-extract4.3KUpdated Oct 23, 2026

Style UI for coinbase.com with extracted design tokens, named values for visual settings. Apply the supplied blue action color, white background, gray body text, Arial font, and 50px corner radius, and flag any missing settings.

  • Style UI using the coinbase.com palette
  • Apply the defined font and corner radius
  • Identify missing design values
Manavarya09/design-extract4.3KUpdated Oct 23, 2026

See all skills by Manavarya09

Report a problem with this skill