AI时代前端组件库实战课程
AI 时代前端开发实战课:以 ai-chat-ui 组件库为主线,从 Claude Code / 提示词工程一路走到 Agents 系统、RAG 与多 harness 实战,20 章 93 篇讲义。全程配套真实仓库(@toimc/* 五包发布、1705 测试用例),每个数字可点验。Playground 演示站:https://learn-ui.toimc.com/
第1章 课程导学
第2章 AI前端革命
第3章 Claude Code实战
- CLAUDE.md 项目规范
- Skills系统实战
- MCP服务器集成:给AI装上"插件系统
- Subagents与Teams:多代理协作入门
- Hooks自动化:让Claude Code在关键时刻自动执行你的规则
- 配置文件管理:分层配置系统与权限控制
- 综合实战:构建完整的AI辅助开发体系
第4章 提示词工程
第5章 需求分析与项目启动
第6章 AI文档与图表生成
- AI文档生成实战:用Claude Code生成专业需求文档
- AI图表生成实战:从Mermaid到专业可视化
- AI演示文稿实战:从笔记到PPT的智能生成
- dashi PPT skill实战:网页可编辑演示文稿生成
第7章 专业文档生成进阶
- 产品文档中的专业图表:ER图与类图方案选型
- 在Claude Code中生成ER图
- 生成类图
- AI编辑Word文档时如何保留格式
- API 文档方案:OpenAI 规范与 AI 快速生成
- 超长文档的 AI 生成策略:ralph-loop 分段生成
- 给 AI 装上眼睛:本地化 GLM-OCR 模型集成
- OfficeCLI 集成:CLI 助力 PPT 设计
第8章 需求分析提示词与源码分析
第9章 项目初始化与开发工作流
第10章 项目设计与核心组件开发
- 从项目初始化到组件库开发:ai-chat-ui上手实战
- 核心层开发:useChat与流式状态管理
- Vue组件开发:聊天界面五件套
- Markdown渲染:从解析到高亮到公式
- 长任务长会话:AI自动总结dowhat技能
第11章 样式与主题系统
- 主题系统设计方案:令牌结构与页面配置
- 响应式设计与容器查询
- 组件样式隔离
- 升级本地环境及依赖
- AI 工具与平台切换 + agentmemory 跨会话记忆
- 章小结:后编程时代——把经验沉淀成可复用的 AI 资产
第12章 高级组件开发
第13章 组件库测试
第14章 发布管理
- npm 发布准备:从本地代码到可安装的包
- Changeset 自动化发布
- Monorepo 发布策略
- 静态文档站发布:GitHub Pages 与 Actions
- Mock 服务部署:Vercel 与 Cloudflare
第15章 AI服务多模型支持
第16章 AI Agents系统
- 项目架构解读与重构:Mastra 深度集成 server
- 深入设计 Agent:组件库 AI 助手与提示词工程
- 通用Agent架构:配置化注册、多Agent协作与成本控制
- 章小结:Agents 设计架构与扩展
第17章 AI功能扩展
第18章 AI高效工作流实战
第19章 本地与离线环境:AI编码工具实战
- 本地与离线环境:Claude Code、Codex 接入实战
- 企业级内网:私有化选型与部署
- 迭代与更新:内网环境的持续演进
- dsh 本地化部署:npm 私服、推理层与多 Subagent 运维手册
- 消费级推理引擎辨析:NInfer 与 Strata 的量化、精度与配置真相
第20章 课程总结与展望
↑