Premium SaaS Web
该技能编码了顶级SaaS/AI/代理网站模板之所以显得昂贵的设计方法。它通过检查六个参考站点（OptimAI、Aigocy、Adon、Davies、Pastily 以及一个 AI 图片生成演示）在 CSS 层面上的实际数值而提炼得出。这些方法都是真实技巧，而非猜测。
文件布局。 只加载任务所需的内容：
directions/<name>/style.md：每个视觉方向一个文件（包括该方向特有的令牌、字体、标志性元素和技术）。只阅读你选择的那一个。shared/*.md：每个方向都使用的技术，按主题划分。根据你所构建的章节阅读相应文件（参见步骤 3 中的映射）。
核心见解：高级感 = 可控光线 + 克制 + 动效
廉价页面和高级页面通常使用相同的组件（Hero、Logo 条、功能、定价、常见问题、行动号召）。差异在于四个完成度层面：
- 光线 —— 表面看起来是“被照亮”的，而不是“被填充”的。发光效果由模糊的形状塑造而成；卡片具有左上角光泽；按钮具有内部高光和内部底部边缘；边框是透明度在 6–20% 的细线。真实的光线会衰减，因此没有平坦的纯色块。
- 克制 —— 只有一种强调色，在页面上使用不超过 5%。文本层级来自同一种颜色的不透明度（100 / 80 / 60 / 50%），而不是多种灰色。最多两种字体（+ 可选的一种等宽字体用于标签）。没有不带任何意义的装饰。
- 具有张力的排版 —— 展示性字体大且字距紧密（字母间距 −2% 到 −7%），行高 ≈ 1.0–1.2。标题的一半通常变暗（
opacity .5或更浅的渐变），以便眼睛首先阅读强烈的部分。 - 有重量的动效 —— 平滑滚动（Lenis），单词逐字上升的标题，滚动时文本填充，数字滚动，永不停歇的跑马灯，堆叠卡片。所有动画都是缓出（非线性），无弹跳效果，并且都遵循
prefers-reduced-motion。
如果输出只有组件而没有这四个层面，那么无论有多少章节，它看起来都像一个免费的 Bootstrap 主题。
工作流程
1. 阅读需求，选择一个方向
从下表中选择一个方向，然后阅读其 directions/<文件夹>/style.md（完整的令牌集及其标志性技术）。不要阅读其他方向。
| 方向（文件夹） | 感觉 | 最适合 | 来源 |
|---|---|---|---|
Ember Dark (ember-dark) | 深海军蓝黑色，雕刻感橙/红或蓝辉光，彩虹边框 CTA，等宽按钮标签 | AI 工具、开发工具、SaaS 应用 | OptimAI |
Tactile Light (tactile-light) | 锌白色，光泽拟物按钮，光泽卡片，一种热烈强调色（红色），带 3D 渲染的框架 Hero | AI 代理公司、B2B SaaS、咨询公司 | Aigocy |
Editorial Mono (editorial-mono) | 纯#111 在 #F0F0F0 上，140px 无衬线字体，−7% 字距，发丝网格，滚动填充文本，无阴影 | 代理公司、工作室、高端服务 | Adon |
Noir Spotlight (noir-spotlight) | 黑色，一种霓虹强调色，与照片互动的巨大文字，Shader/WebGL 背景，堆叠项目卡片 | 个人品牌、作品集、创意技术 | Davies |
Warm Playful (warm-playful) | 暖白色纸张，近黑色墨水，柔和绿色转金色，28px 白色卡片，手写笔记，设备溢出边缘，照片背景定价 | 桌面/菜单栏应用、工具、独立及消费类工具、一次性付费软件 | Pastily |
如果用户未指定且是 SaaS/AI 项目，默认为 Ember Dark。当产品是原生/桌面/移动实用工具、独立开发者或单一创始人工具，或者需求描述为友好、平易近人、温馨、“非企业化”时，切换到 Warm Playful（即使从未提到“SaaS”）。Ember Dark 会让一个 9 美元的剪贴板应用感觉像企业基础设施。混合方向会导致页面混乱。从其他方向借用一种技术是可以的，只要调色板和字体保持一致。
用一句话告诉用户你选择了哪个方向及其原因，以便他们可以早期更正。除非品牌有自己的颜色（用户指定了颜色，或产品已使用），否则保留该方向的强调色；像“温馨”或“黄昏”这样的情绪词不是品牌色。对于真正的品牌色，请参阅 directions/README.md 中的“替换强调色”。
2. 将页面规划为一种节奏，而非列表
高级页面交替使用密度和色调。一个有效的典型 SaaS 首页：
- Hero：眉毛徽章（类似“✦ AI 驱动代理”的胶囊标签或类似“v1.4 已发布”的真实信息；仅在用户提供了真实评分时使用头像堆叠+评分），2 行标题（其中一半变暗），1–2 行不透明度 60% 的副标题，主要 + 次要 CTA，然后是产品本身（浏览器框架模型或交互式提示框）通过渐变淡出融入下一节。
- Logo 条：灰度 Logo，无限跑马灯，边缘遮罩。
- Bento 功能网格：5–7 个大小不一的单元格，每个都包含一个用 HTML/CSS 构建的迷你 UI 插图（工作流节点、聊天气泡、开关、图表、色片），而不是库存图标。
- 滚动填充陈述：一个在滚动时从 30% 填充到 100% 的大句子。填充严格逐行进行（每个块一个时间线，行与行直接相连），永远不会同时多行。请参阅
shared/typography.md。 - 数字：3–4 个带有滚动计数器的统计数字；一个巨大的淡化数字作为装饰。
- 工作原理 / 标签页 或 堆叠卡片。
- 客户评价：仅使用用户提供的引文，包括头像 + 姓名 + 角色，可能是一个垂直跑马灯卡片。如果没有，则省略该部分（或将其替换为信任/隐私条或制造者的简短说明）。虚构的评论、评分和用户数量是虚假的社会证明：它们会误导买家，所有者也可能意外发布。
- 定价：3 个层级，中间一个使用强调色边框/发光效果突出显示，月度/年度切换。
- FAQ 手风琴。
- 最终 CTA 具有页面最强辉光，然后是带有巨大字标的平静页脚。
交替使用深色/浅色（或 bg-1/bg-2）部分背景以创造节奏。部分内边距应慷慨：桌面端垂直方向为 120–176px。
3. 使用配方构建
这些配方是可直接复制的 CSS/HTML/JS。你方向的 style.md 已经包含其标志性技术（例如 Ember 的彩虹边框，Tactile 的触感按钮和光泽卡片）。对于其他一切，请阅读与你正在构建的内容匹配的共享文件：
| 正在构建… | 阅读 |
|---|---|
| Hero 光线、辉光、点/网格/噪点背景、发丝网格和列引导 | shared/light.md |
| 标题（紧密字距、变暗的一半、金属渐变）、滚动填充陈述（逐行 GSAP，或带有关键词着色的逐词） | shared/typography.md |
| Hero 中的产品模型（浏览器框架或带有操作系统界面的桌面应用设备）、截图画廊、带有迷你 UI 的 Bento 网格 | shared/product-proof.md |
| 玻璃导航、感知部分的胶囊导航、眉毛徽章和头像堆叠、手写注释、柔和白色卡片、卡片聚光灯、跑马灯、定价（3 层级、照片背景单一价格或普通单一价格卡片）、常见问题、页脚字标 | shared/components.md |
| 任何具有图标的命名品牌（集成、Logo 条、轨道、“与…协作”） | shared/logos.md |
GSAP + Lenis 样板、时序/缓动表、gsap.matchMedia() 减少动效模式、揭示效果、计数器、堆叠卡片、纯 CSS 色调转换故事堆栈、固定 UI 芯片墙、固定滚动、悬停、陷阱、原生 CSS 滚动驱动动效 | shared/motion.md |
| Shader/WebGL 背景、粒子场、辉光（Three.js，带有 CSS 后备和移动端门控） | shared/webgl.md |
一个完整的落地页通常需要所有文件；单个部分或小型编辑只需要其对应行。自 3.13 版本起，所有 GSAP 插件（包括 SplitText）均免费，可从 jsDelivr 加载。
4. 技术默认值
- 使用 Tailwind CDN 的单一 HTML 文件（或项目现有技术栈——如有则遵循）。将设计令牌放入
:root的 CSS 自定义属性中，以便一次编辑即可更换调色板。 - 字体来自 Google Fonts。来自参考站点的经过验证的组合：Sora + Inter Tight + IBM Plex Mono（Ember），Urbanist（Tactile），类似“Inter Tight”/“Schibsted Grotesk”/“Familjen Grotesk”的无衬线字体 + DM Sans（Editorial），Figtree/“Outfit”（Noir）。
- 图标：内联 SVG（Lucide 风格 1.5px 描边）。切勿使用 emoji 作为图标。
- 图片：如果图像生成可用，生成品牌一致的 3D 渲染/抽象对象；否则使用 CSS/SVG（辉光、迷你 UI、点状地球）构建视觉效果。仅对人物/肖像使用
https://images.unsplash.com/...照片。Hero 中没有视觉锚点的页面看起来不完整。 - 真实的品牌 Logo，绝不使用字母占位符。 每当页面提到现有公司、产品或 SaaS（集成芯片、Logo 弧/条、“与…协作”区域、客户评价、对比表格）并显示图标时，请使用该品牌的实际 Logo。带有首字母的彩色方块（“F”代表 Figma，“S”代表 Slack）读起来像廉价模板，并破坏信任。详情和来源请参阅
shared/logos.md。如果无法获取真实 Logo，则仅将名称显示为纯文本，不带任何图标；虚假图标比没有更糟糕。 - 移动端：在 <768px 下所有内容折叠为单列；展示性字体使用
clamp()缩放；辉光缩小（大模糊在手机上代价高昂）；触摸设备上禁用光标效果。
5. 在交付前自我审查
在浏览器中打开页面，并在 1440px 和 390px 下截图（如果可以）。对照此列表检查。这些是区分“AI 生成”和“顶级销售”的关键：
- 只有一种强调色（加上中性色）。渐变保持在该色系内，除非是有意的彩虹边框。
- 展示性标题具有负字母间距和变暗的一半或渐变。
- 正文/次要文本使用一种颜色的不透明度步骤，并且对比度仍然通过（正文 ≥4.5:1）。
- Hero 显示产品（模型、提示框、UI），而不仅仅是渐变上的文本。
- 每个深色部分至少有一个雕刻感光源；没有纯色的平坦矩形。
- 边框是细线（1px，6–20% 透明度），圆角一致（选择一个比例：8/12/20/28/999）。
- 按钮具有改变光线的悬停状态（辉光收紧、光泽移动、箭头移动 2–4px），而不仅仅是颜色。
- 动效：Hero 文本揭示、滚动触发的淡入（带交错）、至少一个同步效果、跑马灯。所有动效在
prefers-reduced-motion下禁用（通过gsap.matchMedia()），持续时间取自shared/motion.md中的时序表，不动画化宽度/高度/顶部/左侧。 - 如果使用 WebGL：下方有 CSS 辉光作为后备，DPR 上限，仅当可见时渲染，在移动/低核心设备上跳过，文本保留在 HTML 中。
- 页面上提到的每个真实品牌都有其真实 Logo（或无图标）。没有首字母方块。
- 如果是 Warm Playful：Hero 设备是一个真实外观的 OS（菜单栏、dock、应用菜单）用 HTML 构建，溢出一条边缘，最多有两个 Caveat 注释；故事卡片使用 16px 的
top步进和每个卡片一种色调变化保持粘性；关键词颜色仅出现在单个单词上，通过 4.5:1 对比度；强调色仍然是绿色（除非用户提供了品牌色），金色仅出现在 CTA 渐变的末尾；一次性定价是单个白色卡片（有照片则使用照片背景，否则为普通卡片），任何免费试用作为其中的一行。 - 没有 lorem ipsum。文案特定于产品：具体数字、听起来真实的特性。
- 没有虚假的社会证明：没有伪造的评分、用户数量、客户评价或新闻 Logo。必须假设的产品细节需要列出供用户确认。
- 在 390px 下没有内容水平溢出。
应避免的内容（“廉价模板”迹象）
- 悬停时移动的按钮。硬性规则，无例外。 没有磁性/光标跟随按钮，没有在
:hover时对按钮或其标签/图标进行translate/scale/rotate变换，没有滑动箭头，没有悬停升起效果。布局在光标下保持静止，以便点击目标永远不会躲闪。仅通过颜色、亮度、辉光、边框或阴影变化显示悬停状态。（卡片仍然可以升起；按钮和样式化为按钮的链接不可以。） - 在所有内容上使用紫色到蓝色渐变；多个相互竞争的强调色。
- 在深色背景上使用类似
0 4px 6px rgba(0,0,0,.3)的投影（阴影在深色上不可见；改用辉光和边框）。 - 所有内容居中，带有相同的 3 个图标 + 标题 + 文本的卡片网格。
- 玻璃拟态，而玻璃后面没有任何东西可以模糊。
- 虚假品牌图标：用字母替代 Figma、Slack、GitHub 等的彩色圆角方块。
- 弹跳/弹性缓动、超过 1 秒的淡入效果、同时对所有元素进行动画。
- 正文中的渐变文本；每个视口内超过一个渐变文本短语。
- 股票“AI 大脑”图像。展示产品或抽象渲染。
- 深色背景上的低对比度正文：保持正文至少约 70% 白色，以使其在辉光下仍可读。