第 5 讲：AI 辅助设计 - 不会设计也能做出好看的网站

github star gitee star atomgit star PyPI Downloads AI 编程 AI 交流群

大家好，我是正在实战各种AI 项目的程序员晚枫。

不会设计？没关系。

这一讲，我教你用 AI 生成 Logo、配色、布局，做出专业的网站。

为什么需要 Logo？

Logo 是网站的视觉标识，让人一眼记住你。

AI Logo 生成工具

推荐工具：

  1. Looka（looka.com）- 最知名，效果好
  2. Brandmark（brandmark.io）- 专业级
  3. Logo.com - 免费，够用
  4. Midjourney - 创意最强，需要调教

价格对比：

  • Looka：免费生成，下载$20-65
  • Brandmark：$25 起
  • Logo.com：免费
  • Midjourney：$10/月

用 Looka 生成 Logo（推荐）

步骤：

  1. 打开 looka.com
  2. 输入你的品牌名
  3. 选择行业
  4. 选择喜欢的风格（简约/现代/经典等）
  5. 选择颜色和图标偏好
  6. AI 生成几十个方案
  7. 选择喜欢的，微调
  8. 下载

提示：

  • 多生成几次，每次结果不同
  • 选择简洁的，不要太复杂
  • 确保在小尺寸下也清晰

提示词模板：

1
2
3
4
minimalist logo design for [品牌名], [行业], 
simple geometric shapes, clean lines, 
professional, vector style, white background
--v 5

示例：

1
2
3
4
5
minimalist logo design for "Wanfeng", 
personal brand consultant, 
simple geometric shapes, clean lines, 
professional, vector style, white background
--v 5

第二部分：用 AI 生成配色方案

配色的重要性

好的配色让网站看起来专业、舒服。

AI 配色工具

推荐工具：

  1. Coolors（coolors.co）- 最简单
  2. Huemint（huemint.com）- AI 生成
  3. Adobe Color - 专业级
  4. Paletton - 经典工具

用 Coolors 生成配色

步骤：

  1. 打开 coolors.co
  2. 按空格键随机生成
  3. 锁定喜欢的颜色
  4. 继续按空格，直到满意
  5. 导出配色方案

用 AI 获取配色建议

提示词：

1
2
3
4
5
6
7
8
9
10
11
我是 [职业/行业]，要做一个个人的网站。
目标用户是 [描述用户]。
网站风格想要 [简约/专业/活泼/温暖]。

请推荐 5 组配色方案，每组包含：
1. 主色（用于标题、按钮）
2. 辅助色（用于强调）
3. 背景色
4. 文字颜色

用十六进制代码表示（如#FF5733）

示例输出：

1
2
3
4
5
6
7
8
9
10
11
方案 1（专业蓝色系）：
- 主色：#2563EB（蓝色）
- 辅助色：#3B82F6（浅蓝）
- 背景：#FFFFFF（白色）
- 文字：#1F2937（深灰）

方案 2（温暖橙色系）：
- 主色：#EA580C（橙色）
- 辅助色：#FB923C（浅橙）
- 背景：#FFFBEB（米白）
- 文字：#1C1917（深棕）

配色原则

60-30-10 法则：

  • 60% 主色（背景、大面积）
  • 30% 辅助色（次要元素）
  • 10% 强调色（按钮、CTA）

避免的坑：

  • ❌ 颜色太多（不超过 4 种）
  • ❌ 对比度不够（文字看不清）
  • ❌ 颜色太艳（刺眼）

第三部分：用 AI 生成页面布局

什么是页面布局？

布局就是页面上元素的排列方式。

标准首页结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
┌─────────────────────────────┐
│        Logo    导航菜单      │
├─────────────────────────────┤
│                             │
│    主标题（一句话介绍）       │
│    副标题（详细说明）         │
│    CTA 按钮（行动号召）       │
│                             │
├─────────────────────────────┤
│      信任背书（客户 Logo）    │
├─────────────────────────────┤
│      服务/产品介绍           │
├─────────────────────────────┤
│      成功案例               │
├─────────────────────────────┤
│      客户评价               │
├─────────────────────────────┤
│      关于我                │
├─────────────────────────────┤
│      联系方式/表单          │
├─────────────────────────────┤
│         页脚信息            │
└─────────────────────────────┘

用 AI 生成布局建议

提示词：

1
2
3
4
5
6
7
8
我要做一个 [类型] 网站，目标是 [目标]。
目标用户是 [用户画像]。

请帮我设计首页布局，包括：
1. 需要哪些区块
2. 每个区块的内容
3. 区块的排列顺序
4. 每个区块的 CTA 是什么

参考优秀网站

找灵感的地方：

  • Awwwards（awwwards.com）- 设计奖项网站
  • Dribbble（dribbble.com）- 设计师作品
  • Pinterest - 搜索”website design”
  • Land-book（land-book.com）- 落地页合集

学习方法：

  1. 找 3-5 个你喜欢的网站
  2. 截图保存
  3. 分析它们的布局
  4. 借鉴到自己的网站

第四部分：用 AI 生成文案

首页文案框架

主标题：一句话说明你是谁、做什么
副标题：详细说明你的价值
CTA 按钮：告诉用户下一步做什么

用 AI 生成文案

提示词：

1
2
3
4
5
6
7
8
9
我是 [职业]，提供 [服务/产品]。
目标用户是 [用户画像]。
我的独特优势是 [你的优势]。

请帮我写首页文案：
1. 主标题（10 个字以内，吸引眼球）
2. 副标题（30 个字，说明价值）
3. CTA 按钮文案（3-5 个字，促使用户行动）
4. 3 个核心优势（每句 15 字以内）

示例输出（以心理咨询师为例）：

1
2
3
4
5
6
7
8
9
10
主标题：走出焦虑，重获内心平静

副标题：10 年专业心理咨询，已帮助 1000+ 人摆脱情绪困扰

CTA 按钮：预约咨询

核心优势：
- 国家二级心理咨询师
- 10 年临床经验
- 首次咨询半价体验

本讲作业

  1. 用 Looka 或 Midjourney 生成 Logo
  2. 选择最满意的一个
  3. 下载保存

作业 2：确定配色方案

  1. 用 Coolors 或 AI 生成配色
  2. 确定主色、辅助色、背景色、文字色
  3. 记录十六进制代码

作业 3：设计首页布局

  1. 用 AI 生成布局建议
  2. 画一个草图（纸笔或工具都可以）
  3. 确定每个区块的内容

作业 4：撰写首页文案

  1. 用 AI 生成文案初稿
  2. 修改成自己的语言
  3. 确保简洁、清晰、有吸引力

下一步

👉 [第六讲：快速上线 MVP](/course/AI 相关/人民邮电出版社/ads/openclaw/personal-website/第 6 讲 - 快速上线 MVP/)

在下一讲中，我们会：

  • 用选定的工具搭建网站
  • 3 小时内完成最小可用版本
  • 先上线，再优化

💬 加入学习交流群

扫码加入学习群，分享你的 Logo 和配色方案，获取反馈。

👉 点击加入交流群

设计不是一蹴而就的。先用 AI 生成一个版本，上线后再慢慢优化。

进群

嗨，扫码 进群

微信

扫一扫，分享到微信

微信分享二维码
本站总访问量次

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置：

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

编程博主，全网粉丝30w+，开源项目：python-office，我的微信：python-office