让 AI 做网页，只说“更有设计感”往往不够。页面要讲什么、希望用户做什么，以及哪些地方需要动，最好拆开说清楚。
AI Design Skills 里有两个分工明确的入口，适合做独立产品介绍、活动落地页和作品集展示 👇
01｜landing-page-design：先把页面讲清楚
从目标人群、核心卖点和主要行动开始，再整理首屏、利益点、使用步骤与 FAQ。它也给字体、间距、圆角和交互状态一套明确约束。
适合：新品介绍、预约体验、活动报名。提供真实功能、品牌素材和参考页面，比只给一句“做高级点”更有帮助。
可以这样提需求：
“为我的阅读记录工具设计介绍页，主要行动是预约体验。只使用提供的真实功能与证据，不编造评价、用户量或效果数字。先给结构和首屏文案，再实现并检查手机排版。”
02｜design-to-motion：再让设计演示起来
以已有设计稿为基准，先还原画面，再编排加载、列表出现、图表变化等局部动效。展示场景可按需导出 MP4 和 GIF。
适合：作品集、功能展示、落地页中的动态卡片。它主要处理展示动画；线上菜单、提示条、触控反馈还需要按真实产品交互单独验证。
可以这样提需求：
“把这张统计卡片做成循环展示。保留原稿字体、配色和背景，只让进度与条目依次出现。先预览，再导出作品集用 MP4 和 GIF，并保留静态版本。”
🧩 怎么搭配更顺？
新页面先用 landing-page-design 定结构，确定视觉后，再用 design-to-motion 处理需要展示的部分。已有成熟页面不必整页重做，先挑一张有明确叙事的卡片。
风格规则要服从你的品牌和实际材料。最终仍要检查文字是否真实、按钮是否可用、手机是否顺畅，以及减少动态效果的偏好是否受到尊重。
配套 Skill 已分别整理为中文导读：
落地页设计：https://dadaplanet.com/community/skills/res_ops_20261026_landing_page_design
展示动效：https://dadaplanet.com/community/skills/res_ops_20261026_design_to_motion
官方仓库：https://github.com/elayadesign/ai-design-skills
本篇核对了固定 GitHub 版本，未运行上游技能；封面为 AI 概念配图，不代表其实际生成结果。