Open dossier
为 AI 产品和 vibe coding 项目制作宣传首页
AICLAW404.CC
The missing brief for vibe-coded products.
Case file: homepage_001
你的产品不是没价值，
只是首页还没把它讲明白。
AICLAW404 专门为各类 vibe coding 项目做宣传落地页。 我们把原型、截图、想法和技术能力整理成一张看起来可信、讲得清楚、适合转化的首页。
48h
快速起稿
01
首页优先
∞
后续可扩展
Evidence board
从“有 demo”
到“像个产品”
首页会先完成三件事：说明你是谁、这个产品解决什么问题、用户下一步该做什么。
不是模板拼装，而是为每个 vibe coding 项目写一套能卖得动的叙事。
先解释产品为什么存在，再展示它能做什么，最后推动用户联系你。
保留 AI 原型的速度感，但把视觉、信息层级和转化逻辑做完整。
What we build
不是在做一张漂亮图，而是在搭一条更完整的转化路径。
首页会兼顾故事、结构和行动。页面既要能被快速理解，也要让用户愿意继续点下去。
首页诊断
把一句模糊的产品描述，重写成用户 5 秒内能读懂的价值表达。
叙事包装
把原型、截图、prompt 和代码片段拼成一条能转化的故事线。
信任结构
用案例、流程、FAQ 和行动按钮，让页面像产品而不只是实验品。
Who this is for
不是所有人都需要复杂官网，但大多数新项目都需要一个像样的首页。
尤其是当你的能力已经有了，只是外部还看不懂、记不住、也不知道怎么联系你。
独立开发者
需要一个像产品而不是像实验记录的首页，把 demo 变成可信入口。
AI 工作室
需要一个统一母版，承接多个项目、多个案例、多个合作方向。
冷启动团队
还没空做完整品牌系统，但需要先拿到第一波咨询、预约和潜在客户。
Selected cases
先看几个被整理过的项目，案例会比口号更有说服力。
首页负责打开兴趣，案例页负责把兴趣变成信任。这里先展示三种不同类型的项目叙事。
把 Agent 工具站从黑客原型改造成可预约的咨询入口
原本只有功能截图和一段技术说明，我们把它改成一个面向业务方的首页与案例叙事，让访客知道它解决什么问题、适合谁、如何开始合作。
为独立开发者的多项目矩阵做统一母版
一个人做了多个 vibe coding 项目，但每个都像零散实验。我们为他建立统一的品牌母版和案例页结构，让不同项目能在同一个站里被理解。
把工作室的“能做很多”整理成“最值得先买什么”
面对 AI 工作室常见的服务过多、表达过杂问题，我们用案例页作为过滤器，先展示最强信号，再让用户顺着叙事继续了解能力边界。
Workflow
合作方式足够轻，但结果要足够完整。
你提供项目简介、截图、GitHub 链接或一句话描述。
我们整理叙事框架，明确首页主标题、价值点和版块顺序。
使用 Next.js + shadcn/ui 实现页面，并按 Vercel 的部署方式整理项目结构。
给 AI 产品一个像样的第一印象
适合独立开发者、工作室和正在内测的 side project。把“我做了个 demo”升级成“这是一个值得了解的产品”。
把凌乱信息整理成可成交的页面结构
从首屏文案到功能区块、FAQ、预约/收集邮箱入口，减少访客困惑，增加行动意愿。
让你的宣传页和 Vercel 部署链路一起交付
代码可接管、结构可复用、后续你继续扩展案例页、功能页、定价页也不会推倒重来。
Offer shape
先把服务包装成能理解、能比较、能下决定的结构。
如果后续你要公开报价或按层级介绍服务，这里已经给你埋好了结构语言，不需要从零改版。
Starter Page
适合快速上线
首页叙事重写
首屏 + 服务区 + FAQ
Vercel-ready 工程结构
Signal Page
适合开始接单
增加案例结构
线索表单
更完整的转化节奏
System Page
适合后续扩站
首页母版体系
可扩到案例/服务/博客
统一视觉变量和组件层
Promise
不是把页面塞满，而是帮你先建立清晰感。
一张好的首页，第一职责不是炫技，而是让别人理解你在做什么，并愿意继续往下走。
价值先行：首屏先讲清用户为什么要在意。
结构可扩：后面加案例页、服务页、预约页不会推倒重来。
部署顺手：代码已经按 Next.js + Vercel 的节奏整理。
Structure snapshot
一个可以继续长大的首页骨架
当前首页已经内置好以后继续扩展的叙事节奏。你后面要接服务页、案例页、文章页，结构都能自然延展。
首屏
价值表达、身份说明、主要行动按钮
能力区
解释你做什么，为什么值得继续看
流程区
降低合作成本，让用户知道如何开始
FAQ
提前处理疑虑，缩短决策时间
FAQ
先把最常见的问题写在这里。
宣传页最怕的是用户刚有一点兴趣，就因为没有答案而离开。FAQ 是节奏的一部分，不是附录。
为什么叫 AICLAW404？
它像一份“找不到明文解释”的案件档案。很多 vibe coding 项目有原型、有能力，但没有被讲清楚。AICLAW404 就是来补这份缺失说明书。
首页适合哪些项目？
适合 AI 工具、自动化产品、Agent 服务、个人工作室、概念验证项目和任何需要快速上线宣传页的数字产品。
后续能继续扩成完整官网吗？
可以。这个首页结构已经按可扩展方式写好，后续能自然接入案例页、服务页、博客、表单和分析埋点。
让 `aiclaw404.cc`
成为你所有 vibe coding 项目的统一入口。
这版首页已经适合作为第一版官网。现在它还多了一个可直接发出项目简报的表单，不需要你再补后端才能开始接触潜在客户。
Direct line
contact@aiclaw404.cc
Start project
把你的项目简报发出来
当前版本会把表单提交转发到 Formspree，保留稳定的感谢页链路，同时让咨询线索真正落库。