SaaS Landing Theme 是一个面向 SaaS 落地页生成的 AI 技能，目标是产出生产级、浅色主题、带有温暖编辑式美学的营销页面，使页面看起来像由顶级机构设计，而非 AI 批量生成。
用途 该技能适用于以下场景：用户想要一个 SaaS 落地页、营销站点或产品主页；用户要求创业公司网站、定价页或功能展示页；用户想要具有现代美学的专业浅色网页；用户正在构建 SaaS 产品并需要营销展示；用户在对话中引用“the SaaS theme”或“landing page skill”。
设计理念与反模式 主题遵循温暖的编辑式方向：干净但不冰冷，专业但不刻板，现代但不追逐潮流。需要避免的反模式包括：白底紫色渐变（被列为头号“AI slop”模式）、以 Inter、Roboto、Arial 或系统字体作为主字体、带抽象色块的通用主视觉插画、没有空间张力的模板化布局、以及没有强调色点缀的扁平无生气配色。
设计系统与模板参考 在编写任何代码之前，技能要求先阅读完整的设计系统参考：references/design-system.md，其中包含所有 CSS 变量、排版、配色、间距比例、组件模式和动画规范。在编写模板代码之前，需阅读模板参考：references/template-structure.md，其中包含规范的区块顺序、每个区块的 HTML 结构以及组件标记模式。
输出模式 模式一：完整落地页（默认）。当用户要求“landing page”“SaaS site”或“marketing page”且未指定区块时，按规范顺序生成包含所有区块的完整页面：导航（粘性，滚动时玻璃拟态）、Hero（标题、副标题、CTA、社会证明、产品截图）、Logo 跑马灯（滚动客户/合作方 Logo）、功能（6 卡片网格，含图标、标题、描述）、Bento 网格（混合尺寸卡片展示指标、工作流、统计数据）、定价（三档卡片：Starter / Professional / Enterprise）、客户评价（3 卡片网格，含引语和作者信息）、CTA（深色背景，强收尾标题）、页脚（4 列布局含链接）。 模式二：仅区块。当用户要求特定区块（如“只要定价区块”或“Hero + 功能”）时，只生成这些区块，但仍包含完整设计系统的 CSS 变量和基础样式。 模式三：React/JSX。当用户指定 React、Next.js 或 JSX 时，输出单个 .jsx 文件，使用 Tailwind 工具类（不使用自定义 CSS 文件）、React hooks 实现交互（滚动检测、Intersection Observer）、Lucide React 图标，并将相同设计令牌转换为 Tailwind 配置。
工作流程
- 阅读参考：生成代码前始终阅读 references/design-system.md 和 references/template-structure.md。2. 收集上下文：如尚不明确，向用户询问产品名称与标语、目标受众（如会计师事务所、创业公司、开发者等）、要突出的关键功能（3-6 个）、定价档位（如适用）、需要融入的品牌色。3. 生成：按照设计系统编写完整 HTML/JSX 文件。4. 定制：应用用户的品牌名、文案、功能和颜色。5. 交付：保存到 /mnt/user-data/outputs/ 并呈现给用户。
定制映射 用户提供的品牌色映射到 --accent 和 --accent-soft CSS 变量；产品名映射到 .logo 文本和页面 <title>；标语映射到 Hero 的 <h1> 和 <p> 内容；功能列表映射到功能网格中的 .feature-card 内容；定价档位映射到 .pricing-card 内容与价格；客户评价映射到 .testimonial-card 的引语和作者信息；截图/模型映射到 .hero-screenshot 内容区域。若用户提供品牌色，需推导完整强调色板：--accent 为提供的颜色，--accent-soft 为该颜色在白底上 8% 不透明度，--accent-hover 为该颜色加深约 10%。
质量检查清单 交付前需验证：使用 Instrument Serif + General Sans（而非 Inter/Roboto/Arial）；温暖米白背景（#FAFAF7）而非纯白；强调色有足够对比度并带柔和变体；存在噪点纹理叠加（body::before）；导航滚动时具有玻璃拟态效果；Hero 产品截图有透视倾斜；卡片有滚动触发的淡入上移动画；所有交互元素有带过渡的悬停状态；在 1024px 和 640px 处有响应式断点；没有通用占位文本，使用真实、贴合语境的文案；浮动统计卡片使用 float 关键帧动画；CTA 区块使用深色背景加径向渐变光晕；页脚包含位置旗帜（贴合用户所在地区）。
限制 该技能的具体安装方式、依赖环境、收费与价格信息在提供的资料中暂未说明。