skills.rest
hjemmesidekongen
hjemmesidekongenCOMMUNITY
Explore all skills by this author →
GitHub

pencil-tokens

Translate YAML design tokens into Pencil's set_variables format.

1|Updated Mar 1, 2026
Search Tags:#design system#brand guidelines#design tokens#pencil#tokens.yml#variable mapping
One-click install
npx skills add https://github.com/hjemmesidekongen/ai --skill pencil-tokens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pencil-tokens
Source: https://github.com/hjemmesidekongen/ai/tree/main/plugins/segl/skills/pencil-tokens
Command: npx skills add https://github.com/hjemmesidekongen/ai --skill pencil-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the process of translating design tokens defined in YAML into a format that the Pencil design tool can understand and use, ensuring design consistency.

Core Features & Use Cases

  • Token Translation: Converts design tokens (colors, typography, spacing, etc.) from tokens.yml and brand guidelines from guideline.yml into Pencil's set_variables format.
  • Reference Resolution: Ensures all YAML references within token definitions are resolved to concrete values before being sent to Pencil.
  • Use Case: After defining your brand's visual identity in tokens.yml, use this Skill to load all those styles into your active Pencil design file, making them immediately available for use.

Quick Start

Run the pencil tokens skill to load the design tokens into the active Pencil document.

Frequently Asked Questions about pencil-tokens

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

FAQPage Schema
How do I sync design tokens from a YAML file to Pencil?▼

You can sync design tokens to Pencil by translating YAML files into Pencil's set_variables format, which resolves all references to concrete values for direct injection into active design documents.

What design token categories are supported for variable mapping in Pencil?▼

Variable mapping supports semantic colors, typography, spacing, radius, and shadows, mapping these design token categories directly to Pencil's variable structure for light mode injection.

Does the Pencil token injection resolve YAML references automatically?▼

Yes, token injection resolves all YAML references automatically, ensuring every token definition is expanded into a concrete value before being applied to the active Pencil design file.

Can I load brand guidelines into Pencil using design tokens?▼

You can load brand guidelines into Pencil by converting guideline.yml and tokens.yml files into the set_variables format, making your visual identity immediately available for design work.

When should I run design token translation before starting Pencil design work?▼

Run design token translation before design work commences to inject light mode tokens, ensuring the active Pencil document has all resolved variables set up and ready for immediate use.

Related Skills

Explore More Design & Creative Skills→
djankiesdjankies

using-theme-variables

Define and apply Tailwind v4 design tokens using the @theme directive.

Community
Advanced
joabeoliveirajoabeoliveira

Design System Gov-Tech

Create consistent, accessible Gov-Tech design systems with Tailwind and Shadcn/UI.

Community
Intermediate
mkatoguimkatogui
3

brand-identity-generator

Generate brand identity systems with CSS-ready tokens and brand guidelines.

Community
Advanced
daffy0208daffy0208
34

brand-designer

Design cohesive brand identities with SVG logos, color palettes, and typography systems.

Community
Intermediate