DesignPulse

DesignPulse 是一个面向设计师与前端开发者的本地优先设计规范工作台。我把 DESIGN.md 定义为设计系统的单一真源：颜色、字体、间距、圆角、组件语义和实现约束都保存在一份可读、可版本管理的 Markdown 文档中。

产品支持在源码、结构化编辑、阅读与视觉预览之间切换，并从同一份规范导出 Design Tokens、CSS Variables、Tailwind Theme 和完整交付文件。想直接试用的话，可以进入 DesignPulse 在线体验，从新建或导入一份 DESIGN.md 开始。

这是一个个人项目。我独立完成了产品定义、信息架构、交互与视觉设计，以及 Markdown 解析、状态同步、AI 工作流、导出和部署。

#从多份规范到单一真源

传统工作流中，Figma 保存视觉样式，文档保存使用说明，Token 与 CSS 又由开发单独维护。每次调整都要在多个位置同步，很容易出现设计与实现不一致。早期方案曾把重点放在 Token 编辑上，梳理完这条工作流后，我把问题改成了：怎样减少设计系统里的真源数量。

为了把问题说具体，我从设计师、前端和规范维护者的工作流里整理出三个反复出现的场景。

• 设计师：样式已经在 Figma 改完，但不知道文档和开发变量是否同步；
• 前端：同一个颜色在规范、Token 和 CSS 里有多个版本，无法判断哪个才是最新值；
• 维护者：可以接受 AI 帮忙整理规范，但不能接受它静默重写一份影响全站的文档。

• DESIGN.md 同时承载设计原则、Token、组件说明与实现约束；
• 结构化控件、预览和导出都从当前 Markdown 实时派生，而非维护独立副本；
• 无法识别的 Markdown 原文始终保留，避免结构化编辑破坏已有内容。

#同一份文档，四种查看方式

源码视图给用户完整控制权；结构化视图把可识别的 Token 转成颜色、数字和选择控件；阅读视图保留规范文档的上下文；视觉预览则把当前解析结果变成可以直接检查的设计系统页面。四个视图都读取同一份 DESIGN.md，不维护副本。

#让一次修改走完交付链路

例如调整品牌主色时，用户可以在结构化视图中修改 Token，立即回到源码检查原文，在视觉预览里确认层级和对比关系，再从当前文档导出 tokens.json、CSS Variables 与 Tailwind Theme。整个过程只修改一个真源，预览和开发资产都不需要再次手工同步。

• 编辑：修改 DESIGN.md 或结构化控件，始终写回同一份文档；
• 检查：源码、阅读和视觉预览从当前解析结果同步更新；
• 评审：AI 产生的修改先进入 Diff，不直接覆盖原文；
• 交付：校验通过后再导出 Markdown、Token、CSS、Tailwind 与 ZIP。

#AI 只提议，不执行

设计系统是高影响资产，一次错误修改可能影响多个页面和组件。因此 AI Assistant 只会解释、检查、修复或规范化当前规范，并把可能改动原文的结果作为提议返回。用户需要先查看完整 Diff，再决定应用、重试或放弃。

• 请求中：明确告知当前任务与处理状态；
• 生成后：展示新增、删除与修改的文档差异；
• 校验后：提示未识别内容、解析问题和导出可用性；
• 最终写入：只在用户确认后发生，AI 不会静默覆盖 DESIGN.md。

#先保护不能被结构化的内容

真实规范不会永远符合编辑器预设。文档可能包含自定义章节、暂时无法识别的语法、重复 Token 或不合法的值。DesignPulse 不会为了让界面看起来整齐而吞掉这些内容：未知原文继续保留，解析问题单独提示，结构化控件只修改自己能够确认的部分。无法安全写回时，系统宁可停止导出，也不假装文档已经可用。

#本地优先的设计交付

工作区、草稿和 AI 配置默认保存在浏览器 IndexedDB。用户无需登录即可开始创作，也可以主动导出完整工作区备份。账号和云同步被放到流程之外，未发布的品牌信息也不会默认上传。

当文档通过解析和校验后，DesignPulse 可以从同一份 DESIGN.md 输出 Markdown、tokens.json、CSS Variables、Tailwind Theme 与 ZIP 交付包，让设计说明与开发资产保持在同一条链路中。

技术上，我没有把四个视图各自做成一套编辑器。Next.js 和 React 负责工作台，Markdown 解析结果变成四个视图共用的状态；Zustand/Immer 管编辑过程，IndexedDB 保存草稿。AI 通过用户自己的 Provider 接入，只返回可审阅的 Diff，最后再从同一份 DESIGN.md 生成 JSON、CSS 和 Tailwind 文件。应用部署在 Cloudflare Workers 上，云端只在请求发生时转发 AI 或抓取，不存用户文档。

#当前验证到哪里

当前版本已经跑通单文档解析、跨视图同步、AI Diff、本地持久化和多格式导出，多人团队中的长期交接仍是下一阶段。接下来会让设计师和前端用一份真实规范完成交接，记录重复维护是否减少，以及哪些内容仍然必须回到 Figma 或代码中处理。

现阶段最值得继续验证的是两类失败：解析器保不住未知内容，或 AI 修改无法被用户检查。任何一种情况出现，DesignPulse 都不应写回原文。