Initialize uView Pro. design system components in Pencil variables and component overview.
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.
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.
This skill outputs a PENCIL_PLAN. The Agent then calls Pencil MCP tools in order: open_document, set_variables, batch_design, optionally get_screenshot.
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: #ecf5ffError Colors (Red)
u-type-error: #fa3534u-type-error-dark: #dd6161u-type-error-disabled: #fab6b6u-type-error-light: #fef0f0Warning Colors (Yellow)
u-type-warning: #ff9900u-type-warning-dark: #f29100u-type-warning-disabled: #fcbd71u-type-warning-light: #fdf6ecSuccess Colors (Green)
u-type-success: #19be6bu-type-success-dark: #18b566u-type-success-disabled: #71d5a1u-type-success-light: #dbf1e1Info Colors (Gray)
u-type-info: #909399u-type-info-dark: #82848au-type-info-disabled: #c8c9ccu-type-info-light: #f4f4f5Text 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: #e4e7edFont 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: 9999pxUse mcp__pencil__batch_design to create a "Components Overview" frame containing the following sections (Frames) based on uView Pro documentation:
Organize component frames using Auto Layout. Keep each batch_design call to maximum 25 operations; split by logical sections if needed.
set_variables with replace: false to merge into existing variables unless a full reset is requested.pencil, uviewpro, uview pro, design system, init, variables, components
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.