用途
imprint 用于解决 AI 构建界面时组件彼此孤立、视觉不一致的问题。由于智能体不会记住之前构建过的组件,间距、颜色、圆角等容易逐渐漂移,导致应用看起来像由多个品味不同的人拼凑而成。该技能通过提取并记录关键视觉模式,让后续每个组件都能与已有组件保持一致。
主要能力
- 在构建任意 UI 组件后,读取该组件代码,提取影响视觉一致性的类与值。
- 提取内容包括:背景(bg- 类)、边框(颜色、宽度、样式)、圆角(rounded- 类)、文字颜色(主文字、次要文字、弱化文字)、文字大小与字重(标题、正文、标签、说明)、间距(内边距、元素间距)、交互状态(hover、focus、active)、阴影、强调色或品牌色用法。
- 不提取:宽高、flex/grid 布局、定位(absolute、relative、z-index)、动画与过渡时长(除非值得强制统一)、响应式断点变体(只记录基础模式)。
- 将提取结果追加写入 ui-registry.md;若不存在则创建,若该组件类型已有条目则更新而非重复。
- 写入后向开发者确认捕获内容,并标记提取过程中发现的不一致或异常。
- 提供审计模式,扫描整个代码库,找出视觉属性冲突、硬编码值,并建立统一基线。
使用方式
构建任意 UI 组件后运行:
/imprint
指定目标文件:
/imprint [filepath]
审计已有代码库:
/imprint audit
若未提供文件路径,技能会自动识别最近创建或修改的组件文件并从中捕获。若无法确定捕获哪些文件,会询问开发者。
常规流程
- 找到刚构建的内容:有文件路径则直接读取;没有则识别本会话中最近创建或修改的组件文件并读取。
- 提取影响一致性的类与值。
- 写入 ui-registry.md,追加新条目,不覆盖已有条目;同类型条目则更新。
- 向开发者确认捕获内容,并标记异常。
条目格式包含组件名、文件路径、最后更新日期,以及背景、边框、圆角、主文字、次要文字、间距、hover 状态、阴影、强调色用法等属性表格,并附模式说明。
审计模式流程
- 扫描所有 UI 组件文件,建立当前视觉模式全貌。
- 识别冲突:按圆角、背景色、文字颜色、间距、边框颜色、交互状态等列出所有变体并给出标准化建议;列出硬编码的十六进制值、原始颜色类或非 token 值及其文件与行号;给出推荐基线。
- 等待开发者确认,不直接修复,也不更新 ui-registry.md。
- 开发者确认后,将基线写入 ui-registry.md,并标注建立日期与来源。
- 列出偏离基线的组件及修复建议。
适用场景
- 每次构建 UI 组件后,用于持续积累一致性参考。
- 项目 UI 已存在但一致性不确定时。
- 多个会话未运行 /imprint 后。
- 视觉上感觉不对但难以定位原因时。
- 在已有项目上首次建立 ui-registry.md 之前。
限制
- 不提取宽高、布局、定位、动画时长和响应式断点变体,这些被视为上下文相关或结构性内容。
- 审计模式不会自动修复问题,需开发者确认基线后才写入。
- 注册表需要持续更新才可靠;有时更新有时不更新会导致不可靠。
- 关于收费、价格、平台支持等具体信息,资料中暂未提供。