设计与原型

做什么

在写代码之前，先想清楚网站长什么样子。

设计风格提示词模板

🎨 推荐 Skill：先安装 ui-ux-pro-max，它会引导你完成完整的设计流程。

# 安装 Skill（一键复制）
npx skills add nexu-io/open-design@ui-ux-pro-max -g -y

安装后执行：

npx skills ui-ux-pro-max

如果不想用 Skill，也可以直接把以下模板复制给 AI：

请为我的 [网站类型] 推荐 3 种设计风格方案：

网站用途：[一句话描述]

每种方案请给出：

1. 主色、辅色、文字颜色
2. 适合的字体
3. 一句话风格描述
4. 参考风格的关键词

最终我选 [方案X]，请基于这个方案生成首页的 HTML 代码。

可用的 Skills

Figma MCP 联动（进阶）

如果你想让设计更专业，可以用 Figma MCP 直接把设计稿生成到 Figma 中：

1. 在 Claude 中启用 Figma MCP
2. 告诉 AI：“帮我在 Figma 中创建一个 [网站类型] 的设计稿”
3. AI 会调用 use_figma 工具在 Figma 中生成页面
4. 你可以在 Figma 中微调后，再让 AI 生成对应代码

📋 更多提示词模板

提示词 1：设计配色方案

我是一个完全不会编程的小白，想用 AI 帮我建站。

请为我的网站设计一套完整的配色方案。

我的网站信息：
- 网站类型：[摄影作品集 / 个人博客 / 电商 / 企业官网]
- 品牌调性：[专业 / 温暖 / 创意 / 极简 / 科技感]
- 参考色（如果有）：[主色喜好，没有就留空]
- 目标用户：[谁会来看这个网站]

请给出 3 套配色方案，每套包含：
1. 主色（用于导航栏、按钮、标题）
2. 辅色（用于链接、强调、小部件）
3. 背景色（页面背景、卡片背景）
4. 文字颜色（主标题、正文、辅助文字）
5. 配色比例（各颜色占页面的百分比）

每套方案请用十六进制色码（如 #2D1B69），并标注在页面上怎么使用。
最后推荐一套并说明理由。

提示词 2：选择字体搭配

我是一个完全不会编程的小白，想用 AI 帮我建站。

请为我的网站推荐字体搭配方案。

我的网站信息：
- 网站类型：[摄影作品集 / 个人博客 / 电商 / 企业官网]
- 品牌调性：[专业 / 温暖 / 创意 / 极简 / 科技感]
- 标题风格偏好：[希望标题醒目 / 希望标题优雅 / 无所谓]
- 网站面向：[中文用户为主 / 中英双语]

请推荐 2 套字体搭配方案，每套包含：
1. 标题字体（中英文各推荐一款，来自 Google Fonts）
2. 正文字体（中英文各推荐一款）
3. 等宽字体（用于代码展示，如果有的话）
4. 每种字体的字号建议（h1、h2、h3、正文、小字）
5. 字重建议（哪些用 Bold、Regular、Light）

请提供 Google Fonts 的嵌入链接代码，让我可以直接复制到 HTML 中。

**任务**：让 AI 为你生成 3 种设计风格方案。选一个你喜欢的，让 AI 生成该风格的首页 HTML 代码。在浏览器中预览效果。