用途：在 StyleSeed 项目里生成一个新的 UI 组件，并遵循该项目的设计约定。
适用时机：需要新建组件、且任务与上游来源和本地项目上下文明确匹配时。不适用：整页脚手架（用 /ss-page）；多组件组合模式（用 /ss-pattern）；微调已有组件（直接改文件）；非 StyleSeed 项目（没有 components/ui/ 目录或未使用 Tailwind v4）。
必要准备：先读取 CLAUDE.md 了解组件约定，读取 css/theme.css 获取设计令牌，读取 components/ui/button.tsx 作为参考模式。
主要约定：使用函数声明而非 const；添加 data-slot="component-name"；className 合并统一用 @/components/ui/utils 的 cn()；用 React.ComponentProps<> 标注 props；始终支持 className 覆盖；有变体时使用 CVA；使用语义色令牌（如 bg-card、text-foreground），不要内联十六进制色值。设计令牌方面，颜色使用 text-foreground、bg-card、text-brand、text-muted-foreground、border-border；阴影使用 shadow-[var(--shadow-card)]、shadow-[var(--shadow-elevated)]；圆角使用 rounded-md、rounded-lg、rounded-2xl；间距为 6px 倍数（p-1.5、p-3、p-6）；动效使用 duration-[var(--duration-fast)]、ease-[var(--ease-default)]。排版上，Display 36-48px 用 leading-none tracking-[-0.02em]，Heading 18-24px 用 leading-snug tracking-[-0.01em]，Body 14-17px 用 leading-normal，Caption 大写 10-13px 用 tracking-[0.05em]；尺寸用 size-* 代替 w-/h-，用 ms-/me- 代替 ml-/mr-。无障碍要求：最小触摸目标 44x44px（min-h-11 min-w-11）；支持 aria-* 透传；键盘焦点用 focus-visible:ring-2 focus-visible:ring-ring；动画尊重 prefers-reduced-motion。
输出与放置：组件以命名导出（非默认导出）。文件位置：基础可复用组件放 src/components/ui/，组合模式放 src/components/patterns/。
限制：仅在任务明确匹配上游来源和本地项目上下文时使用。应用改动前需自行验证命令、生成代码、依赖、凭据及外部服务行为。示例不能替代针对具体环境的测试、安全审查，以及破坏性或高成本操作所需的用户批准。查询与调用相关细节、计费等信息暂未提供。