用途:在设计系统或 UI 库定义、审查、纠正正式名称时使用,尤其当出现 Container、Wrapper、Block、Text 等含义模糊的术语,或需要区分 Link 与 Button、Navigation 与 Menu、Pattern、Component 与 Template 时。核心原则是命名不与既有 Web 标准冲突,不按外观而按职责命名,不混淆结构、行为、复用单元、页面渲染定义与主题,不用过宽的统称作正式名称,让名称体现设计边界与复用条件。
主要能力与术语基准:Element 指 HTML 元素本身;Section 指页内语义或结构分区,不用作内容宽度包装;Container 仅指应用 CSS container 相关属性的元素,与 section 等关联对象组合称呼;Inner 负责内容宽度控制或居中,Outer 负责外部间距与周边关系,二者不单独作万能包装名;Gutter 指内容边缘与视口边缘之间的行内间距,需令牌化,列间或元素间距不称 Gutter;Gap 指 Flex、Grid、Multi-column 中子元素间距。Columns 专指 CSS Multi-column Layout,Flex 列布局称 Flex Columns,Grid 指 CSS Grid Layout,Row 不作为独立元素名。Paragraph 为单段落,Rich Text 为可含多种内联装饰的编辑区域。用 <a> 的称 Link,用 <button> 或 input 提交按钮的称 Button,仅外观像按钮不命名 Button。站内或应用内跳转称 Navigation,命令执行或操作选择称 Menu。Template 为页面级渲染定义,Pattern 为静态可复用片段,Component 为单一来源管理且带可替换输入点的复用单元,Dynamic Element 为行为或状态驱动 UI,Theme 为共享架构上的外观与令牌差异。
使用方式:先判断目标属于上述哪一术语,再用推荐对应表替换不推荐词。输出时若否定既有名称,需简要说明风险(与 Web 标准冲突、以外观为起点、职责含糊、设计边界不清);将 Container 用作内容宽度包装时优先替换为 Inner;对 Wrapper、Block、Text 等模糊词,拆解为职责更明确的词;在 Pattern、Component、Template 间犹豫时,按是否有动态数据、输入点、单一来源管理、是否页面级应用来区分。文档需定义每个正式术语指什么、不指什么、用在哪里;UI 标签与正式名称尽量一致;术语增改应视为兼容性变更。
适用场景与限制:适用于设计系统命名、评审评语、术语表、实现指南、Figma 与 CMS 名称统一。若信息不足,需先确认实体对应哪个 HTML 元素、是否含状态变化或 JavaScript、是否由单一来源复用、是页面级还是局部 UI。该技能未提供具体安装命令、代码示例或价格信息,暂未提供。