UI Para Vue

Converte em lote capturas de tela de design de UI em código de componente Vue 3 Composition API.

Quando Usar

• O usuário fornece um diretório de capturas de tela de design ou imagens exportadas de design.
• A aplicação alvo é Vue 3.
• O usuário deseja uma primeira versão de componentes de página, componentes compartilhados e roteamento.
• O usuário especifica Vant, Element Plus ou Ant Design Vue como a biblioteca de componentes.

Quando Não Usar

• O usuário tem apenas uma captura de tela e deseja um componente personalizado.
• O projeto alvo não é Vue.
• O design requer lógica de interação detalhada, fluxo de dados ou revisão de acessibilidade.
• As capturas de tela contêm dados privados de clientes que não podem ser enviados para uma API de modelo externa.

Entradas

Use um diretório de entrada que agrupe capturas de tela por módulo e estado da página:

screenshots/
|-- HomePage/
|   |-- List/
|   |   |-- HomePage-List-Default@3x.png
|   |   `-- cut-images/
|   |-- cut-images/
|   `-- HomePage-Default@3x.png
`-- cut-images/

Nomes de diretório de corte de imagem suportados incluem assets, icons, sprites, cut, images e cut-images.

Modelo de Conversão

• Agrupamento de páginas: combine capturas de tela relacionadas em um componente de página quando elas representam estados de lista, detalhe, formulário, carregamento ou vazio.
• Mapeamento de biblioteca de UI: mapeie elementos visuais nativos para componentes Vant, Element Plus ou Ant Design Vue quando prático.
• Prioridade de corte de imagem: prefira ativos de nível de página, depois ativos de nível de módulo, depois ativos globais compartilhados.
• Extração de componentes: extraia regiões de UI repetidas em componentes compartilhados quando elas aparecem mais de uma vez.

Uso da CLI

Execute o conversor com npx para que o comando documentado funcione sem depender de um binário global:

export DASHSCOPE_API_KEY=your_key
npx ui-to-vue-converter@1.0.2 --input ./screenshots --ui vant --output ./src

Para bibliotecas de UI de desktop:

npx ui-to-vue-converter@1.0.2 --input ./designs --ui element-plus --output ./src
npx ui-to-vue-converter@1.0.2 --input ./designs --ui antd-vue --output ./src

Se o pacote for instalado globalmente, o binário ui-to-vue pode ser usado diretamente:

npm install -g ui-to-vue-converter@1.0.2
ui-to-vue --input ./screenshots --ui vant --output ./src

Opções

Tratamento de Chave de API

O conversor pode ler credenciais do DashScope de um arquivo de configuração ou do ambiente. Prefira uma variável de ambiente em repositórios:

export DASHSCOPE_API_KEY=your_key

Se um arquivo de configuração local for necessário, mantenha-o fora do controle de versão:

{
  "apiKey": "your_dashscope_key",
  "input": "./designs",
  "ui": "vant",
  "output": "./src"
}

.ui-to-vue.config.json

Segurança e Privacidade

• Trate as capturas de tela de design como material fonte que pode ser enviado para uma API de modelo externa.
• Não execute este fluxo em designs privados de clientes sem permissão.
• Fixe a versão do conversor em fluxos de trabalho repetíveis em vez de usar @latest.
• Revise o código Vue gerado antes de confirmá-lo.
• Não confirme .ui-to-vue.config.json, chaves de API, segredos gerados ou capturas de tela de clientes.

Checklist de Revisão de Saída

• Componentes de página foram gerados em views/ ou no diretório de saída escolhido.
• Regiões de UI repetidas foram extraídas em components/ apenas quando a reutilização é clara.
• A saída do roteador é compatível com o estilo do roteador do projeto alvo.
• Componentes gerados usam a biblioteca de UI solicitada de forma consistente.
• Unidades CSS geradas correspondem à linha de base do design.
• O código passa pelo formatador, linter, verificador de tipos e build do projeto.
• Texto de espaço reservado, dados simulados e ativos gerados foram revisados antes do commit.

Solução de Problemas

…