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.

261 stars

bypartme-ai

View on GitHub Installation ↓

Best use case

pencil-ui-design-system-antd 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. 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.

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-ui-design-system-antd" skill to help with this workflow task. Context: 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.

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

$curl -o ~/.claude/skills/pencil-ui-design-system-antd/SKILL.md --create-dirs "https://raw.githubusercontent.com/partme-ai/full-stack-skills/main/skills/pencil-skills/pencil-ui-design-system-antd/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/pencil-ui-design-system-antd/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How pencil-ui-design-system-antd Compares

Feature / Agent	pencil-ui-design-system-antd	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?

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

# Ant Design System Initializer

**Constraint**: Only use this skill when the user explicitly mentions "Pencil" and "Ant Design" (or "antd") or when orchestrating a Pencil design system initialization task.

## When to use this skill

Use this skill when:
- The user wants to initialize Ant Design tokens (colors, typography, radius) in a Pencil .pen file
- The user needs a component overview frame for antd components in Pencil
- The user mentions "Pencil" together with "Ant Design", "antd", or antd-specific components (Button, Table, Modal, Form)
- An orchestrator skill (pencil-ui-designer) routes an antd 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 Ant Design design tokens. Follow .pen file schema.

**Primary / Semantic**
- `ant-primary`: `#1677ff`
- `ant-primary-hover`: `#4096ff`
- `ant-success`: `#52c41a`
- `ant-warning`: `#faad14`
- `ant-error`: `#ff4d4f`
- `ant-info`: `#1677ff`

**Neutral / Text**
- `ant-text`: `#000000e0`
- `ant-text-secondary`: `#00000073`
- `ant-border`: `#d9d9d9`
- `ant-bg`: `#ffffff`

**Font & Radius**
- `ant-font-size-base`: `14px`
- `ant-border-radius`: `6px`

Fill from Ant Design token 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 Ant Design documentation:

1. **General (通用)**
   - Button, Icon, Typography
2. **Layout (布局)**
   - Grid, Divider, Space
3. **Navigation (导航)**
   - Affix, Breadcrumb, Dropdown, Menu, Pagination, Steps, Tabs
4. **Data Entry (数据录入)**
   - AutoComplete, Cascader, Checkbox, DatePicker, Form, Input, InputNumber, Radio, Rate, Select, Slider, Switch, TimePicker, Transfer, Upload
5. **Data Display (数据展示)**
   - Avatar, Badge, Calendar, Card, Carousel, Collapse, Descriptions, Empty, Image, List, Popover, Statistic, Table, Tabs, Tag, Timeline, Tooltip, Tree
6. **Feedback (反馈)**
   - Alert, Drawer, Message, Modal, Notification, Progress, Result, Skeleton, Spin

Organize frames using Auto Layout. Keep each `batch_design` call to maximum 25 operations.

### Example: Initialize Ant Design Variables

```json
{
  "name": "set_variables",
  "arguments": {
    "filePath": "designs/app.pen",
    "replace": false,
    "variables": {
      "ant-primary": "#1677ff",
      "ant-success": "#52c41a",
      "ant-warning": "#faad14",
      "ant-error": "#ff4d4f",
      "ant-text": "#000000e0",
      "ant-border": "#d9d9d9",
      "ant-font-size-base": "14px",
      "ant-border-radius": "6px"
    }
  }
}
```

## Best Practices

- Verify token values against Ant Design token 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, antd, ant design, 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.

Related Skills

course-designer

261

from partme-ai/full-stack-skills

Design structured courses including syllabi, learning objectives using Bloom's taxonomy, lesson plans, and assessment rubrics. Use when the user asks about course design, needs to create a curriculum, write learning objectives, structure educational modules, or build assessment plans.

tauri-app-system-tray

261

from partme-ai/full-stack-skills

Create and manage system tray icons with menus and click handlers in Tauri v2, handling platform differences. Use when adding a tray icon, building tray menus, toggling window visibility from the tray, or handling macOS/Windows/Linux tray conventions.

tauri-app-file-system

261

from partme-ai/full-stack-skills

Read and write local files using the Tauri v2 file-system plugin with scoped directory access. Use when implementing file read/write operations, configuring safe directory scopes, or building import/export file workflows.

stitch-ui-designer

261

from partme-ai/full-stack-skills

Master orchestrator for end-to-end Stitch UI design and generation. Use when the user asks to design, create, or make a UI screen using Stitch. Coordinates design spec generation, framework contract injection, prompt assembly, and MCP execution (create_project, generate_screen_from_text, get_screen) in a single workflow.

stitch-ui-design-variants

261

from partme-ai/full-stack-skills

Generate alternative Stitch design variant prompts for A/B testing and creative exploration. Use when the user wants multiple style, layout, or content options for a Stitch screen. Takes a base Design Spec or prompt and produces 3 distinct variants (layout, style, or content variations).

stitch-ui-design-spec-vant

261

from partme-ai/full-stack-skills

Vant 4 (Vue 3/Mobile) design spec for Stitch screen generation. Use when the user mentions Vant, vant4, or vant-ui in a Stitch design request. Outputs a hard-constraints prefix with Vant tokens (Primary #1989fa, van-button/van-field/van-nav-bar components, mobile-first 375px) or a CONTRACT_SELECTION_JSON_V1 selector.

stitch-ui-design-spec-uviewpro

261

from partme-ai/full-stack-skills

uView Pro (uni-app/Vue 3) design spec for Stitch screen generation. Use when the user mentions uview-pro, uviewpro, or uview 3.0 in a Stitch design request. Outputs a hard-constraints prefix with uView Pro tokens (Primary #3c9cff, rpx units, u-button/u-form/u-navbar components, script setup) or a CONTRACT_SELECTION_JSON_V1 selector.

stitch-ui-design-spec-uview

261

from partme-ai/full-stack-skills

uView 2.0 (uni-app/Vue 2) design spec for Stitch screen generation. Use when the user mentions uview, uview2, or u-view in a Stitch design request. Do NOT use for uView Pro requests. Outputs a hard-constraints prefix with uView 2 tokens (Primary #3c9cff, u-row/u-col/u-button components) or a CONTRACT_SELECTION_JSON_V1 selector.

stitch-ui-design-spec-layui

261

from partme-ai/full-stack-skills

Layui-Vue design spec for Stitch screen generation. Use when the user mentions Layui, layui-vue, or layui admin in a Stitch design request. Outputs a hard-constraints prefix with Layui tokens (Primary #16baaa, Nav-bg #393D49, layui-btn/input/card components) or a CONTRACT_SELECTION_JSON_V1 selector with assembled prompt.

stitch-ui-design-spec-generator

261

from partme-ai/full-stack-skills

Translate user requirements into a structured Stitch Design Spec JSON covering theme, primaryColor, font, roundness, density, designMode, styleKeywords, and deviceType. Use when starting a new Stitch design task to determine visual direction before prompt assembly. Supports one-shot user requests and PRD documents as input.

stitch-ui-design-spec-element-plus

261

from partme-ai/full-stack-skills

Element Plus design spec for Stitch screen generation. Use when the user mentions Element Plus, element-ui, or el-plus in a Stitch design request. Outputs a hard-constraints prefix with Element Plus tokens (colors, typography, radius, el-* components) or a CONTRACT_SELECTION_JSON_V1 selector with assembled prompt.

stitch-ui-design-spec-bootstrap

261

from partme-ai/full-stack-skills

Bootstrap-Vue (Bootstrap 5/Vue) design spec for Stitch screen generation. Use when the user mentions Bootstrap, bootstrap-vue, bs-vue, or bs5 in a Stitch design request. Outputs a hard-constraints prefix with Bootstrap tokens (Primary #0d6efd, b-container/b-row/b-col/b-button components, mobile-first grid) or a CONTRACT_SELECTION_JSON_V1 selector.