案例 11 · 全自动 UI 组件库 Docusaurus 文档与 Playground 生成器

【关键工具】 Windsurf

【70% Vibe】

扫描你现有的前端组件代码，自动为那些散落各处、缺乏文档的 UI 组件生成一套精美的在线文档（基于 Docusaurus），还附带可以实时改参数、看效果的交互式 Playground。对维护组件库的前端团队来说，这把"没人愿意写文档"的脏活自动化了。Windsurf 的多文件理解能力在这里大显身手。

【30% Engineering】

这个案例的 30%，是一个严肃的安全沙箱问题。

Playground 的本质，是"让用户在浏览器里运行任意代码并看到效果"。这意味着你要用 Webpack / Vite 动态编译并执行用户输入的代码。而"执行任意代码"是天然危险的——如果不加隔离，恶意用户可能注入代码窃取数据、发起攻击。你必须把这段执行环境关进一个安全沙箱里，严格限制它能访问什么、能做什么。这是所有"在线代码演练场"类产品的核心工程难点，也是 AI 最不会主动替你考虑的地方——它只会让 Playground"能跑"，不会让它"安全地跑"。