Ficheiros SVG para adaptar
Edite os textos, as formas e a disposição. Guarde o pacote original e faça as alterações numa cópia de trabalho.
Design de serviços de imagens com IA · Pacote SVG
Kit UI para imagens com IA: planeie os ecrãs antes de desenvolver
Este kit UI destina-se a programadores independentes e equipas de produto que estão a criar um serviço de imagens com IA. Analise a ligação entre geração, histórico e escolha de plano. Depois, adapte os ficheiros SVG com o AI UI Designer Skill gratuito no Codex ou no Claude Code, de acordo com os campos, textos e cores do seu produto.
Incluído numa subscrição paga ativa. Não desconta créditos.
Maquetes SVG estáticas · Textos de exemplo em chinês · Sem código da aplicação
- Páginas para computador
- 6
- Temas de cor
- 2
- Referências móveis
- 2
- Ficheiros editáveis
- SVG
Como se ligam a geração, o histórico e os planos?
Veja os ecrãs antes de escolher o pacote. Cada página para computador inclui um wireframe em tons de cinzento e maquetes clara e escura, para avaliar a organização da informação e o aspeto visual.
Página inicial
Organize a apresentação do serviço, as imagens de exemplo e o acesso à geração.
Início de sessão e registo
Veja os campos de início de sessão e consulte o registo e os erros no quadro de estados.
Área de geração
Distribua a descrição, o modelo, a proporção, a quantidade, o custo em créditos e os resultados.
Histórico de imagens
Reveja a pesquisa, os detalhes, a reutilização de parâmetros e a confirmação de eliminação.
Planos e créditos
Consulte o saldo, os planos de exemplo e as maquetes do resultado da compra.
Definições da conta
Planeie a edição do perfil, a confirmação de gravação e o fim de sessão.
As pré-visualizações mantêm os textos chineses do pacote e dados fictícios. Os botões, formulários e ecrãs de compra são estáticos.
Reveja os ecrãs e as situações em que algo falta ou falha
O ZIP reúne páginas editáveis, componentes e notas do cenário para comparar as decisões de design ao longo do serviço.
Do wireframe aos temas de cor
As maquetes incluem 2 ficheiros JSON de temas. Confirme a hierarquia nos wireframes antes de optar pelo aspeto claro ou escuro.
Componentes e estados da interface
Consulte botões, campos, seletores, cartões e caixas de diálogo, além de estados de geração em curso, histórico vazio, créditos insuficientes, erro de início de sessão e falha de pagamento.
Referências móveis com âmbito definido
A área de geração e o histórico têm maquetes com 390px de largura. Nas restantes páginas, o comportamento em telemóvel é descrito no cenário, sem maquetes móveis separadas.
Descarregue, importe e ajuste aos seus requisitos
O pacote funciona com o Skill gratuito. Os scripts auxiliares de importação precisam de Python 3.9 ou posterior.
- 1
Descarregar o ZIP com a sua subscrição
Inicie sessão com uma subscrição paga ativa do AI UI Designer. O descarregamento do pacote não consome créditos de geração.
- 2
Dar ao Skill o caminho do ficheiro
Instale o AI UI Designer Skill no Codex ou no Claude Code, indique o caminho local do ZIP e peça ao assistente para o importar.
- 3
Descrever as alterações e rever o SVG
Escolha o tema e indique os campos e a disposição pretendidos. Reveja o resultado e continue a editar a cópia de trabalho, preservando os originais.
Exemplo: uma área de imagens para uma loja online
Usa o tema claro do pacote de geração de imagens para desenhar uma área de criação de imagens de produto. Inclui o nome do produto, os pontos fortes e a escolha da proporção. Mantém a indicação do custo em créditos e os cartões de resultados. Entrega uma maquete SVG editável.
Começar pelos seus requisitos ou por ecrãs existentes?
O Skill gratuito permite criar a partir dos seus requisitos, importar pacotes e aplicar temas. A subscrição paga ativa serve para descarregar este conjunto de páginas a partir do site.
- Desenhar a partir dos seus requisitos
- Skill gratuito · Gratuito
- Importar pacotes e aplicar temas
- Skill gratuito · Gratuito
- Obter este conjunto de páginas
- Pacote de cenários · Subscrição paga ativa
- Usar recursos descarregados localmente
- Pacote de cenários · Mesmo após terminar a subscrição
FAQ
O que recebe e como pode descarregar
Esclareça a diferença entre ficheiros de design e uma aplicação pronta a funcionar.
Confirme o percurso antes de adaptar as maquetes
Veja os ecrãs de geração, histórico e planos do kit UI. Se forem adequados ao seu projeto, descarregue os SVG com a sua subscrição paga ativa e use o Skill gratuito para os ajustar.
Descarregar o pacote SVGIncluído numa subscrição paga ativa. Não desconta créditos.