什么是ai-design-skills让AI编程工具写出专业级落地页的完整指南【免费下载链接】ai-design-skills项目地址: https://gitcode.com/gh_mirrors/ai/ai-design-skillsai-design-skills是一个开源的「设计技能包」仓库它为 Claude Code、Cursor、Codex、Windsurf 等 AI 编程工具提供一套可直接安装的设计规则文件让 AI 在写代码时自动遵循专业的设计标准从而生成结构清晰、文案有说服力、视觉精细的落地页Landing Page。你不需要精通设计只需安装对应的技能然后用大白话告诉 AI 你的需求即可。 它解决了什么问题用 AI 编程工具生成网页时很多人都会遇到这样的尴尬页面能跑但版式松散、间距随意AI 味很重文案是 Lorem Ipsum、Acme Corp 这类占位内容没有转化逻辑CTA 按钮一堆却不知该点哪个ai-design-skills 的思路很简单把设计师的经验写成一份 Markdown 规则文件让 AI 工具读取并遵守。每个技能Skill都是一个自包含的文件夹按需安装。目前仓库内置的技能如下技能作用landing-page-design从零构建高转化落地页需求问询、页面结构、转化文案外加完整的视觉系统字体、间距、圆角、动效技能清单详见 README.md。 核心技能拆解landing-page-design整个技能的核心内容都在 skills/landing-page-design/SKILL.md 中分为两大部分Part A —— 策略与结构先想清楚页面说什么AI 在动手写代码前会先向你批量提问收集关键信息目标唯一的核心行动是什么注册、购买、下载受众用户是谁他们今天为什么没有转化信任凭证有没有客户评价、数据、案例可以展示然后按照一套成熟的落地页结构组织内容首屏标题 副标题 主 CTA 信任信号→ 中段问题到方案、3~5 个收益点、三步工作原理、社会证明→ 底部FAQ、风险逆转、与顶部一致的最终 CTA。它还内置了文案公式例如 没有 {痛点} 的 {结果}、专为 {人群} 打造的 {品类}并要求文案具体到数字❌帮你节省时间 → ✅把每周 4 小时的报表工作压缩到 15 分钟。Part B —— 视觉系统不可协商的设计规则这是让页面脱离 AI 感的关键所有视觉值都必须从规则表中解析禁止 AI 随意发挥字体只用 Geist、Manrope 等指定字体字号必须落在标准刻度上禁止斜体和超粗体间距只允许 12 个预设间距值没有中间值圆角嵌套元素遵循「内圆角 外圆角 − 间距」公式动效全部使用自定义贝塞尔曲线模拟流体质感滚动进场用IntersectionObserver而非低效的滚动监听内容真实性禁止 Lorem Ipsum、John Doe、整数假数据如 99.99%要求生成真实感的数据与人名完整状态每个交互元素必须交付 hover / active / focus / 加载 / 空态 / 错误态全套文件末尾还附了一份上线前检查清单策略、视觉、内容三个维度逐项打勾确保页面不半成品。 如何安装按工具选择对应步骤安装方式见 README.md 的 Install 一节四种常见工具任选其一1️⃣ Claude Code推荐git clone https://gitcode.com/gh_mirrors/ai/ai-design-skills /tmp/ai-design-skills cp -r /tmp/ai-design-skills/skills/landing-page-design .claude/skills/2️⃣ Cursor把 SKILL.md 下载后放入.cursor/rules/目录或直接粘贴到Settings → Rules for AI。3️⃣ Codex / Windsurf / Cline把SKILL.md的内容复制到你工具的规则文件即可工具规则文件路径CodexAGENTS.mdWindsurf.windsurfrulesCline.clinerules4️⃣ 没有终端的在线聊天工具把SKILL.md作为附件上传到对话中说一句follow this即可。安装完成后直接用自然语言提需求例如帮我做一个面向自由职业者的发票工具落地页核心行动是免费试用AI 就会按技能规范产出。 让它变成你的品牌风格每个技能的设计值字体、颜色、间距、动效都集中在文件底部一个独立的章节里。想让页面符合自家品牌只需修改这一节技能的其他部分会自动跟随不需要通篇改动。 许可协议放心用放心卖项目采用 MIT License条款非常宽松可以随意使用、修改、分发基于它构建的产品可以直接商用出售也无需署名。总结是什么面向 AI 编程工具的设计规则技能集目前提供落地页设计技能怎么用把SKILL.md放进工具的规则目录用大白话提需求为什么好用策略 文案 视觉 上线检查一条龙AI 产出直接接近专业设计师水准在哪里核心技能文件位于 skills/landing-page-design/如果 AI 生成的页面总是能看不能用不妨给它的规则文件升级一下 —— 这就是 ai-design-skills 想帮你的事。【免费下载链接】ai-design-skills项目地址: https://gitcode.com/gh_mirrors/ai/ai-design-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考