装上这个skill, 不懂技术也能做出漂亮的品牌官网

想给自己的品牌做个官网，很多人卡住的地方其实很具体：知道自己喜欢什么，却不会把它变成网页。让 AI 帮忙写，页面倒是很快出来了，但配色、排版、图片和动画凑在一起，总有一股熟悉的“AI 味”。

我之前也反复遇到这个问题。于是把做网站时有效的方法、实际画面对照，以及一次次修改得到的经验，整理成了一个开源 Skill：Sitecraft。

它最想解决的事很简单：哪怕不懂技术，也能通过几句日常描述，把品牌官网做得漂亮、有自己的气质。

下面这只会跟着鼠标转头的 3D 猫咪，就是其中一个测试项目的首页。你可以直接说出想要的体验，让 AI 去完成具体实现。

有想法，却不会做网页，也可以开始

假如你开了一家宠物洗美门店，希望顾客进来就觉得干净、亲切，也能看懂服务、找到联系方式。你不需要先学配色、写设计简报，或研究应该选哪个前端框架。

安装 Sitecraft 后，可以直接这样说：

用 Sitecraft 帮我做一个宠物洗美门店官网。
想要明亮、干净、有亲和力，让顾客一眼看懂服务，也方便联系我。

AI 会按照 Skill 的方法组织内容、选择视觉方向、处理素材，完成网页和手机布局，再打开实际页面检查、修订。缺少品牌名或素材时，可以先做清楚标明的概念演示；有自己的 Logo、门店照片和产品图，就一起提供，页面也更容易长出自己的样子。

蓬蓬俱乐部是宠物洗美方向的示例。画面、文字和服务入口围绕门店展开，预约部分也做成了可以操作的演示流程。

觉得不好看，不必先学会设计术语

对不懂设计的人来说，难的往往是下一步：页面做出来了，明明觉得不对劲，却说不出要改哪种字体、哪个比例。

Sitecraft 希望让日常反馈也能真正落到画面里。比如花店的测试中，最初的页面偏温柔、文艺，整体却显得有点小气。后来继续提出“白色为底、简约大气、爱情元素鲜明”，方向才逐渐清楚。

最终，重点落在自然的红玫瑰、醒目的标题和清楚的选花入口上。用户说的是感受，AI 要解决的是主体尺度、图文关系、颜色和留白。

看过预览后，完全可以继续这样反馈：

这个颜色不太像我的品牌，想更明亮一些。
首页的花束再大一点，下面几个区块简洁一点。
手机上的字太小了，阅读要更舒服。

你最了解自己的品牌应该给人什么感觉。这些判断足够成为修改的依据，不需要先翻译成代码。

换一个主题，页面也应该换一种样子

另一个常见问题是：让 AI 连续做几个行业的网站，最后只是换了名字和图片。底色、标题句式、圆角卡片和内容顺序几乎一样，品牌自己的特点反而很弱。

所以，Sitecraft 加入了真实画面参考和失败案例，要求 AI 从当前品牌的内容、素材和访问目的出发作选择。新建官网默认考虑沉浸式体验，但颜色、字体、密度和观看方式要随主题改变。

比如“二次元聚集地”，可以让人进入海边站台、放映室与画室；花店则可以用明亮的白色空间和花束本身吸引视线。宠物门店需要亲切和可信，宠物健康助手可以让一个有回应的角色成为记忆点。

这些选择要体现在实际画面里，不能只靠“高级感”“沉浸式”几个词撑场面。

想要动画和互动，也能用普通话描述

Pawly 的需求很直接：

做一个宠物 AI 问诊官网，首页放一只 3D 猫咪，猫咪跟随鼠标移动，晃动头部。

最后的页面里，猫咪头部可以独立跟随鼠标转动，身体保持稳定；点击打招呼会有点头反馈，也可以暂停动画。页面还提供症状填写、多步观察记录和文本下载的演示。

Sitecraft 把场景动作、连续转场和动态光影分别纳入设计，也要求实际打开菜单、下拉和弹窗，看看展开后是否协调，手机上是否顺手。你负责说出希望访问者感受到什么，再打开页面体验；具体怎样实现，由 AI 处理。

当然，截图只能展示外观，动作自然不自然仍要亲自操作。这也是 Skill 要求查看实际页面、反复检查的原因。

漂亮之后，还要能拿来用

品牌官网最终要交到访问者面前。首屏好看，下面几个区块却粗糙；电脑上舒服，手机上挤成一团；或者图片太大，打开要等很久，都会影响体验。

因此，Sitecraft 的交付过程还包括整页和手机检查、图片优化、资源完整性、部署包体积与首页加载测量。最终应该拿到能预览、能继续修改、能放到静态托管服务上的 HTML、CSS、JavaScript 和必要素材。

这里的静态官网运行时通常不需要常驻 Node 后端或数据库；开发和构建仍可能用到工具。你可以继续让 AI 帮忙预览和部署，不必为了使用这些成品先学一套开发流程。

怎么安装和使用

目前这份项目主要面向支持 Skill 的 Codex 环境。先在对话里发送：

请从 https://github.com/zcjunblog/sitecraft 安装 skills/sitecraft 这个 Skill。

如果已有 Node.js 和 npm，也可以在终端运行这条已实际验证的安装命令：

npx skills add zcjunblog/sitecraft --skill sitecraft

按提示选择 Codex 和安装范围，看到 Installation complete 即表示安装完成。CLI 默认安装到当前项目；希望跨项目使用时，在命令末尾加上 -g。后续推荐的 find-skills 是另一个可选技能，Sitecraft 不依赖它。

现在也可以从 skills.sh 的 Sitecraft 页面查看技能和安装命令。

确认安装完成、技能已被识别后，就可以说“用 Sitecraft 帮我做……”，接上自己的品牌、业务和想要的感觉。需要明确指定时，在 Codex 支持的技能调用方式中提及 $sitecraft。如果安装后没有出现，可以重启 Codex 再试；技能调用与重新加载的说明可参考 OpenAI 官方文档。

用 Sitecraft 做一家鲜花零售门店的品牌官网。
白色为底，简约、大气、有浪漫感，手机上也要好看。

Sitecraft 本身是给 AI 使用的设计工作方法，配有参考图、规范和检查脚本，需要结合 Codex 的模型与工具执行。技能文件已开源，使用 AI 环境、域名或托管的费用则由相应服务决定。

源码和四个完整示例，都一起开源了

仓库里除了 Skill，还附了上面四个项目的可编辑源码、静态成品与各自的运行说明：

• Pawly：带互动 3D 猫咪的宠物健康助手。
• 蓬蓬俱乐部：宠物洗美门店。
• 次元站：二次元聚集地。
• 枝间花店：鲜花零售门店。

README 也展示了我的已有作品 nav.gs 和 jkhcz.com，作为制作经验与质量参照。

需要说明的是，这些示例经过不同版本的迭代和反馈，并非全部由当前版本一次生成。Skill 的目标是提高首稿的完成度，让普通反馈更容易转成有效修改，实际效果仍与模型、素材和修订有关。Pawly 尚未接入真实 AI 或兽医服务，其余示例的预约、社区和订单等也属于演示；正式业务系统需要另外接入。

如果你有一家门店、一个产品，或者一个一直想认真展示的品牌，可以拿自己的需求试一次。从“我想做一个什么样的官网”开始，看看它能不能帮你把想法变成愿意展示给别人的页面。

项目地址：github.com/zcjunblog/sitecraft
独立 Skill 下载：GitHub Releases。自有代码与文档采用 MIT 许可，第三方素材以仓库中的来源及许可说明为准。