pencil-ui-design-system-uviewpro

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 you need to initialize a new design system based on uView Pro specifications, specifically to set up the global color palette and create the initial component library frames in a .pen file.

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:

1. Basic Components (基础组件)
   • Color, Icon, Image, Button, Layout, Cell, Badge, Tag, Text, Fab, Transition, TodoRootPortal, ConfigProvider
2. Form Components (表单组件)
   • Form, Input, Textarea, Calendar, Select, Keyboard, Picker, Rate, Search, NumberBox, Upload, VerificationCode, Field, Checkbox, Radio, Switch, Slider
3. Data Components (数据组件)
   • CircleProgress, LineProgress, Table, CountDown, CountTo
4. Feedback Components (反馈组件)
   • ActionSheet, AlertTips, Toast, NoticeBar, TopTips, Collapse, Popup, SwipeAction, Modal, FullScreen
5. Layout Components (布局组件)
   • Line, Card, Mask, NoNetwork, Grid, Swiper, TimeLine, Skeleton, Sticky, Waterfall, Divider
6. Navigation Components (导航组件)
   • Dropdown, Tabbar, BackTop, Navbar, Tabs, TabsSwiper, Subsection, IndexList, Steps, Empty, Link, Section, Pagination
7. 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.

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.

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.