ai-service-landing-page

SKILL.md 内容

{
  "name": "ai-service-landing-page",
  "content": "---\nname: ai-service-landing-page\ndescription: 从零搭一个\"企业 AI 服务清单/落地页\"站点的标准打法。当用户要\"做个 AI 服务清单站\"\"搭服务介绍页\"\"参考某站设计统一风格\"时使用。固化自 smart-site/ai-services 项目的实战经验。\ncategory: web-delivery\n---\n\n# AI 服务清单/落地页打法\n\n把\"企业 AI 服务\"做成可浏览、可转化的清单站。\n\n## 何时用\n- \"做个 AI 服务清单站\"\n- \"搭服务介绍页\"\n- \"参考 XX 站统一风格\"\n\n## 核心原则\n1. 单文件 HTML + 手写 CSS，不引框架（改起来快、好部署）\n2. 配色用 CSS 变量体系，换肤只改 :root（不逐处改）\n3. 参考站先抓真实结构再复刻，不凭印象\n4. 每改一版必须浏览器实测 + git tag\n\n## 流程（6 步）\n1. **盘点内容**：列分类（如获客/客服/运营/提效/决策），每类下服务项（痛点+交付+定价）\n2. **定风格**：选参考站（如 TokenPlan Hub 的蓝紫亮色），抓其配色/图标/卡片特征\n3. **写骨架**：单文件 HTML，`:root` 定义变量，hero + 分类网格 + CTA\n4. **补视觉**：hero 主视觉 SVG + 每分类示意图（inline SVG，零依赖）；图片少时优先 SVG 不是 emoji\n5. **铺宽**：内容区 `max-width:100%` + `padding:5vw` 铺满屏，卡片 `auto-fit` 多列\n6. **验证**：浏览器实测渲染 + 公网 200 + git commit/tag\n\n## 避坑\n- ❌ 用 emoji 当图标 → 用 inline SVG（Lucide 风格）更专业\n- ❌ 子页和列表页风格不一致 → 主色统一用一套 CSS 变量\n- ❌ 改完不实测 → 无头浏览器截图/快照确认\n- ❌ 深色根页和亮色子页割裂 → 整站变量统一换肤\n\n## 验证\n浏览器打开公网 URL，确认：hero 图在位、5 分类全渲染、行业/CTA 区块正常、无控制台报错。\n",
  "path": "/home/agentuser/.hermes/skills/ai-service-landing-page/SKILL.md",
  "size": 941
}