roast-my-design-system
★ 27
vs
mcp-app-typescript-template
★ 21
roast-my-design-system vs mcp-app-typescript-template
roast-my-design-system：这个免费的CLI工具和Claude Code技能通过真实数据分析你的代码库设计系统，提供健康评分、详细报告和可操作的修复建议。它还生成规则，确保Claude、Cursor和Copilot等AI代理遵循你既定的设计规范，从而避免UI不一致。；mcp-app-typescript-template：该模板提供了一个精心设计的启动项目，用于使用React组件构建交互式AI应用（MCP Apps），并利用TypeScript、Tailwind CSS和Vite等现代Web技术。它展示了与ChatGPT等MCP主机集成的最佳实践，为服务器端工具和动态UI组件提供了全面的功能。
01
简评
roast-my-design-systemDev Tooling · ★ 27
在重构前进行审计，以建立设计系统健康状况的衡量基线。
mcp-app-typescript-templateDev Tooling · ★ 21
为ChatGPT、Claude.ai和VS Code等MCP主机构建自定义交互式AI应用。
02
并排对比
字段
roast-my-design-systemmcp-app-typescript-template分类
开发者工具
开发者工具
Stars
★ 27
★ 21
许可证
MIT
Apache-2.0
安装方式
npx roast-my-design-system
git clone https://github.com/pomerium/mcp-app-typescript-template your-mcp-app && cd your-mcp-app && npm install && npm run dev
更新时间
1周前
2天前
开源
是
是
标签
CLI工具, 设计系统, AI代理
MCP, React, TypeScript
03
功能特性
roast-my-design-system01获取一个确定性的设计系统健康评分（0-100），并与行业标准进行基准比较。
02生成包含所有设计不一致之处的全面、自包含HTML报告，并提供真实文件路径。
03生成`design-system-rules.md`文件，指导AI代理（Claude, Cursor, Copilot）遵循规范组件和代币，防止设计偏差。
04作为本地MCP服务器运行，使AI代理在UI开发过程中获得实时的设计系统答案和验证。
mcp-app-typescript-template01带有应用助手的MCP服务器：使用`McpServer`和MCP应用助手的Node.js服务器，用于强大的后端开发。
02带有App API演示的React组件：交互式React组件演示了MCP Apps `App` API，用于与主机通信。
03UI能力协商：服务器自动检测主机能力并调整响应，支持UI和纯文本客户端。
04内联组件资源：支持针对iframe沙盒主机（如Claude.ai）或远程共享的自包含HTML模式。
05用于测试的模拟应用：包含`createMockApp()`辅助函数，用于在没有实时MCP连接的情况下进行本地测试和Storybook开发。
04
使用场景
roast-my-design-system↳在重构前进行审计，以建立设计系统健康状况的衡量基线。
↳通过识别重复组件和不规范值，诊断并解决AI生成UI“几乎正确但又不太对”的问题。
↳通过分享包含健康评分和基准的自包含HTML报告，倡导设计系统改进。
↳将报告作为AI代理的任务清单，系统性地修复设计系统不一致之处。
mcp-app-typescript-template↳为ChatGPT、Claude.ai和VS Code等MCP主机构建自定义交互式AI应用。
↳在AI聊天界面中将服务器端工具与动态前端组件集成。
↳使用强大的现代Web开发堆栈进行MCP应用的快速原型设计和开发。
↳使用`createMockApp()`和MCP Inspector等专用工具进行MCP应用功能的本地测试和调试。
↳使用多阶段Docker构建和全面的生产清单部署生产就绪的MCP应用。
FAQ
常见问题
roast-my-design-system 和 mcp-app-typescript-template 有什么区别？
roast-my-design-system 和 mcp-app-typescript-template 都属于 Dev Tooling 类别。roast-my-design-system 有 27 Stars，mcp-app-typescript-template 有 21 Stars。
roast-my-design-system 和 mcp-app-typescript-template 哪个更好？
最佳选择取决于你的具体需求。在重构前进行审计，以建立设计系统健康状况的衡量基线。 时选 roast-my-design-system，为ChatGPT、Claude.ai和VS Code等MCP主机构建自定义交互式AI应用。 时选 mcp-app-typescript-template。
roast-my-design-system 是免费的吗？
是的，roast-my-design-system 在 GitHub 开源（MIT）。
mcp-app-typescript-template 是免费的吗？
是的，mcp-app-typescript-template 在 GitHub 开源（Apache-2.0）。
推荐云部署
Ad在 DigitalOcean 上一键部署
为你的 MCP 服务、Docker 容器与智能体提供即开即用云服务器，新用户立享 $200 免费额度（60天有效）。
→