以一个真实项目「DevShare 开发者社区」为例完整演示如何用 Hermes 105 个技能从 0 到 1 交付一个全栈项目。适用环境Hermes CLIWindows 终端/ 微信目录项目背景阶段 0环境准备5 分钟阶段 1需求分析与产品设计30 分钟阶段 2UI 设计与视觉规范45 分钟阶段 3技术方案与实现计划30 分钟阶段 4分阶段编码实现3 小时阶段 5代码审查与质量保障30 分钟阶段 6测试与 Bug 修复45 分钟阶段 7性能优化30 分钟阶段 8发布与 CI/CD20 分钟阶段 9文档沉淀与知识管理20 分钟总结一句话完成项目项目背景DevShare一个面向开发者的技术文章分享社区用户可以发布 Markdown 文章、点赞评论、关注作者。前端React 18 TypeScript Ant Design 5后端Node.js Express PostgreSQL部署GitHub Vercel前端 Railway后端阶段 0环境准备5 分钟第一步确认环境就绪你检查项目环境是否就绪Hermes 会自动检查 Node.js / npm 版本检查 Git 配置检查 GitHub 认证状态加载github-auth技能确认 PostgreSQL 可用第二步创建项目仓库你在 GitHub 创建 devshare 仓库初始化 React TypeScript 项目Hermes 加载github-repo-management技能# Hermes 自动执行gh repo create devshare--public--clonecddevsharenpmcreate vitelatest frontend ----templatereact-ts阶段 1需求分析与产品设计30 分钟1.1 头脑风暴 创意验证你帮我 brainstorm 一下 DevShare 的核心功能点参考 V2EX 和 Dev.toHermes 加载ideation技能输出结构化创意列表核心功能候选 1. Markdown 文章发布实时预览 2. 标签系统 热门标签云 3. 点赞 收藏 评论支持 Markdown 4. 用户关注 个性化 Feed 5. 文章搜索全文检索 6. 阅读统计 排行榜1.2 竞品调研你调研一下目前开发者社区的市场情况Hermes 调用web_search内置工具 polymarket技能如需预测数据输出竞品分析。1.3 快速原型验证你spike 一下 React Markdown 编辑器的可行性看看 react-markdown 和 codemirror 能不能配合Hermes 加载spike技能创建一次性原型// 验证 Markdown 编辑预览方案可行 // 结论react-markdown codemirror/view 组合可用 // 注意CodeMirror 6 需要额外安装 codemirror/lang-markdown1.4 系统架构设计你画 DevShare 的系统架构图前端 React 后端 Express PostgreSQLHermes 加载architecture-diagram技能生成暗色主题 SVG 架构图┌─────────────┐ ┌──────────────┐ ┌────────────┐ │ React18│────▶│ Express API │────▶│ PostgreSQL │ │(Vercel)│ │(Railway)│ │ │ └─────────────┘ └──────────────┘ └────────────┘ │ │ ▼ ▼ ┌─────────────┐ ┌──────────────┐ │ Cloudinary │ │ Redis │ │(图片存储)│ │(缓存)│ └─────────────┘ └──────────────┘1.5 数据模型设计你按 M1-M9 模板写 DevShare 的数据模型设计文档Hermes 加载design-doc-writinguatu-documentation技能## M1: User 模型 | 字段 | 类型 | 说明 | |------|------|------| | id | UUID | 主键 | | username | VARCHAR(50) | 唯一用户名 | | email | VARCHAR(255) | 唯一邮箱 | | password_hash | VARCHAR(255) | bcrypt 哈希 | | avatar_url | VARCHAR(500) | 头像 URL | | bio | TEXT | 个人简介 | | created_at | TIMESTAMP | 注册时间 | ## M2: Article 模型 | 字段 | 类型 | 说明 | |------|------|------| | id | UUID | 主键 | | author_id | UUID → User.id | 作者 | | title | VARCHAR(200) | 标题 | | content | TEXT | Markdown 内容 | | tags | VARCHAR(50)[] | 标签数组 | | view_count | INTEGER | 阅读数 | | created_at | TIMESTAMP | 发布时间 |阶段 2UI 设计与视觉规范45 分钟2.1 风格探索你sketch 三种 DevShare 首页风格GitHub 暗色风、Linear 极简风、Dev.to 暖色风Hermes 加载sketch技能生成 3 个 HTML 设计稿方案风格特点AGitHub 暗色深色背景 绿色强调技术感强BLinear 极简大量留白 细线条现代感CDev.to 暖色米色背景 蓝紫强调社区感2.2 选定风格深化设计你选方案 B参考 Linear 风格做全站设计Hermes 加载popular-web-designs技能内置 Linear 设计系统# Hermes 输出基于 Linear 设计系统的页面设计首页 → 文章列表 侧边栏标签云 热门作者 文章页 → Markdown 渲染 评论区 作者卡片 发布页 → 分栏编辑器左编辑 / 右预览2.3 生成视觉素材你生成 DevShare 的 LOGO像素风蓝紫渐变 你把用户登录流程画成手绘风格流程图Hermes 分别加载pixel-art和excalidraw像素 LOGONES 调色板32×32蓝紫渐变流程图手绘风格 Excalidraw JSON注册→验证→登录→JWT2.4 输出设计规范文件你生成 DESIGN.md定义设计 TokenHermes 加载design-md技能# DevShare DESIGN.md ## Colors --primary: #5E6AD2 (蓝紫) --bg: #FAFAFA --text: #1A1A1A --border: #E5E5E5 ## Typography --font-sans: Inter, sans-serif --font-mono: JetBrains Mono, monospace --text-base: 16px --leading: 1.6 ## Spacing --space-1: 4px / --space-2: 8px / --space-4: 16px --space-8: 32px / --space-16: 64px阶段 3技术方案与实现计划30 分钟3.1 生成实现计划你/plan DevShare 全栈项目按功能模块分阶段实现先做后端 API 再做前端页面Hermes 加载planwriting-plans技能输出详细计划文件# DevShare Implementation Plan 保存位置.hermes/plans/2026-07-14_devshare.md ## Phase 1: 后端基础Task 1-8 ### Task 1: 初始化 Express TypeScript 项目 ### Task 2: 配置 PostgreSQL 连接Prisma ORM ### Task 3: 实现 User 模型 注册 API ### Task 4: 实现登录 API JWT 签发 ### Task 5: 实现认证中间件 ### Task 6: 实现 Article 模型 CRUD API ### Task 7: 实现 Comment 模型 API ### Task 8: 实现 Like/Follow API ## Phase 2: 前端页面Task 9-16 ### Task 9: 搭建路由 布局框架 ### Task 10: 实现注册/登录页面 ### Task 11: 实现首页文章列表 ### Task 12: 实现文章详情页Markdown 渲染 ### Task 13: 实现文章发布页CodeMirror 编辑器 ### Task 14: 实现评论组件 ### Task 15: 实现个人主页 ### Task 16: 实现标签搜索 ## Phase 3: 基础设施Task 17-20 ### Task 17: 错误处理 日志 ### Task 18: API 限流 输入验证 ### Task 19: 图片上传Cloudinary ### Task 20: 部署配置Vercel Railway3.2 代码库分析你先看看项目结构统计一下代码情况Hermes 加载codebase-inspection技能输出代码统计。阶段 4分阶段编码实现3 小时4.1 Phase 1后端 APITDD 驱动你按计划执行 Phase1的 Task1-8严格 TDD每个 Task 经过两阶段审查再提交Hermes 加载subagent-driven-developmenttest-driven-development。执行过程以 Task 3 为例━━━ Task3: 实现 User 模型 注册 API ━━━[派子代理实现]子代理1. RED: 写测试 tests/api/auth.test.ts - test(POST /api/auth/register 应创建新用户)- test(POST /api/auth/register 应拒绝重复邮箱)- test(POST /api/auth/register 应验证邮箱格式)2. 运行pnpmtest→ FAIL路由不存在✅3. GREEN: 写最小实现 - src/routes/auth.ts - src/models/User.tsPrisma schema4. 运行pnpmtest→ PASS3/3✅5.gitcommit-mfeat: add user registration API[派规格审查子代理]审查员 ✅ 所有3个测试覆盖了计划要求的场景 ✅ 使用了 bcrypt 哈希密码 ✅ Prisma User 模型字段与设计文档一致 结论PASS[派质量审查子代理]审查员 ✅ 命名清晰 ⚠️ Important: 缺少输入长度限制username 应限制50字符 ⚠️ Minor: 提取 saltRounds 为常量 子代理修复后重新审查 ✅ APPROVED[标记 Task3完成]所有 8 个 Task 按此流程逐个执行每个 Task 耗时 5-15 分钟。4.2 面对复杂任务并行派发你Task5JWT 中间件、Task7Comment API、Task8Like API互不依赖三个一起做Hermes 使用delegate_task批量模式3 个子代理并行[并行执行]子代理A: Task5→ JWT 认证中间件 ✅ 子代理B: Task7→ Comment API ✅ 子代理C: Task8→ Like/Follow API ✅[串行审查]审查 A → 审查 B → 审查 C4.3 Phase 2前端页面实现你继续执行 Phase2的 Task9-16同样的流程每个页面组件都走 TDD 两阶段审查。4.4 遇到 Bug系统性调试你登录后 token 没存到 localStorage系统性排查Hermes 加载systematic-debugging技能Phase1: 根因调查1. 读错误Chrome 控制台无报错token 默默丢失2. 构建复现循环curl POST /api/auth/login →200OK 有 token 前端 fetch → Network 有 token → localStorage 空3. 检查最近改动git diff发现 auth.ts 中 setToken 用了异步写法4. 溯源数据流 login()→ setToken(token)→ localStorage.setItem()→ 此处 token 为 undefined 原因API 响应中字段名是 access_token但代码读的是 token 根因字段名不匹配 Phase2: 模式分析 后端返回{access_token:xxx}前端读取data.token → undefined Phase3: 修正 将 data.token 改为 data.access_token → 问题解决 Phase4: 回归测试 写测试 test(登录后 token 应存入 localStorage)→ PASS4.5 需要外部 AI 帮忙时你这个 Markdown 渲染性能问题比较复杂让 Claude Code 来看看Hermes 加载claude-code技能把任务委派给 Claude Code CLI。你让 Codex 做 Article 列表的虚拟滚动优化Hermes 加载codex技能。阶段 5代码审查与质量保障30 分钟5.1 提交前全量审查你review 一下准备提交 Phase2Hermes 加载requesting-code-review技能执行完整的 8 步审查流程Step1: 获取diff→gitdiff--cached1,247 行改动 Step2: 静态安全扫描 ✅ 无硬编码密钥 ✅ 无 SQL 注入 ✅ 无 eval()使用 ⚠️ 发现src/utils/api.ts 中硬编码了 http://localhost:3000 的 API 地址 Step3: 基线测试pnpmtest→38passed,0failed新增12个测试 Step4: 自查清单 ✅ 输入验证完整 ✅ 错误处理覆盖 ❌ src/pages/Editor.tsx 残留 console.log Step5: 独立审查子代理{passed:true,security_concerns:[],logic_errors:[],suggestions:[提取 API_BASE_URL 为环境变量,移除 console.log,ArticleList 组件可考虑 useMemo 优化]}Step6: 评估 → 无阻塞性问题2 个建议修复 Step7: 自动修复 修复1: API_BASE_URL → process.env.VITE_API_URL ✅ 修复2: 移除 console.log ✅ Step8: 提交gitcommit-m[verified] feat: complete Phase 2 frontend pages5.2 代码简化你简化最近的代码改动Hermes 加载simplify-code技能三路并行审查[审查员1代码复用]发现src/utils/formatDate.ts 中的日期格式化逻辑与 src/utils/timeAgo.ts 重复 建议统一使用 formatDate移除 timeAgo.ts 中的重复代码 风险SAFE → 自动修复 ✅[审查员2代码质量]发现 - ArticleCard.tsx 中 // 渲染文章卡片 注释是废话 → SAFE 自动删除 ✅ -3个组件中重复的 useAuth()调用模式 → CAREFUL 提取AuthGuard✅ - types.ts 中存在 as any 类型断言 → CAREFUL 替换为具体类型 ✅[审查员3效率]发现首页加载时连续请求 /api/articles /api/tags /api/users/top 这3个请求互不依赖 → 改为 Promise.all 并行请求 风险CAREFUL → 修改后测试通过 ✅ 汇总7 个修复0 个回归阶段 6测试与 Bug 修复45 分钟6.1 补充集成测试你用 TDD 写端到端测试用户注册 → 登录 → 发布文章 → 查看文章6.2 遇到线上 Bug你用户反馈发布文章后看不到对这个问题做系统性排查Phase1: 根因调查curlPOST /api/articles →201Created数据库有记录 前端 GET /api/articles →200OK返回空数组 问题孤立到后端文章查询 API 返回空 读代码articleController.getAll()→ Prisma article.findMany()检查 Prisma 查询where publishedtrue但新建文章 published 默认 false 根因默认未发布 Phase2: 模式分析 设计文档中写的是创建后自动发布代码与设计文档不一致 Phase3: 修复 Prisma schema: published Boolean default(true)运行测试 → 已有测试通过 新增回归测试通过 Phase4: 审计 加载 docs-audit 技能检查是否还有其他设计与代码不一致的地方阶段 7性能优化30 分钟你分析 DevShare 前端性能找出瓶颈并优化Hermes 进行多维度分析## 性能审查报告 ### 发现的问题 | 问题 | 位置 | 影响 | |------|------|------| | 首页未分页 | ArticleList.tsx | 一次加载 200 文章 | | 大 Markdown 文件同步渲染 | ArticleDetail.tsx | 阻塞主线程 | | 标签云未使用虚拟列表 | TagCloud.tsx | 100 标签时卡顿 | | 图片未懒加载 | 全局 | LCP 过高 | ### 修复方案 1. 首页加分页cursor-based pagination每页 20 条 2. Markdown 渲染用 react-markdown 代码分割 3. 标签云换 react-window 虚拟列表 4. 图片全部加 loadinglazy ### 修复后指标 | 指标 | 修复前 | 修复后 | |------|--------|--------| | FCP | 2.1s | 0.8s | | LCP | 4.5s | 1.2s | | TBT | 380ms | 45ms |阶段 8发布与 CI/CD20 分钟8.1 配置 CI你给项目加 GitHub Actions CI跑 lint test buildHermes 创建.github/workflows/ci.yml。8.2 创建 PR 并监控你创建 PR监控 CI 直到通过然后合并Hermes 加载github-pr-workflow# Hermes 自动执行gitcheckout-bfeat/devshare-v1gitpush-uorigin HEAD ghprcreate\--titlefeat: DevShare v1.0 - 开发者社区\--body## 功能 - 用户注册/登录JWT - 文章发布Markdown CodeMirror - 评论、点赞、关注 - 标签系统 全文搜索 ## 测试 - 后端 26 个测试全部通过 - 前端 18 个测试全部通过# 监控 CIghprchecks--watch# CI 全部通过 →ghprmerge--squash--delete-branch8.3 自动部署你设置 Vercel 和 Railway 的自动部署PR 合并后自动触发Hermes 加载webhook-subscriptions技能配置 webhook 自动化。阶段 9文档沉淀与知识管理20 分钟9.1 写技术文章你把 DevShare 的开发过程写成一篇 CSDN 技术文章标题「从0到1用 React Express 构建开发者社区」Hermes 加载csdn-writing技能按规范输出# 从 0 到 1 用 React Express 构建开发者社区 ## 一、项目概述 ... ## 二、技术选型 | 层级 | 技术 | 理由 | |------|------|------| | 前端 | React 18 TypeScript | 类型安全 | | UI 库 | Ant Design 5 | 组件丰富 | | 后端 | Express Prisma | 简单可靠 | ... ## 三、核心实现 ### 3.1 Markdown 编辑器 tsx // 完整代码示例...3.2 JWT 认证流程// 完整代码示例...四、部署指南…五、踩坑记录React 19 StrictMode 下 useEffect 执行两次导致 token 重复设置解决使用 ref 标记是否已初始化Prisma 的 where 条件中 undefined 不等于 “不筛选”解决用 spread 条件构建动态查询### 9.2 生成设计文档你写 DevShare 完整设计文档包含 M1-M9 全部模块Hermes 加载design-doc-writing技能。### 9.3 文档审计你检查文档和代码是否一致Hermes 加载docs-audit技能 markdown## 审计结果✅ M1 User 模型文档与 Prisma schema 一致 ✅ M2 Article 模型一致 ⚠️ M3 Comment文档写有 edited_at 字段但 Prisma 中缺失 ❌ 文档中提到 Favorite 功能代码中未实现9.4 提取可复用组件你把 DevShare 中的通用组件提取出来脱敏后输出为独立项目Hermes 加载extract-reusable-code技能输出MarkdownEditor组件CodeMirror 预览InfiniteScroll组件游标分页useAuthHookJWT 管理apiClient工具请求拦截 自动刷新 token9.5 保存到共享知识库你记住 DevShare 项目的关键设计决策JWT 有效期7天refresh token 存在 httpOnly cookie 你记住Prisma 的 where undefined 不会自动忽略需要用 spread 条件构建Hermes 加载shared-knowledge技能存入知识库后续 Claude Code/Codex/VSCode 都能读取。9.6 生成工作日报你生成本日工作日报Hermes 加载daily-report技能## 2026-07-14 工作日报 ### 今日完成 1. DevShare Phase 2 全部前端页面实现ArticleList/Detail/Editor/Profile 2. 代码审查 简化7 个修复 3. 性能优化FCP 2.1s → 0.8s 4. 创建 PR #42CI 通过已合并 ### 明日计划 1. 配置 Vercel Railway 自动部署 2. 编写 E2E 测试 3. 写 CSDN 技术文章总结一句话完成项目回顾整个流程Hermes 的 105 个技能贯穿始终产品设计 → ideation / spike / architecture-diagram / design-doc-writing UI 设计 → sketch / popular-web-designs / excalidraw / pixel-art / design-md 实现计划 → plan / writing-plans 编码实现 → subagent-driven-development / test-driven-development / claude-code / codex 代码审查 → requesting-code-review / simplify-code 测试调试 → systematic-debugging / node-inspect-debugger 性能优化 → simplify-codeefficiency reviewer 发布部署 → github-pr-workflow / webhook-subscriptions 文档沉淀 → csdn-writing / design-doc-writing / docs-audit / daily-report 知识管理 → shared-knowledge / extract-reusable-code关键心态你不需要记住 105 个技能的名字只需要像和同事说话一样描述你的需求Hermes 自动匹配最优技能组合。常用高频指令速记我想做什么直接说写实现计划「/plan 用户认证功能」严格按计划执行「按计划执行每个任务两阶段审查」提交前审查「review 一下准备提交」简化代码「简化最近的改动」系统性排查 bug「系统排查这个报错」画架构图「画系统架构图」设计 UI「sketch 3 种首页风格」写 CSDN 文章「把这个项目写成 CSDN 教程」创建 PR 合并「创建 PR等 CI 通过自动合并」派 Claude Code 做「让 Claude Code 优化这个算法」这个教程展示的项目 DevShare就是 Hermes 能帮你做到的事情的缩影。从创意到上线一个对话窗口105 个技能全流程 AI 驱动。