用途:在构建 UI、使用设计令牌(design tokens)或对接核心组件库时,提供核心组件库与设计系统模式,确保样式和行为一致。
主要能力:
- 设计系统概述:使用核心库组件而非平台原生组件,保证一致性。
- 设计令牌:间距、颜色、字体等使用令牌而非硬编码。间距如 $1=4px、$2=8px、$3=12px、$4=16px、$6=24px、$8=32px;颜色使用语义令牌,如 $textPrimary、$textSecondary、$textTertiary、$primary500、$statusError、$statusSuccess;字体大小如 $xs=12px、$sm=14px、$md=16px、$lg=18px、$xl=20px、$2xl=24px。
- 核心组件:Box(带令牌的基础布局)、HStack/VStack(水平与垂直 flex 布局)、Text(排版)、Button(含 solid、outline、ghost、link 变体及 isLoading、isDisabled)、Input(带校验与 error、label)、Card(内容容器,含 CardHeader、CardBody)。
- 布局模式:Screen、表单、列表项等模式。
使用方式:以令牌属性传值,例如 <Box padding="$4" marginBottom="$2" />、<Text color="$textPrimary" />、<Text fontSize="$lg" fontWeight="$semibold" />;从 components/core 导入 Box、Text 等,而非 react-native 原生组件;组件 props 使用令牌联合类型(如 padding?: '$2' | '$4' | '$6')。
反模式:硬编码数值、使用原生组件、内联样式。
与其他技能集成:react-ui-patterns 用于 UI 状态,testing-patterns 用于测试中 mock 核心组件,storybook 用于记录组件变体。
限制:仅在上游来源与本地项目上下文明确匹配时使用;应用变更前需验证命令、生成代码、依赖、凭据与外部服务行为;示例不能替代针对具体环境的测试、安全审查,破坏性或高成本操作需用户批准。具体类型、版本与错误处理细节暂未提供。