Agent Skills
返回列表
💻

核心组件与设计令牌

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @org-02qudk26/core-components。

技能介绍

问题背景

跨屏、跨端界面里，若直接堆原生控件并随手写 margin: 13px、#333 这类数值，样式会漂移、暗色模式难对齐，组件行为也不统一。维护成本往往落在「找哪个页面写死了像素」上，而不是业务逻辑。

技能在做什么

本技能要求 始终走核心库组件，并用 设计令牌 替代硬编码：

  • 间距：$1～$8 等阶梯（如 $4 = 16px）
  • 色彩：语义化如 $textPrimary、$primary500、$statusError / $statusSuccess
  • 排版：$xs～$2xl 字号阶梯

组件侧覆盖常见 UI 面：

  • 布局：Box；HStack / VStack 做水平/垂直弹性排布
  • 展示与交互：带变体的 Button（solid / outline / ghost / link）、支持令牌的 Text、Input（含校验）、Card 容器
  • 模式：屏幕布局、表单布局、列表项布局；新建组件时用基于令牌的 props，并避免文档中的反模式

可与 react-ui-patterns（UI 状态）、testing-patterns（测试里 mock 核心组件）、storybook（记录变体）配合使用。

适用与注意

适合已在该设计系统生态内写界面的场景；令牌表与变体表是约束，不是可选装饰。未在资料中展开的平台差异、主题切换实现细节需结合你们自己的核心库文档；不要为图省事回退原生控件或内联 magic number。

使用场景

  • 新做设置页表单时，用 Input 与间距令牌 `$4`/`$6` 排字段，避免各屏 margin 不一致
  • 列表页每条信息用 Card + Text 语义色 `$textSecondary`，并按列表项布局模式对齐结构
  • 主按钮用 Button `solid`、次要操作用 `outline`，统一四类变体而不是各写一套样式
  • 单测里按 testing-patterns 模拟 Box、Button，避免依赖真实渲染链路

适合人员

  • 负责多端同一套视觉的前端，需要把原生控件换成核心库 Box/Stack/Text
  • 做业务表单的同学，要在校验 Input 上统一 `$statusError` 等状态色而非 hex
  • 维护组件文档的工程师，要在 Storybook 里记录 Button 各 variant 与令牌用法
  • 写 React 界面单测的开发者，需要稳定 mock 核心组件而不是测平台原生控件