AI 网站设计 用 Skill 把网站设计拉满：从普通到高端的完整工作流

最近在做 AIGC 商业模式设计，需要一个高端站点门面。用了一套 taste-skill + Cursor Agent Skill 的组合，把一个普通 SaaS 页面直接拉到了杂志级别的视觉水准。

全程没有设计师介入，纯 AI + 正确的提示词 + 正确的 Skill。

stitch 设计了一下，最终使用skill，效果太赞了。

核心概念：什么是 Taste Skill？

Cursor 有一套叫 Agent Skill 的机制，类似给 AI 安装「专业插件」。

不同的 Skill 代表不同的设计风格和工作流程：

关键思路：先视觉，后代码。让 AI 先出设计稿，确认方向对了，再生成代码。

完整三阶段工作流

第一阶段：生成设计参考图（imagegen-web）

告诉 AI 你想要什么风格，让它先生成一张设计稿图片：

用 imagegen-web skill，生成一张网站 Landing Page 设计稿：
- 非对称布局，左侧大标题，右侧图片
- Hero 全屏（100vh），视频背景，文字叠加
- Feature 区块 2 列 Zig-Zag 排列
- 配色：米白/暖灰底色 + 单一强调色
- 禁止：霓虹发光、居中布局、AI 感渐变

这一步的价值：在写任何一行代码之前，先确认视觉方向是否符合预期。改图比改代码快 10 倍。

第二阶段：分析设计稿，提取规格

AI 会从设计图里提取：

• 具体色值（比如 #F5F0EB 米白底色）
• 字体组合和层级（大标题 / 正文 / 说明文字的比例关系）
• 间距节奏（Section 间距、组件内边距）
• 动效逻辑（什么时候动、怎么动）

这一步相当于把「感觉」转化成「参数」，后面写代码有据可查。

第三阶段：对照设计稿写代码（design-taste-frontend）

有了设计规格，再激活 design-taste-frontend skill 写代码：

用 design-taste-frontend skill，帮我重新设计当前站点。

风格要求：大量留白、杂志感排版、克制动效、浅色中性色（米白/暖灰/炭灰）

Hero 要求：
- 全屏（min-h-[100dvh]），视频全屏覆盖，文字叠加在上方
- 构图参考 ESTUDIO ANÓNIMO 风格：超大衬线字标题，极简导航，充足留白
- 绝对不要居中布局，不要普通 SaaS hero 模板味

其余页面：
- 杂志感排版
- 大量留白
- 克制动效（Spring 物理动效，不要线性过渡）
- 浅色中性色系
- 全英文界面

这套 Skill 的关键规则（直接复制使用）

视觉层面

• 禁止霓虹发光 / 纯黑（用 Zinc-950 代替）
• 禁止过饱和渐变文字
• 强调色最多 1 个，饱和度 < 80%
• 禁止「AI 紫/蓝」配色

排版层面

• 禁止 Inter 字体，改用 Geist / Satoshi / Cabinet Grotesk
• 禁止居中 Hero，强制左对齐或非对称布局
• 禁止 3 列等宽卡片布局，改用 Zig-Zag 或不规则网格

内容层面

• 禁止「Elevate」「Seamless」「Next-Gen」这种 AI 营销腔
• 禁止假数据（99.99% 太假），用有机数据（47.2%）
• 禁止通用占位名字「John Doe」

动效层面

• 所有动效用 Spring 物理参数（stiffness: 100, damping: 20）
• 绝对不要 linear easing
• 全高 Section 用 min-h-[100dvh]，不用 h-screen（iOS Safari 会跳）

对已有项目改造：redesign-taste-frontend

如果你的项目已经有代码了，用这个 Skill 做增量升级：

用 redesign-taste-frontend skill，对现有代码做视觉升级。

先审计当前问题：
- 通用卡片布局？
- 字体不统一？
- 配色混乱？
- 缺少 loading/empty/error 状态？

然后按优先级逐步改造，保留现有功能逻辑，只升级视觉层。

不动功能逻辑，只改视觉——这是这个 Skill 的核心原则。

踩坑记录：Stitch 设计不适合高端站点

今天也测了 Stitch（Google 的设计工具），感觉出来的风格和高端定制化站点目标差距较大，更适合快速原型和标准 UI。

需要有个人风格、有质感的站点，还是老老实实走 taste-skill 路线。

三句话总结

1. 先出图，再写代码
   ——用 imagegen-web 确认视觉方向
2. 用 Skill 约束 AI
   ——设计有了规则，AI 才不会乱跑
3. 改造用 redesign，新建用 design-taste
   ——根据场景选对工具

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。