AI Assisted Web UI Starter

人工智能辅助Web UI初学者-MCP驱动开发

该项目使用模型上下文协议（MCP）服务器进行AI驱动的开发。

🚀 快速开始

先决条件

• Node.js 18+
• 支持MCP的AI客户端（Claude Desktop、Claude Code、Cursor等）

设置

1. 安装MCP依赖项：

   npm install

1. 初始化规格套件 （如果尚未完成）：

   uvx --from git+https://github.com/github/spec-kit.git specify init --here --ai copilot

1. 配置您的AI客户端以使用中的MCP服务器 mcp.json

1. 在此目录中打开您的AI客户端

1. 验证MCP连接：

   # Check MCP configuration
   cat mcp.json

   # Verify Spec Kit setup
   ls -la .specify/

1. 通过询问您的AI来测试MCP服务器：

- “检查所有MCP服务器是否已连接” - “给我看看现行宪法” - “Shadcn有哪些可用组件？”

可用的MCP服务器

Shadcn MCP

• 状态: ✅ 已配置并准备就绪
• 特性：组件安装、UI系统设置、主题配置
• 用法：自动添加组件 /implement 阶段
• 命令: npx shadcn@latest mcp

剧作家MCP

• 状态: ✅ 已配置并准备就绪
• 特性：浏览器自动化、视觉测试、E2E测试、可访问性检查
• 用法：开发工作流程中的自动化测试
• 命令: npx @playwright/mcp@latest

Supabase MCP

• 状态: ✅ 已配置并准备就绪
• 特性：数据库设置、身份验证、实时订阅
• 用法：通过MCP实现数据库和身份验证
• 命令: npx supabase mcp

GitHub规范工具包集成

• 仓库:
• 状态: ✅ 以宪法为起点
• 特性: /constitution, /specify, /plan, /tasks, /implement 工作流
• 配置: .specify/ 包含模板和脚本的目录

🛠️ 使用GitHub Spec Kit进行规范驱动开发

该项目包括 GitHub规范工具包 ()用于结构化、规范驱动的开发。Spec Kit提供AI驱动的工具，在实施之前创建详细的规范。

规格套件命令

将这些斜线命令与您的AI助手一起使用：

规范套件工作流程示例

1. 定义原则: /constitution Create a modern web app with React, TypeScript, and focus on accessibility
2. 指定特征: /specify Build a user dashboard with data visualization and real-time updates
3. 创建计划: /plan Use Next.js 15, Shadcn UI components, and TanStack Query for data fetching
4. 分解任务: /tasks （自动生成实施任务）
5. 实施: /implement （AI构建完整功能）

与MCP集成

Spec Kit与我们的MCP服务器无缝协作：

• Shadcn MCP 在实现过程中处理UI组件安装
• 剧作家MCP 为已实现的功能提供自动化测试
• 规格套件 管理整体开发工作流程和规范

🛠️ 高级MCP开发

使用Vercel MCP模板

对于自定义MCP服务器开发，您可以使用 用于Next.js的Vercel MCP 模板：

1. 克隆模板:

   npx create-next-app@latest my-mcp-server --example https://github.com/vercel-labs/mcp-for-next.js

1. 自定义您的MCP工具 在 app/[transport]/route.ts

1. 部署到Vercel 启用流体计算

1. 添加到您的mcp.json:

   {
     "mcpServers": {
       "custom-nextjs": {
         "command": "npx",
         "args": ["your-custom-mcp-server"]
       }
     }
   }

这允许您为开发工作流程创建特定于项目的MCP工具。

📚 文档

• AI_SETUP_INSTRUCTIONS.md -完整的AI设置指南
• ai-prompts.md -即用型AI提示
• mcp-workflow.md -MCP的开发工作流程
• spec-template.md -产品规格模板

🤖 AI优先发展

该项目实施 真正的规范驱动开发 随着 GitHub规范工具包 和 MCP集成:

宪法驱动发展✅

• 宪法成立: .specify/memory/constitution.md （v1.0.0）
• 核心原则：现代React，TypeScript卓越，可访问性第一
• 不可协商的标准：WCAG 2.1 AA，性能>90，类型安全

完成MCP集成✅

• 3台MCP服务器：Shadcn，剧作家，Supabase（全部配置）
• 已验证工作：组件安装、测试、数据库操作
• VS代码扩展：Supabase集成已安装并准备就绪

完整的开发工作流程

1. 确立原则: /constitution Define project standards and guidelines
2. 指定功能: /specify Describe what you want to build in natural language
3. 制定技术计划: /plan Choose your tech stack and architecture
4. 生成任务: /tasks Break down implementation into actionable steps
5. 使用MCP实现: /implement Use Shadcn and Playwright MCP for execution
6. 测试与验证：使用Playwright MCP进行自动化测试

增强的AI命令

规格套件命令：

• /constitution -制定项目原则和编码标准
• /specify -创建详细的功能规格
• /plan -制定技术实施计划
• /tasks -将工作分解为可管理的任务
• /implement -执行完整的实施

MCP集成：

• Shadcn MCP处理UI组件安装
• Playwright MCP提供自动化测试
• 组合工作流程确保质量和一致性

发展现状

宪法阶段 ✅ 完成

• 具有TypeScript卓越特性的现代React架构
• 无障碍优先发展（WCAG 2.1 AA）
• 性能标准（Lighthouse>90）

规范阶段 ✅ 准备就绪

• 功能规格：身份验证和数据库集成
• 地点： specs/002-auth-database/specify.md
• 状态：准备就绪 /plan 命令

下一个开发工作流程

# Current: Ready for planning phase
/plan     # Create technical implementation plan using MCP servers

# Then: Break down into tasks  
/tasks    # Generate actionable development tasks

# Finally: Execute with MCP automation
/implement # Auto-implement using Shadcn, Playwright, Supabase MCPs

🛠️ 开发流程

1. 指定：定义用自然语言构建什么
2. 实施：AI使用MCP服务器创建它
3. 测试：使用Playwright MCP进行自动测试
4. 迭代：通过对话式反馈进行优化

📦 项目结构

AI-Assisted-Web-UI-Starter/
├── mcp.json                 # MCP server configuration (Shadcn, Playwright, Supabase)
├── .specify/               # GitHub Spec Kit configuration
│   ├── memory/            # Constitution and project context
│   ├── templates/         # Spec, plan, and task templates
│   └── scripts/           # Bash automation scripts
├── specs/                 # Feature specifications directory
│   ├── 001-build-a-user/ # Completed dashboard implementation
│   └── 002-auth-database/# Authentication & database spec (ready)
├── src/                   # Next.js source code
│   ├── app/              # Next.js App Router
│   ├── components/       # React components (charts, dashboard, UI)
│   ├── lib/              # Utilities, API clients, performance tools
│   └── types/            # TypeScript type definitions
├── e2e/                  # Playwright E2E tests (105 tests)
├── __tests__/            # Jest unit tests  
├── scripts/              # Automation scripts (performance audit)
├── reports/              # Performance and validation reports
└── README.md             # This file

AI完成设置后，您还将拥有：

├── app/                   # Next.js App Router
├── components/            # React components
├── lib/                   # Utilities
├── public/               # Static assets
└── ...                   # Other Next.js files

自定义MCP服务器

您可以通过使用添加自定义MCP服务器来扩展此设置 Vercel MCP模板 用于项目特定的工具和集成。

🎯 后续步骤

1. 在此目录中打开您的AI客户端
2. 按照中的说明进行操作 AI_SETUP_INSTRUCTIONS.md
3. 使用以下提示 ai-prompts.md 构建功能
4. 让AI来处理实现细节！

______________________________________________________________________

内置于❤️ 使用MCP驱动开发