core-components_设计多媒体 skill-PHP中文网

首页专区 Skill 文章专题 AI工具学习编程手册

updream 一键生成高质量推广成片 Seko AI短剧一键生成成片 Laper 剧本策划到成片协作剧云中文短剧剧本制作平台

PHP MySQL jquery HTML CSS

core-components

Polar Sponsor

爱发电赞助

.NET 9.0

立即下载

核心组件库和设计系统模式。在构建UI、使用设计令牌或使用组件库时使用。

设计系统概览

功能概述

设计系统概览是一项面向实际任务的技能，主要用于使用核心库中的组件，而不是原生平台组件；这可以确保一致的样式和行为；

核心要点

切勿硬编码值；
始终使用设计令牌；
Token；

使用与执行

Value；Semantic Token；Use For；$textPrimary；$textSecondary；$textTertiary；禁用/提示文本；

结果检查与注意事项

$primary500。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。

核心组件

设计系统概览

使用核心库中的组件，而不是原生平台组件。这可以确保一致的样式和行为。

设计令牌

切勿硬编码值。始终使用设计令牌。

间距令牌

// CORRECT - Use tokens


// WRONG - Hard-coded values

Token	Value
`$1`	4px
`$2`	8px
`$3`	12px
`$4`	16px
`$6`	24px
`$8`	32px

色彩令牌

// CORRECT - Semantic tokens



// WRONG - Hard-coded colors

Semantic Token	Use For
`$textPrimary`	主要文本
`$textSecondary`	辅助文本
`$textTertiary`	禁用/提示文本
`$primary500`	品牌/强调色
`$statusError`	错误状态
`$statusSuccess`	成功状态

排版令牌

Token	Size
`$xs`	12px
`$sm`	14px
`$md`	16px
`$lg`	18px
`$xl`	20px
`$2xl`	24px

核心组件

Box

支持令牌的基础布局组件：


  {children}

HStack / VStack

水平和垂直弹性布局：


  
  Username



  Title
  Content

Text

支持令牌的排版：


  Hello World

Button

带有变体的交互式按钮：

Variant	Use For
`solid`	主要操作
`outline`	次要操作
`ghost`	三级/微妙操作
`link`	内联操作

Input

带验证的表单输入：

Card

内容容器：


  
    Card Title
  
  
    Card content

布局模式

屏幕布局

const MyScreen = () => (
  
    
    
      {/* Content */}
    
  
);

表单布局

列表项布局


  
  
    {title}
    {subtitle}

反模式

// WRONG - Hard-coded values


// CORRECT - Design tokens



// WRONG - Raw platform components
import { View, Text } from 'react-native';

// CORRECT - Core components
import { Box, Text } from 'components/core';


// WRONG - Inline styles


// CORRECT - Token props

组件属性模式

创建组件时，使用基于令牌的属性：

interface CardProps {
  padding?: '$2' | '$4' | '$6';
  variant?: 'elevated' | 'outlined' | 'filled';
  children: React.ReactNode;
}

const Card = ({ padding = '$4', variant = 'elevated', children }: CardProps) => (
  
    {children}
  
);