AI
基于Dify API，快速生成前端组件代码的TypeScript MCP工具。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：AI。 它的用途是：基于Dify API，快速生成前端组件代码的TypeScript MCP工具。 详细介绍见：https://321skill.com/skills/ai-ai-fe-dify-mcp-server/ 请根据该页面的说明完成安装。
使用示例
“生成一个带有搜索框和过滤下拉框的数据表格React组件，使用Ant Design。”，它会通过集成的Dify MCP工具，调用您配置的API，生成符合要求的TypeScript组件代码。或者，您可以说：“将这个设计稿的描述转化为一个登录表单组件。”，它同样能快速输出可运行的代码框架。
介绍
该Skill旨在解决前端开发中重复编写基础组件代码的痛点。它通过集成Dify API，将自然语言描述或设计意图转换为可直接使用的TypeScript组件代码，显著提升开发效率。
使用时，您只需在支持MCP协议的AI平台（如Claude Desktop）中安装此工具，然后在对话中描述您想要的组件功能、样式或交互，它便会调用Dify API生成对应的代码片段。
它非常适合需要快速原型开发、希望减少重复编码工作或希望将设计稿快速转化为代码的前端开发者、全栈工程师以及智能体开发者。
建议在使用前确保您拥有可用的Dify API密钥，并对生成的代码进行必要的审查和调整，以符合具体项目的代码规范和架构要求。
核心特点
与同类代码生成工具相比，它深度集成了Dify平台的能力，能够利用Dify上已配置的特定工作流或知识库来生成更符合团队规范或业务场景的组件代码，而非通用的代码片段。
注意事项
不适合生成高度复杂、强交互逻辑或对性能有极致要求的组件代码，仍需人工深度介入。
常见问题
需要自己部署Dify服务吗？
需要，您需要拥有一个可访问的Dify实例及有效的API密钥。
支持生成哪些前端框架的代码？
主要面向TypeScript生态，具体支持的框架取决于您在Dify中配置的提示词模板。