Using AI Vibe Coding and Trae to Build a High‑Quality Web Admin Dashboard

Vibe Coding workflow

Developers describe the desired UI outcome, let the AI generate the implementation, observe the result, adjust the prompt, and repeat until the UI matches expectations.

Experience 1 – extracting UI design rules

Browse a UI prototype site (https://www.axureshop.com/) to obtain a design that includes color palettes, typography scales, and component specifications. Record these details in a markdown file color_rules.md, for example:

# 组件 & 规范
## A. 配色 COLOR SCHEME
### 主色 Primary
- 蓝色: #2561EF
### 辅助色 Auxiliary
- 红色: #FA746B
- 绿色: #3DD4A7
- 紫色: #6C76F4
- 黄色: #FDDB78
### 中性色 Neutral
- 深灰: #333333
- 中灰: #666666
- 浅灰: #999999
- 更浅灰: #CCCCCC
- 白色: #FAFAF2
## B. 字体 TYPOGRAPHY
| 字号 | 字重 | 属性 | 应用场景 |
|------|------|------|----------|
| 18px | Medium | 大标题 | 导航大标题 |
| 16px | Medium | 一级标题 | 页面标题 |
| 14px | Medium | 一级标题 | 按钮文字 |
| 13px | Regular | 正文 | 内容页面信息 |
| 12px | Regular | 正文 | 说明文字 |
## C. 应用规范
### 颜色使用原则
- 主色 #2561EF 用于品牌识别、关键按钮、交互高亮
- 辅助色用于警告、成功、装饰等不同功能
- 对比度满足可访问性标准
### 字体使用原则
- 按层级使用对应字号和字重，保持可读性和一致性
## D. 代码实现建议
### CSS变量定义
```css
/* 主色 */
--primary-color: #2561EF;
/* 辅助色 */
--aux-red: #FA746B;
--aux-green: #3DD4A7;
--aux-purple: #6C76F4;
--aux-yellow: #FDDB78;
/* 中性色 */
--neutral-dark: #333333;
--neutral-medium: #666666;
--neutral-light: #999999;
--neutral-white: #FAFAF2;
/* 字体大小 */
--font-size-large: 18px;
--font-size-heading1: 16px;
--font-size-heading2: 14px;
--font-size-body: 13px;
--font-size-small: 12px;
/* 字重 */
--font-weight-medium: 500;
--font-weight-regular: 400;
```
### 使用示例
```css
.primary-button {
  background-color: var(--primary-color);
  color: white;
  font-size: var(--font-size-heading2);
  font-weight: var(--font-weight-medium);
}
.page-title {
  font-size: var(--font-size-heading1);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-dark);
}
.body-text {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  color: var(--neutral-dark);
}
```

Experience 2 – project generation with Trae

Place the rule file in the Trae project‑level rules directory. Execute the scaffold command: npm create vite@latest . -- --template vue Trae automatically:

Converts the generated Vue 3 scaffold to Vue 2 (version 2.7.16).

Adds Ant Design Vue (version 1.7.8).

Creates a README.md describing the tech stack, project structure and basic modules.

Generated README.md excerpt:

# Web管理系统
## 项目介绍
这是一个基于Vue 2和Ant Design Vue构建的基础管理后台系统，提供了完整的页面布局、用户界面组件和基础功能模块。
## 技术栈
- 前端框架：Vue.js 2.7.16
- UI组件库：Ant Design Vue 1.7.8
- 构建工具：Vite 4.5.2
- CSS预处理器：原生CSS + CSS变量
## 快速开始
```bash
npm install
npm run dev
```
## 项目结构
```text
web_manage/
├── .gitignore
├── .vscode/
├── README.md
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   ├── main.js
│   └── style.css
└── vite.config.js
```
## 功能模块
1. **仪表盘**：显示关键统计数据、图表和最近活动记录
2. **用户管理**：用户列表、角色管理和权限管理
3. **系统设置**：基础设置和日志管理
## 颜色方案
- 主色 #2561EF
- 辅助色 #FA746B、#3DD4A7、#6C76F4、#FDDB78
- 中性色 #333333、#666666、#999999、#CCCCCC、#FAFAF2
## 开发指南
1. 组件开发遵循Vue 2选项式API
2. 样式开发使用CSS变量保持一致性
3. 新功能模块添加到对应目录
4. 提交前运行构建确保无编译错误
## 注意事项
- 使用Vue 2.7.16（Vue 2的最终维护版本）
- 添加依赖时确保兼容当前技术栈
- 项目遵循响应式设计原则
```

After installing dependencies and running npm run dev, the initial UI appears.

Menu component extraction

The generated menu did not meet expectations. A prompt was sent to Trae requesting the menu be extracted into a separate Vue component under src/views/menu with JSON‑based configuration. Trae created the component and updated the project structure. An initial error occurred; the AI resolved it automatically, allowing the project to compile.

Applying color rules to dashboard cards

A subsequent prompt asked the AI to apply the previously defined color rules to the dashboard cards. The AI updated the component styles so that the cards used the primary and auxiliary colors defined in color_rules.md.

Fixing chart canvas width

The chart component rendered with a 2 px canvas width, causing it to disappear. The following prompt was issued:

图表的 canvas 宽度只有 2px，请调整使其正常显示并确保图例出现，展示每日的交易金额。

The AI increased the canvas size, added the missing legend, and the chart displayed correctly with daily transaction amounts.

AI role prompt used in the session

# 角色
你是一名精通 **Web开发** 的高级工程师，拥有10年以上的 **Web应用** 开发经验，熟悉 **HTML、CSS、JavaScript、React、Vue.js、Node.js、TypeScript** 等技术栈。你的任务是帮助用户设计和开发易用且易于维护的 **基础Web网页**。始终遵循最佳实践，并坚持干净代码和健壮架构的原则。

# 目标
帮助用户完成 **基础Web网页** 的设计和开发工作，确保功能完善、性能优异、用户体验良好。

# 要求
## 项目初始化
- 阅读项目目录下的 README.md，了解目标、功能架构、技术栈和开发计划；若不存在则创建。
## 需求理解
- 充分理解用户需求，分析是否存在缺漏并与用户讨论完善；选择最简单的解决方案避免过度设计。
## UI和样式设计
- 使用现代 UI 框架（如 Vue.js 2.0、Ant Design Vue、Element UI）实现样式设计；在不同平台上保持一致的响应式布局。
## 代码编写
- 技术选型：HTML 用于结构，CSS 用于样式，JavaScript 用于逻辑，Vue.js 用于动态 UI，Vite 用于模块打包。
- 强调代码清晰、模块化、可维护，遵循 DRY、最小权限、响应式设计等最佳实践。
- 考虑安全性，避免漏洞；优化性能，降低资源占用；编写单元测试并提供中文注释和文档。
## 问题解决
- 阅读相关代码，理解基础网页的工作原理；根据用户反馈分析原因并提出解决思路，确保改动最小且不破坏现有功能。
## 迭代优化
- 与用户保持沟通，根据反馈调整功能和设计；不确定需求时主动询问澄清；每次迭代更新 README.md 包含功能说明和优化建议。
## 方法论
- 系统2思维：将需求分解为可管理的部分，仔细考虑每一步。
- 思维树：评估多种解决方案及后果，结构化探索路径并选择最优。
- 迭代改进：在最终确定代码前考虑边缘情况和优化，确保方案健壮。

Summary of technical outcomes

UI design rules extracted from a real prototype and encoded as markdown/CSS variables.

Automated project scaffolding with Trae, including Vue 2 migration and Ant Design Vue integration.

Iterative refinement of generated code via natural‑language prompts: component extraction, style adjustments, and bug fixes.

Successful resolution of a canvas‑size bug in a chart component, resulting in a functional dashboard displaying daily transaction data.

The session demonstrates a concrete Vibe Coding workflow where developers focus on high‑level design intent while the AI handles low‑level implementation details.