Skill

pencil-ui-design-system-uviewpro

Initializes uView Pro design tokens for colors, typography, fonts, and borders plus component overview frames for Button, Form, Tabs, Navbar in Pencil .pen files. Use with Pencil and uView Pro mentions.

Vue

Css

design

frontend

Install

npx claudepluginhub partme-ai/full-stack-skills --plugin t2ui-skills

Tool Access

This skill uses the workspace's default tool permissions.

Preview

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

Supporting Assets

LICENSE.txtreferences/components.mdreferences/contract.mdreferences/examples.mdreferences/official.md

SKILL.md

Similar Skills

using-git-worktrees

Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.

superpowers

168.3k

subagent-driven-development

3 files

Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.

superpowers

168.3k

dispatching-parallel-agents

Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.

superpowers

168.3k

Stats

Stars328

Forks62

Last CommitMar 25, 2026

Actions

View Source View Plugin View on GitHub View README

uView Pro Design System Initializer

Constraint: Only use this skill when the user explicitly mentions "Pencil" and "uView Pro" (or "uviewpro") or when orchestrating a Pencil design system initialization task.

When to use this skill

Use this skill when:

The user wants to initialize uView Pro tokens (primary, error, warning, success colors) in a Pencil .pen file
The user needs a component overview frame for uView Pro components in Pencil
The user mentions "Pencil" together with "uView Pro", "uviewpro", or uView Pro-specific components (Button, Form, Tabs, Navbar)
An orchestrator skill (pencil-ui-designer) routes a uView Pro 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 the following uView Pro design tokens. Follow .pen file schema; variable names are arbitrary strings.

Primary Colors (Blue)

u-type-primary: #2979ff
u-type-primary-dark: #2b85e4
u-type-primary-disabled: #a0cfff
u-type-primary-light: #ecf5ff

Error Colors (Red)

u-type-error: #fa3534
u-type-error-dark: #dd6161
u-type-error-disabled: #fab6b6
u-type-error-light: #fef0f0

Warning Colors (Yellow)

u-type-warning: #ff9900
u-type-warning-dark: #f29100
u-type-warning-disabled: #fcbd71
u-type-warning-light: #fdf6ec

Success Colors (Green)

u-type-success: #19be6b
u-type-success-dark: #18b566
u-type-success-disabled: #71d5a1
u-type-success-light: #dbf1e1

Info Colors (Gray)

u-type-info: #909399
u-type-info-dark: #82848a
u-type-info-disabled: #c8c9cc
u-type-info-light: #f4f4f5

Text Colors

u-main-color: #303133 (Main Text)
u-content-color: #606266 (Content Text)
u-tips-color: #909399 (Tips/Secondary)
u-light-color: #c0c4cc (Placeholder)

Background & Border

u-bg-color: #f3f4f6
u-border-color: #e4e7ed

Font Sizes (px)

u-font-xs: 12px (24rpx)
u-font-sm: 13px (26rpx)
u-font-md: 14px (28rpx)
u-font-lg: 15px (30rpx)
u-font-xl: 16px (32rpx)

Border Radius

u-radius: 4px (8rpx)
u-radius-lg: 8px (16rpx)
u-radius-circle: 9999px

Step 2: Create Component Overview Structure (batch_design)

Use mcp__pencil__batch_design to create a "Components Overview" frame containing the following sections (Frames) based on uView Pro documentation:

Basic Components (基础组件)
- Color, Icon, Image, Button, Layout, Cell, Badge, Tag, Text, Fab, Transition, TodoRootPortal, ConfigProvider
Form Components (表单组件)
- Form, Input, Textarea, Calendar, Select, Keyboard, Picker, Rate, Search, NumberBox, Upload, VerificationCode, Field, Checkbox, Radio, Switch, Slider
Data Components (数据组件)
- CircleProgress, LineProgress, Table, CountDown, CountTo
Feedback Components (反馈组件)
- ActionSheet, AlertTips, Toast, NoticeBar, TopTips, Collapse, Popup, SwipeAction, Modal, FullScreen
Layout Components (布局组件)
- Line, Card, Mask, NoNetwork, Grid, Swiper, TimeLine, Skeleton, Sticky, Waterfall, Divider
Navigation Components (导航组件)
- Dropdown, Tabbar, BackTop, Navbar, Tabs, TabsSwiper, Subsection, IndexList, Steps, Empty, Link, Section, Pagination
Other Components (其他组件)
- MessageInput, Loadmore, TodoReadMore, LazyLoad, Gap, Avatar, Loading, LoadingPopup, safeAreaInset

Organize component frames using Auto Layout. Keep each batch_design call to maximum 25 operations; split by logical sections if needed.

Example: Initialize uView Pro Variables

{
  "name": "set_variables",
  "arguments": {
    "filePath": "designs/app.pen",
    "replace": false,
    "variables": {
      "u-type-primary": "#2979ff",
      "u-type-error": "#fa3534",
      "u-type-warning": "#ff9900",
      "u-type-success": "#19be6b",
      "u-main-color": "#303133",
      "u-bg-color": "#f3f4f6",
      "u-border-color": "#e4e7ed",
      "u-font-md": "14px"
    }
  }
}

Best Practices

Always verify color values against the latest uView Pro documentation if unsure.
Use set_variables with replace: false to merge into existing variables unless a full reset is requested.
Organize component frames using Auto Layout for easy expansion.
Keep each batch_design call to maximum 25 operations; split by category if needed.

Keywords

pencil, uviewpro, uview pro, 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 or usage.
references/components.md – Component specifications.