[{"data":1,"prerenderedAt":510},["ShallowReactive",2],{"content-/ai":3,"related-ai":479},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":5,"title":7,"description":8,"keywords":9,"category":10,"author":11,"date":12,"image":13,"body":14,"_type":473,"_id":474,"_source":475,"_file":476,"_stem":477,"_extension":478},"/ai","",false,"AI 技术架构文档","HTMLPAGE 智能页面生成系统的全景技术架构：从多智能体协同到流式渲染引擎的深度解析。","AI 架构, 多智能体, 流式渲染, 自动化测试, 提示词工程, RAG","AI 技术","HTMLPAGE","2025-11-27","/content-images/ai/ai.jpg",{"type":15,"children":16,"toc":470},"root",[17,26,40,47,308,315,349,355,381,387,414,420,439,443,452,464],{"type":18,"tag":19,"props":20,"children":22},"element","h1",{"id":21},"ai-技术架构概览",[23],{"type":24,"value":25},"text","AI 技术架构概览",{"type":18,"tag":27,"props":28,"children":29},"p",{},[30,32,38],{"type":24,"value":31},"HTMLPAGE 不仅仅是一个简单的\"套壳\"工具，而是一个深度集成的 ",{"type":18,"tag":33,"props":34,"children":35},"strong",{},[36],{"type":24,"value":37},"AI-Native 开发平台",{"type":24,"value":39},"。我们构建了一套完整的工业级 AI 架构，涵盖了从意图理解、多智能体协同、流式代码生成到自动化质量保证的全链路。",{"type":18,"tag":41,"props":42,"children":44},"h2",{"id":43},"️-系统全景图",[45],{"type":24,"value":46},"🏗️ 系统全景图",{"type":18,"tag":48,"props":49,"children":53},"pre",{"className":50,"code":51,"language":52,"meta":5,"style":5},"language-mermaid shiki shiki-themes github-dark github-dark","graph TD\n    User[用户输入] --> Gateway[API 网关]\n    Gateway --> Context{上下文引擎}\n    \n    subgraph \"🧠 认知核心 (Cognitive Core)\"\n        Context -->|检索| VectorDB[(向量数据库)]\n        Context -->|意图| Planner[规划智能体]\n        Planner -->|任务分发| Coder[代码智能体]\n        Planner -->|视觉指导| Designer[设计智能体]\n        Planner -->|内容填充| Writer[文案智能体]\n    end\n    \n    subgraph \"⚡ 执行引擎 (Execution Engine)\"\n        Coder -->|AST 生成| CodeGen[代码生成器]\n        Designer -->|Token 注入| StyleEngine[样式引擎]\n        Writer -->|SEO 优化| ContentEngine[内容引擎]\n    end\n    \n    subgraph \"🛡️ 质量卫士 (Quality Guard)\"\n        CodeGen --> Linter[静态分析]\n        StyleEngine --> VisualTest[视觉回归]\n        Linter -->|反馈| Reviewer[审查智能体]\n        VisualTest -->|反馈| Reviewer\n        Reviewer -->|修正指令| Planner\n    end\n    \n    Reviewer -->|通过| Stream[流式渲染服务]\n    Stream -->|SSE| Client[前端编辑器]\n","mermaid",[54],{"type":18,"tag":55,"props":56,"children":57},"code",{"__ignoreMap":5},[58,70,79,88,97,106,115,124,133,142,151,160,168,177,186,195,204,212,220,229,238,247,256,265,274,282,290,299],{"type":18,"tag":59,"props":60,"children":63},"span",{"class":61,"line":62},"line",1,[64],{"type":18,"tag":59,"props":65,"children":67},{"style":66},"--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8",[68],{"type":24,"value":69},"graph TD\n",{"type":18,"tag":59,"props":71,"children":73},{"class":61,"line":72},2,[74],{"type":18,"tag":59,"props":75,"children":76},{"style":66},[77],{"type":24,"value":78},"    User[用户输入] --> Gateway[API 网关]\n",{"type":18,"tag":59,"props":80,"children":82},{"class":61,"line":81},3,[83],{"type":18,"tag":59,"props":84,"children":85},{"style":66},[86],{"type":24,"value":87},"    Gateway --> Context{上下文引擎}\n",{"type":18,"tag":59,"props":89,"children":91},{"class":61,"line":90},4,[92],{"type":18,"tag":59,"props":93,"children":94},{"style":66},[95],{"type":24,"value":96},"    \n",{"type":18,"tag":59,"props":98,"children":100},{"class":61,"line":99},5,[101],{"type":18,"tag":59,"props":102,"children":103},{"style":66},[104],{"type":24,"value":105},"    subgraph \"🧠 认知核心 (Cognitive Core)\"\n",{"type":18,"tag":59,"props":107,"children":109},{"class":61,"line":108},6,[110],{"type":18,"tag":59,"props":111,"children":112},{"style":66},[113],{"type":24,"value":114},"        Context -->|检索| VectorDB[(向量数据库)]\n",{"type":18,"tag":59,"props":116,"children":118},{"class":61,"line":117},7,[119],{"type":18,"tag":59,"props":120,"children":121},{"style":66},[122],{"type":24,"value":123},"        Context -->|意图| Planner[规划智能体]\n",{"type":18,"tag":59,"props":125,"children":127},{"class":61,"line":126},8,[128],{"type":18,"tag":59,"props":129,"children":130},{"style":66},[131],{"type":24,"value":132},"        Planner -->|任务分发| Coder[代码智能体]\n",{"type":18,"tag":59,"props":134,"children":136},{"class":61,"line":135},9,[137],{"type":18,"tag":59,"props":138,"children":139},{"style":66},[140],{"type":24,"value":141},"        Planner -->|视觉指导| Designer[设计智能体]\n",{"type":18,"tag":59,"props":143,"children":145},{"class":61,"line":144},10,[146],{"type":18,"tag":59,"props":147,"children":148},{"style":66},[149],{"type":24,"value":150},"        Planner -->|内容填充| Writer[文案智能体]\n",{"type":18,"tag":59,"props":152,"children":154},{"class":61,"line":153},11,[155],{"type":18,"tag":59,"props":156,"children":157},{"style":66},[158],{"type":24,"value":159},"    end\n",{"type":18,"tag":59,"props":161,"children":163},{"class":61,"line":162},12,[164],{"type":18,"tag":59,"props":165,"children":166},{"style":66},[167],{"type":24,"value":96},{"type":18,"tag":59,"props":169,"children":171},{"class":61,"line":170},13,[172],{"type":18,"tag":59,"props":173,"children":174},{"style":66},[175],{"type":24,"value":176},"    subgraph \"⚡ 执行引擎 (Execution Engine)\"\n",{"type":18,"tag":59,"props":178,"children":180},{"class":61,"line":179},14,[181],{"type":18,"tag":59,"props":182,"children":183},{"style":66},[184],{"type":24,"value":185},"        Coder -->|AST 生成| CodeGen[代码生成器]\n",{"type":18,"tag":59,"props":187,"children":189},{"class":61,"line":188},15,[190],{"type":18,"tag":59,"props":191,"children":192},{"style":66},[193],{"type":24,"value":194},"        Designer -->|Token 注入| StyleEngine[样式引擎]\n",{"type":18,"tag":59,"props":196,"children":198},{"class":61,"line":197},16,[199],{"type":18,"tag":59,"props":200,"children":201},{"style":66},[202],{"type":24,"value":203},"        Writer -->|SEO 优化| ContentEngine[内容引擎]\n",{"type":18,"tag":59,"props":205,"children":207},{"class":61,"line":206},17,[208],{"type":18,"tag":59,"props":209,"children":210},{"style":66},[211],{"type":24,"value":159},{"type":18,"tag":59,"props":213,"children":215},{"class":61,"line":214},18,[216],{"type":18,"tag":59,"props":217,"children":218},{"style":66},[219],{"type":24,"value":96},{"type":18,"tag":59,"props":221,"children":223},{"class":61,"line":222},19,[224],{"type":18,"tag":59,"props":225,"children":226},{"style":66},[227],{"type":24,"value":228},"    subgraph \"🛡️ 质量卫士 (Quality Guard)\"\n",{"type":18,"tag":59,"props":230,"children":232},{"class":61,"line":231},20,[233],{"type":18,"tag":59,"props":234,"children":235},{"style":66},[236],{"type":24,"value":237},"        CodeGen --> Linter[静态分析]\n",{"type":18,"tag":59,"props":239,"children":241},{"class":61,"line":240},21,[242],{"type":18,"tag":59,"props":243,"children":244},{"style":66},[245],{"type":24,"value":246},"        StyleEngine --> VisualTest[视觉回归]\n",{"type":18,"tag":59,"props":248,"children":250},{"class":61,"line":249},22,[251],{"type":18,"tag":59,"props":252,"children":253},{"style":66},[254],{"type":24,"value":255},"        Linter -->|反馈| Reviewer[审查智能体]\n",{"type":18,"tag":59,"props":257,"children":259},{"class":61,"line":258},23,[260],{"type":18,"tag":59,"props":261,"children":262},{"style":66},[263],{"type":24,"value":264},"        VisualTest -->|反馈| Reviewer\n",{"type":18,"tag":59,"props":266,"children":268},{"class":61,"line":267},24,[269],{"type":18,"tag":59,"props":270,"children":271},{"style":66},[272],{"type":24,"value":273},"        Reviewer -->|修正指令| Planner\n",{"type":18,"tag":59,"props":275,"children":277},{"class":61,"line":276},25,[278],{"type":18,"tag":59,"props":279,"children":280},{"style":66},[281],{"type":24,"value":159},{"type":18,"tag":59,"props":283,"children":285},{"class":61,"line":284},26,[286],{"type":18,"tag":59,"props":287,"children":288},{"style":66},[289],{"type":24,"value":96},{"type":18,"tag":59,"props":291,"children":293},{"class":61,"line":292},27,[294],{"type":18,"tag":59,"props":295,"children":296},{"style":66},[297],{"type":24,"value":298},"    Reviewer -->|通过| Stream[流式渲染服务]\n",{"type":18,"tag":59,"props":300,"children":302},{"class":61,"line":301},28,[303],{"type":18,"tag":59,"props":304,"children":305},{"style":66},[306],{"type":24,"value":307},"    Stream -->|SSE| Client[前端编辑器]\n",{"type":18,"tag":309,"props":310,"children":314},"section-title",{"description":311,"icon":312,"title":313},"系统的骨架与神经中枢","🏗️","核心架构",[],{"type":18,"tag":316,"props":317,"children":319},"article-grid",{":columns":318},"2",[320,328,335,342],{"type":18,"tag":321,"props":322,"children":327},"article-card",{"category":313,"description":323,"icon":324,"title":325,"to":326},"基于 ReAct 模式的智能体协作网络。Manager、Coder、Designer 三大核心智能体如何通过标准化协议进行任务分发与状态同步。","🤖","多智能体协同","/ai/multi-agent-architecture",[],{"type":18,"tag":321,"props":329,"children":334},{"category":313,"description":330,"icon":331,"title":332,"to":333},"超越简单的文本流。深度解析 SSE 协议、增量 AST 解析与虚拟 DOM 补丁技术，实现'所见即所得'的毫秒级渲染。","⚡","流式渲染引擎","/ai/streaming-generation",[],{"type":18,"tag":321,"props":336,"children":341},{"category":313,"description":337,"icon":338,"title":339,"to":340},"基于向量数据库 (RAG) 与知识图谱的混合记忆系统。如何实现跨会话记忆、实体链接与意图准确识别。","🧠","上下文感知系统","/ai/context-awareness",[],{"type":18,"tag":321,"props":343,"children":348},{"category":313,"description":344,"icon":345,"title":346,"to":347},"AI 生成代码的'安检门'。集成 AST 静态分析、视觉回归测试与无障碍审计的自动化流水线。","🛡️","自动化质量保证","/ai/quality-assurance",[],{"type":18,"tag":309,"props":350,"children":354},{"description":351,"icon":352,"title":353},"让系统越用越聪明的进化机制","📈","优化与训练",[],{"type":18,"tag":316,"props":356,"children":357},{":columns":318},[358,366,373],{"type":18,"tag":321,"props":359,"children":365},{"category":360,"description":361,"icon":362,"title":363,"to":364},"模型优化","告别'玄学'调参。基于 DSPy 的梯度离散优化架构，实现 Prompt 的自动变异、评估与进化。","🧬","自动化提示词优化","/ai/prompt-optimization",[],{"type":18,"tag":321,"props":367,"children":372},{"category":360,"description":368,"icon":369,"title":370,"to":371},"垂直领域的知识注入。LoRA 高效微调、RLHF 人类反馈强化学习在前端代码生成领域的应用实践。","🎓","模型微调与训练","/ai/training-optimization",[],{"type":18,"tag":321,"props":374,"children":380},{"category":375,"description":376,"icon":377,"title":378,"to":379},"交互优化","基于有限状态机 (FSM) 的多轮对话管理。如何处理用户的模糊指令、冲突修正与版本回滚。","🔄","迭代交互引擎","/ai/iterative-optimization",[],{"type":18,"tag":309,"props":382,"children":386},{"description":383,"icon":384,"title":385},"美学与语义的深度融合","🎨","设计与内容",[],{"type":18,"tag":316,"props":388,"children":389},{":columns":318},[390,398,406],{"type":18,"tag":321,"props":391,"children":397},{"category":392,"description":393,"icon":394,"title":395,"to":396},"设计系统","AI 驱动的 Design Token 引擎。如何从语义中推导配色、排版与间距，构建一致且美观的 UI 系统。","✨","原子化设计系统","/ai/design-system",[],{"type":18,"tag":321,"props":399,"children":405},{"category":400,"description":401,"icon":402,"title":403,"to":404},"内容工程","基于神经风格迁移的文案生成。动态内容优化 (DCO) 与 SEO 语义增强技术的深度应用。","✍️","智能内容调优","/ai/content-tuning",[],{"type":18,"tag":321,"props":407,"children":413},{"category":408,"description":409,"icon":410,"title":411,"to":412},"行业应用","SaaS、FinTech、电商等垂直领域的页面生成规范。合规性检查与转化率优化 (CRO) 策略。","💼","行业解决方案","/ai/professional-pages",[],{"type":18,"tag":309,"props":415,"children":419},{"description":416,"icon":417,"title":418},"人机交互的精确协议","📝","提示词工程",[],{"type":18,"tag":316,"props":421,"children":422},{":columns":318},[423,431],{"type":18,"tag":321,"props":424,"children":430},{"category":425,"description":426,"icon":427,"title":428,"to":429},"提示词","基于 CoT (思维链) 的提示词组装工厂。结构化、参数化的 Prompt 设计模式。","🧩","模块化提示词","/ai/prompt-elements",[],{"type":18,"tag":321,"props":432,"children":438},{"category":433,"description":434,"icon":435,"title":436,"to":437},"案例分析","从单页应用到复杂后台系统的生成实例解析。包含完整的 Prompt 结构与生成结果分析。","📚","生成案例库","/ai/generation-examples",[],{"type":18,"tag":440,"props":441,"children":442},"hr",{},[],{"type":18,"tag":27,"props":444,"children":445},{},[446],{"type":18,"tag":447,"props":448,"children":449},"em",{},[450],{"type":24,"value":451},"本文档持续更新，记录 HTMLPAGE 在 AI 辅助编程领域的探索与实践。",{"type":18,"tag":27,"props":453,"children":454},{},[455,457,462],{"type":24,"value":456},"💡 ",{"type":18,"tag":33,"props":458,"children":459},{},[460],{"type":24,"value":461},"提示",{"type":24,"value":463},": AI 是你的设计助手，通过清晰的需求描述和迭代优化，可以创建出色的专业页面。",{"type":18,"tag":465,"props":466,"children":467},"style",{},[468],{"type":24,"value":469},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":5,"searchDepth":81,"depth":81,"links":471},[472],{"id":43,"depth":72,"text":46},"markdown","content:ai:index.md","content","ai/index.md","ai/index","md",[480,492,501],{"_path":481,"_dir":482,"_draft":6,"_partial":6,"_locale":5,"title":483,"description":484,"keywords":485,"schemaType":486,"author":11,"date":487,"image":488,"_type":473,"_id":489,"_source":475,"_file":490,"_stem":491,"_extension":478},"/ai/architecture-overview","ai","AI架构概述 - HTMLPAGE智能网页生成系统","HTMLPAGE AI系统架构深度解析，了解多智能体协作、实时流式生成、模块化组装等核心技术，探索AI如何革新网页设计流程。","AI网页生成, 多智能体系统, 实时流式AI, 智能网页设计, AI架构, 机器学习","TechArticle","2025-11-24","/content-images/ai/architecture-overview.jpg","content:ai:architecture-overview.md","ai/architecture-overview.md","ai/architecture-overview",{"_path":493,"_dir":482,"_draft":6,"_partial":6,"_locale":5,"title":494,"description":495,"keywords":496,"author":11,"date":12,"category":497,"image":13,"_type":473,"_id":498,"_source":475,"_file":499,"_stem":500,"_extension":478},"/ai/batch-creation","批量页面创建","模板 + 提示词模式组合进行多页面高效率生成","批量页面创建, 批量生成, 提示词模板, HTMLPAGE","应用场景","content:ai:batch-creation.md","ai/batch-creation.md","ai/batch-creation",{"_path":502,"_dir":482,"_draft":6,"_partial":6,"_locale":5,"title":503,"description":504,"keywords":505,"author":11,"date":12,"category":506,"image":13,"_type":473,"_id":507,"_source":475,"_file":508,"_stem":509,"_extension":478},"/ai/case-studies","AI 案例研究","HTMLPAGE AI 在不同行业和场景中的成功应用案例","AI 案例研究, 成功案例, 页面生成, HTMLPAGE","案例研究","content:ai:case-studies.md","ai/case-studies.md","ai/case-studies",1774945259950]