SuperAPI AI 工具集

saas-landing

前端与建站

查看项目

更新于 10-16 01:20

技能介绍

用途:根据当前工作目录中的 DESIGN.md 设计令牌,生成一个单页 SaaS 落地页(index.html)。触发关键词未完整提供。

主要能力与流程要点:

  1. 读取上下文:先读取当前工作目录的 DESIGN.md;若缺失则停止并索要。识别色板、排版令牌与布局原则,并注意其中的 “Agent Prompt Guide” 部分,冲突时以其为准。
  2. 规划板块,按顺序:Hero(logo 或 wordmark、标题、1-2 句副标题、主 CTA、次 CTA,hero_density 用作纵向内边距 px);Features(3-6 个功能卡片,各含图标、短标题、1-2 句正文);Social proof(proof_count 个 logo 或评价,为 0 则跳过);Pricing(2-3 档,仅当 has_pricing 为 true 时包含);Footer CTA(大号强调色区块配单按钮);Footer(链接与版权)。
  3. 应用设计系统:所有颜色取自 DESIGN.md 令牌,不得自创十六进制值;标题用声明的 display 字体,其余用 body 字体;遵守网格、max-width 与区块间距;使用声明的按钮/卡片/输入模式;若深度说明为极简则不要加阴影;强调色在 Hero 一次、Footer CTA 一次,并用于所有链接。
  4. 写文件:输出单个自包含 index.html,CSS 内联在 head 的 style 块中;字体无法从 Google Fonts 等加载时使用系统字体回退;无外部 JS;使用语义化标签;每个可编辑元素带 data-od-id="<unique-slug>" 以便宿主应用评论模式定位。
  5. 自检:文本需有实际意义(不用 lorem ipsum),用 product_name 与 tagline 输入并为其余部分生成合理具体文案;不得出现失效颜色引用;响应式断点匹配 DESIGN.md 的 Responsive Behavior;在 1440w、768w、375w 下观感良好;强调色总计使用不超过两次。
  6. 完成:只写 index.html,不生成独立 CSS、JS 或 README。

作者参考:技能结构为 SKILL.md 加可选 assets/base.html;od: front-matter 可选,用于兼容仅 Claude Code 的场景,添加后可启用类型化输入、滑块、预览元数据与能力门控;DESIGN.md 视为协作者而非覆盖者,代理可在简报冲突时覆盖但不得发明新令牌;评论模式兼容需标注 data-od-id。

限制:依赖 DESIGN.md 存在;具体触发关键词、完整输入参数定义、分类与价格等信息暂未提供;未涉及外部 JS、独立样式表或 README 输出。