提示工程架构中的微前端应用实践：用「模块化魔法」打造可成长的智能系统

关键词：提示工程、微前端、模块化AI、Prompt管理、微应用集成、智能架构、低代码扩展
摘要：当AI应用从「单一Prompt玩具」进化为「多场景智能系统」，Prompt的复杂度会像滚雪球一样膨胀——你可能需要为客服、写作、数据分析等10个场景设计20个Prompt，还要应对频繁的优化迭代。这时候，微前端架构会成为你的「模块化魔法」：它把庞大的Prompt系统拆成一个个独立的「Prompt微应用」，让每个场景的Prompt能独立开发、部署、更新，同时又能像搭积木一样组合成完整的智能应用。本文会用「智能咖啡馆」的生活故事类比，一步步讲清提示工程与微前端的结合逻辑，再通过真实代码案例展示如何落地，最后探讨这种架构的未来可能性。

背景介绍

目的和范围

为什么要把提示工程和微前端结合？

想象一下：你做了一个AI写作工具，一开始只支持「写朋友圈文案」，Prompt很简单——「写一条幽默的朋友圈，主题是周末撸猫」。但后来你要加「写产品说明书」「写演讲稿」「写小红书笔记」，每个场景的Prompt都有不同的要求（比如小红书需要「口语化、加emoji」，产品说明书需要「专业、有条理」）。这时候你会发现：

• 管理混乱：所有Prompt堆在一个配置文件里，改一个场景的Prompt容易影响其他场景；
• 迭代低效：要改「小红书Prompt」，得重启整个应用才能生效；
• 扩展困难：新增「写短视频脚本」场景，得修改核心代码，风险很高。

而微前端的核心能力就是**「拆分复杂系统，让模块独立生长」**——它能把每个场景的Prompt变成一个「微应用」，解决上述所有痛点。本文的目的就是教会你：如何用微前端架构重构提示工程，让智能应用从「难维护的大泥球」变成「可组装的积木塔」。

范围与边界

本文聚焦中大型AI应用的Prompt系统设计，覆盖从「Prompt模块化拆分」到「微应用集成」的全流程。不涉及AI模型本身的训练（比如微调GPT-4），也不深入微前端的底层原理（比如JS沙箱的实现）。

预期读者

• 前端开发工程师：想学习如何用微前端赋能AI应用；
• AI应用开发者：被Prompt管理的复杂度困扰，想找解决方案；
• Prompt工程师：想让自己设计的Prompt更易落地和迭代；
• 技术产品经理：想理解智能应用的架构逻辑，更好地规划产品。

文档结构概述

1. 故事引入：用「智能咖啡馆」的例子类比提示工程与微前端的结合；
2. 核心概念：用「咖啡配方」「模块化咖啡台」解释提示工程、微前端；
3. 架构设计：画出Prompt微应用的架构图，讲清模块间的协作逻辑；
4. 实战案例：用React+qiankun实现一个智能客服系统，包含Prompt微应用、中心化管理平台；
5. 应用场景：列举哪些AI应用适合这种架构；
6. 未来趋势：探讨Prompt微应用的生态和挑战。

术语表

核心术语定义

术语	通俗解释
提示工程（Prompt Engineering）	给AI模型写「配方」的过程——比如「写一篇500字的小学作文，主题是我家的猫」。
微前端（Micro-Frontends）	把大前端应用拆成多个小「微应用」，每个微应用独立开发、部署，再组合成整体。
Prompt微应用（Prompt Micro-App）	负责一个特定场景的Prompt模块——比如「客服接待场景的Prompt微应用」。
中心化Prompt管理	存储所有Prompt的「配方库」，支持版本控制、权限管理，让微应用能获取最新Prompt。

缩略词列表

• PM：Prompt Micro-App（Prompt微应用）
• CPM：Centralized Prompt Management（中心化Prompt管理）

核心概念与联系：用「智能咖啡馆」讲清逻辑

故事引入：我的智能咖啡馆遇到了大麻烦

我开了一家「AI智能咖啡馆」——顾客说「我要一杯香草拿铁，少糖」，AI咖啡机就会根据「香草拿铁配方」（Prompt）制作咖啡。一开始只有3种咖啡，配方好管理：

• 美式咖啡：「用200ml意式浓缩，加300ml热水」；
• 拿铁：「用200ml意式浓缩，加400ml牛奶，打奶泡」；
• 卡布奇诺：「用200ml意式浓缩，加300ml牛奶，打厚奶泡」。

但后来我加了「焦糖玛奇朵」「抹茶拿铁」「燕麦奶拿铁」，还有顾客的定制需求（比如「少奶泡、加双倍浓缩」）。这时候问题来了：

1. 配方混乱：所有配方写在一个Excel里，找「抹茶拿铁」要翻5页；
2. 迭代麻烦：想把「焦糖玛奇朵」的焦糖酱从10g改成8g，得把所有咖啡机的配方都更一遍；
3. 扩展困难：想加「椰子拿铁」，得重新调试整个咖啡机系统，怕影响其他咖啡的制作。

直到有天我去了一家「模块化咖啡馆」：他们把咖啡台分成基础咖啡区（做意式浓缩）、奶泡区（打奶泡）、调味区（加焦糖/抹茶），每个区域独立操作，但能配合出各种咖啡。我突然意识到——我的AI咖啡馆需要「模块化」，我的Prompt系统也需要！

核心概念解释：像讲「咖啡馆故事」一样讲技术

现在把「智能咖啡馆」的故事翻译成技术术语：

核心概念一：提示工程=咖啡配方设计

提示工程就是给AI模型设计「咖啡配方」的过程。比如：

• 要让AI做「香草拿铁」（生成符合要求的文本），你得写「配方」（Prompt）：「用200ml意式浓缩，加400ml热牛奶，打细腻奶泡，最后加10g香草糖浆」；
• 要让AI做「少糖香草拿铁」（定制化输出），你得调整配方：「用200ml意式浓缩，加400ml热牛奶，打细腻奶泡，最后加5g香草糖浆（少糖）」。

总结：提示工程=「告诉AI怎么做」的说明书设计。

核心概念二：微前端=模块化咖啡台

微前端就是把「大咖啡台」拆成「小模块」的技术。比如：

• 基础咖啡区（微应用1）：负责做意式浓缩，不管你要做拿铁还是卡布奇诺，都从这里拿浓缩；
• 奶泡区（微应用2）：负责打奶泡，能调整奶泡的厚度（适合拿铁或卡布奇诺）；
• 调味区（微应用3）：负责加焦糖、抹茶等，支持定制化需求。

每个模块（微应用）独立工作，但能组合出各种咖啡（完整应用）。总结：微前端=「拆分大系统，让模块独立生长」的工具。

核心概念之间的关系：配方与模块化咖啡台的协作

现在回到我的智能咖啡馆——如果用微前端重构，会变成这样：

1. Prompt微应用：每个咖啡配方对应一个微应用——比如「拿铁Prompt微应用」「卡布奇诺Prompt微应用」；
2. 中心化配方库：所有Prompt都存在「配方库」（CPM）里，微应用需要时直接取最新版本；
3. AI咖啡机：相当于AI模型，根据微应用传来的Prompt制作咖啡（生成文本）。

当顾客点「少糖香草拿铁」时：

• 系统根据「少糖」「香草」「拿铁」的关键词，找到「拿铁Prompt微应用」；
• 微应用从「配方库」获取最新的「少糖香草拿铁Prompt」；
• 把Prompt传给AI咖啡机，制作出符合要求的咖啡。

技术类比：

• 顾客的需求=用户输入的问题；
• 微应用=负责特定场景的Prompt模块；
• 配方库=中心化Prompt管理平台；
• AI咖啡机=GPT-4/Claude等AI模型。

核心架构的文本示意图与Mermaid流程图

文本示意图：Prompt微应用架构全景

+-------------------+       +-------------------+       +-----------------------+
|     用户界面      |       |   微前端容器      |       |   Prompt微应用集群    |
| （智能客服聊天框）| ----> | （管理微应用加载）| ----> | （接待/投诉/产品问题）|
+-------------------+       +-------------------+       +-----------------------+
                                                            |
                                                            v
                                                    +-----------------------+
                                                    | 中心化Prompt管理平台  |
                                                    | （存储/版本/权限管理）|
                                                    +-----------------------+
                                                            |
                                                            v
                                                    +-----------------------+
                                                    |     AI模型集群        |
                                                    | （GPT-4/Claude/Gemini）|
                                                    +-----------------------+

Mermaid流程图：用户请求的完整链路

flowchart LR
    A[用户输入："我要退款"] --> B[微前端容器]
    B --> C{路由匹配场景}
    C -->|投诉场景| D[投诉Prompt微应用]
    D --> E[中心化Prompt管理]
    E --> F[获取最新Prompt："很抱歉，请提供订单号"]
    F --> G[调用AI模型]
    G --> H[生成回答："请提供订单号，我帮您处理"]
    H --> I[返回给用户]

核心算法原理 & 具体操作步骤

核心逻辑：Prompt微应用的设计原则

要做一个能「独立生长」的Prompt微应用，需要遵循3个原则：

1. 单一职责：一个微应用只负责一个场景（比如「投诉场景」）；
2. 数据隔离：微应用的Prompt配置、用户上下文不影响其他微应用；
3. 可扩展：能轻松修改Prompt内容，或新增参数（比如「少糖」「加双倍浓缩」）。

具体操作步骤：用React+qiankun实现Prompt微应用

我们以「智能客服系统」为例，实现两个Prompt微应用：接待场景和投诉场景。

步骤1：环境准备

需要安装以下工具：

• Node.js（v16+）：前端开发环境；
• create-react-app：快速创建React应用；
• qiankun（v2+）：阿里开源的微前端框架；
• Express（可选）：搭建中心化Prompt管理API。

步骤2：创建微前端容器应用

容器应用是「微应用的管理者」，负责加载、切换各个Prompt微应用。

1. 用create-react-app创建容器：

   npx create-react-app micro-frontend-container
   cd micro-frontend-container
   

2. 安装qiankun和react-router-dom：

   npm install qiankun react-router-dom
   

3. 修改src/main.js，注册微应用：

   import { registerMicroApps, start } from 'qiankun';
   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import App from './App';
   
   // 注册Prompt微应用
   registerMicroApps([
     {
       name: 'reception-app', // 接待场景微应用名称
       entry: '//localhost:3001', // 微应用的本地运行地址
       container: '#micro-app-container', // 微应用挂载的DOM容器
       activeRule: '/reception', // 激活路由（访问/reception时加载）
       props: {
         cpmUrl: '//localhost:8080/api/prompts' // 传递中心化Prompt管理地址
       }
     },
     {
       name: 'complaint-app', // 投诉场景微应用名称
       entry: '//localhost:3002',
       container: '#micro-app-container',
       activeRule: '/complaint',
       props: {
         cpmUrl: '//localhost:8080/api/prompts'
       }
     }
   ]);
   
   // 启动qiankun
   start();
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(<App />);
   

4. 修改src/App.js，添加导航和容器：

   import { BrowserRouter as Router, Link, Routes, Route } from 'react-router-dom';
   
   function App() {
     return (
       <Router>
         <div className="app">
           <nav>
             <ul>
               <li><Link to="/reception">接待场景</Link></li>
               <li><Link to="/complaint">投诉场景</Link></li>
             </ul>
           </nav>
           {/* 微应用挂载容器 */}
           <div id="micro-app-container" style={{ marginTop: '20px' }}></div>
         </div>
       </Router>
     );
   }
   
   export default App;
   

步骤3：创建Prompt微应用（以接待场景为例）

Prompt微应用是「场景的具体实现」，负责从CPM获取Prompt、调用AI模型。

1. 用create-react-app创建微应用：

   npx create-react-app reception-app
   cd reception-app
   

2. 修改src/public-path.js（适配qiankun的路径）：

   if (window.__POWERED_BY_QIANKUN__) {
     __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
   }
   

3. 修改src/index.js（支持qiankun的生命周期）：

   import './public-path';
   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import App from './App';
   import { BrowserRouter } from 'react-router-dom';
   
   let root = null;
   
   // qiankun的启动生命周期
   export async function bootstrap() {
     console.log('接待微应用：启动中');
   }
   
   // qiankun的挂载生命周期
   export async function mount(props) {
     console.log('接待微应用：挂载到容器', props);
     root = ReactDOM.createRoot(document.getElementById('root'));
     root.render(
       <BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? '/reception' : '/'}>
         <App {...props} />
       </BrowserRouter>
     );
   }
   
   // qiankun的卸载生命周期
   export async function unmount() {
     console.log('接待微应用：从容器卸载');
     root.unmount();
     root = null;
   }
   
   // 独立运行时的逻辑
   if (!window.__POWERED_BY_QIANKUN__) {
     mount({});
   }
   

4. 实现核心组件src/App.js（Prompt配置+AI调用）：

   import React, { useState, useEffect } from 'react';
   import PromptForm from './components/PromptForm';
   import { callAIModel } from './services/aiService';
   
   function App(props) {
     const [prompt, setPrompt] = useState('');
     const [userInput, setUserInput] = useState('');
     const [response, setResponse] = useState('');
   
     // 从中心化Prompt管理获取最新Prompt
     useEffect(() => {
       const fetchPrompt = async () => {
         const res = await fetch(`${props.cpmUrl}/reception`);
         const data = await res.json();
         setPrompt(data.content);
       };
       fetchPrompt();
     }, [props.cpmUrl]);
   
     // 处理用户输入，调用AI模型
     const handleSubmit = async () => {
       if (!userInput) return;
       const fullPrompt = `${prompt}\n用户的问题：${userInput}`;
       const aiRes = await callAIModel(fullPrompt);
       setResponse(aiRes);
     };
   
     return (
       <div style={{ padding: '20px' }}>
         <h2>接待场景Prompt配置</h2>
         <PromptForm 
           currentPrompt={prompt} 
           onSave={(newPrompt) => setPrompt(newPrompt)} 
           cpmUrl={props.cpmUrl} 
         />
         <div style={{ marginTop: '20px' }}>
           <h3>测试交互</h3>
           <input 
             type="text" 
             value={userInput} 
             onChange={(e) => setUserInput(e.target.value)} 
             placeholder="输入用户问题"
             style={{ width: '300px', padding: '8px' }}
           />
           <button onClick={handleSubmit} style={{ marginLeft: '10px' }}>
             发送
           </button>
           {response && (
             <div style={{ marginTop: '10px', padding: '10px', border: '1px solid #eee' }}>
               <b>AI回答：</b>{response}
             </div>
           )}
         </div>
       </div>
     );
   }
   
   export default App;
   

5. 实现src/components/PromptForm.js（Prompt编辑与保存）：

   import React, { useState } from 'react';
   
   function PromptForm({ currentPrompt, onSave, cpmUrl }) {
     const [localPrompt, setLocalPrompt] = useState(currentPrompt);
   
     const handleSave = async () => {
       await fetch(`${cpmUrl}/reception`, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ content: localPrompt })
       });
       onSave(localPrompt);
       alert('Prompt保存成功！');
     };
   
     return (
       <div>
         <textarea 
           value={localPrompt} 
           onChange={(e) => setLocalPrompt(e.target.value)} 
           rows={5} 
           cols={60}
           style={{ padding: '8px', marginBottom: '10px' }}
         />
         <br />
         <button onClick={handleSave} style={{ padding: '8px 16px' }}>
           保存Prompt
         </button>
       </div>
     );
   }
   
   export default PromptForm;
   

6. 实现src/services/aiService.js（调用OpenAI API）：

   export async function callAIModel(prompt) {
     const res = await fetch('https://api.openai.com/v1/chat/completions', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
         'Authorization': `Bearer ${process.env.REACT_APP_OPENAI_KEY}`
       },
       body: JSON.stringify({
         model: 'gpt-3.5-turbo',
         messages: [{ role: 'user', content: prompt }]
       })
     });
     const data = await res.json();
     return data.choices[0].message.content;
   }
   

步骤4：搭建中心化Prompt管理API（CPM）

用Express搭建一个简单的API，负责存储、更新Prompt：

1. 创建cpm-server文件夹，初始化项目：

   mkdir cpm-server && cd cpm-server
   npm init -y
   npm install express cors
   

2. 编写server.js：

   const express = require('express');
   const cors = require('cors');
   const app = express();
   const port = 8080;
   
   app.use(cors());
   app.use(express.json());
   
   // 模拟数据库（实际项目用MySQL/Redis）
   const prompts = [
     { id: 'reception', content: '你好，请问有什么可以帮您？', version: 1 },
     { id: 'complaint', content: '很抱歉给您带来不便，请提供订单号', version: 1 }
   ];
   
   // 获取Prompt
   app.get('/api/prompts/:id', (req, res) => {
     const prompt = prompts.find(p => p.id === req.params.id);
     prompt ? res.json(prompt) : res.status(404).json({ msg: 'Prompt不存在' });
   });
   
   // 更新Prompt
   app.put('/api/prompts/:id', (req, res) => {
     const index = prompts.findIndex(p => p.id === req.params.id);
     if (index === -1) return res.status(404).json({ msg: 'Prompt不存在' });
     prompts[index] = {
       ...prompts[index],
       content: req.body.content,
       version: prompts[index].version + 1
     };
     res.json(prompts[index]);
   });
   
   app.listen(port, () => {
     console.log(`中心化Prompt管理运行在：http://localhost:${port}`);
   });
   

步骤5：运行测试

1. 启动CPM服务：

   cd cpm-server && node server.js
   

2. 启动接待微应用（端口3001）：

   cd reception-app && PORT=3001 npm start
   

3. 启动投诉微应用（端口3002，复制接待微应用修改即可）：

   cd complaint-app && PORT=3002 npm start
   

4. 启动容器应用（端口3000）：

   cd micro-frontend-container && npm start
   

打开http://localhost:3000，点击「接待场景」或「投诉场景」，就能看到Prompt微应用的效果——修改Prompt并保存，下次加载会自动获取最新版本！

数学模型和公式：用数据衡量Prompt的好坏

Prompt优化不是「拍脑袋」，需要用数据量化效果。以下是3个核心指标和对应的数学模型：

指标1：相关性（Relevance）

定义：AI回答与用户问题的匹配程度。
数学模型：余弦相似度（Cosine Similarity）
假设用户问题的向量是$\vec{Q}$，AI回答的向量是$\vec{A}$，则相关性为：
$$\text{Similarity}(\vec{Q},\vec{A})=\frac{\vec{Q}\cdot \vec{A}}{\Vert \vec{Q}\Vert \times \Vert \vec{A}\Vert }$$
解释：余弦相似度的范围是[-1,1]，越接近1说明回答越相关。比如用户问「怎么退款」，AI回答「请提供订单号」，相似度会很高；如果AI回答「今天天气不错」，相似度接近0。

指标2：一致性（Consistency）

定义：相同问题多次调用AI模型的回答差异。
数学模型：方差（Variance）
假设多次回答的向量是$\overrightarrow{A_1},\overrightarrow{A_2},...,\overrightarrow{A_n}$，均值是$\vec{\mu }$，则方差为：
$$\text{Variance}=\frac{1}{n}\sum _{i=1}^n(\overrightarrow{A_i}-\vec{\mu }{)}^2$$
解释：方差越小，一致性越高。比如「投诉场景」的Prompt，多次调用AI模型都返回「请提供订单号」，方差接近0；如果有时返回「请描述问题」，有时返回「联系客服」，方差会很大。

指标3：效率（Efficiency）

定义：Prompt的长度与回答质量的平衡（短Prompt更省Token）。
数学模型：归一化长度得分
$$\text{Efficiency Score}=\frac{\text{Relevance Score}}{\text{Prompt Length}}\times 100$$
解释：比如两个Prompt的相关性都是0.9，Prompt1长度是50字符，Prompt2长度是100字符，则Prompt1的效率得分更高（1.8 vs 0.9）。

实际应用场景：哪些AI应用适合这种架构？

1. 智能客服系统

• 拆分场景：接待、投诉、产品咨询、售后；
• 优势：修改「投诉场景」的Prompt时，不影响「接待场景」，迭代更安全。

2. AI写作平台

• 拆分场景：朋友圈文案、产品说明书、演讲稿、小红书笔记；
• 优势：新增「短视频脚本」场景时，只需要加一个微应用，不用修改核心代码。

3. 数据分析助手

• 拆分场景：数据查询、可视化、报告生成、异常预警；
• 优势：每个场景的Prompt可以独立优化（比如「报告生成」需要更专业的术语）。

4. 教育AI助手

• 拆分场景：小学语文作文、初中数学解题、高中英语翻译；
• 优势：不同学科的Prompt由不同团队维护，分工更清晰。

工具和资源推荐

微前端框架

• qiankun：阿里开源，国内最流行，文档完善；
• Single-SPA：微前端的「鼻祖」，支持多种框架；
• Module Federation：Webpack5内置，适合跨应用代码共享。

Prompt管理工具

• LangChain：支持Prompt模板、链式调用，适合复杂场景；
• PromptLayer：追踪Prompt的调用历史，支持版本回滚；
• LlamaIndex：连接Prompt与外部数据（比如知识库）。

AI模型

• OpenAI GPT-4：通用能力强，适合大多数场景；
• Anthropic Claude：长文本处理优秀，适合文档生成；
• Google Gemini：多模态支持（文本+图像+语音），适合创意场景。

未来发展趋势与挑战

趋势1：Prompt微应用的「应用商店」

未来可能出现「Prompt微应用商店」——第三方开发者开发「小红书文案Prompt微应用」「投诉场景Prompt微应用」，企业直接接入，像安装手机APP一样简单。

趋势2：AI原生的微前端框架

现在的微前端框架是为「传统前端」设计的，未来会出现「AI原生」的框架——比如自动根据Prompt的场景拆分微应用，或自动优化微应用的性能。

趋势3：Prompt的自动优化

结合机器学习，微前端框架能自动分析Prompt的效果（比如相关性、一致性），并建议优化方向——比如「你的投诉Prompt一致性得分低，建议添加「请提供订单号」的强制要求」。

挑战1：微应用之间的通信

比如「接待场景」的微应用需要把用户的「订单号」传给「投诉场景」的微应用，如何安全、高效地共享上下文？

挑战2：Prompt的版本管理

比如「投诉场景」的Prompt从V1更新到V2后，发现效果不好，如何快速回滚到V1？需要CPM支持「版本快照」和「一键回滚」。

挑战3：性能优化

微应用的加载速度会影响用户体验——比如打开「投诉场景」需要3秒，用户会不耐烦。需要优化微应用的打包（比如Tree Shaking）、缓存（比如Service Worker）。

总结：我们学到了什么？

核心概念回顾

1. 提示工程：给AI写「配方」的过程，决定了AI的输出质量；
2. 微前端：把大应用拆成小模块，让每个模块独立开发、部署；
3. Prompt微应用：每个场景的Prompt变成一个微应用，解决管理混乱的问题；
4. 中心化Prompt管理：存储所有Prompt的「配方库」，支持版本控制和权限管理。

架构价值总结

• 独立迭代：修改一个Prompt微应用，不影响其他场景；
• 灵活扩展：新增场景只需加一个微应用，成本低；
• 易于维护：每个微应用的代码量小，bug更容易定位；
• 团队协作：不同团队负责不同微应用，分工更清晰。

思考题：动动小脑筋

1. 如果你要做一个「AI教育助手」，会拆分成哪些Prompt微应用？（比如小学语文、初中数学、高中英语）
2. 如何解决「接待场景」和「投诉场景」之间的用户上下文共享问题？（比如传递订单号）
3. 你觉得「Prompt微应用商店」会有哪些核心功能？（比如评分、评论、试用）

附录：常见问题与解答

Q1：微前端会不会增加系统的复杂度？

A：初期会，但长期来看会降低复杂度。比如10个场景的Prompt，如果用单体应用，代码量是1000行；用微应用，每个微应用是100行，总代码量还是1000行，但每个模块的逻辑更清晰。

Q2：Prompt微应用能不能独立运行？

A：可以！比如「接待场景」的微应用，既能在容器中运行，也能独立启动（比如用于测试），只需要修改路由的basename。

Q3：中心化Prompt管理需要哪些核心功能？

A：① 增删改查；② 版本控制；③ 权限管理（比如只有管理员能修改Prompt）；④ 审计日志（记录谁改了Prompt，什么时候改的）。

扩展阅读 & 参考资料

1. 《微前端：前端架构的未来》（作者：周俊鹏）：深入讲解微前端的原理和实践；
2. 《提示工程入门》（OpenAI官方指南）：学习Prompt设计的基础；
3. qiankun官方文档：https://qiankun.umijs.org/；
4. LangChain用户手册：https://python.langchain.com/；
5. 《余弦相似度的数学解释》（知乎文章）：理解相关性的计算逻辑。

---

最后：提示工程与微前端的结合，本质是「用模块化思维解决复杂问题」——就像搭积木一样，把大问题拆成小模块，每个模块做好自己的事，最后组合成一个强大的系统。希望这篇文章能让你从「管理Prompt的痛苦」中解脱出来，用「模块化魔法」打造可成长的智能应用！