vscode-ui-sketcher

O que é vscode-ui-sketcher?

vscode-ui-sketcher é uma extensão do Visual Studio Code (com componente webview) para dar vida a projetos de UI. O repositório posiciona a ferramenta em torno de transformar o trabalho de design de UI em algo interativo e entregável dentro de um fluxo de trabalho do VS Code.

O projeto é open source e inclui tanto a extensão do VS Code quanto um app webview separado. Ele também faz referência a inspirações de desenho do tldraw e um headstart de UI drawing do draw-a-ui.

Principais Recursos

• Projeto de extensão VS Code para esboço de UI: fornece uma forma no editor para desenhar ideias de UI como parte de um fluxo de trabalho típico do VS Code.
• Experiência de edição baseada em webview: a extensão inclui um pacote dedicado ui-sketcher-webview, indicando que a UI de desenho roda em uma webview.
• Configuração de desenvolvimento reprodutível com pnpm: inclui instruções para instalar dependências (pnpm install) e construir a webview (pnpm build ou pnpm build --watch).
• Suporte a depuração via depurador do VS Code: o repositório recomenda explicitamente usar o depurador do VS Code para rodar a extensão.
• Desenvolvimento de webview baseado em navegador: desenvolvedores podem rodar a webview diretamente (pnpm --filter ui-sketcher-webview dev) e abrir a URL local http://localhost:3174.
• Licença open-source (AGPL-3.0): o repositório inclui um arquivo de licença AGPL-3.0, relevante para como o código pode ser usado e redistribuído.

Como Usar o vscode-ui-sketcher

1. Instale a extensão do Visual Studio Marketplace (ou busque “UI Sketcher” na aba de Extensões).
2. Abra a extensão e siga o fluxo de trabalho na tela para desenhar seu projeto de UI (o README e o README da extensão são referenciados no repositório, mas os passos detalhados no produto não estão incluídos no conteúdo da página fornecida).
3. Se você está contribuindo ou desenvolvendo: clone o repositório, instale dependências com pnpm install, depois construa e rode a extensão usando a configuração de desenvolvimento ui-sketcher.code-workspace fornecida.
4. Para trabalho na webview: rode pnpm --filter ui-sketcher-webview dev a partir de ./ui-sketcher-webview e abra http://localhost:3174 no navegador.

Casos de Uso

• Esboçando uma UI no VS Code enquanto itera no layout: use a extensão para rascunhar a estrutura da interface sem sair do editor.
• Desenvolvendo ou customizando a experiência de desenho: contribuidores podem trabalhar no pacote ui-sketcher-webview e ver mudanças via URL do navegador local.
• Depurando comportamento da extensão no editor: use o depurador do VS Code para rodar a extensão e investigar problemas.
• Construindo e monitorando a webview durante o desenvolvimento: rode pnpm build --watch quando quiser feedback rápido ao trabalhar na webview.
• Aprendendo de uma implementação de referência open source: a estrutura do repositório (extensão + pacotes webview, arquivo de workspace e instruções de build) pode servir como ponto de partida para ferramentas de desenho semelhantes no VS Code.

FAQ

Onde instalo o vscode-ui-sketcher?

Instale do Visual Studio Marketplace, ou busque “UI Sketcher” na aba de Extensões.

Há código de webview separado que posso rodar durante o desenvolvimento?

Sim. O repositório documenta rodar a webview com pnpm --filter ui-sketcher-webview dev e abrir http://localhost:3174.

Como construo a extensão ou webview a partir do source?

O conteúdo da página indica que você pode rodar pnpm build (ou pnpm build --watch) a partir de ./ui-sketcher-webview. Também indica que você deve “Only work from the ui-sketcher.code-workspace file” para desenvolvimento.

Qual a licença do projeto?

O repositório lista a licença AGPL-3.0.

Alternativas

• Ferramentas gerais de diagramação de UI: ferramentas focadas em desenho ou diagramação (muitas com recursos de exportação) podem substituir fluxos de esboço, mas podem não estar integradas ao VS Code.
• Outras abordagens de extensões VS Code para design-to-code: extensões que visam geração de UI ou mockups podem atender objetivos semelhantes, embora fluxos de trabalho e opções de renderização/exportação sejam diferentes.
• Quadros brancos/design canvases colaborativos baseados na web: se você precisa de desenho baseado em navegador em vez de fluxo integrado ao editor, um canvas de desenho web pode ser uma alternativa, com menos ênfase no contexto de projeto do VS Code.
• Ferramentas de diagramação/fluxo: para usuários que precisam principalmente de estrutura em vez de layout em nível de pixel, ferramentas de diagrama podem fornecer um fluxo de trabalho mais simples focado em documentação comparado a um canvas de esboço de UI.