Free SKILL.md scraped from GitHub. Clone the repo or copy the file directly into your Claude Code skills directory.
npx versuz@latest install partme-ai-full-stack-skills-skills-pencil-skills-pencil-ui-design-system-layuigit clone https://github.com/partme-ai/full-stack-skills.gitcp full-stack-skills/SKILL.MD ~/.claude/skills/partme-ai-full-stack-skills-skills-pencil-skills-pencil-ui-design-system-layui/SKILL.md---
name: pencil-ui-design-system-layui
description: "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."
license: Complete terms in LICENSE.txt
---
# Layui Design System Initializer
**Constraint**: Only use this skill when the user explicitly mentions "Pencil" and "Layui" (or "layui-vue") or when orchestrating a Pencil design system initialization task.
## When to use this skill
Use this skill when:
- The user wants to initialize Layui tokens (primary, warm, danger colors) in a Pencil .pen file
- The user needs a component overview frame for Layui components in Pencil
- The user mentions "Pencil" together with "Layui", "layui-vue", or Layui-specific components (Table, Form, Menu, Tabs)
- An orchestrator skill (pencil-ui-designer) routes a Layui initialization request
## How to use this skill
This skill outputs a PENCIL_PLAN. The Agent then calls Pencil MCP tools in order: `open_document`, `set_variables`, `batch_design`, optionally `get_screenshot`.
### Step 1: Initialize Variables (set_variables)
Use `mcp__pencil__set_variables` to register Layui design tokens. Follow .pen file schema.
**Primary / Theme**
- `layui-primary`: `#1e9fff` (Layui default blue)
- `layui-normal`: `#1e9fff`
- `layui-warm`: `#ffb800`
- `layui-danger`: `#ff5722`
**Text & Border**
- `layui-text`: `#333333`
- `layui-border`: `#e6e6e6`
**Font & Radius**
- `layui-font-md`: `14px`
- `layui-radius`: `2px` (Layui default)
Fill from official Layui docs if more tokens are needed.
### Step 2: Create Component Overview Structure (batch_design)
Use `mcp__pencil__batch_design` to create a "Components Overview" frame with sections based on Layui documentation:
1. **Basic (基础)**
- Button, Form, Input, Textarea, Select, Checkbox, Radio, Switch
2. **Layout (布局)**
- Container, Grid, Card
3. **Data (数据)**
- Table, Tree, Pagination, Badge, Tag
4. **Feedback (反馈)**
- Alert, Message, Modal, Drawer, Loading
5. **Navigation (导航)**
- Menu, Tabs, Breadcrumb, Dropdown
6. **Other (其他)**
- Icon, Divider, Timeline
Organize frames using Auto Layout. Keep each `batch_design` call to maximum 25 operations.
### Example: Initialize Layui Variables
```json
{
"name": "set_variables",
"arguments": {
"filePath": "designs/app.pen",
"replace": false,
"variables": {
"layui-primary": "#1e9fff",
"layui-warm": "#ffb800",
"layui-danger": "#ff5722",
"layui-text": "#333333",
"layui-border": "#e6e6e6",
"layui-font-md": "14px",
"layui-radius": "2px"
}
}
}
```
## Best Practices
- Verify token values against Layui official documentation.
- Use `set_variables` with `replace: false` unless a full reset is requested.
- Use Auto Layout for component overview frames.
- Keep each `batch_design` call to maximum 25 operations; split by category if needed.
## Keywords
pencil, layui, layui-vue, design system, init, variables, components
## References
- `references/contract.md` – Design tokens and component naming.
- `references/official.md` – Link to official documentation.
- `references/examples.md` – Example PENCIL_PLAN.
- `references/components.md` – Component specifications.