尧图网页设计 
如何让AI一次做出专业落地页ai-design-skills新手从零开始完整指南【免费下载链接】ai-design-skills项目地址: https://gitcode.com/gh_mirrors/ai/ai-design-skills想让AI一次就做出专业级落地页开源项目 ai-design-skills 就是为此而生的。它把资深设计师的落地页方法论打包成一组 Markdown 规则文件喂给 Claude Code、Cursor、Codex、Windsurf 等 AI 编程工具后AI 写出的页面不再是看起来像AI做的而是有策略、有转化设计、有完整视觉系统的专业落地页。本文带你从零开始10 分钟跑通全流程。 它是什么给AI的设计技能包一句话概括ai-design-skills 是一套可安装的 AI 设计技能Skill合集。每个技能就是一个自包含的文件夹核心是一份SKILL.md规则文件AI 工具读到它就会按里面的规范来干活。项目目前收录的核心技能技能能做什么landing-page-design从零构建高转化落地页先问清需求、规划页面结构、写转化文案再套用完整的视觉系统字体、间距、圆角、动效项目说明和安装方式都写在 README.md许可证为 MIT见 LICENSE——可免费商用无需署名。 一键安装步骤3 行命令搞定以 Claude Code 为例在项目根目录执行mkdir -p .claude/skills 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/不同工具的放置位置不同对照下表即可详见 README.mdAI 工具安装位置Claude Code.claude/skills/目录Cursor.cursor/rules/或直接粘贴到 Settings → Rules for AICodexAGENTS.mdWindsurf.windsurfrulesCline.clinerules其他工具粘贴进系统提示词装完后用大白话提需求就行比如帮我做一个在线简历工具的新用户注册落地页。 技能的核心先策略后视觉这份 SKILL.md 分成两大半Part A 决定页面说什么、怎么排Part B 是不容商量的视觉系统。规则明确要求先走完 A 再碰 B——这正是 AI 落地页专业与否的分水岭。Part A — 需求澄清与页面结构1️⃣ 先提问再动手Intake技能要求 AI 在设计前一次性问清四类问题主要转化动作是什么试用预约演示下载、目标用户是谁、最大的三个顾虑是什么、有哪些证明材料客户 Logo、数据、案例。信息不全时它会做出合理假设并说明而不是卡住不动。2️⃣ 高转化落地页标准结构AI 会按三段式组织页面见 SKILL.md#L52-L72首屏必含 5 要素标题、副标题、主 CTA、一个信任信号、产品视觉中部论证区问题→方案、3~5 条利益点、三步使用说明、社会证明底部消除顾虑FAQ、风险逆转免费试用/随时取消、与首屏一致的最后 CTA3️⃣ 文案反套路规则具体数字打败模糊形容词❌帮你节省时间 ✅把每周 4 小时的报表时间压缩到 15 分钟CTA 用动词 用户得到什么✅开始免费试用 ❌了解更多首屏只放一个主 CTA绝不让竞争按钮打架Part B — 一眼不像AI做的视觉系统这是整套技能的杀手锏完整规则见 SKILL.md#L146-L358字体指定使用 Geist、Manrope 等现代字体禁用Inter、Roboto 这类 AI 默认脸全文只用一个字体族不用斜体间距只允许从固定间距表取值2/4/8/12/16/24…96px杜绝随手写个 17px⭕圆角嵌套元素有公式内圆角 外圆角 − 间距层级关系一目了然动效所有过渡用自定义贝塞尔曲线模拟真实物理感滚动进场用 IntersectionObserver 实现不伤性能✨内容真实性禁止 Lorem Ipsum、John Doe、Acme Corp、99.99% 这类一眼假的填充物数字要有真实感如47.2%、$99.00强制 Tagline 揭示区页面中部必须有一段大字号核心口号滚动时逐词点亮——这是整页的视觉记忆点 一次产出什么7 步交付格式按下 Enter 之前AI 会按固定格式先给出完整方案见 SKILL.md#L361-L373页面大纲— 各区块及顺序首屏文案— 标题、副标题、CTA、信任语利益点— 3~5 条以结果为导向工作原理— 三步说明FAQ— 6~12 个问答SEO 建议— 是否收录、标题与 meta 描述版式推荐— 从经典英雄区 / 长文叙事 / 极简转化 / 对比页 4 种中选一种并说明理由之后才逐区块开始写代码而不是一股脑生成整页再大改。这种先规划后施工的产出方式正是一次做对的关键。️ 自定义设计值让它变成你的品牌每个技能的字体、颜色、间距、动效等设计值都集中在文件底部一个区块。Fork 仓库后修改这一段整套技能会自动跟随更新——等于用 10 分钟把通用规范改造成你的品牌规范。✅ 新手自查清单拿到 AI 产出的落地页后对照检查源自 SKILL.md#L377-L403一个页面只有一个主要转化动作首屏没有竞争性 CTA数字具体、无模糊动词至少有一项风险逆转免费试用 / 随时取消证明材料紧贴它所支撑的说法字体单一、无斜体、字阶落在标准刻度上无 Lorem Ipsum、无占位品牌、无 AI 味套话页脚有隐私政策链接、自定义 404、表单校验 总结ai-design-skills 的价值不在代码量而在它把怎么做出专业落地页拆成了 AI 可执行的明确规则先问清需求 → 规划结构与文案 → 套用严格视觉系统 → 按固定格式交付。安装只需几行命令而产出的落地页会像资深团队打磨过的作品。现在就装上landing-page-design技能让 AI 一次做出能直接上线的落地页吧。【免费下载链接】ai-design-skills项目地址: https://gitcode.com/gh_mirrors/ai/ai-design-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何让AI一次做出专业落地页：ai-design-skills新手从零开始完整指南
如何让AI一次做出专业落地页ai-design-skills新手从零开始完整指南【免费下载链接】ai-design-skills项目地址: https://gitcode.com/gh_mirrors/ai/ai-design-skills想让AI一次就做出专业级落地页开源项目 ai-design-skills 就是为此而生的。它把资深设计师的落地页方法论打包成一组 Markdown 规则文件喂给 Claude Code、Cursor、Codex、Windsurf 等 AI 编程工具后AI 写出的页面不再是看起来像AI做的而是有策略、有转化设计、有完整视觉系统的专业落地页。本文带你从零开始10 分钟跑通全流程。 它是什么给AI的设计技能包一句话概括ai-design-skills 是一套可安装的 AI 设计技能Skill合集。每个技能就是一个自包含的文件夹核心是一份SKILL.md规则文件AI 工具读到它就会按里面的规范来干活。项目目前收录的核心技能技能能做什么landing-page-design从零构建高转化落地页先问清需求、规划页面结构、写转化文案再套用完整的视觉系统字体、间距、圆角、动效项目说明和安装方式都写在 README.md许可证为 MIT见 LICENSE——可免费商用无需署名。 一键安装步骤3 行命令搞定以 Claude Code 为例在项目根目录执行mkdir -p .claude/skills 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/不同工具的放置位置不同对照下表即可详见 README.mdAI 工具安装位置Claude Code.claude/skills/目录Cursor.cursor/rules/或直接粘贴到 Settings → Rules for AICodexAGENTS.mdWindsurf.windsurfrulesCline.clinerules其他工具粘贴进系统提示词装完后用大白话提需求就行比如帮我做一个在线简历工具的新用户注册落地页。 技能的核心先策略后视觉这份 SKILL.md 分成两大半Part A 决定页面说什么、怎么排Part B 是不容商量的视觉系统。规则明确要求先走完 A 再碰 B——这正是 AI 落地页专业与否的分水岭。Part A — 需求澄清与页面结构1️⃣ 先提问再动手Intake技能要求 AI 在设计前一次性问清四类问题主要转化动作是什么试用预约演示下载、目标用户是谁、最大的三个顾虑是什么、有哪些证明材料客户 Logo、数据、案例。信息不全时它会做出合理假设并说明而不是卡住不动。2️⃣ 高转化落地页标准结构AI 会按三段式组织页面见 SKILL.md#L52-L72首屏必含 5 要素标题、副标题、主 CTA、一个信任信号、产品视觉中部论证区问题→方案、3~5 条利益点、三步使用说明、社会证明底部消除顾虑FAQ、风险逆转免费试用/随时取消、与首屏一致的最后 CTA3️⃣ 文案反套路规则具体数字打败模糊形容词❌帮你节省时间 ✅把每周 4 小时的报表时间压缩到 15 分钟CTA 用动词 用户得到什么✅开始免费试用 ❌了解更多首屏只放一个主 CTA绝不让竞争按钮打架Part B — 一眼不像AI做的视觉系统这是整套技能的杀手锏完整规则见 SKILL.md#L146-L358字体指定使用 Geist、Manrope 等现代字体禁用Inter、Roboto 这类 AI 默认脸全文只用一个字体族不用斜体间距只允许从固定间距表取值2/4/8/12/16/24…96px杜绝随手写个 17px⭕圆角嵌套元素有公式内圆角 外圆角 − 间距层级关系一目了然动效所有过渡用自定义贝塞尔曲线模拟真实物理感滚动进场用 IntersectionObserver 实现不伤性能✨内容真实性禁止 Lorem Ipsum、John Doe、Acme Corp、99.99% 这类一眼假的填充物数字要有真实感如47.2%、$99.00强制 Tagline 揭示区页面中部必须有一段大字号核心口号滚动时逐词点亮——这是整页的视觉记忆点 一次产出什么7 步交付格式按下 Enter 之前AI 会按固定格式先给出完整方案见 SKILL.md#L361-L373页面大纲— 各区块及顺序首屏文案— 标题、副标题、CTA、信任语利益点— 3~5 条以结果为导向工作原理— 三步说明FAQ— 6~12 个问答SEO 建议— 是否收录、标题与 meta 描述版式推荐— 从经典英雄区 / 长文叙事 / 极简转化 / 对比页 4 种中选一种并说明理由之后才逐区块开始写代码而不是一股脑生成整页再大改。这种先规划后施工的产出方式正是一次做对的关键。️ 自定义设计值让它变成你的品牌每个技能的字体、颜色、间距、动效等设计值都集中在文件底部一个区块。Fork 仓库后修改这一段整套技能会自动跟随更新——等于用 10 分钟把通用规范改造成你的品牌规范。✅ 新手自查清单拿到 AI 产出的落地页后对照检查源自 SKILL.md#L377-L403一个页面只有一个主要转化动作首屏没有竞争性 CTA数字具体、无模糊动词至少有一项风险逆转免费试用 / 随时取消证明材料紧贴它所支撑的说法字体单一、无斜体、字阶落在标准刻度上无 Lorem Ipsum、无占位品牌、无 AI 味套话页脚有隐私政策链接、自定义 404、表单校验 总结ai-design-skills 的价值不在代码量而在它把怎么做出专业落地页拆成了 AI 可执行的明确规则先问清需求 → 规划结构与文案 → 套用严格视觉系统 → 按固定格式交付。安装只需几行命令而产出的落地页会像资深团队打磨过的作品。现在就装上landing-page-design技能让 AI 一次做出能直接上线的落地页吧。【免费下载链接】ai-design-skills项目地址: https://gitcode.com/gh_mirrors/ai/ai-design-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考