pencil-mcp-set-variables
Set or update design variables. Use to establish or maintain a Design Token system.
Best use case
pencil-mcp-set-variables is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Set or update design variables. Use to establish or maintain a Design Token system.
Set or update design variables. Use to establish or maintain a Design Token system.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "pencil-mcp-set-variables" skill to help with this workflow task. Context: Set or update design variables. Use to establish or maintain a Design Token system.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/pencil-mcp-set-variables/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How pencil-mcp-set-variables Compares
| Feature / Agent | pencil-mcp-set-variables | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Set or update design variables. Use to establish or maintain a Design Token system.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
## Tools
This skill is designed to call the Pencil MCP tool:
* `set_variables`
If your client namespaces MCP tools, it may appear as `mcp__pencil__set_variables`.
## When to use this skill
### Intent Recognition (CRITICAL)
Even if a trigger phrase matches, you must **verify the user's intent**:
1. Is the user explicitly asking to use "Pencil"?
2. Is the current conversation context clearly about "Pencil" design tasks?
**If the answer is NO, do NOT use this skill.** (e.g., "Set variables" might refer to .env files).
**CRITICAL PREREQUISITE:**
**You must ONLY use this skill when the user EXPLICITLY mentions "Pencil".**
**ALWAYS use this skill when:**
- You are initializing a Design System (e.g., "Init uView Pro colors") **in Pencil**.
- You need to update the theme (e.g., "Apply Dark Mode") **in Pencil**.
- You want to define new Design Tokens.
**Trigger phrases include:**
- "Set Pencil variables" (设置 Pencil 变量)
- "Update Pencil tokens" (更新 Pencil 令牌)
- "Change Pencil theme" (修改 Pencil 主题)
- "Define Pencil colors" (定义 Pencil 颜色)
## Input Parameters
* **`filePath`** (string, optional): Path to `.pen` file.
* **`variables`** (object, required): The variable definitions matching the `.pen` schema.
* **`replace`** (boolean, optional):
* `true`: Completely replace all existing variables.
* `false` (default): Merge/Update existing variables.
## How to use this skill
1. **Define Schema**: Construct the variable objects (Name, Type, Value, Theme Modes).
2. **Call Tool**: `set_variables(variables={...})`.
3. **Verify**: Optionally call `get_variables` to confirm changes.
## Examples
### 1. Simple: Add a Color
Register a single new color variable.
```json
{
"variables": [
{
"name": "brand/primary",
"value": "#0066FF",
"type": "color"
}
]
}
```
### 2. Medium: Update Theme Tokens
Update multiple variables for a specific theme (e.g., Dark Mode) by merging.
```json
{
"replace": false,
"variables": [
{ "name": "bg/default", "value": "#121212", "type": "color" },
{ "name": "text/primary", "value": "#FFFFFF", "type": "color" }
]
}
```
### 3. Complex: Full System Replacement
Completely replace the existing variable system with a new set of tokens.
```json
{
"replace": true,
"variables": [
{ "name": "spacing/small", "value": 8, "type": "float" },
{ "name": "spacing/medium", "value": 16, "type": "float" },
{ "name": "font/base", "value": "Inter", "type": "string" }
]
}
```
## Keywords
**English keywords:**
set variables, update tokens, define theme, design system init, color definition, style dictionary
**Chinese keywords (中文关键词):**
设置变量, 更新令牌, 定义主题, 设计系统初始化, 颜色定义, 样式字典Related Skills
pencil
用于通过 Pencil MCP 读取/修改 .pen 设计文件并校验布局。用户提到 pencil/.pen/设计稿编辑、需要列出工具或执行 batch_get/batch_design 时调用。
pencil-ui-designer
Orchestrates Pencil design system initialization by routing framework requests to the correct pencil-ui-design-system-* skill. Use when the user explicitly mentions Pencil and wants to initialize a design system (antd, Bootstrap, Element Plus, Layui, uView, Vant, uCharts, ECharts), set up component libraries, or create design tokens in a .pen file.
pencil-ui-design-system-vant
Initialize Vant 4 design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Vant or Vant 4, needs to set up Vant color palette and typography variables, or wants to create component library frames for Button, Cell, Form, Dialog, and other Vant components.
pencil-ui-design-system-uviewpro
Initialize uView Pro design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with uView Pro or uviewpro, needs to set up uView Pro color palette and typography variables, or wants to create component library frames for Button, Form, Tabs, Navbar, and other uView Pro components.
pencil-ui-design-system-uview
Initialize uView 2.x design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with uView 2.x (not uView Pro), needs to set up uView color palette and typography variables, or wants to create component library frames for Button, Form, Cell, Tabs, and other uView components.
pencil-ui-design-system-ucharts
Initialize uCharts chart theme tokens and data visualization placeholder frames in a Pencil .pen file. Use when the user mentions Pencil with uCharts or qiun-data-charts, needs to set up chart series colors and axis tokens, or wants to create placeholder frames for Line, Bar, Pie, Radar, and other uCharts chart types.
pencil-ui-design-system-layui
Initialize Layui design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Layui or layui-vue, needs to set up Layui color palette and typography variables, or wants to create component library frames for Button, Table, Form, Menu, and other Layui components.
pencil-ui-design-system-element
Initialize Element Plus design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Element Plus or Element UI, needs to set up Element color palette and typography variables, or wants to create component library frames for Button, Table, Form, Dialog, and other Element components.
pencil-ui-design-system-echarts
Initialize ECharts chart theme tokens and data visualization placeholder frames in a Pencil .pen file. Use when the user mentions Pencil with ECharts, needs to set up chart color palette and axis tokens, or wants to create placeholder frames for Line, Bar, Pie, Radar, and other ECharts chart types.
pencil-ui-design-system-bootstrap
Initialize Bootstrap design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Bootstrap, needs to set up Bootstrap color palette and typography variables, or wants to create component library frames for Grid, Card, Modal, Navbar, and other Bootstrap components.
pencil-ui-design-system-antd
Initialize Ant Design (antd) design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Ant Design or antd, needs to set up antd color palette and typography variables, or wants to create component library frames for Button, Form, Table, Modal, and other antd components.
pencil-ui-design-spec-generator
Translates high-level user requirements into a PENCIL_PLAN: a strict sequence of Pencil MCP tool calls (open_document, set_variables, batch_design, get_screenshot). Use when the user explicitly mentions Pencil and wants to plan a design task, generate a step-by-step design spec, or create a login form, dashboard, or design system initialization plan.