CityCraft 是我用来帮助 Agent 生成前端页面的 Skill。它内置了一批预制设计风格，选好风格之后再组合不同的模块模板，最后搭建出完整页面。
推出之后我继续在自己的项目里使用，发现选择页和 Agent 之间还有一段多余操作：每次选好设计方向，都要复制名称，再粘贴回对话。为了去掉这一步，我让选择页可以把结果直接回传给 Agent，同时补充了一批新的设计变体。这次用一个图书收藏网站走完整个流程，验证这项修改是否真的让生成过程更连贯。
安装 Skill
打开终端，运行：
npx skills add oil-oil/citycraft
回车之后选择要安装到哪些 Agent。上面一组是通用选项，比如 Codex 和 Cursor 会自动包含；我想在 Claude Code 里使用，就在下面的列表里勾选 Claude Code。然后依次选择全局安装和软链接，确认安装。因为我本地已经装过了，所以这里安装得很快。
从一句模糊需求开始
安装完成后打开 Codex，输入 /citycraft 回车，其他内容什么都不用说。Skill 会先反问：这个落地页是关于什么的，产品或服务的一句话介绍是什么，预计需要哪些板块。
这里我故意只给一个很模糊的需求：产品名称叫 MyBook，是一个图书收藏的网站，模块让它自己定。
接下来它会打开一个选择设计风格的页面，每张卡片都是真实渲染的效果。因为这是一个图书网站，我选了一个比较有艺术气息的风格。
这次优化主要解决的就是这里。选好之后点击「告诉 Agent」，选择结果会直接发送给 Agent，不再需要手动复制风格名称。提交之后，Codex 会自己进入下一步，选择页面和生成任务连成了一段完整流程。
这次修改也让我看到了 Skill 的另一种交互方式：Agent 负责理解和执行，HTML 页面负责承载更适合点击、预览和比较的选择，再把结构化结果送回对话。
第二步是选择页面的设计方向，包括几组选项：
- 排版气质：我选了叙事型，页面会像讲故事一样往下推进；
- 导航风格：我选了底部磁性胶囊；
- 色调：可以在风格配色的基础上微调，我保留了原版。
选好之后还是点「告诉 Agent」。Codex 这边会稍微慢一点，点击提交之后它要思考一下才继续；如果在 Claude Code 里，点击提交之后马上就会输出下一句话。
生成的实际效果
很快 Codex 就把网站写出来了。首页是布宜诺斯艾利斯主题的配色，带一点纹理效果，排版用了比较大字的层叠设计。这些文案都不是我给的，前面的输入只有那一句话需求。
往下滚动，模块之间的分割用了斜切的设计，配图是用 SVG 画的意象图形，整体比较淡雅，不是那种一板一眼、堆满容器的 AI 味页面。
功能介绍做成了一个时间轴一样的模块：先把书带进来，再为它补全版本故事，最后编进自己的阅读脉络。
再往下是常见问题模块，滚动到的时候会有进入的动画。
最底下是一个底部行动号召的区块，页面最下面还躺着一本书，像一个小彩蛋。
从这次结果看，直接回传选择以后，一句简单需求也能连续完成风格选择、设计方向确认和页面生成。生成结果是一个单独的 HTML 文件，适合先作为原型查看；要用于真实项目，还需要让 Agent 在现有代码基础上把它还原成 React 或 Vue 工程。