vscode-ui-sketcher

vscode-ui-sketcher 是什么？

vscode-ui-sketcher 是一款 Visual Studio Code 扩展（包含 webview 组件），用于将 UI 项目绘制成活的。该仓库将该工具定位为在 VS Code 工作流中将 UI 设计工作转化为可交互且可交付的内容。

该项目为开源，包括 VS Code 扩展和独立的 webview 应用。它还参考了 tldraw 的绘制灵感，以及 draw-a-ui 的 UI 绘制起点。

主要特性

• VS Code 扩展项目，用于 UI 草图绘制：提供在编辑器内绘制 UI 创意的方式，作为典型 VS Code 工作流的一部分。
• 基于 webview 的编辑体验：扩展包含专用的 ui-sketcher-webview 包，表明绘制 UI 在 webview 中运行。
• 使用 pnpm 的可复现开发环境：包含安装依赖（pnpm install）和构建 webview（pnpm build 或 pnpm build --watch）的说明。
• 通过 VS Code 调试器支持调试：仓库明确推荐使用 VS Code 调试器运行扩展。
• 基于浏览器的 webview 开发：开发者可直接运行 webview（pnpm --filter ui-sketcher-webview dev）并打开本地 URL http://localhost:3174。
• 开源许可（AGPL-3.0）：仓库包含 AGPL-3.0 许可文件，这与代码的使用和分发方式相关。

如何使用 vscode-ui-sketcher

1. 从 Visual Studio Marketplace 安装扩展（或在扩展选项卡搜索“UI Sketcher”）。
2. 打开扩展并按照屏幕上的工作流绘制你的 UI 项目（仓库中引用了 README 和扩展 README，但提供的页面内容未包含详细的产品内步骤）。
3. 如果你正在贡献或开发：克隆仓库，使用 pnpm install 安装依赖，然后使用提供的 ui-sketcher.code-workspace 开发环境构建并运行扩展。
4. 对于 webview 工作：从 ./ui-sketcher-webview 运行 pnpm --filter ui-sketcher-webview dev 并在浏览器中打开 http://localhost:3174。

使用场景

• 在 VS Code 中迭代布局时绘制 UI 草图：使用扩展在不离开编辑器的情况下起草界面结构。
• 开发或自定义绘制体验：贡献者可在 ui-sketcher-webview 包上工作，并通过本地浏览器 URL 查看更改。
• 在编辑器中调试扩展行为：使用 VS Code 调试器运行扩展并排查问题。
• 开发期间构建并监视 webview：运行 pnpm build --watch 以在处理 webview 时获得快速反馈。
• 从开源参考实现中学习：仓库结构（扩展 + webview 包、工作区文件和构建说明）可作为类似 VS Code 绘制工具的起点。

常见问题

vscode-ui-sketcher 安装在哪里？

从 Visual Studio Marketplace 安装，或在扩展选项卡搜索“UI Sketcher”。

开发期间是否有独立的 webview 代码可运行？

有。仓库记录了使用 pnpm --filter ui-sketcher-webview dev 运行 webview 并打开 http://localhost:3174。

如何从源码构建扩展或 webview？

页面内容指出，可从 ./ui-sketcher-webview 运行 pnpm build（或 pnpm build --watch）。它还指出开发时“仅从 ui-sketcher.code-workspace 文件工作”。

项目使用什么许可？

仓库列出了 AGPL-3.0 许可。

替代方案

• 通用 UI 绘图工具：专注于绘制或绘图的工具（通常带有导出功能）可替代草图工作流，但可能未集成到 VS Code 中。
• 其他针对设计到代码的 VS Code 扩展方法：针对 UI 生成或模型的扩展可实现类似目标，尽管工作流和渲染/导出选项会有所不同。
• 基于 Web 的协作白板/设计画布：如果需要基于浏览器的绘制而非编辑器集成的流程，则 Web 绘制画布可作为替代，较少强调 VS Code 项目上下文。
• 绘图/流程工具：对于主要需要结构而非像素级布局的用户，绘图工具可提供比 UI 草图画布更简单的文档优先工作流。