用途:该技能用于在构建 UI 时使用核心组件库与设计系统模式。核心原则是使用核心库组件而非平台原生组件,以保证样式和行为一致,并使用设计令牌而非硬编码值。
主要能力:提供设计令牌体系,包括间距令牌($1=4px、$2=8px、$3=12px、$4=16px、$6=24px、$8=32px)、颜色语义令牌(如 $textPrimary、$textSecondary、$textTertiary、$primary500、$statusError、$statusSuccess)、字体令牌($xs 到 $2xl,对应 12px 至 24px)。提供核心组件:Box(基础布局)、HStack/VStack(水平/垂直弹性布局)、Text(排版)、Button(含 solid、outline、ghost、link 变体及 loading、disabled 状态)、Input(含校验与 error、label)、Card(含 CardHeader、CardBody)。提供屏幕、表单、列表项等布局模式。
使用方式:通过令牌属性传值,例如 <Box padding="$4" marginBottom="$2" />、<Text color="$textPrimary" />、<Text fontSize="$lg" fontWeight="$semibold" />。组件从 components/core 导入,而非 react-native。创建新组件时采用基于令牌的 props,如 padding 类型限定为 '$2' | '$4' | '$6',variant 为 'elevated' | 'outlined' | 'filled'。
适用场景:UI 构建、使用设计令牌、组件库相关工作。
限制与反模式:禁止硬编码数值、颜色和内联样式;避免直接使用平台原生组件。资料未提供安装命令、具体项目配置及除上述内容外的扩展说明。