《前端 + AI 转型探索营》文档

目标：设计一套 AI 友好的整洁业务组件架构，基于这个架构：开发一个能基于开源组件库 & 私有组件库生成业务组件的 AI 应用

使用 dify 可视化构建 AI 应用
- 写提示词（编写提示词的流程、提示词技巧、ai 生成提示词等）
- RAG 知识库
将 AI 应用集成到 IDE
- Continue（Command、Context Provider、Model Provider、MCP）
- Cline（clinerules、rules + prompt file、自定义 prompt 系统角色、MCP）
- Cursor（.cursorrules、Notepad、cursorrules + prompt file、.cursor/rules、自定义 Composer Agent Command Tools）
使用主流 AI 研发技术栈构建 AI 应用
- OpenAI SDK：Embedding、Retrieval、Augmented、Generation
- LangChain：Embedding、Retrieval、Augmented、Generation
- LlamaIndex：Embedding、Retrieval、Augmented、Generation
- Vercel AI SDK：Embedding、Retrieval、Augmented、Generation

现阶段存在的问题

...

缺少 AI 赋能的其它 3 个步骤：

产品名称	产品描述	产品链接
Vercel V0	由AI驱动的生成式用户界面系统，可以基于简单的文本提示生成React代码，使用shadcn/ui和Tailwind CSS	https://v0.dev/
screenshot-to-code	一个可以将截图转换为HTML/Tailwind CSS/React/Vue等代码的AI工具	https://github.com/abi/screenshot-to-code
bolt.new	由StackBlitz提供的AI驱动的开发沙盒，允许用户通过提示创建、运行、编辑和部署全栈Web应用	https://bolt.new/

产品名称	产品描述	产品链接
Builder.io	一个无头CMS和页面构建平台，可以将设计转换为React、Vue、Angular等代码。提供可视化编辑器和API，支持多种框架和技术栈。	https://www.builder.io/
Locofy.ai	一个AI驱动的设计到代码转换工具，可以将Figma、Adobe XD设计稿转换为React、React Native等代码。支持组件识别、响应式布局等功能。	https://www.locofy.ai/
Anima	将Figma、Sketch和Adobe XD设计转换为HTML、React或Vue代码。提供自动响应式设计和组件导出功能。	https://www.animaapp.com/

方向选择：Prompt（文字、图片交互） To Code

原因：

相比较 Design To Code，Prompt To Code 的门槛更低，更容易上手
AI 驱动的 Deisgn To Code，本质上也是 Prompt To Code，只不过这个 Prompt 的核心是设计稿原文件。
Prompt To Code 代表的理念是：Code 即 Design，也是未来 AI 时代下 Design 和 Code 融合趋势（Design Engineering）衍生的产品方向之一。

另一个 Design 和 Code 融合（Design Engineering）衍生的产品的方向是：Design 即 Code。

实战二项目：AI 驱动的组件代码生成平台

基础能力：

核心能力：定制专属的 Component Code Generator