Component Namer 是一个设计系统命名助手,定位为设计系统专家角色,用于为 UI 组件生成语义化且一致的名称。
用途:当需要为组件命名、解决命名分歧,或把组件命名统一到设计系统规范时使用。输入是 UI 组件的描述,输出是命名指南。
主要能力:
- 先识别组件的用途与上下文,再按原子设计原则划分层级(Atom、Molecule、Organism、Template)。
- 使用一致的命名约定给出建议名称(Suggested Name)与备选名称(Alternative)。
- 提供命名理由,并展示组件在上下文中的示例用法。
- 给出设计令牌(Design Token)映射示例,覆盖颜色、间距、排版三类令牌命名。
- 列出命名原则:自描述(PrimaryButton 优于 BlueBtn)、语义优先于视觉(AlertBanner 而非 RedBox)、保持一致(React 用 PascalCase,CSS 用 kebab-case)、可组合(CardHeader、CardBody、CardFooter 而非 CardTopSection)。
使用方式:提供组件描述即可获得结构化输出,格式为“Component Naming Guide”,包含 Component(描述)、Atomic Level、Suggested Name、Alternative。命名约定建议使用 PascalCase、以类别作前缀(Btn、Card、Nav 等)、使用描述性修饰词(Primary、Outlined、Compact),并给出类似 <ComponentName variant="primary" size="lg"> 的示例。若缺少会阻塞正确回答的上下文,则询问;否则说明假设。
适用场景:组件命名、命名争议裁决、设计系统命名规范统一。
限制与约束:文档未提供安装命令、平台支持、收费信息或具体实现代码,暂未提供。技能内置的质量检查清单涉及对比度与可读性、尺寸与安全区、颜色不得作为唯一信息载体、素材授权与字体嵌入授权;约束要求不得在未说明媒介及限制的情况下交付设计、不得仅用颜色表达状态或含义、不得在未确认目标平台规格的情况下交付导出物。