AI导哈

AI辅助Web开发工具包

一个基于MCP服务器的AI驱动Web开发工具包，提供组件安装、自动化测试和数据库集成等功能，适用于现代Web应用开发。

  • by Yosef-Ali
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Yosef-Ali/AI-Assisted-Web-UI-Starter

使用说明

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

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

🚀 快速开始

先决条件

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

设置

  1. 安装MCP依赖项：

    npm install

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

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

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

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

  5. 验证MCP连接：

    # Check MCP configuration
cat mcp.json

# Verify Spec Kit setup
ls -la .specify/

  6. 通过询问您的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规范工具包集成

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

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

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

规格套件命令

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

命令 目的 描述
/constitution 项目原则 制定管理原则和开发指南
/specify 功能规格 根据自然语言描述创建详细规格
/plan 技术计划 根据技术栈选择生成实施计划
/tasks 任务分解 根据实施计划创建可操作的任务列表
/implement 代码生成 执行所有任务，根据计划构建功能

规范套件工作流程示例

  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

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

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

  4. 添加到您的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驱动开发

相关 MCP