Paperclip 设计指南技能：让前端实现保持视觉一致

技能简介

Paperclip 设计指南技能（design-guide）是面向具体项目的前端一致性指南。AI 辅助编码时，组件、令牌与布局常常各写各的，久而久之界面就"百花齐放"。该技能为 Claude、Codex、Claude Code 等工具提供一份共享的设计约定：明确可选用的 UI 原语、自定义组件、布局、表单、工具类与 Hooks，规定排版、圆角、阴影、颜色、状态与优先级的书写规范，并说明何时该抽成可复用组件、何时直接用 Tailwind 类名。它本质上是把团队的界面规范写进 AI 的工作上下文，让每次生成都对齐既有风格。

核心能力

1. 设计原则与栈约定：记录 Paperclip 的设计原则、React 技术栈选择与 Tailwind 令牌用法。
2. 视觉约定：定义排版、圆角、阴影、颜色、状态与优先级等统一规范。
3. 组件取舍规则：说明何时创建可复用组件、何时直接使用 Tailwind 类。
4. 组合模式库：提供行、列表、属性面板、指标、进度条、评论、表格与日志等组合模式。
5. 布局与命名规范：描述应用布局、设计指南页规则、文件命名约定与组件索引维护方式。
6. 原语清单：列出可用的 UI 原语、自定义组件、布局组件、表单组件、工具类与 Hooks。

安装配置

1. 确认项目采用 React、Tailwind CSS、shadcn/ui 与 Radix 这一技术栈，并具备 Node.js 环境。
2. 安装命令：npx skillstore add getpaperclipai/design-guide。
3. 兼容 Claude、Codex、Claude Code 等 AI 编程工具，安装后即可调用。
4. 采用 MIT 许可；技能不自动运行测试、也不检查线上应用，规范落地仍需人工遵守。

使用步骤

1. 查阅指南：在动手前先阅读设计原则与可用原语清单，明确可选范围。
2. 选择令牌与变体：为新组件挑选语义化令牌、排版、变体、文件名与状态。
3. 优先复用：先用现有原语与自定义组合体，确认无法复用后再新建组件。
4. 对齐布局：按侧边栏、面包屑、主内容、属性面板等既有布局模式组织页面。
5. 审计漂移：对照指南检查 UI 改动，识别重复模式、缺失文档、不一致令牌与薄弱状态。
6. 同步文档：当可复用 UI 发生变化时，同步更新设计指南页与组件索引。

适用场景

• 新建组件：依据指南为新的 Paperclip 组件选择令牌、变体、文件名与状态并补充示例。
• 审查界面一致性：把某个页面或功能对照排版、布局、状态、优先级与交互模式做检查。
• 记录组件变更：当可复用组件扩展或调整时，同步维护组件索引与指南页。
• 控制设计漂移：在复杂 UI 改动中识别重复模式、缺失文档与组件复用机会。

适用人群

Paperclip 项目的前端工程师、界面开发与设计工程协作者，以及使用 AI 编程工具参与该项目开发的成员。

工作原理

技能以项目专属的设计约定为知识底座，不执行测试、不检查线上应用、也不自动强制执行规则。它假定开发者严格遵循已有的技术栈（React、Tailwind CSS、shadcn/ui、Radix）与组合习惯，例如不直接改写 shadcn/ui 原语、不硬编码原始颜色或一次性状态样式。技能的组件清单需要作者主动维护，否则可能过期；对于更广泛的前端质量与 Web 最佳实践评审，则需配合其他技能完成。其核心价值是把团队规范固化进 AI 上下文，减少"生成即偏离"的情况。

官方链接

• 技能主页：https://skillstore.io/skills/getpaperclipai-design-guide
• 开源仓库：https://github.com/getpaperclipai/paperclip/tree/master/.claude/skills/design-guide