支持哪些 AI 编程工具？

支持 Claude Code、Cursor、Codex、Windsurf、Cline，以及任何能读取 Markdown 规则文件的工具。也可以直接粘贴到 system prompt 中使用。

如何在不使用终端的情况下使用？

可以下载对应 skill 的 SKILL.md 文件，上传到 Claude.ai 的 Project 中，或在聊天中附加该文件并指示 AI 遵循它。

如何自定义设计样式？

每个 skill 文件底部有一个专门区域存放设计值（字体、颜色、间距、动效）。Fork 仓库后编辑该区域，其余规则会自动适配新值。

目前有哪几个 skill？

目前收录了 landing-page-design 这一个 skill，用于从零构建落地页。作者提到后续会添加更多。另有一个用于升级现有网站的 redesign-skill 存放在独立仓库中。

需要什么依赖或版本要求？

原文未提及特定的宿主版本依赖，只需所使用的 AI 工具支持读取 Markdown 规则文件即可。

September 26, 2026

AI Design Skills

AI & Machine Learning Prompt Engineering & Skill Management0

Get resource

为 AI 编程工具提供的设计技能集合，帮助从零构建落地页等设计任务。

MITClaudeClaude CodeCursorText InputText Output

Prompt Templates Skill广场 Skill Packaging

安装 / 调用方式bash

# Claude 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/

# Cursor
mkdir -p .cursor/rules
curl -o .cursor/rules/<skill-name>.md \
  https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills/<skill-name>/SKILL.md

# Codex: 将 SKILL.md 内容复制到 AGENTS.md
# Windsurf: 将 SKILL.md 内容复制到 .windsurfrules
# Cline: 将 SKILL.md 内容复制到 .clinerules

Product facts

Type: AI Skill & Agent
Category: AI & Machine Learning › Prompt Engineering & Skill Management
Pricing: Open source
Platforms: Claude · Claude Code · Cursor
License: MIT
Launched: Sep 26, 2026
Listed: Sep 26, 2026
Website: github.com

Overview

GitHub GitHub

**AI Design Skills** 是一个面向 AI 编程工具的设计技能（skill）集合，以 Markdown 规则文件的形式提供。它适用于 Claude Code、Cursor、Codex、Windsurf 以及任何能够读取 Markdown 规则文件的工具。 ### 它是什么每个 skill 是一个独立的文件夹，包含一个 `SKILL.md` 文件，定义了 AI 在执行特定设计任务时应遵循的规则与流程。用户可以根据需要选择安装其中的某一个或几个 skill，无需全部引入。 ### 解决什么问题在使用 AI 编程工具生成前端页面时，往往缺乏统一的设计规范引导，导致产出在排版、间距、动效等方面不一致。AI Design Skills 将设计决策（字体、颜色、间距、圆角、动效等）编码为 AI 可执行的规则，使 AI 在生成代码时能遵循一套完整的视觉系统。 ### 主要能力目前收录的 skill 为 **landing-page-design**，其能力包括： - 通过提问收集需求信息 - 规划页面结构 - 撰写转化导向的文案 - 输出一套完整的视觉系统（涵盖排版、间距、圆角、动效）仓库说明中提到后续会添加更多 skill。此外，作者另有一个用于升级现有网站的 redesign-skill，存放在独立仓库中。 ### 自定义每个 skill 的设计参数（字体、颜色、间距、动效）集中在文件底部的一个区域。用户可以 fork 仓库后修改该区域，其余部分会自动适配新的设计值。 ### 适合谁适合使用 AI 编程工具进行前端开发、希望让 AI 输出符合设计规范页面的开发者或设计师。项目采用 MIT 协议，可自由使用、修改和商用，无需署名。

Key features

landing-page-design：从零构建落地页，包含需求收集、页面结构、转化文案及完整视觉系统。
多工具兼容：支持 Claude Code、Cursor、Codex、Windsurf、Cline 及通用 system prompt。
按需安装：每个 skill 是独立文件夹，只安装需要的部分。
设计值集中管理：字体、颜色、间距、动效等参数集中在文件底部，便于自定义。
MIT 协议：可自由使用、fork、发布和商用，无需署名。

Releases

Notify me

Initial · AI Design Skills

September 26, 2026

Q&A

支持哪些 AI 编程工具？AI-generated: 支持 Claude Code、Cursor、Codex、Windsurf、Cline，以及任何能读取 Markdown 规则文件的工具。也可以直接粘贴到 system prompt 中使用。
如何在不使用终端的情况下使用？AI-generated: 可以下载对应 skill 的 SKILL.md 文件，上传到 Claude.ai 的 Project 中，或在聊天中附加该文件并指示 AI 遵循它。
如何自定义设计样式？AI-generated: 每个 skill 文件底部有一个专门区域存放设计值（字体、颜色、间距、动效）。Fork 仓库后编辑该区域，其余规则会自动适配新值。
目前有哪几个 skill？AI-generated: 目前收录了 landing-page-design 这一个 skill，用于从零构建落地页。作者提到后续会添加更多。另有一个用于升级现有网站的 redesign-skill 存放在独立仓库中。
需要什么依赖或版本要求？AI-generated: 原文未提及特定的宿主版本依赖，只需所使用的 AI 工具支持读取 Markdown 规则文件即可。