企业官网建设流程全解析

纲要

• Claude：AI编程助手，用于理解和执行自然语言描述的代码修改请求。
• Figma：文中用于辅助开发和设计对照的设计工具。
• iconfont：阿里巴巴矢量图标库，用于获取和管理项目中的图标资源。
• SVG：可缩放矢量图形，用于在界面中嵌入高质量、可缩放图标。
• Emoji：用于丰富界面视觉元素，提升用户体验。
• 本地缓存：数据持久化的一种方式，用于在无后端情况下临时存储数据。
• Dashboard：应用主控制面板，登录后的首页。
• 路由跳转：在单页应用中，通过URL变化切换不同视图页面的机制。
• 前端组件：构成用户界面的可复用UI单元。

前端界面优化工作流概述

本次优化工作完全基于自然语言驱动，通过向Claude描述界面问题和期望效果，由AI自动分析并修改代码。整个流程可概括为以下步骤，并在后续页面中反复应用。

登录与注册页面风格统一及Bug修复

问题诊断

在项目初期，登录页面存在一个偶发性渲染Bug。初次加载或长时间刷新后，页面样式正常；但连续多次快速刷新后，页面风格丢失，整体颜色变淡，视觉效果变差。该问题表明CSS样式或JavaScript加载逻辑存在竞态条件或缓存问题，导致样式未能正确应用。

此外，页面顶部存在一个圆角方形的装饰性Logo元素，经评估认为其与产品“财务管家”的核心定位关联度不高，且占用界面空间，决定予以移除，以追求更简洁的视觉风格。

按钮交互优化

登录和注册页面中的核心操作按钮（登录、注册）缺少鼠标悬停（Hover）状态的视觉反馈。良好的交互设计应提供即时反馈，以增强用户操作感知。因此，需要为按钮添加Hover状态样式，例如颜色渐变、亮度变化或阴影，并在鼠标移出时恢复原状。

自然语言驱动的修改流程

通过Claude，直接以自然语言描述了上述所有修改点。

• 修改指令：向Claude发送指令，要求其修改login界面。
  1. 去除顶部logo及其相关样式。
  2. 修复页面刷新后样式丢失、颜色变淡的Bug，确保每次刷新样式一致。
  3. 为登录和注册按钮添加鼠标悬停颜色变化效果。
• AI执行与反馈：Claude在理解指令后，自动定位到相关文件（如Login.tsx或Login.vue及对应的CSS Module或Styled Component），完成了代码修改。
• 验证结果：刷新页面后，登录页面的Bug得到修复，样式稳定。按钮悬停效果生效，视觉反馈良好。

注册页面风格同步与路由跳转

在登录页面修改成功后，对注册页面应用了相同的风格，确保两个页面的视觉基调保持一致，这有助于提升产品整体的专业感。

同时，修复了登录页面的路由跳转逻辑。点击“登录”按钮后，页面应正确跳转至主控面板（Dashboard），而不是停留在当前页面或报错。

• 修改指令：向Claude发送指令。
  1. 修改register页面风格，使其与已修改的login页面保持完全一致。
  2. 修复login页面点击登录按钮后的路由跳转，确保其正确导航到dashboard页面。
• 验证结果：注册页面风格与登录页统一。点击登录按钮后，应用路由跳转至Dashboard页面，流程打通。

全站页面系统化调整与细节打磨

后续对其他主要页面进行了系统化的审查和调整，一共包含18项独立的修改任务。这些任务在开发过程中被逐一记录，并通过Claude批量或单独完成，显著提升了全站UI的一致性和用户体验。

首页布局调整

• 移除冗余登录入口：首页右上角存在一个“登录”按钮。由于用户在未登录状态下访问首页，该入口确实必要；但登录后再次看到该入口会造成困惑。经评估，决定将其移除，简化界面。
• 统一全站风格基调：使用一条全局指令，要求Claude将除登录/注册外的所有页面风格统一，参照登录注册页面的样式标准。这包括背景色、字体、卡片阴影、按钮样式等，确保了产品视觉语言的一致性。

底部导航栏文本精简

在应用底部导航栏中，每个标签（如“首页”、“统计”、“明细”、“设置”）下方都显示了对应的英文翻译（如“Home”、“Statistics”、“Details”、“Settings”）。对于中文用户界面，此英文标注显得冗余且不够简洁。因此，通过指令将所有底部导航项的英文文本移除，仅保留中文。

数据可视化组件修复

在对统计页面进行风格调整后，页面内的核心数据可视化组件（饼状图和折线图）意外消失。这可能是由于DOM结构变化或图表组件渲染条件被误修改导致。

• 修复指令：向Claude明确指出：“统计页面中的图表全部消失了，请立即检查并修复。”
• AI修复过程：Claude通过自检机制，重新审查了统计页面的组件代码和图表库（如ECharts或Chart.js）的调用方式，找出了导致图表不渲染的逻辑错误并进行了修复，使图表重新正常显示。

悬浮操作按钮（FAB）的图标替换与位置调整

• 图标替换：默认的悬浮按钮使用文本字符“+”作为标识，视觉效果不佳。优化方案是使用专业的矢量图标。具体操作如下：
  1. 从阿里巴巴矢量图标库（iconfont.cn）中搜索并下载“加号”图标。
  2. 复制该图标的SVG代码。
  3. 向Claude描述需求：“请将首页悬浮按钮中的文字‘+’替换为以下SVG图标代码。” 并提供复制好的SVG代码。
• 位置微调：在首页添加悬浮按钮后，需要将其同步到“统计”、“明细”、“设置”等其他页面，以保持功能入口的一致性。但初始添加时，按钮位置过于靠上。随后通过指令“请将悬浮按钮位置向下调整，与底部导航栏保持合适间距”进行了修正。

列表项间距优化

在首页“最近记账”列表中，图标与文字之间的间距过近，导致视觉拥挤。通过指令“请将首页记账列表中的图标和后方文字间距拉开”进行了优化，使排版更清晰。

统计页面布局调整

统计页面顶部的“收入”、“支出”、“结余”概览卡片与页面顶部边缘间距不足，显得拥挤。通过指令“请将统计页面顶部卡片与页眉的距离拉开”进行了修正，改善了呼吸感和层次感。

明细与设置页面细节清理

• 移除多余英文标签：明细页和设置页的顶部或特定区域存在冗余的英文标签（如Settings、About、Errorback等），通过指令统一删除，使界面更纯净。
• 精简设置菜单：设置页面最初包含较多菜单项，如“深色模式”、“导出数据”、“帮助与反馈”等。考虑到项目初期聚焦核心功能，仅保留了“账户管理”和“分类管理”两个核心入口，其余项均被移除，降低用户认知负荷。
• 头像上传功能（前端实现）：设置页面的用户头像最初为静态文字。为实现头像更换功能，向Claude描述了需求：“请实现点击头像可上传本地图片进行更换的功能。仅需实现前端交互，后端存储逻辑暂不处理。”Claude据此生成了包含文件上传按钮和图片预览功能的UI组件代码。

二级管理页面构建：账户管理与分类管理

为完善应用的数据管理闭环，需要构建“账户管理”和“分类管理”两个二级页面。

• 页面跳转：通过指令要求Claude为设置页面的“账户管理”和“分类管理”菜单项添加路由跳转逻辑，指向对应的新页面。
• 核心功能实现：
  • 账户管理：支持对用户的支付账户（如现金、微信、支付宝、银行卡）进行增、删、改、查操作。每个账户支持使用Emoji作为图标。
  • 分类管理：支持对收入和支出的类别进行管理。同样支持增、删、改、查以及Emoji图标选择。
• 数据持久化：在此阶段，所有数据变更暂时保存在浏览器的本地缓存（LocalStorage）中，刷新页面会重置数据。这是为了在后续与后端数据库对接前，先完成前端交互逻辑的构建。

其他细节微调

• 列表样式一致性：在修改addRecord页面时，发现其中的明细列表项（如“餐饮”、“交通”）的图标与文字间距与其他页面（如首页）不一致。通过追加指令，要求Claude参考首页样式进行统一调整。

API 速览

本次优化过程主要通过自然语言与Claude交互，不涉及直接调用或修改后端API接口。前端路由配置、组件状态管理、LocalStorage操作均由Claude根据指令自动生成和调整，未显式定义或暴露独立的API层。

Demo 示例

本次优化实践未生成独立的HTML Demo文件，所有修改均在现有前端项目代码库中完成。项目结构概览如下：

├── src │ ├── assets # 静态资源 (图片, SVG等) │ ├── components # 可复用UI组件 (按钮, 输入框, 悬浮按钮等) │ ├── pages # 页面级组件 (登录, 注册, 首页, 统计, 明细, 设置, 账户管理, 分类管理) │ ├── router # 前端路由配置 │ ├── store # 状态管理 (Vuex / Pinia / Redux等) │ ├── styles # 全局样式 (CSS / SCSS / CSS-in-JS) │ ├── utils # 工具函数 (本地缓存操作等) │ └── App.tsx / main.tsx # 应用入口 ├── public # 公共静态文件 ├── package.json # 项目依赖配置 └── ... # 其他配置文件

运行说明

1. 确保本地环境已安装Node.js和pnpm/npm/yarn等包管理器。
2. 克隆项目代码至本地。
3. 在项目根目录下执行依赖安装命令：

   pnpminstall# 或 npm install# 或 yarn install

4. 启动开发服务器：

   pnpmrun dev# 或 npm run dev# 或 yarn dev

5. 根据控制台输出的本地地址（如http://localhost:5173）访问应用。

参考文档

官方文档

• ClaudeAPI 文档: https://docs.anthropic.com/en/api
• Vue.js官方文档: https://vuejs.org/guide/introduction
• React官方文档: https://react.dev/learn
• Vite官方文档: https://vitejs.dev/guide/

参考链接

• 阿里巴巴矢量图标库 (iconfont): https://www.iconfont.cn/
• Emoji表情符号列表: https://emojipedia.org/

总结

本次前端界面优化实践，完整展示了基于AI的Vibe Coding开发模式。核心要点如下：

• 自然语言驱动：通过向Claude描述界面问题和修改目标，即可驱动代码变更，大幅降低了UI调整的沟通和编码成本。
• 高效Bug修复：AI能够快速定位并修复偶发性渲染Bug、逻辑错误（如图表丢失）等。
• 风格一致性保障：通过全局指令，AI可确保所有页面的视觉风格统一，维持产品设计的整体性。
• 复杂功能构建：AI不仅限于简单的样式调整，还能根据描述构建包含路由跳转、数据增删改查的完整功能页面（如账户管理、分类管理）。
• 迭代式开发：面对复杂的或不理想的结果，可以通过追加指令进行精准的迭代修正，直至达到预期效果。
• 项目结构规范：AI在修改代码时，会遵循项目现有的代码结构和规范，保证了代码的可维护性。