AI Design Skills：把落地页设计规则装进编码工具
一个给AI编码工具用的落地页设计技能，把结构、文案和视觉规范写进SKILL.md。
GitHub elayadesign/ai-design-skills 更新 2026-10-28 分支 main 星标 9.4K 分叉 672
Markdown规则文件 AI编码工具 landing-page-design Claude Code

🧭 决策指南

为什么现在热： 无法从材料判断

适合，如果你

  • 你用Claude Code、Cursor、Codex或Windsurf生成新落地页
    README开头明确支持Claude Code、Cursor、Codex、Windsurf及其他读取Markdown规则文件的工具
  • 你需要同时约束页面结构、转化文案、字体、间距、圆角和动效
    README的Skills表将landing-page-design描述为覆盖这些内容

不适合，如果你

  • 你要改造已有网站，而不是从零构建落地页
    README明确把existing site的redesign指向独立仓库redesign-skill
  • 你需要多个成熟技能、版本发布记录或明确的框架支持
    README目前只列landing-page-design；项目元数据显示0个版本发布，技术栈为Mixed/Unknown

前置条件

  • 需要一个能读取Markdown规则文件的AI编码工具；README列出Claude Code、Cursor、Codex和Windsurf。
  • 需要从Skills表中选择技能文件夹名称，例如landing-page-design。
  • 若使用Claude Code，需要将技能复制到.claude/skills；Cursor使用.cursor/rules。

第一步命令（README 原文）

mkdir -p .claude/skills

要注意

  • Cursor安装命令中的<skill-name>仍需替换为Skills表中的文件夹名
    README的Install章节写明要将占位符替换为技能文件夹名称
  • 自定义设计值需要编辑技能文件底部对应章节，而不是单独配置文件
    README的Make it yours章节说明字体、颜色、间距和动效集中在文件底部

替代方案

  • redesign-skill：已有网站需要改造而不是从零构建landing page时更合适
    README正文的Skills章节

材料未说明

  • README没有说明landing-page-design生成的具体前端框架、CSS方案或组件库。
  • README没有提供Claude Code、Cursor、Codex或Windsurf的版本要求。
  • README没有说明技能文件的测试用例、输出示例或已验证浏览器范围。
  • README没有说明除landing-page-design之外的后续技能发布时间。

💡 深度解析

6
不适合 我正在用 Windsurf 改造一个已经上线的网站，不是从零新建营销页；我应该安装这个仓库的 `landing-page-design` 吗？
适合读者： 需要改造现有网站、而不是新建落地页的 Windsurf 开发者

不适合直接套用，因为 README 把 landing-page-design 的范围限定为从零构建落地页，而改造已有网站是另一类工作流。

  • 技能描述是 “Builds a landing page from scratch”，重点包括需求提问、页面结构、转化文案和完整视觉系统。
  • README 明确提供了独立的 redesign-skill 链接，并说明它用于 “Upgrading an existing site instead of building new”。
  • 该改造技能不在本仓库中，不能把链接当成当前仓库已经包含的文件或安装项。

因此，当前仓库更适合新建落地页；已有站点的路由、组件、内容迁移和兼容性约束，不应假定会由这里的技能覆盖。

  • Skills：`landing-page-design` — “Builds a landing page from scratch”
  • Skills： “Upgrading an existing site instead of building new? That one lives in its own repo”
  • 链接目标：`https://github.com/elayadesign/redesign-skill`
材料未说明：README 未说明独立 `redesign-skill` 支持哪些框架、安装路径和改造流程。；README 未说明当前技能如何处理既有路由、组件库和内容模型。
适合 我正在用 Claude Code 从零制作一个营销落地页，希望 AI 同时处理需求提问、页面结构、转化文案和视觉系统；这个项目适合我的工作流吗？
适合读者： 使用 Claude Code、想从零制作营销落地页的独立开发者

适合，因为 README 明确把 landing-page-design 定义为从零构建落地页的技能，并覆盖你需要的四类工作。

  • 技能是独立文件夹，核心内容是 SKILL.md，不需要安装专用运行时或服务。
  • Claude Code 的安装方式是把技能复制到 .claude/skills/，之后用自然语言提出该技能覆盖的需求。
  • 视觉系统还包含字体、间距、圆角和动效，不只是生成一份页面代码。

但它不等于完整的前端生成器：README 没有承诺浏览器预览、自动测试、响应式检查或转化率验证，因此这些能力仍取决于你的 Claude Code 项目和人工检查。

  • Skills：`landing-page-design` — “Builds a landing page from scratch — intake questions, page structure, conversion copy, plus a full visual system”
  • Install / Claude Code：`mkdir -p .claude/skills` 与 `cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/`
  • Make it yours：设计值包括 “fonts, colors, spacing, motion”
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/
材料未说明：README 未说明 Claude Code 的具体版本要求。；README 未说明技能对特定前端框架、组件库或浏览器版本的兼容性。
适合 我没有终端，只能在 Claude.ai Project 或对话中工作；我想让 Claude 遵循 `landing-page-design` 的页面结构、转化文案和视觉规则，这个项目适合吗？
适合读者： 没有终端、使用 Claude.ai 对话生成落地页的产品经理或设计师

适合，因为 README 专门提供了 Claude.ai 的无终端接入方式：下载 SKILL.md，上传到 Project，或附加到对话并要求模型遵循它。

  • 该技能覆盖页面结构、转化导向文案，以及字体、间距、圆角和动效等完整视觉系统。
  • 你不需要运行 git clone、安装依赖或配置专用 API；规则文件本身就是主要交付物。
  • 文件可以在项目中保存和修改，设计值集中在靠近底部的一段，便于按品牌调整。

不过，README 没有说明 Claude.ai Project 的文件大小限制、规则持久化行为或对话中多个附件的优先级；它也没有提供页面预览或自动质量验证。

  • Claude.ai (no terminal)： “Download the skill's `SKILL.md` and upload it to a Project, or attach it to a chat and say ‘follow this.’”
  • Skills：页面结构、转化文案和完整视觉系统
  • Make it yours：设计值集中在技能文件靠近底部的区域
材料未说明：README 未说明 Claude.ai Project 的附件大小、持久化和上下文限制。；README 未说明 Claude.ai 是否会在所有后续对话中稳定遵循上传的技能文件。
适合 我用 Cursor 开发落地页，并且已经有品牌字体、颜色、间距和圆角；我能否只修改设计参数，而不重写整套 AI 工作流？
适合读者： 使用 Cursor、需要把现有品牌字体和颜色沉淀到规则文件中的产品开发者

适合，因为项目把设计参数集中在每个技能文件靠近底部的区域，目标就是让品牌定制不必改写整个流程。

  • README 的 “Make it yours” 明确列出字体、颜色、间距和动效等设计值，并说明编辑该区域后其余技能会自动遵循。
  • Cursor 可以把 SKILL.md 下载到 .cursor/rules/<skill-name>.md，也可以粘贴到 “Settings → Rules for AI”。
  • 规则是普通 Markdown，团队可以阅读、版本控制和审查，适合把品牌约束纳入项目仓库。

边界是：README 没有说明 Cursor 对规则优先级、上下文长度或多个规则冲突的具体处理方式；如果项目已有设计规范，最终生效关系仍不明确。

  • Make it yours： “Every skill's design values (fonts, colors, spacing, motion) live in one section near the bottom of its file.”
  • Install / Cursor：`curl -o .cursor/rules/<skill-name>.md https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills/<skill-name>/SKILL.md`
  • README 开头： “Each skill is a self-contained folder.”
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
材料未说明：README 未说明现有 Cursor 项目规则与该技能同时存在时的优先级。；README 未说明品牌字体是否需要额外安装、托管或配置。
适合 我使用 Cline，并且项目不允许新增运行时、数据库或服务端基础设施；我还能把这个项目作为可版本控制的设计规则依赖使用吗？
适合读者： 不想引入运行时、数据库或服务端基础设施，只想把设计规则放进项目仓库的 Cline 开发者

适合，因为它交付的是 Markdown 规则文件，而不是需要部署的代码生成服务或运行时组件。

  • README 将每个技能定义为自包含文件夹，安装方式是复制或下载 SKILL.md。
  • Cline 的目标路径明确是 .clinerules，因此可以把规则纳入项目文件结构和版本控制。
  • 项目数据中的主语言是 Unknown，没有语言分布、发布包或运行时组件信息；README 也没有要求数据库、服务端或构建系统。
  • MIT License 允许用户 fork、修改、发布，并将生成结果用于商业化。

但它不是传统意义上的软件包依赖：模型是否遵循规则、规则与既有项目指令如何冲突，README 都没有给出保证。

  • README 开头： “Each skill is a self-contained folder.”
  • Codex / Windsurf / other：`Cline | .clinerules`
  • 项目数据：`main_language: Unknown`、`language_distribution: {}`、`release_count: 0`
  • License： “MIT. Use it, fork it, ship it, sell what you build with it.”
材料未说明：README 未说明是否存在正式版本标签、变更日志或依赖锁定机制。；README 未说明 Cline 对 `.clinerules` 的具体加载优先级。
视情况 我会在 Codex、Windsurf 和 Cline 之间切换，同一个项目不想维护三套设计提示；这个仓库能否让我复用同一份 `SKILL.md`？
适合读者： 在 Codex、Windsurf 和 Cline 之间切换、希望复用同一份落地页设计规则的独立开发者

视情况，因为项目明确提供跨工具的文件放置方式，但不同工具是否完整遵循同一份 Markdown 规则，README 没有保证。

  • Codex 使用 AGENTS.md，Windsurf 使用 .windsurfrules，Cline 使用 .clinerules；Generic 场景则粘贴到系统提示词。
  • 技能本身是自包含的 SKILL.md，因此规则资产可以复制，而不是绑定某个运行时或编程语言。
  • README 只展示了一个主要技能 landing-page-design，覆盖的是从零构建落地页，不是所有网站设计任务。

所以它适合作为统一规则源，但不能据此断定三个工具的加载时机、上下文容量和指令遵循程度完全一致。

  • Codex / Windsurf / other：`Codex | AGENTS.md`、`Windsurf | .windsurfrules`、`Cline | .clinerules`
  • README 开头： “anything else that reads a markdown rules file”
  • Skills 表：当前列出 `landing-page-design` 一个技能
材料未说明：README 未说明 Codex、Windsurf 和 Cline 的规则加载优先级与上下文限制。；README 未提供三个工具之间输出一致性的测试结果。

✨ 核心亮点

  • 支持 Claude Code、Cursor、Codex、Windsurf
  • landing-page-design覆盖结构、文案与视觉系统
  • MIT许可允许修改、发布和商业使用

🔧 工程化

  • landing-page-design从问题收集到页面结构、转化文案和视觉系统生成落地页
  • 可将SKILL.md复制到.claude/skills、.cursor/rules或AGENTS.md
  • 字体、颜色、间距和动效集中在技能文件底部，便于Fork修改

⚠️ 风险

  • 当前README只列出landing-page-design一个技能，其他技能尚未提供
  • 项目仅有1名贡献者、0个版本发布和8个最近提交
  • README未说明生成代码的框架、运行环境或测试覆盖范围

👥 适合谁？

  • 使用Claude Code或Cursor构建新落地页的前端开发者
  • 需要把设计规范写入Markdown规则文件的AI编码团队
  • 使用Codex、Windsurf或Cline等规则文件工具的项目