AI Design Skills（AI 设计技能包）

# AI Design Skills：安装说明

这个工具包里是 Mindket 写的安装说明，不包含技能本身。技能要从 Elaya 的仓库安装：https://github.com/elayadesign/ai-design-skills

许可证：MIT，Copyright (c) 2026 Elaya。全文见 https://github.com/elayadesign/ai-design-skills/blob/main/LICENSE

AI Design Skills 是 Elaya 的社区项目。Mindket 只是把它列出来，技能不是 Mindket 写的。

这些说明的来源：README（https://github.com/elayadesign/ai-design-skills/blob/main/README.md），两个 SKILL.md 文件（https://github.com/elayadesign/ai-design-skills/blob/main/skills/landing-page-design/SKILL.md 和 https://github.com/elayadesign/ai-design-skills/blob/main/skills/figma-designer/SKILL.md），以及许可证。Claude Code 从哪里加载技能，出自 Claude Code 自己的技能页面（https://code.claude.com/docs/en/skills）。关于连接 Figma 的内容出自 Figma 的帮助页面，用到的地方都注明了。所有命令都由 Mindket 照抄，一条也没有运行过。

## 它是什么

两个给 AI 编程工具用的设计技能。每个技能是一个文件夹，里面只有一个 SKILL.md。技能是写给 AI 工具看的，所以动手搭的是工具，你负责回答它的问题、做决定。

- landing-page-design：从零搭一个落地页。Part A 是策略：需求提问、页面结构、版式选择和转化文案。Part B 是一套固定的视觉规范，涵盖字体、间距、圆角、背景、首屏布局、图标和动效。
- figma-designer：通过 Figma MCP 在 Figma 里设计，用变量、命名的文字样式、自动布局和带齐全部状态的组件，外加一个会随设计变量（token）一起更新的 Foundations 框架。

README 对这一对技能的说法：“A growing collection of design skills for AI coding tools”（一个不断扩充的 AI 编程工具设计技能合集）。

## 工具包里的文件

- setup/skills-cli.md：README 的主要方式，skills CLI（`npx skills add`），适用于所有智能体
- setup/claude-code.md：README 给 Claude Code 的手动安装方式
- setup/cursor.md：README 给 Cursor 的手动安装方式
- setup/other-agents.md：Codex、Windsurf、Cline，以及任何能读规则文件的工具
- setup/claude-ai.md：在浏览器里用 Claude.ai，不用终端
- setup/figma-designer.md：除了技能本身，figma-designer 还需要什么，出自 SKILL.md 和 Figma 的帮助页面
- setup/first-run.md：第一次该问什么，以及每个技能在动手前会做什么

## 先准备好这些

- 一个能读技能或规则文件的 AI 编程工具：Claude Code、Cursor、Codex、Windsurf、Cline 或类似工具。
- 走 skills CLI 需要 Node.js。README 写的是“Needs Node.js.”（需要 Node.js），没写版本，skills CLI 自己的 README（https://github.com/vercel-labs/skills）要求 22.20 或更高。手动方式不需要 Node.js。
- Claude Code 的手动方式需要 Git。
- 只有 figma-designer 需要：一个你能编辑的 Figma Design 文件，以及接到你的 AI 工具上的 Figma MCP（见 setup/figma-designer.md）。
- landing-page-design 不需要账号或密钥。figma-designer 通过你连接 Figma 时登录的 Figma 账号工作。README 的许可证说明：“MIT. Use it, fork it, ship it, sell what you build with it. No attribution needed.”（MIT。随便用、随便 fork、随便发布，用它做出来的东西也可以卖。不需要署名。）

## 装到哪里

- skills CLI 方式：README 说，给 Claude Code 的技能放进 `.claude/skills/`，给 Cursor、Codex 和其他智能体的放进 `.agents/skills/`。
- Claude Code 手动方式：每个技能一个文件夹，放进你项目的 `.claude/skills/`。
- Cursor 手动方式：每个技能一个文件，放进你项目的 `.cursor/rules/`。
- 其他工具：把技能 SKILL.md 的内容放进那个工具的规则文件。

## 更新和删除

README 只给了一条更新命令：用 skills CLI 安装后，`npx skills update` 会拉取更新。它没给删除步骤。Claude Code 的技能页面说，删掉技能的文件夹就删除了这个技能。

## 改成你自己的

README 说，每个技能都把设计数值，比如字体、颜色、间距和动效，放在文件末尾附近的一个部分里，你可以 fork 这个仓库，改那一部分。在 figma-designer 里，那一部分是文件末尾的 Token reference。在 landing-page-design 里，这些数值在 Part B，位于文件中间。这是 Mindket 读了两个文件后确认的。

## 你的数据

每个技能文件夹只有一个 SKILL.md，别的什么都没有，所以安装技能只是加了文字指令，没有程序。你告诉 AI 工具的内容，以及它打开的 Figma 文件，会像平常使用这些工具一样，交给那个工具和 Figma。

README.md  4 KB
setup/claude-ai.md  2 KB
setup/claude-code.md  2 KB
setup/cursor.md  2 KB
setup/figma-designer.md  3 KB
setup/first-run.md  3 KB
setup/other-agents.md  2 KB
setup/skills-cli.md  2 KB