elayadesign / ai-design-skills

∴ 是什么

这是一个为 AI 编程工具（如 Claude Code、Cursor、Codex、Windsurf 等）准备的设计技能集合。每个技能是一个独立的文件夹，包含一个 SKILL.md 文件，指导 AI 完成特定设计任务。目前包含一个 landing-page-design 技能，用于从零构建着陆页。

∴ 解决什么问题

• ›AI 编码工具缺乏专业设计能力，难以生成符合视觉规范且转化导向的页面
• ›设计技能分散，难以按需安装和复用
• ›不同 AI 工具读取规则文件的方式不同，需要适配多种安装路径

∴ 怎么上手

1. 01从技能表格中选择一个技能，例如 landing-page-design
2. 02根据使用的工具选择对应的安装方式
3. 03Claude Code：运行 `mkdir -p .claude/skills`，然后 `git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills`，再 `cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/`
4. 04Cursor：运行 `curl -o .cursor/rules/<skill-name>.md https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills/<skill-name>/SKILL.md`，或粘贴到 Settings → Rules for AI
5. 05Codex / Windsurf / 其他：将 SKILL.md 复制到对应路径（如 Codex 用 AGENTS.md，Windsurf 用 .windsurfrules）
6. 06Claude.ai（无终端）：下载 SKILL.md 并上传到项目或对话中，说 "follow this"

∴ 适合谁

使用 AI 编码工具进行网站或应用界面设计的开发者，希望在不写大量代码的情况下获得专业设计结果。

∴ 要点

• ›技能以独立文件夹形式组织，按需安装
• ›每个技能包含完整的视觉系统（字体、颜色、间距、动效）
• ›设计值集中在文件底部，便于 fork 后自定义
• ›已包含一个 landing-page-design 技能，覆盖从需求到视觉的完整流程
• ›支持多种工具和安装方式，包括 Claude Code、Cursor、Codex、Windsurf、Claude.ai 等
• ›采用 MIT 许可证，允许使用、fork、销售，无需署名

∴ 在榜记录

GitHub Trending 今日榜的每日存档，日期按北京时间。2026-10-28 首次上榜，累计在榜 3 天，最高第 1 名。