Building an MCP Service Marketplace UI with GPT‑5 and Trae

VibeCoding workflow

The workflow follows the principle “state the requirement, let AI handle everything”. Each feature is expressed as a natural‑language prompt; the AI returns code, which is validated before proceeding. Two practical tips are emphasized:

Make the first prompt precise – vague requests such as “help me write a webpage” lead to poor results.

Address one problem at a time – fix a single issue or add one feature, verify, then continue.

Initial prompt and HTML v1

The reference UI is at https://mcp.aibase.com/zh/explore. The first prompt asks GPT‑5 (online) to generate a basic MCP marketplace page. The AI returns an HTML skeleton (v1).

Iterative front‑end refinement with Trae

A detailed front‑end agent prompt is submitted to Trae. The prompt (excerpt) is:

# 角色
你是一位高级前端开发者和专家你精通HTML\CSS\JavaScript以及现代UI。你思维缜密，能提供细致入微的答案，并且在推理方面表现出色。
# 要求
- 严格按照用户的要求一字不差地执行。
- 首先逐步思考
- 详细描述你用伪代码编写的构建计划。
- 确认后，再编写代码！
- ...
# 任务
根据用户的需求，完成网页开发

After the prompt, the AI returns a revised HTML page (v2). Several follow‑up questions are asked to fix styling and layout:

Question 2: Restore missing font size and style.

Question 3: Apply CSS for .category-item[data-v-1333763c] (border‑radius, cursor, font‑size, height, line‑height, padding, transition).

Question 4: Adjust the search box layout.

Question 5: Incorporate the HTML fragment for the selected‑conditions area.

Resulting v2 UI

After several refinement rounds, a polished v2 UI matching the reference design is produced. The final HTML code (omitted for brevity) renders the service‑category list, search box, selected‑conditions tags, and service cards.

AI‑generated PRD

A second AI agent (product expert) is prompted with the v2 UI and design notes to produce a detailed PRD. Key sections include project overview, functional requirements, UI/UX specifications, technical architecture, data models, API definitions, testing criteria, and deployment requirements. An excerpt:

# MCP服务目录页面PRD需求文档
## 1. 项目概述
### 1.1 项目背景
MCP服务目录页面是平台的核心功能模块之一，旨在为用户提供一个集中、高效的服务发现入口。
### 1.2 项目目标
- 提供直观、易用的服务浏览和搜索体验
- 实现多维度的服务筛选功能，提高用户查找效率
- 展示服务的关键信息，帮助用户快速评估服务价值
- 确保在不同设备上都能提供良好的用户体验
## 2. 功能需求
### 2.1 搜索功能
- 提供搜索框，支持关键词搜索服务名称和描述内容
- 支持回车搜索和点击搜索按钮
- 搜索结果实时更新或在用户提交搜索后更新
- 提供清除搜索内容的按钮
### 2.2 分类筛选功能
- 多选支持，已选条件展示为标签，支持单个条件移除和全部清除
- 条件联动，根据已选条件动态调整其他筛选维度的可用选项
### 2.3 结果展示功能
- 卡片网格展示，支持排序（相关性、下载量、评分、最新发布）
- 卡片信息包括 Logo、名称、简短描述、技术标签、评分、下载量、支持语言
## 5. 技术架构与实现细节
### 5.1 前端架构
- 技术栈：HTML5 + CSS3 + 原生 JavaScript
- 布局：Flexbox（导航栏、标题区、统计区） + Grid（服务卡片网格）
- 数据交互：AJAX 请求后端 API 获取服务列表
### 5.2 响应式设计实现
- 媒体查询断点：<640px（手机），768‑1099px（平板），1100‑1199px（中屏），1200‑1399px（大屏），>1400px（超大屏）
- 1100px 以下网格从 4 列变为 3 列，768px 以下变为 1 列
### 5.3 数据交互流程
1. 收集搜索关键词和筛选条件
2. 构建请求参数并发送 GET /api/services
3. 解析返回的 Service[] 数据
4. 更新已选条件标签、结果统计、服务卡片网格
## 6. 数据结构
### 6.1 服务数据模型
```javascript
{
  id: string,
  name: string,
  description: string,
  category: string,
  tags: string[],
  logo: string,
  rating: number,
  downloads: number,
  language: string,
  updatedAt: string
}
```
### 6.3 API 接口定义
#### 获取服务列表接口
- URL: `/api/services`
- Method: `GET`
- 请求参数: `{ search, categories, languages, ratings, sortBy, sortOrder }`
- 响应: `{ success: boolean, total: number, data: Service[], message: string }`

Backend design and project scaffolding

An AI backend‑architect agent receives the v1 HTML prototype and the PRD. It produces a markdown software design document, which is refined to remove Elasticsearch and to ensure complete API and entity definitions.

Using the design document, the AI is prompted to create a Java project with JDK 8, SpringBoot 2.7, and MyBatis Plus. The AI returns a project skeleton that is imported into IntelliJ IDEA, where minor manual fixes are applied. The resulting directory structure includes:

src/main/java/.../controller

src/main/java/.../mapper

src/main/resources/application.yml

src/main/resources/static/v3.html

(the front‑end HTML)

src/main/resources/init.sql

Database initialization and final testing

The generated init.sql script is executed against a MySQL database to populate service data. Connection settings in application.yml are updated, the application is started, and the UI correctly displays service listings, supports search and filter, and shows download counts and ratings.

Key observations

Precise first prompts dramatically affect the quality of generated code.

Iterative, single‑issue interactions reduce detours and make debugging easier.

The AI can produce end‑to‑end artifacts: front‑end HTML/CSS, PRD, software design, project scaffolding, and database scripts.

Manual verification and minor adjustments (e.g., fixing mapper scanning, aligning front‑end AJAX calls with back‑end endpoints) are still required.