前阵子我分享过 CityCraft，一个用来制作有设计感的落地页的 Skill。最近我把它优化了一轮，修复了一些我自己发现的问题和用户反馈的问题。这篇文章用一个实际示例演示一下现在的使用效果，这次优化和测试用的模型都是前阵子发布的 GLM 5.1。
安装 Skill
项目仓库在 GitHub 上：citycraft。
安装命令是：
npx skills add oil-oil/citycraft
安装过程中会列出要安装到哪些 Agent，Codex、Cursor 这类会默认勾选，Claude Code 等其他 Agent 可以按需自己选择。因为我已经安装过了，这里就不重复安装。
通过反问收集需求
安装完成后打开 Claude Code，输入一个斜杠就能看到 /citycraft 这个 Skill，什么都不用输，直接回车。
Skill 会先问落地页是关于什么的，要提供产品或服务名称，可以自己描述，也可以给一个参考网站，两个都没有也可以。我这次选的是都没有，只给了一个比较模糊的需求：我想做一个设计网站。
接着它会继续反问，比如要做哪种类型的设计网站：设计作品集、设计工作室、设计工具还是设计社区。这里我选了设计作品集。简单的信息通过 Claude Code 的反问工具上下选择就可以，复杂一点的选择它会打开一个 HTML 页面来展示。
在 HTML 页面里选择设计方向
第一个 HTML 页面是选择设计风格，也就是整体的配色和主题。这里以不同的城市为主题，比如京都、巴黎、东京，把各个城市的意象抽离成配色和字体设计，一共有几十种，每张卡片都是真实渲染的效果。
我选了斯德哥尔摩：无衬线字体，黑白配色。页面底部有两个按钮，一个是「告诉 Agent」，点击后选择结果会直接发送给 Claude Code，不需要自己复制提示词再粘贴过去；另一个是「复制提示词」，这是这次新增的兜底方案——如果用的是不支持挂起等待的 Agent，或者发送失败了，可以手动复制提示词。
点击「告诉 Agent」之后切回终端，可以看到 Claude Code 收到了一个 city 参数，对应的就是刚才选中的斯德哥尔摩，它会使用这个城市对应的配色和字体。
第二个 HTML 页面是选择设计方向，包括几组选项：
- 导航风格：全屏菜单、底部浮动导航、左侧竖排等，我选了左侧竖排；
- 色调：可以在城市配色的基础上选择压暗版或者提亮版，我保留了原版；
- 首屏布局：全屏铺张、左文右图、居中极简、杂志排版等，也可以让 AI 根据主题来选，我选了杂志排版；
- 功能区排版：我选了横向卡片浏览。
最底下是选择页面包含哪些板块。首屏和功能介绍是必选的，定价表、用户评价、常见问题、底部行动号召这些可以自己勾选。如果没有定价内容，不勾定价表就可以。这次优化主要改的就是这里面的选项，把之前一些冗余的选项删掉了，同时增加了一些变体。
选好之后还是点击「告诉 Agent」，终端里会收到完整的选项汇总，按 Ctrl+O 可以展开查看具体内容。
生成的实际效果
页面生成出来之后，首页就是杂志风格的排版，背景带一点纹理，鼠标悬停上去有一个小方块的效果。左侧是前面选择的竖排导航，配色来自斯德哥尔摩这个主题。同一个选项，不同的模型会有不同的理解，这是 GLM 5.1 理解的杂志排版。
往下是选择的横向卡片，用来展示服务内容。不过我觉得这里卡片的内容还可以再丰富一些。再往下是流程说明的小卡片，设计得比较清爽。
用户评价部分做成了大小不一的格子卡片，底下是可以点击展开的常见问题，最后还有一个底部行动号召的区块。它还给这个网站起了一个名字，叫 Designfolio，底部配了装饰元素和一点淡淡的蓝色渐变，整体是比较淡雅的风格，跟一个设计产品的官网差不多。
这次的更新主要就是优化了这些小的交互点。GLM 5.1 的测试我还在继续，之后再单独分享。