—

解读：AI Design Skills——给 Claude Code / Cursor 补上设计规范的 skills 合集

  • #AI Design Skills
  • #Claude Code
  • #Cursor
  • #Skills
  • #设计
  • #开源
  • #解读

本文是对开源项目 ai-design-skills 的摘要与评论。抓取时仓库约 ★7225、forks≈519、open issues≈2；许可证 MIT（作者写明可 fork、可商用产物，无需署名）。仓库本身几乎是 Markdown skills 合集，不是传统「带 release 的应用」。插图为 GitHub 社交预览图；安装命令与技能正文以仓库 README 及各 SKILL.md 为准。

全文主线可以压成一句：编码 Agent 很会写能跑的界面，却常常缺可执行的设计约束；把规范落成 skill / rules 文件，比每次口头提醒审美便宜。

这篇在说什么

先讲清痛点。你让 Claude Code 或 Cursor「做个落地页」，它通常能吐出完整 JSX/CSS，但结果常是间距乱、字号飘、圆角不统一、动效为动而动——功能正确，设计味稀薄。根因之一是：Agent 的训练分布偏「功能正确」；设计规范是低频、强约束、易被下一轮改坏的上下文，口头提醒很难跨会话稳住。

这份合集面向 Claude Code、Cursor、Codex、Windsurf 等「会读 markdown 规则文件」的 AI 编码工具，提供一组自包含的设计 skill 目录——你装哪份就启用哪份。当前表里两份：

Skill 做什么
landing-page-design 从零做落地页：intake、结构、转化文案，外加字体/间距/圆角/动效等视觉系统
design-to-motion 把静态设计做成像素级动态展示：空态→加载→各视觉讲自己的故事并循环；可导出 X 用 MP4 与站点/800×500 GIF

「改已有站点而不是新建」被拆到同作者的 redesign-skill（抓取时约 ★331）——因为那份更早、单独成仓。

AI Design Skills GitHub 预览图

「AI 味」从哪里来，skill 又能压住什么

所谓 AI 味，往往不是某一张图不好看，而是系统层约束缺失：字号阶梯不稳、间距节奏乱、圆角与阴影各写各的、动效没有叙事只是装饰。编码 Agent 优化的是「能编译、能交互」；设计系统优化的是「重复出现时仍一致」。两者不自动对齐。

Markdown skill / rules 的作用，是把第二套优化目标写进工具会加载的外部记忆。它压得住的是可执行、可检查的那部分：首屏是否有一个主行动、字号是否按阶梯、展示动画是否先保真再循环。它压不住的是品牌策略本身、用户研究与复杂产品交互——那些仍需人来定。把合集当成「设计系统替代品」会失望；当成「给编码 Agent 的设计护栏」才匹配作者的窄而深策略。

Skills 目录机制：为什么不是又一篇 prompt

每个 skill 是一个独立文件夹（内含 SKILL.md 等）。Claude Code 一类工具约定把 skill 放到项目的 .claude/skills/；Cursor 侧则常把同一份内容落到 .cursor/rules/ 或 Settings → Rules。Codex / Windsurf / Cline 等则各自对应 AGENTS.md、.windsurfrules、.clinerules，或直接贴进 system prompt。没有终端时，也可把 SKILL.md 上传到 Claude.ai Project / 对话并要求「按这个做」。

设计 tokens（字体、颜色、间距、动效）集中在文件靠后的一节：fork 后改那一节，其余规则跟着走——这是「合集可定制」的钩子。

解读：Skill 不是魔法，是把可执行的设计约束塞进工具会自动加载的路径里，降低「每次口头提醒审美」的成本。和站内更重的 Huashu Design 比：那边是带样张库与导出链的工作室；这边是窄而深的规范包，拷贝即用。

怎么装（官方步骤摘要）

以 Claude Code 为例：建 .claude/skills，clone 仓库后把需要的 skills/<skill-name> 拷进去，然后用自然语言点名该 skill 覆盖的任务即可。Cursor 可用 curl 把对应 SKILL.md 拉到 .cursor/rules/<skill-name>.md。细节与路径表见 README Install 一节——工具升级时路径偶有变化，以你本机文档为准。

解读：合集故意做成「按需拷贝」，而不是强迫一次性启用全部规则。落地页 skill 与动效 skill 触发条件不同；全开容易互相抢上下文窗口。实务上：做营销站先装 landing-page-design；要「把这张 Figma/截图做成会动的展示」再加 design-to-motion。

landing-page-design：一个意图打穿整页

该 skill 的自我定位很清楚：落地页不是首页——一个 offer → 一个受众 → 一个主行动。结构上分两半：

  • Part A：策略与结构——批量 intake（主 CTA、ICP、异议、流量来源、证明材料等），再定首屏 / 论证中段 / FAQ 与风险逆转，并选布局类型。
  • Part B：不可随便改的视觉系统——字号阶梯、间距、圆角、背景、hero、图标与动效等硬规则；与框架默认冲突时以 skill 为准，与用户显式指令冲突时以用户为准。

文中还点名：若目标是升级已有站，应改用 companion 的 redesign-existing-projects（即 redesign-skill 仓），具体数值仍可 defer 回本 skill。Credits 里写明部分内容现实主义与动效思路改编自 Leonxlnx/taste-skill（MIT）。

解读：价值不在「又一套好看字体」，而在强迫 Agent 先问清转化目标再画。很多 AI 生成页失败在「组件很全、意图为空」；intake + 首屏五件套（标题/副标/主 CTA/证明/视觉）是在修这个根因。先问再画，比事后调圆角更接近设计工作。

design-to-motion：精确复刻，再让界面「活起来」

定位同样硬：展示动画不是重设计——观众要看到同一份设计，并且看到它在动。流程拆成：

  • Part A：保真重建（Figma API / 截图层、空态到满态的加载叙事）。
  • Part B：动效系统（各视觉讲自己的故事、无缝循环等）。
  • Part C：录制导出（默认面向 showcase 的 MP4、网站 GIF、800×500 GIF）。

并区分两种上下文：Showcase（整帧循环导出）与 Website（滚动进视口触发、章节级故事、尊重站点设计系统）。明确不适合产品内交互动效（hover/菜单等），那类应换产品 motion skill。Credits 提及对若干 MIT 动效原则仓的借鉴。

解读：这是在补 Agent 另一块短板——「会写 CSS transition，不会讲产品故事」。把图表「被阅读」、列表「收到新项」、输入框「被打字」做成循环叙事，比随机漂浮阴影更接近营销向 motion。代价是流程重（保真检查过关才允许导出），适合展示片，不适合当日常组件库动画规范。

和「写代码的 Agent 缺设计规范」的关系

编码 Agent 的训练分布偏「功能正确」；设计规范是低频、强约束、易被下一轮改坏的上下文。把规范落成 skill / rules 文件，等于给会话一个稳定的外部记忆：触发描述写进 frontmatter description，工具按任务检索加载，而不是靠用户每次复读「圆角 8、标题不超过两行」。

本合集的策略是窄而深：先占落地页与设计展示动效两块高痛点，旧问题（改站）外置到 redesign-skill，而不是做一个万能「Design OS」。MIT + 可改 token 区，方便团队 fork 成自己的品牌版。

和 Huashu Design 对照：那边追求「一句话交付工作室级产出」；这边追求「把几条硬规范钉进 Agent 默认路径」。可同机并存——规范包管日常营销页，工作室管要样张库与 PPTX/视频导出的重活。

怎么判断「规范真的咬合了」

装完 skill 不等于问题解决。建议用一次真实任务做验收，而不是看 README 示例页：

  1. 选一个你真正要上线的落地页题目，写清 offer、受众与主 CTA。
  2. 只启用 landing-page-design，要求 Agent 先做 intake，再出首屏。
  3. 检查它是否追问证明材料与异议，而不是直接堆英雄区组件。
  4. 故意给出与 skill 冲突的框架默认（例如很大的圆角或随意字号），看它是否按 Part B 硬规则回收。
  5. 若你还要做展示动画，另开任务只启用 design-to-motion，确认它先保真重建再谈循环叙事，而不是一上来重设计。

验收通过的信号通常是：意图更清楚、返工从「改审美」变成「改文案与证明」。验收失败的信号是：skill 在上下文里，但 Agent 仍在自由发挥间距与装饰——这时优先检查安装路径是否被工具真正加载，而不是继续加口头提示。

团队若要长期用，建议 fork 后改 token 区成自己的品牌值，并在 PR 里把 skill 版本与页面改动一起审——规范文件也应被当作产品代码的一部分。

解读：这类合集的成功标准不是「星标高」，而是你少说了多少次「别那么 AI」。若装完仍要反复口头纠正，问题多半在加载路径或任务范围，而不是再缺一篇审美文章。

怎么看

若你已经在用 Claude Code / Cursor 做营销页或产品演示，却总在返工「AI 味」布局，这份合集是低摩擦试验：拷一个 skill、跑一个真实页面，看规则是否咬合你的栈。若你要的是设计系统治理、组件库 token 同步或复杂产品交互动效，它覆盖不到，也不应被夸大。

完整正文、安装命令与后续新增 skill，以 github.com/elayadesign/ai-design-skills 为准；改站场景对照 elayadesign/redesign-skill。