Simple System for Better Websites with Claude Design

**TL;DR：** 通过系统化地收集参考素材、利用 Claude Design 生成并迭代多个本质差异的设计方案、精调细节与交互，最终构建统一视觉体系并部署上线，可以有效避免 AI 设计的模板化，打造出更具质感和个性的网站。 ## 灵感与参考素材：构建视觉基础 拒绝千篇一律的 AI 模板化设计，关键在于动笔前做好灵感收集。建议选取 2-5 个参考案例，制作灵感板，并明确标注你喜欢的元素，例如：案例 A 的字体排版、案例 B 的主视觉区构图、案例 C 的导航栏设计。你还可以添加具体的字体、配色方案或组件参考。这些素材能为 Claude 提供坚实的视觉基础。 以下是一些常用的灵感来源： * **Lapa Ninja**：拥有海量着陆页案例库，可按行业（如 SaaS）或风格筛选并下载完整截图。 * **Landbook**：另一个优质的网页设计集合库。 * **Awards (Awwwards)**：适合寻找独特的 3D 网站和沉浸式滚动设计。 * **Pinterest**：搜索“网页设计”或具体产品主题，通过相关推荐持续探索广泛灵感。 * **React Bits 和 21st.dev**：推荐用于获取卡片、轮播、按钮及交互效果等更精细的独立组件灵感。 切勿忽视字体设计，优质字体能彻底改变网站气质。准备好参考素材后，还需叠加真实的产品素材（产品图、作品集、头像、Logo 等），让 Claude 围绕真实产品进行设计，避免产生冲突元素。 ## 在 Claude Design 中生成多方案 访问 `claude.ai/design`（需付费订阅）进入设计界面。准备好的素材包括：用于背景的图片、为 AI 视频剪辑平台“Flow Room”制作网站（Logo 由 ChatGPT 生成）、以及平台 UI 主视觉图和功能演示图。 接下来使用提示词模板，需要填写产品介绍、核心功能、产品图片说明等字段。**关键操作**是：要求生成的不是颜色变体，而是**六个具有本质差异的主页设计方案**。要求方案涵盖主视觉区构图、字体运用、负空间处理、导航栏样式等多种创新方向，并综合最强创意形成统一视觉体系。 如果只提供产品图片和业务说明而不附加详细提示词，多次生成的结果都会大同小异。 ## 综合与迭代优化 收到六个方案后，不要直接选用其中一个，而是综合各方案的优点进行批注。例如： * “喜欢这里的双字体方案，但文字需替换为我的标语‘Less editing, more creating’” * “这个按钮样式不错，背景图希望延伸至整个页面” * “这个小卡片很有意思” 完成批注后，要求 Claude 生成融合这些批注元素的新版本。这个迭代版本（字体设计、背景处理和部分布局都很出色）将成为进一步优化的基础。 ## 微调与交互增强 使用平台的“微调”功能，在一个方案内探索多元可能性。可以锁定一个方案（如 2A）作为基础，然后粘贴包含大量可变元素的提示词（如状态卡片的位置、导航栏样式、主视觉区布局等）。 **进阶优化**：通过微调探索细节，例如： * 尝试不同的状态卡片位置。 * 选择玻璃胶囊式导航栏。 * 尝试居中式主视觉区布局。 * 采用便当盒布局的功能区。 * 点击“更多”可调整按钮效果、形状、间距、字体缩放、背景与强调色等。 在基础框架上，可以发散到全新方向。此时需要引入**交互**来增强网站质感。粘贴针对悬停状态、按钮反馈、滚动动画、视差效果等元素的提示词。测试时注意：有些动效可能过于夸张，通常应以细微交互为主，但可保留一个标志性的独特交互作为亮点。 例如，视频中为视频编辑平台设计了一个**鼠标交互波形图**效果，它成为了网站的标志性元素，而其他交互则保持简约克制。 ## 构建、部署与设计系统 当前主页已成为视觉规范模板，可以基于它构建其他页面。要求 Claude 锁定当前设计规范，构建导航栏对应的所有子页面，确保所有页面保持统一的字体、卡片样式和视觉语言。平台也能自动生成包含所有规范的正式设计系统模板。 设计完成后，通过“分享 -> 更多格式 -> 云代码”路径获取提示词（建议下载 ZIP 压缩包）。在云桌面应用中指定工作文件夹，移除特定指令后开始构建。构建完成后，选择推荐部署方案，并通过内置浏览器预览。最终，通过 GitHub 推送代码并使用 **Vercel** 进行部署（需提前关联两个平台的免费账号）。在构建过程中，云代码会自动修复若干代码错误。 Source: [https://www.youtube.com/watch?v=TErjuicvK_c](https://www.youtube.com/watch?v=TErjuicvK_c)