watermelon-ui

Watermelon UI 技能

Watermelon UI 是一个免费的开源 React 和 Tailwind 界面目录。其 MCP 服务为只读，无需 API 密钥，可在有资源时返回预览链接、依赖项、安装命令和源文件。

默认工作流

1. 在从头编写组件之前，先根据用户的视觉和功能需求调用 search。
2. 如果难以直接做出选择，调用 get_inspiration 并比较 3–6 个合适的选项。
3. 对选定的 slug 调用 get_component，以获取其源代码、依赖项、预览和 shadcn 安装命令。
4. 安装或编写返回的文件，然后调整令牌、文案、属性和导入，以适配项目现有的设计系统。
5. 验证响应式行为、键盘交互、无障碍功能，以及两种受支持的颜色模式。

完整页面工作流

对于落地页和其他多区块体验，调用 compose_page。将其结果视为有来源依据的初始方案，检查每个选定的预览，并替换任何不符合项目视觉方向的区块。

选择指南

• 使用 components 获取常见 UI 基础组件及其变体。
• 使用 animated-components 获取交互繁多的独立组件。
• 使用 blocks 获取完整的页面区块。
• 使用 dashboards 和 templates 作为组合参考。
• 保留用户现有的框架和约定。不要强行将 Watermelon 样式应用到已有的设计系统上。

设置

托管服务的地址是 https://mcp.watermelon.sh/mcp。它是公开的，无需身份验证。