dify
集成Dify API，快速生成Ant Design组件代码的MCP工具。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：dify。 它的用途是：集成Dify API，快速生成Ant Design组件代码的MCP工具。 完整的 Skill 内容见：https://321skill.com/skills/dify/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我生成一个包含搜索框、表格和分页的Ant Design管理列表页面，表格需要有ID、名称、状态和操作列。”，它会调用Dify API，生成相应的React函数组件代码，包含完整的JSX结构、状态定义和分页逻辑。你可以直接复制这段代码到项目中，快速搭建起页面骨架。
介绍
这个Skill主要解决了前端开发中，手动编写Ant Design组件代码耗时且易出错的问题。它通过集成Dify AI API，将自然语言描述直接转换为可用的React组件代码，极大地提升了UI开发的效率。
使用方式非常简单。在支持MCP协议的AI助手（如Claude Desktop）中安装并配置此Skill后，你只需在对话中描述你想要的组件功能或样式，它便会调用Dify API生成对应的Ant Design代码片段，你可以直接复制使用或在其基础上修改。
它非常适合需要快速构建企业级中后台界面的前端开发者和全栈开发者，尤其是那些对Ant Design组件库熟悉但希望减少重复编码工作的人群。
使用前请确保你已拥有可用的Dify API密钥，并了解基本的Ant Design组件使用规范。生成的代码建议在集成前进行简单的功能和样式审查，以确保符合项目具体需求。
核心特点
与通用的代码生成Skill相比，它深度集成了Ant Design组件库，能生成更符合该设计体系规范、开箱即用的React代码。同时，它通过Dify API提供服务，允许用户利用自建或定制的AI模型来生成代码，在模型选择和效果调优上更具灵活性。
注意事项
不适合生成非Ant Design组件库的UI代码，或需要复杂业务逻辑和后端交互的完整功能模块。
常见问题
需要自己部署Dify服务吗？
需要，你需要一个可用的Dify API端点及有效的API密钥。
支持生成Vue或其他框架的代码吗？
目前主要专注于生成React + Ant Design的代码，不支持Vue或其他UI库。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/dify/raw/index.md 读取 dify 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/dify/raw/index.md（查看排版版本）