最近我开发了一个 Skill，叫 CityCraft，用来生成比较有设计感的产品官网。很多人做不出好看的网站，不是因为模型能力不够，而是不知道怎么向 AI 描述自己想要的设计。这个 Skill 把设计方向的描述换成了可视化的选择，全程几乎不需要自己组织提示词。
先看三个用它做出来的页面，都是 Codex 加 GPT-5.4 生成的。
第一个是一个手工陶瓷工作室的网站，整体是淡雅的风格，菜单栏放在左侧，页面里有类似步骤栏的工艺流程模块，还有一个 CTA 模块。
第二个是一个演唱会的宣传网站，假日风格，左侧有重叠排列的小设计，下面是阵容卡片、购票模块、FAQ 和底部栏，配色比较舒服。
第三个是一个代码类 SaaS 产品的首页，右边有多步骤动画，下面是一个「如何工作」的时间轴，中间的光条会随着滚动往下走，再往下是定价、FAQ 和 CTA。它的导航栏不在传统的居中位置，而是放在了页面底部。
安装 Skill
项目仓库在 GitHub 上：citycraft。
打开终端，输入安装命令：
npx skills add oil-oil/citycraft
回车之后，安装器会列出可以安装到的 Agent。上面是一些通用的选项，不用勾选；底下如果要装到 Claude Code，按空格选中就可以。因为我已经安装过了，这里就不重复安装。
使用过程
安装完成后打开 Codex，按斜杠输入 citycraft，就能看到这个 Skill。
使用的时候一句话都不用写，直接让它调用这个 Skill。它会先问落地页是关于什么的，用一句话介绍，以及大概需要哪些板块。
我这次只回了一句：是一个 AI 狼人杀，其他的你来定。
接下来它会打开一个选择卡片页面，用来选择网站的设计风格。每张卡片是一个城市的意象，比如京都、巴黎、东京、纽约，我把这些城市的意象做成了一张张卡片，可以在这里预览后续网站大体的设计方向。这也是这个 Skill 叫 CityCraft 的原因。
狼人杀应该偏复古一些，我选了伊斯坦布尔的风格，点击卡片上的复制，回到 Codex 粘贴发送。如果自己不知道选哪个风格合适，也可以直接让 Codex 帮忙选。
风格选完，下一步是选择排版气质、导航风格和色调微调。排版气质有铺张型、叙事型和剧场型，我选了铺张型，首页会更有冲击力；导航风格我选了左侧竖排；色调保留了原本的配色。选好之后点复制选项，再回到 Codex 粘贴发送。
设计理念和生成效果
这个 Skill 的设计理念有两个。一个是把交互尽量做成可视化选择，和 Agent 的交互会更直观；另一个是抹平不同模型和 Agent 之间的设计能力差异。我这次故意用 Codex 加 GPT-5.4 来演示，它的设计能力相对弱一些，如果换成 Gemini 或者 Claude，效果只会更好。
页面生成完成后会自动在浏览器里打开。首页的配色和刚才选择的伊斯坦布尔风格一致，左侧栏加大标题，右侧的 SVG 做得一般，和整体意象不太贴切，但主要看的是整体排版。
往下滚动有几个设计细节：切换介绍内容时左侧有动画；滚动到流程部分时背后会出现橙色背景，虽然出现时最上方的对比度不够，但这种可以微调，比如在滚动到的位置做一个反差色。再往下是斜切的分区设计，带一点渐变色点缀；功能介绍做成了饭盒一样的卡片，鼠标悬停上去有光效；左上角有双引号装饰，左下角的圆角被切了一下。
FAQ 模块也不是普通的平铺列表，而是做了一个变体，卡片大小不一，左侧栏配了竖条表示当前激活的位置，有一点舞台的感觉。
如果想体验这个 Skill，可以安装之后把自己的官网做出来看看效果，比起直接让 AI 模型生成官网会好不少。如果有想补充的设计风格，或者做出了好看的作品，也欢迎分享给我，一起把这个 Skill 打磨得更好。