2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家 

在网页界面中直接编辑 DESIGN.md：从构想到实现

在 MonoSpecs 项目管理系统中，DESIGN.md 承载着项目的架构设计与技术决策。但传统的编辑方式要求用户切换到外部编辑器——这就像读诗时被人打断，灵感消散，心境也荡然无存。本文分享了我们在 HagiCode 项目中的解决方案：在网页界面中直接编辑 DESIGN.md，并支持从在线设计网站导入模板。毕竟，谁不喜欢一气呵成、高效完成任务的感觉呢？

背景

DESIGN.md 是项目设计文档的核心载体，包含架构设计、技术决策和实施指导等关键信息。然而，传统编辑方式要求用户切换至外部编辑器（例如 VS Code），手动定位文件物理路径后才能进行编辑。这一过程本身并不复杂，但重复多次之后，难免令人疲惫。

具体问题体现在以下几个方面：

• 工作流碎片化：用户需要频繁在网页管理界面与本地编辑器之间切换，破坏了工作流的连贯性——就像听音乐时网络突然中断，整个节奏都被打乱。
• 复用困难：设计网站上已发布大量优质的设计模板，却无法直接融入项目编辑流程。明明有好资源却无法使用，实在令人遗憾。
• 体验缺失：缺少“预览-选择-导入”的闭环流程，用户只能手动复制粘贴，增加了出错风险。手动操作越多，犯错的机会自然也越多。
• 协作障碍：设计文档与代码实现的同步维护变得困难重重，阻碍了团队协作效率。团队协作本就不易，何必再添这些障碍？

为解决上述痛点，我们决定在网页界面中实现对 DESIGN.md 的直接编辑能力，并支持从在线设计网站一键导入模板。这并非什么惊天动地的决策，只是希望让开发体验更顺畅一些罢了。

关于 HagiCode

本文所分享的解决方案源自我们在 HagiCode 项目中的实践经验。HagiCode 是一个由人工智能驱动的代码辅助项目。在开发过程中，我们需要频繁维护项目设计文档。为了提升团队协作效率，我们探索并实现了这套在线编辑与模板导入方案。其实并无特别之处——只是遇到了问题，便想办法解决了而已。

技术方案

整体架构

该方案采用同源代理架构，前后端分离，主要由以下几层组成。说到底，这种架构设计的核心理念就是“各司其职”：

1. 前端编辑器层

// 核心组件：DesignMdManagementDrawer
// 位置：repos/web/src/components/project/DesignMdManagementDrawer.tsx
// 功能：处理编辑、保存、版本冲突检测、导入流程

2. 后端服务层