Easy Vibe Coding 学习心得（三）：前端之美——从设计稿到精美界面

Easy Vibe Coding 学习心得（三）：前端之美------从设计稿到精美界面

一、从"能用"到"好看"------审美的觉醒

1.1 前一篇的回顾

在上一篇文章中，我完成了从产品原型到 AI 应用的完整项目实战。那个电商素材工作台能跑、能用、能生成文案和图片。

但朋友试用后给了我一个评价：

"功能挺全的，但界面......有点丑。"

那一刻我意识到：能用的产品，和好用的产品之间，还隔着一道"审美"的鸿沟。

1.2 新的问题

我开始反思自己的作品：

按钮是默认的蓝色，毫无个性
布局是对称的卡片网格，枯燥乏味
字体是系统默认的 Arial，平淡无奇
配色是随手选的，毫无章法

这就是"工程师思维"和"产品思维"的区别：

工程师思维：功能实现就好，能跑就行
产品思维：不仅要能用，还要好看、好用、让人想用

带着这个问题，我进入了 Stage 2 的前端部分------学习如何让界面变美。

二、设计工具入门：从代码到画布

2.1 为什么要学设计工具

一开始我很不理解：直接写代码不行吗？为什么要先学设计工具？

教程里的一句话点醒了我：

"代码只关注如何渲染在浏览器上，如何在不同设备上运行；设计工具解决的是信息分布的问题，前端交互怎么安排，不同页面怎么跳转，视觉优先级怎么分配。"

简单来说：

代码解决"怎么实现"
设计解决"怎么呈现"

2.2 Figma 初体验

我选择了 Figma 作为入门设计工具（国内用户也可以用 MasterGo）。

第一次打开 Figma 的感受：

界面像简化版的 Photoshop
左侧是图层管理
中间是画布
右侧是属性面板
底部是工具栏

核心概念：Frame（画板）

Figma 的基本单位不是"页面"，而是 Frame。你可以把它理解为一个"容器"或"画布"。

创建第一个 Frame：

按 F 键选择 Frame 工具
在画布上拖出一个矩形
在右侧属性栏设置尺寸（如 1440×900）
给 Frame 命名（如"首页"）

2.3 第一个设计练习：临摹

教程建议：新手从临摹开始。

我选择临摹一个喜欢的产品页面------Notion 的首页。

临摹步骤：

截图 Notion 首页，导入 Figma
用 Frame 工具描出整体布局
用矩形工具画出色块和分区
用文字工具添加标题和正文
调整颜色、字体、间距

关键收获：

学会了使用 Frame 组织内容
理解了"自动布局"（Auto Layout）的概念
明白了"组件"（Component）的复用价值

2.4 AI 辅助设计

Figma 现在也支持 AI 功能了！

提示词示例：

复制代码

帮我设计一个 AI 写作助手的落地页，包含：
- 顶部导航栏（Logo + 菜单 + 登录按钮）
- 首屏大标题和 CTA 按钮
- 功能展示区（3 个特性卡片）
- 用户评价区
- 定价表格
- 页脚

风格要求：简洁现代，主色为紫色渐变

AI 生成的结果：

自动创建了 Frame
生成了基本布局
填充了占位内容
应用了统一的配色

心得：AI 不能替代设计师，但能帮你快速出草稿。

三、组件库：前端界的"宜家"

3.1 什么是组件库

学完设计工具后，我开始思考：怎么把设计变成代码？

教程里有个比喻很形象：

"组件库就是前端开发中的'宜家'。它提供的不是家具，而是界面零件。"

组件库提供什么？

按钮、输入框、下拉菜单
对话框、表格、表单
导航栏、侧边栏、卡片
......所有你常见的界面元素

3.2 四大核心组件库

教程介绍了四个最具代表性的组件库：

组件库	框架	定位	适用场景
Ant Design	React	企业级中后台事实标准	后台管理系统、企业应用
shadcn/ui	React	不装 npm 包，直接复制代码	高度定制化项目
HeroUI	React	默认样式精美，动画流畅	产品落地页、展示型页面
Material UI	React	实现 Google Material Design	Android 风格应用

Vue 用户的选择：

Element Plus（国内最流行）
Ant Design Vue
Naive UI

3.3 实战：用 HeroUI 构建产品落地页

我选择 HeroUI 来构建 AI 写作助手的落地页。

第一步：创建项目

bash 复制代码

npx create-heroui-app@latest ai-writer-landing
cd ai-writer-landing
npm install

第二步：让 AI 生成页面

复制代码

请用 HeroUI 组件库帮我做一个 AI 写作助手的落地页：
- 使用 HeroUI 的 Button、Card、Navbar 组件
- 首屏要有大标题和 CTA 按钮
- 功能展示区用 3 张卡片
- 配色使用紫色渐变
- 添加流畅的滚动动画

第三步：运行和调试

bash 复制代码

npm run dev

结果：

页面自动适配手机和平板
按钮有精美的 hover 动画
卡片有统一的阴影和圆角
整体风格专业且现代

心得：用组件库，相当于站在巨人的肩膀上。

3.4 组件库 vs 手写代码

我做了个对比实验：

提示词一（不使用组件库）：

复制代码

请帮我做一个数据仪表盘页面，包含统计卡片、图表、表格

提示词二（使用 shadcn/ui）：

复制代码

请用 shadcn/ui 组件库帮我做一个数据仪表盘页面，包含统计卡片、图表、表格

结果对比：

维度	不使用组件库	使用组件库
视觉一致性	❌ 按钮样式不统一	✅ 全局风格一致
交互细节	❌ hover 状态粗糙	✅ 动画流畅自然
响应式适配	❌ 手机端布局错乱	✅ 自动适配
无障碍访问	❌ 键盘导航缺失	✅ 已处理好
开发时间	约 2 小时	约 30 分钟

结论：组件库带来的不仅是美观，还有效率和质量。

四、提示词美化：让 AI 生成精美界面

4.1 为什么 AI 默认生成的界面"很普通"

我发现一个问题：同样的需求，AI 生成的页面总是差点意思。

教程解释了原因：

"AI 不是不会设计，而是默认回到'统计平均'。"

AI 的默认选择：

维度	默认选择	问题
字体	Inter、Roboto、Arial	太常见，没有个性
颜色	紫色渐变、蓝色主色	视觉疲劳
布局	对称网格、卡片堆叠	缺乏惊喜
动画	淡入淡出	不够精致
背景	纯色、简单渐变	单调

4.2 设计风格的 5 个维度

要生成美观的界面，需要从 5 个维度描述：

维度	描述要点	示例关键词
字体	标题用粗体展示字体，正文用易读正文字体	Space Grotesk、Playfair Display
颜色	主色 + 点缀色，避免均匀分布	#4F46E5 主色 + #F59E0B 点缀
布局	不对称、重叠、打破网格	Bento Grid、不对称分区
动画	精心编排的页面加载、微交互	staggered reveals、滚动触发
细节	背景、阴影、边框、纹理	噪点、几何图案、渐变网格

4.3 实战：普通提示词 vs 美化提示词

普通提示词：

复制代码

请帮我做一个 AI 写作助手的落地页，包含导航栏、首屏、功能展示、定价、页脚

美化提示词：

复制代码

请帮我做一个 AI 写作助手的落地页，要求：

**美学风格：新野兽派（Neubrutalism）**

**字体：**
- 标题：Space Grotesk，字重 700-900
- 正文：IBM Plex Sans，字重 400

**颜色：**
- 主色：#000000（纯黑）
- 强调色：#FF6B00（橙色）
- 背景：#FFFDF0（米白色）
- 边框：3px 黑色实线

**布局：**
- 不对称布局，元素之间用粗黑线分隔
- 卡片有硬阴影（box-shadow: 8px 8px 0px #000）
- 大胆的留白对比

**动画：**
- 页面加载时元素从下方弹入
- hover 时按钮向上移动 2px

**细节：**
- 圆角全部用 0px（直角）
- 按钮有强烈的 3D 效果
- 背景添加微妙的噪点纹理

结果对比：

普通提示词 → 平庸的"AI 味"页面
美化提示词 → 风格鲜明、令人印象深刻的页面

心得：描述得越具体，结果越惊艳。

4.4 Skills 插件：让 AI 自动加载设计规范

除了提示词，还可以使用 Skills 插件。

常用 Skills：

UI Design Assistant：自动应用设计规范
Color Palette Generator：生成配色方案
Layout Suggester：推荐布局方案

使用方法：

在 AI IDE 中安装 Skills
在对话中指定使用某个 Skills
AI 会自动应用对应的规范

提示词示例：

复制代码

@UI-Design-Skills 帮我设计一个 SaaS 产品首页，使用现代极简风格

五、项目实战：霍格沃茨魔法画像

5.1 项目背景

学完设计工具和组件库后，我决定做一个完整的项目来实践所学。

项目灵感：《哈利·波特》中霍格沃茨的魔法画像------那些会动、会说话、有情绪的画像。

项目目标：

创建一个能对话的魔法画像网页
画像会根据对话内容改变表情
页面风格符合魔法世界设定

5.2 需求分析

核心功能：

对话系统：接入 Dify AI Agent，实现角色扮演对话
情绪系统：根据对话内容，画像显示不同表情
角色设定：可以是明星、历史人物、动漫角色

技术栈：

前端：Vue 3 + Element Plus
后端：Dify（知识库 + 工作流）
部署：Zeabur

5.3 设计过程

第一步：收集角色信息

以 Elon Musk 为例：

收集他的演讲、访谈、社交媒体发言
整理成文本，作为 AI 的 few-shot 参考
收集背景知识，作为 Dify 知识库

第二步：设计页面原型

用 Figma 设计布局：

左侧：对话区域
中间：魔法画像（会变化表情）
右侧：角色介绍（类似 Twitter 时间线）

第三步：生成情绪素材

使用 Lovart 生成一系列表情：

开心、生气、伤心、惊讶
每种表情生成 3-5 个变体
导出为 PNG 格式

5.4 实现过程

第一步：搭建前端框架

bash 复制代码

npm create vue@latest hogwarts-portraits
cd hogwarts-portraits
npm install

第二步：设计页面结构

vue 复制代码

<template>
  <div class="portrait-container">
    <!-- 左侧对话区 -->
    <div class="chat-panel">
      <ChatInterface :messages="messages" />
    </div>
    
    <!-- 中间画像区 -->
    <div class="portrait-panel">
      <img :src="currentPortrait" class="portrait-image" />
      <EmotionIndicator :emotion="currentEmotion" />
    </div>
    
    <!-- 右侧介绍区 -->
    <div class="profile-panel">
      <ProfileTimeline :posts="posts" />
    </div>
  </div>
</template>

第三步：接入 Dify API

javascript 复制代码

// 调用 Dify 对话接口
async function sendMessage(message) {
  const response = await fetch('https://api.dify.ai/v1/chat-messages', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${DIFY_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      inputs: { message },
      response_mode: 'blocking',
      user: 'user-123'
    })
  })
  
  const data = await response.json()
  return {
    text: data.answer,
    emotion: data.metadata.emotion // 从元数据获取情绪
  }
}

第四步：情绪渲染

javascript 复制代码

// 根据情绪值切换画像
const emotionMap = {
  happy: '/images/portrait-happy.png',
  angry: '/images/portrait-angry.png',
  sad: '/images/portrait-sad.png',
  surprised: '/images/portrait-surprised.png',
  neutral: '/images/portrait-neutral.png'
}

const currentPortrait = computed(() => {
  return emotionMap[currentEmotion.value] || emotionMap.neutral
})

5.5 部署上线

第一步：推送到 GitHub

bash 复制代码

git init
git add .
git commit -m "Initial commit: Hogwarts Portraits"
git remote add origin git@github.com:username/hogwarts-portraits.git
git push -u origin main

第二步：部署到 Zeabur

登录 Zeabur
连接 GitHub 账号
选择项目仓库
配置环境变量（API_KEY 等）
点击部署

第三步：访问线上地址

复制代码

https://hogwarts-portraits-xxx.zeabur.app

5.6 成果展示

功能清单：

✅ 角色扮演对话（Elon Musk、莎士比亚、爱因斯坦等）
✅ 情绪识别和画像切换
✅ 角色介绍时间线
✅ 响应式布局（支持手机和平板）
✅ 对话历史本地存储

技术亮点：

使用 Dify 知识库实现角色背景知识
使用提示词工程实现角色语言风格
使用情绪值驱动画像变化
使用 Figma 设计界面，导出代码后优化

用户反馈：

"太酷了！跟 Elon Musk 的画像聊天，他还会发脾气！"

"界面设计很有魔法世界的感觉，沉浸感很强。"

六、关键收获

6.1 设计思维：从"功能"到"体验"

以前我只关注功能实现：

"这个按钮能点击"
"这个表单能提交"

现在我学会了关注体验：

"这个按钮的 hover 动画是否流畅"
"这个表单的错误提示是否友好"
"这个页面的信息层级是否清晰"

好的设计是隐形的，用户感觉不到它的存在，但用起来就是舒服。

6.2 工具思维：从"手写"到"复用"

以前我喜欢从零开始：

"这个按钮我自己写"
"这个样式我自己调"

现在我学会了复用：

"这个组件库有现成的按钮"
"这个 Skills 能自动生成配色"

站在巨人的肩膀上，才能看得更远。

6.3 沟通思维：从"模糊"到"具体"

以前我描述需求很模糊：

"做个好看的页面"

现在我学会了具体描述：

"用 Space Grotesk 字体，字重 700"
"主色#4F46E5，点缀色#F59E0B"
"不对称布局，卡片有硬阴影"

具体的描述，才能带来具体的结果。

6.4 工程思维：从"本地"到"线上"

以前我只在本地运行：

"在我电脑上能跑就行"

现在我学会了部署上线：

"推送到 GitHub"
"部署到 Zeabur"
"配置域名和 HTTPS"

只有上线的产品，才是真实的产品。

七、踩过的坑和解决方案

7.1 Figma 导出代码不可用

问题： Figma 插件导出的代码结构混乱，无法直接使用。

解决：

把 Figma 当作设计工具，而不是代码生成工具
导出后手动重构代码结构
或者使用 AI IDE 重新生成代码，参考设计稿的布局

7.2 组件库样式冲突

问题： 自己写的样式和组件库样式冲突。

解决：

使用 CSS Modules 或 Scoped CSS
避免使用全局样式
使用组件库提供的自定义主题 API

7.3 情绪切换不流畅

问题： 画像表情切换时闪烁明显。

解决：

javascript 复制代码

// 预加载图片
function preloadImages(emotions) {
  emotions.forEach(emotion => {
    const img = new Image()
    img.src = emotionMap[emotion]
  })
}

// 添加过渡动画
.portrait-image {
  transition: opacity 0.3s ease
}

.fade-enter-active {
  animation: fade-in 0.3s
}

7.4 API Key 泄露风险

问题： 把 Dify API Key 写在前端代码里，有泄露风险。

解决：

使用环境变量存储 API Key
添加简单的后端代理层
设置 API Key 的使用限制（域名、IP）

八、下一步计划

8.1 短期优化（1 周内）

添加更多角色（哈利·波特、赫敏、邓布利多）
优化情绪识别算法（更精准的表情切换）
添加语音对话功能（语音输入 + 语音输出）
改进移动端体验

8.2 中期优化（1 个月内）

添加用户系统（登录、收藏角色）
支持自定义角色（用户上传自己的画像）
添加社交分享功能（分享对话截图）
接入更多 AI 能力（文生图、视频生成）

8.3 长期规划

做成开放平台（第三方开发者上传角色）
探索商业模式（会员制、角色付费）
开发桌面应用（Electron 版本）
开发小程序版本（微信小程序）

九、写给同样想学习的你

9.1 关于"没审美"

很多人（包括我）一开始都觉得自己"没审美"。

但审美不是天生的，而是可以训练的：

多看好的设计（Dribbble、Behance、Pinterest）
多临摹优秀的作品
多学习设计原则（对比、对齐、重复、亲密性）

审美就像肌肉，越练越强。

9.2 关于"学不会"

设计工具看起来很复杂，Figma 有那么多功能，怎么学得会？

我的建议是：按需学习。

需要画矩形，就学矩形工具
需要改颜色，就学颜色面板
需要做组件，就学 Component 功能

不要试图一次性学会所有功能，用到了再学，学了马上用。

9.3 关于"用不上"

有人说"我又不是设计师，学这个干嘛"。

我想说：在 AI 时代，每个人都是设计师。

以前你需要跟设计师沟通需求，现在你可以自己设计；

以前你需要等前端开发，现在你可以自己实现；

以前你需要几周才能看到效果，现在你几分钟就能出原型。

这不是取代设计师，而是让每个人都能表达自己的创意。

9.4 最后的话

学完前端设计这部分，我最大的感受是：

美，不是玄学，而是可以学习、可以实践的技能。

从设计工具到组件库，从提示词到 Skills，从本地到部署------每一步都在让我离"做出好看的产品"更近一步。

完成比完美更重要。

先做出能用的，再慢慢优化成好看的，最后打磨成好用的。

这条路，我会继续走下去。

下一篇：《学习心得（四）：后端之力------从数据库到全栈应用》

⚠️ 免责声明：本文由 AI 智能体辅助创作，内容仅供参考。文中涉及的代码示例、技术方案请在实际应用前自行验证。观点仅代表作者个人，不构成任何形式的投资或技术决策建议。