AI导哈

问题跟踪工具

一个用于测试Design Rails MCP服务器的基本问题跟踪工具，支持从零创建视觉语言、生成详细设计规范并进行设计审查。

  • by designrails
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 designrails/mcp-playground

使用说明

问题跟踪器-设计Rails MCP游乐场

一个基本的线性问题跟踪器(演示)那是一个实验场 设计轨道.

这个有意最小化的应用程序没有设计系统或品牌标识，只有功能性的UI组件和已经配置的MCP服务器。使用它来尝试从头开始创建一种视觉语言，或者直接使用AI驱动的设计规范和评论来实现功能。

关于

这个游乐场应用程序是为Design Rails的用户测试而设计的，Design Rails是一个MCP（模型上下文协议）服务器，它：

  • 从头开始创建视觉语言
  • 根据功能请求和产品上下文生成详细的设计规范
  • 对颜色对比、布局问题等进行设计审查（需要微软的 剧作家 MCP -已配置）
  • 与编码代理无缝协作，提高设计质量

包含什么

  • 样品数据：预装了各种状态、优先级和受让人的问题
  • UI组件：使用Tailwind CSS样式的Shadcn/ui组件
  • 两个视图：列表视图(/issues)看板视图(/board)
  • 富文本编辑器：Tiptap集成用于问题描述和评论
  • 拖放：板视图中的完全拖放支持
  • 设计环境：中的基本产品上下文文件 ./design-context 文件夹

注意：所有数据都是存储在内存中的模拟数据——页面刷新时重置更改。

先决条件

  • Node.js 18+和npm
  • AI编码代理：支持MCP的Claude代码、游标或VS代码
  • 设计Rails帐户：连接MCP服务器时，系统将提示您登录或创建一个

入门指南

  1. 安装依赖项：
npm install
  1. 运行开发服务器：
npm run dev
  1. 打开 http://localhost:3000 在浏览器中

应用程序将自动重定向到 /issues 在那里您将看到加载的示例问题。

  1. 将Design Rails连接到您的AI编码代理：
    • 服务器已在中预先配置 .mcp.json （克劳德桌面，光标）或 .vscode/settings.json （VS代码）
    • 在此工作区中打开您的编码代理——它应该会自动检测到它
    • 系统将提示您登录或创建Design Rails帐户
    • 看 详细的设置说明 如果你需要帮助

试试这些提示

一旦你设置好了，试着问你的经纪人：

1.创建设计系统并应用

Use Design Rails to set up a comprehensive design system for this issue tracker and apply it
throughout the codebase.
Make sure to update all existing components to follow the new design system consistently.

2.添加批量操作

Add bulk operations functionality to the issue tracker:
- Multi-select checkboxes for issues in the list view
- Bulk actions toolbar that appears when issues are selected
- Support for bulk status changes, priority updates, assignee changes, and label management
- Bulk delete with confirmation dialog
- Visual feedback showing how many issues are selected

有关要尝试的更多功能提示，请参阅 功能-PROMPTS.md.

在自己的项目中使用Design Rails

想在自己的项目中使用Design Rails吗？看看 安装说明 了解详细的设置步骤。

快速设置

使用CLI工具轻松设置：

npx designrails@latest setup

技术栈

  • 框架：Next.js 16（应用路由器）
  • 语言：TypeScript
  • 样式：顺风CSS v4
  • UI组件：shadcn/ui（纽约风格）
  • 拖放：@dnd工具包
  • 富文本按键：
  • 状态管理：反应上下文API
  • 图标：Lucide React

许可证

麻省理工学院

相关 MCP