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: #2979ffu-type-primary-dark: #2b85e4u-type-primary-disabled: #a0cfffu-type-primary-light: #ecf5ff
Error Colors (Red)
u-type-error: #fa3534u-type-error-dark: #dd6161u-type-error-disabled: #fab6b6u-type-error-light: #fef0f0
Warning Colors (Yellow)
u-type-warning: #ff9900u-type-warning-dark: #f29100u-type-warning-disabled: #fcbd71u-type-warning-light: #fdf6ec
Success Colors (Green)
u-type-success: #19be6bu-type-success-dark: #18b566u-type-success-disabled: #71d5a1u-type-success-light: #dbf1e1
Info Colors (Gray)
u-type-info: #909399u-type-info-dark: #82848au-type-info-disabled: #c8c9ccu-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: #f3f4f6u-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.
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.
能力边界
✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时
⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估
❌ 不适用场景
常见陷阱 (Gotchas)
- 版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
- 配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
- 环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
- 依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
- 性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题
1---2name: pencil-ui-design-system-uviewpro3description: Initialize uView Pro. design system components in Pencil variables and component overview.4license: Complete terms in LICENSE.txt5---678# uView Pro Design System Initializer910**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.1112## When to use this skill1314Use 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.1516## How to use this skill1718This skill outputs a PENCIL_PLAN. The Agent then calls Pencil MCP tools in order: `open_document`, `set_variables`, `batch_design`, optionally `get_screenshot`.1920### Step 1: Initialize Variables (set_variables)2122Use `mcp__pencil__set_variables` to register the following uView Pro design tokens. Follow .pen file schema; variable names are arbitrary strings.2324**Primary Colors (Blue)**25- `u-type-primary`: `#2979ff`26- `u-type-primary-dark`: `#2b85e4`27- `u-type-primary-disabled`: `#a0cfff`28- `u-type-primary-light`: `#ecf5ff`2930**Error Colors (Red)**31- `u-type-error`: `#fa3534`32- `u-type-error-dark`: `#dd6161`33- `u-type-error-disabled`: `#fab6b6`34- `u-type-error-light`: `#fef0f0`3536**Warning Colors (Yellow)**37- `u-type-warning`: `#ff9900`38- `u-type-warning-dark`: `#f29100`39- `u-type-warning-disabled`: `#fcbd71`40- `u-type-warning-light`: `#fdf6ec`4142**Success Colors (Green)**43- `u-type-success`: `#19be6b`44- `u-type-success-dark`: `#18b566`45- `u-type-success-disabled`: `#71d5a1`46- `u-type-success-light`: `#dbf1e1`4748**Info Colors (Gray)**49- `u-type-info`: `#909399`50- `u-type-info-dark`: `#82848a`51- `u-type-info-disabled`: `#c8c9cc`52- `u-type-info-light`: `#f4f4f5`5354**Text Colors**55- `u-main-color`: `#303133` (Main Text)56- `u-content-color`: `#606266` (Content Text)57- `u-tips-color`: `#909399` (Tips/Secondary)58- `u-light-color`: `#c0c4cc` (Placeholder)5960**Background & Border**61- `u-bg-color`: `#f3f4f6`62- `u-border-color`: `#e4e7ed`6364**Font Sizes (px)**65- `u-font-xs`: `12px` (24rpx)66- `u-font-sm`: `13px` (26rpx)67- `u-font-md`: `14px` (28rpx)68- `u-font-lg`: `15px` (30rpx)69- `u-font-xl`: `16px` (32rpx)7071**Border Radius**72- `u-radius`: `4px` (8rpx)73- `u-radius-lg`: `8px` (16rpx)74- `u-radius-circle`: `9999px`7576### Step 2: Create Component Overview Structure (batch_design)7778Use `mcp__pencil__batch_design` to create a "Components Overview" frame containing the following sections (Frames) based on uView Pro documentation:79801. **Basic Components (基础组件)**81 - Color, Icon, Image, Button, Layout, Cell, Badge, Tag, Text, Fab, Transition, TodoRootPortal, ConfigProvider822. **Form Components (表单组件)**83 - Form, Input, Textarea, Calendar, Select, Keyboard, Picker, Rate, Search, NumberBox, Upload, VerificationCode, Field, Checkbox, Radio, Switch, Slider843. **Data Components (数据组件)**85 - CircleProgress, LineProgress, Table, CountDown, CountTo864. **Feedback Components (反馈组件)**87 - ActionSheet, AlertTips, Toast, NoticeBar, TopTips, Collapse, Popup, SwipeAction, Modal, FullScreen885. **Layout Components (布局组件)**89 - Line, Card, Mask, NoNetwork, Grid, Swiper, TimeLine, Skeleton, Sticky, Waterfall, Divider906. **Navigation Components (导航组件)**91 - Dropdown, Tabbar, BackTop, Navbar, Tabs, TabsSwiper, Subsection, IndexList, Steps, Empty, Link, Section, Pagination927. **Other Components (其他组件)**93 - MessageInput, Loadmore, TodoReadMore, LazyLoad, Gap, Avatar, Loading, LoadingPopup, safeAreaInset9495Organize component frames using Auto Layout. Keep each `batch_design` call to maximum 25 operations; split by logical sections if needed.9697## Best Practices9899- Always verify color values against the latest uView Pro documentation if unsure.100- Use `set_variables` with `replace: false` to merge into existing variables unless a full reset is requested.101- Organize component frames using Auto Layout for easy expansion.102103## Keywords104105pencil, uviewpro, uview pro, design system, init, variables, components106107## References108109- `references/contract.md` – Design tokens and component naming.110- `references/official.md` – Link to official documentation.111- `references/examples.md` – Example PENCIL_PLAN or usage.112- `references/components.md` – Component specifications.113114## 能力边界115116### ✅ 适用场景117- 当你需要使用此技能对应的技术栈时118- 当项目需要遵循最佳实践时119- 当需要快速上手或深入理解核心概念时120121### ⚠️ 需要注意122- 复杂业务逻辑需要结合具体场景调整123- 性能优化需要根据实际数据量评估124125### ❌ 不适用场景126- 不相关的技术栈或框架127- 需要完全自定义的特殊场景128129## 常见陷阱 (Gotchas)1301311. **版本兼容性**：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异1322. **配置文件格式**：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查1333. **环境变量**：确保所有必要的环境变量已正确设置，敏感信息不要硬编码1344. **依赖冲突**：多版本共存时注意依赖冲突，使用 lock 文件锁定版本1355. **性能陷阱**：大数据量场景下注意性能优化，避免 N+1 查询等常见问题
full-stack-skills