安装与使用
让助手分析现有项目，了解用户、任务与设计偏好，再把这些要求写成供后续开发复用的设计 Skill。
安装生成器
准备 Node.js 22.20 或更新版本，在项目目录运行：
npx skills add ojaccoder/project-design-skill-builder按提示选择编程助手。默认安装到当前项目；需要跨项目使用时，在命令末尾加 -g。如果暂未识别，重新开启项目会话。
也可以下载 ZIP，将整个 Skill 文件夹交给助手安装。保留 references 目录，已有同名 Skill 时先检查版本。
先生成项目专属 Skill
在编程助手中打开项目，发送：
使用 project-design-skill-builder 分析这个项目。 先问我影响设计的关键背景问题，再生成一套项目专属的设计 Skill。 重点去掉模板感和多余文案，明确图片与交互动效怎么用。
它先检查现有代码、组件和素材，再询问缺失的信息。你可以补充参考网站、不喜欢的页面，以及哪些业务内容必须保留。已经回答过的问题不重复问。
你会得到什么
一份项目专属 SKILL.md，以及按需要生成的参考文档：
- 项目背景：谁在用、核心任务、业务与设备约束。
- 视觉和文案：布局层级、颜色、字体、间距；标题说用途，按钮说动作，状态说结果。
- 图片和动效：主题、构图、触发、反馈、时长与降级方式。
- 验收：桌面与手机截图、键盘操作、状态反馈，需要时补充录屏。
文案规则会帮助区分必要信息与重复说明。操作名称、错误原因和重要限制仍应保留。
再按规则改页面
按刚生成的项目设计 Skill 改造官网。 把图片和交互动效实际用起来，提供桌面、手机截图和交互录屏。
后续新增页面继续沿用同一份 Skill。产品目标或设计方向改变时，同步更新规则。
图片与动效怎么来
生成的规范会说明图片用途和动效行为。生图使用助手可用的图片模型；动效优先使用项目现有依赖或浏览器原生 API。
本站表单只是本地模板演示，不读取仓库、不调用模型。完整分析和生成在编程助手中进行。环境缺少相关能力时，助手应说明限制。
检查更新
npx skills check npx skills update
check 检查已安装 Skill，update 按 CLI 提示更新。保留自己修改过的项目专属规则，避免把它与通用生成器混淆。