通过结合 Claude Design 与 Claude Code，打造精致的网站设计
一位作者让 Claude Code 为六个行业构建网站，认为这些网站过于通用，随后使用 Claude Design 确定视觉风格方向，再使用 Claude Code 进行实现。
- 具体怎么做
- 作者使用 Claude Code 为六个行业构建了网站，并提供了免费的设计样式。所有网站都使用了相同的徽章、渐变文字和卡片组合布局。对于自己的网站 aiqkangber.com，他向 Claude Design 提供现有的代码或 GitHub 仓库。 Claude Code 会向他提问，提供三个按钮的布局方案，并指导间距与颜色设置，有时还会提供 Dribbble 截图作为参考。随后，他将结果以规格说明和设计元素的形式提交给 Claude Code。
- 做到了什么
- 他的主页、服务页面和新闻通讯页面失去了通用风格。主页上出现了粒子球式英雄形象。Claude Design无法制作照片或复杂的插图，因此这些内容仍需由您提供。
- 上手要点
- 自2026年5月底起，Claude Design与聊天和Claude Code共享相同的使用资源。该服务需要付费套餐，同时使用两者会更快消耗配额。
你可以这样试
使用 Claude Code在该文件夹中为 [企业名称] 构建[网站类型，如餐厅、律师事务所]网站。在编写代码之前，提出三种不同的视觉方案（配色方案、字体设计、布局与氛围），以确保网站不显得千篇一律，然后让我选择其中一个方案。接着按照所选方案实现响应式网站，以便我能在本地预览，当所有页面都符合该方案后即可停止。