---

name: ui-component description: "生成遵循 StyleSeed Toss 规范的新 UI 组件，包括结构、设计令牌、无障碍性和组件工程学。" category: design risk: safe source: community source_repo: bitjaru/styleseed source_type: community date_added: "2026-04-08" author: bitjaru tags: [ui, components, design-system, frontend, styleseed] tools: [claude, cursor, codex, gemini]

UI 组件

概述

作为 StyleSeed 的一部分，此技能生成遵循 Toss seed 设计语言的组件，而不是即兴创建临时标记和样式。它强调语义化令牌、可预测的类型定义、可复用的变体和移动端友好的无障碍默认设置。

何时使用

• 当你需要在基于 StyleSeed 的项目中创建新的 UI 基础组件或组合组件时
• 当你希望组件匹配现有的 Toss seed 规范时
• 当组件应该是可复用的、有类型定义的、基于设计令牌驱动的时
• 当 AI 可能会自行发明间距、颜色或交互模式时

工作原理

步骤 1：读取本地设计上下文

在生成代码之前，检查 seed 的真实来源：

• CLAUDE.md 了解规范
• css/theme.css 了解语义化令牌
• 至少查看 components/ui/ 中的一个代表性组件

如果用户已有更好的本地示例，优先遵循本地代码库而非通用模板。

步骤 2：选择正确的存放位置

将输出放在它应该在的位置：

• src/components/ui/ 用于基础组件和底层构建块
• src/components/patterns/ 用于组合区块或多部分模式

如果现有基础组件可以安全扩展，不要创建新的。

步骤 3：遵循结构规则

除非宿主项目强烈反对，否则使用以下默认设置：

• 使用函数声明而非 const 组件
• React.ComponentProps<> 或等效的原生属性类型定义
• 支持 className 透传
• cn() 或项目标准的类名合并工具
• data-slot 用于组件标识
• 仅在确实需要变体时使用 CVA 或等效方案

步骤 4：仅使用语义化令牌

如果设计系统有对应的令牌，不要硬编码视觉值。

推荐示例：

• bg-card
• text-foreground
• text-muted-foreground
• border-border
• shadow-[var(--shadow-card)]

步骤 5：保持 StyleSeed 排版和间距

• 使用 seed 已定义的比例尺
• 优先使用 6px 的倍数
• 在支持的地方使用逻辑间距工具类
• 保持标题文本紧凑、正文文本可读、说明文本克制

步骤 6：内置无障碍性

• 交互元素的触摸目标至少为 44x44px
• 键盘焦点必须可见
• 在适当的地方透传 aria-* 属性
• 对非必要动效尊重减少动画偏好设置

输出

提供：

1. 生成的组件
2. 目标路径
3. 所需的导入或依赖
4. 关于变体、令牌或后续集成工作的说明

最佳实践

• 在发明新组件之前先从现有基础组件组合
• 保持组件 API 小巧且可预测
• 优先使用语义化布局类而非任意值
• 导出命名组件，除非宿主项目一致使用其他标准

额外资源

• StyleSeed 仓库
• 源技能

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必需的输入、权限、安全边界或成功标准，请停下来寻求澄清。