一个 AI 技能
让你的 AI 智能体做出工作室水准的网站
性能
最大内容绘制 1.0 秒，阻塞 10 毫秒
无障碍
对比度、地标与键盘顺序
SEO
元信息、站点地图和 llms.txt 随页面一起产出
结果自己会说话
六个网站，全部用这个技能从零搭出来。 不同行业、不同配色、不同的区块组合 —— 背后是同一条搭建路线。每一个在博客里都有一篇说明：这家公司做什么，它的首页由什么组成。第七个例子，就是你正在看的这个网站。
智能体本来就会写页面，为什么还要一个技能
一句提示词给你一个模板，一个技能给你一个网站。 没有路线的智能体走一步想一步，每次跑出来的东西都不一样。技能给它一条路线、一份区块目录，还有绕不过去的规则 —— 变的不是速度，是最后交出来的东西。
不是一眼看出是 AI 做的页面
一句「帮我做个网站」，换来的页面自己就把出身写在脸上。客户和合作方会把这当成你对待工作的态度，而现场没有人替你解释。
不用订阅
不是 Tilda，也不是 Framer：你不是在别人的服务里租一个页面，也不用为「让它显示出来」持续付费。代码是你的 —— 想部署到哪里都行。
速度与 SEO
Next.js 服务端渲染、压缩过的媒体、meta、站点地图和社交卡片。这些通常是上线一个月后再单独外包的活。
成品版式、配色、字体和动效
一份区块目录，明暗两套主题、三种宽度都验过。智能体不需要现编版式 —— 它挑一个跟内容合得来的。
多语言机制，已经接好
从浏览器识别语言，访客的选择记在 cookie 里，切换器就在页头。每种语言拥有自己的页面：不是一段文字翻三遍，而是每个市场有自己的论据和例子。
目录里已经有什么
一条能做出会卖货的网站的完整流水线
八个步骤，助手自己走完全部八步。 顺序本身就是工作量。先定这个网站给谁看、为什么，再定长什么样、由什么组成，最后才拼页面、写文案。从中间开始，等于把前面的全部重做一遍。
访谈
网站给谁看，为什么，访客该做什么。助手一次问完。
识别
配色、字体、四栏网格。这一步之后，源码里不会再出现写死的颜色和字体。
结构
单页还是多页，几种语言，几套主题，要不要 markdown 博客。
拼装
按页面要讲的道理，从目录里挑区块。一个区块整块拿走。
文案
每种语言的每一句话，用你项目自己的说法。不编造数字。
媒体
图片转 webp 并通过 Next Image 出二倍图，视频转 webm 并配封面。一条命令。
SEO
meta、canonical、hreflang、站点地图、robots，以及每页每语言一张社交卡片。
检查
类型、构建、两套主题、三种宽度、对比度。有残留脚本就报错。
受众画像是整个网站的地基
销售策略从这里开始。 谁会来找你，他们已经知道什么，不买你的话会选什么，以及哪一条异议会让单子黄掉。漏斗就是从这些里长出来的：页面用什么开头，论据按什么顺序排，用什么收尾。
创始人要去见投资人，网站昨天就该好了
市场负责人一次投放要一个落地页，一周内上线
设计师自己做得了，但不想做
工作室常年在给客户交付网站一个画像，一个落地页
从搜索来的人要看价格和差别。从邮件或者一篇文章来的人，还不知道这是个什么东西。不同的画像意味着不同的漏斗和不同的页面，而在开工前把这件事想清楚，比做完再推倒重来便宜。
你会拿到什么
一个区块还没拼上，网站已经像是你的了。
跟生意合得来的结构
光标下的那一行，就是要做的决定。 五个决定，越往后改起来越贵。单页展开成多页很便宜；反过来不行，因为那些文案本来就是写给「一屏读完」的。
单页
多页
默认主题
语言
Markdown 博客
等不起的时候
慢的页面，在第一屏出来之前就被关掉了。 脚本会压缩图片和视频、生成封面和二倍图、打开懒加载 —— 手工做，每个网站都是好几天。快的页面滚动不卡、不闪空框，排名也更靠前。
处理
3类媒体
上线时的语言数
每个市场有自己的文案
主题
浅色、深色、跟随系统
宽度
手机、平板、桌面
给搜索引擎的文件
robots、sitemap、llms.txt
网站图标
一张图，出全套尺寸
对比度
文字是拿来读的，不是拿来猜的
我们验，不承诺
对比度由检查脚本算出来，不靠眼睛判断。速度是在构建好的页面上用 PageSpeed 量的：我们不给你一个数字，你自己跑一遍就看到了。
在 PageSpeed 里验过
100%
一个完整的代码仓库，不是某个服务里的账号
一个项目，不是五个服务。 Next.js 服务端渲染加 Tailwind，上面是多语言和路由，旁边是博客和文档，每一页都有页头和页脚。代码干净，完全属于你：想部署到哪里都行。
给每个市场准备好的 SEO
meta、站点地图、社交卡片和 llms.txt 都已经做好。 每个板块、每种语言都有自己的标题、描述和分享图。站点地图自己生成，llms.txt 把网站开放给 AI 搜索，语言从浏览器识别并记住。每个市场拿到的是自己的内容，而不是一段文字的翻译。
给 AI 搜索的文件
llms.txt：助手能读完整站
给爬虫的文件
robots.txt、站点地图、llms.txt
每个板块一套 meta 和卡片
各自的标题、描述和分享图
任何市场的语言
基础版两种，之后想加多少加多少
重复与空描述
带着这些，脚本不让网站发出去
独立页面
每种语言的每个板块都是为它的市场写的
比你以为的多
这些从第一天起就能用。 不是计划，也不是路线图：每一项都已经做好，并且在真实上线的网站上验过 —— 包括你正在读的这一个。
六个方面，每一个交出去的时候都是闭合的
装得快，更新也不费事
技能就住在你已经在用的地方。 没有设置项，也没有页面搭建器：你用平常说话的方式跟助手讲，它按压缩包里那份说明去干活。
压缩包里带着每个平台的安装说明 —— Claude Code、Cursor、Codex、Windsurf 和 Antigravity。
需要你做的只有一件事：告诉助手压缩包在哪。剩下的它自己装。
用斜杠调用技能 —— 「/outrender」 —— 然后把你手上有的东西给它，哪怕只有一句话：项目是什么，卖给谁。
剩下的助手自己问：受众、板块、颜色、字体和语言。你答不上来的每一项，它都给出一个说明了理由的默认值。
我们会定期更新说明、修掉少数错误、加进新的成品区块。每次更新都会通知，新版本随时可以下载。
然后你写一句「/outrender doctor」 —— 助手会找出你搭站之后有哪些变化，并把它们用到你已有的网站上，不碰这个网站原本是为什么做的。
你的代码，你的云
刚复制出来的项目哪里都不部署，这是故意的。 Fly、Vercel、Netlify、Docker 和 GitHub Actions 的配置都在一个文件夹里，并且是关着的：一个新仓库不会去联系任何一家托管商。网站住在哪里，由你决定。
一整个团队在替你干活
平时这些人是一个一个招进来的。 工作室水准的网站不是一个人的活。技能里装着四种角色各自的规则，并且按团队本来会用的顺序，一个接一个地用上去。
- 认知阶段
- Jobs to be Done
- 异议阶梯
- AIDA 还是 PAS，看情况
- 为你的品牌配色
- 字体搭配
- 网格与间距
- 明暗两套主题
- 用目录拼出页面
- 手机、平板、桌面
- 从右往左的语言
- 交付前的检查
- 页面标题与描述
- 站点地图与语言链接
- 聊天软件里的分享图
- 给爬虫的文件
永久授权，含更新：你买下模板、说明和脚本的压缩包，我们继续更新它 —— 新版本会送到你手上
个人版 — 1 份授权
$415
一个人
授权覆盖你自己：给自己和客户做网站，副本数量不限
永久访问
今天有的全部，以后我们新增的也算
团队版 — 最多 25 人
$1,415
覆盖整个团队
授权按公司内的每个团队购买，一份最多 25 人 —— 再大的团队也够用
个人版的全部内容
同一个压缩包，同样的永久授权
企业版 — 25 人以上
面议
团队超过 25 人
请联系销售部门
常见问题
一个装着文件的文件夹：一个给 AI 助手的技能，和一个 Next.js 网站模板。技能是助手把这个模板变成你的网站时所依据的说明：先问你什么，先定什么，交付前检查什么。
来自已经交付的人
第一个页面做完之后，他们是这么说的。 网站上线之后我们才收集这些，并且带着姓名和成品链接一起发出来。
· 产品落地页
以前智能体交给我的页面，我最后还是要手改一遍。这个在拼第一个区块之前，先问了网站给谁看、为什么。第一屏就能看出差别。
· 企业站
「下一块该长什么样」这个争论，被目录一次性解决了。我们拿一个现成的，把字换掉 —— 客户改需求不再变成重新做版式。
· 两个落地页
两种语言各写各的文案、而不是互相翻译，正是以前缺的那块。俄语页和英语页讲的道理不一样，而这终于不用花第二个项目的钱。
· 作品集
交付前那次检查，抓到的正是我平常上线一周后才发现的东西：忘掉的占位文字、重复的区块、结尾带句号的标题。有人一起看，挺好。
