219. 搭配 Claude Design 和 Claude Code 设计精致的网站

他们做了什么

作者曾让 AI 为六个行业自由发挥设计网站，结果每一个都用了同样的徽章、渐变文字和三张卡片的组合。为自己的网站 aiqkangber.com 做设计时，他把现有代码或 GitHub 仓库交给 Claude Design。它向他提问，给出三种按钮风格方向，他再引导间距和配色，有时还会附上 Dribbble 截图。然后他把结果以规格说明和设计令牌的形式打包交给 Claude Code。

结果如何

他的首页、服务页和通讯页都摆脱了千篇一律的样子，首页还有了一个粒子地球的主视觉。Claude Design 无法生成照片或复杂的插画，这些仍然需要你自己提供。

需要知道

从 2026 年 5 月下旬起，Claude Design 与聊天和 Claude Code 共用同一个用量池。它需要付费套餐，两者一起用会更快耗尽额度。

你可以这样尝试

在这个文件夹中为 [商家名称] 做一个 [网站类型，例如餐厅、律师事务所] 网站。写代码之前，先提出三种截然不同的视觉方向（配色、字体、布局、氛围），避免看起来千篇一律，然后等我选一个。再把选定的方向实现为一个可以在本地预览的响应式网站，每个页面都符合这个方向时就停止。