Quero criar wireframes de alta qualidade em um instante.
Desta vez, compilei esses prompts em um único guia.
Ensinar regras de wireframe ao Claude vai economizar muito do seu tempo.
Índice
- Registro como regra de "Skill"
- Prompt para copiar e colar
- Explicação de cada regra
- Para sites com várias páginas, use o Claude Code
Registro como regra de "Skill"
Ao colar o prompt, o Claude preparará um arquivo para a skill. Depois de registrada, você pode simplesmente dizer "crie um wireframe" a partir de então.
- Passe o "Prompt para copiar e colar" abaixo para o Claude, e um arquivo ZIP será criado.
- Pressione o "Botão Salvar" exibido no chat.
Isso elimina a necessidade de colar o prompt toda vez.
*O recurso Skill está disponível nos planos pagos, como Pro e Max.
Prompt para copiar e colar
Cole o seguinte no chat do Claude para iniciar o registro da Skill (registro para memorizar como regra).
Basta seguir as instruções do chat e pressionar o ✔️ Botão Salvar.
A seguir está um prompt de wireframe. Por favor, transforme isso em uma skill.
Crie um wireframe em HTML. Siga todas as regras abaixo.
[Layout] ・Crie um layout que seja fácil de entender rapidamente, sem parecer cansativo de ler. ・Crie um layout sofisticado, urbano e minimalista. ・Utilize bem a página inteira para margens e equilíbrio. ・Use a fonte Noto Sans JP e deixe-a um pouco pequena.
[Design] ・Use apenas as cores "branco, preto e cinza". ・Mantenha o fundo basicamente branco. Não crie páginas completamente pretas. ・Não use nenhum inglês desnecessário, linhas, sombras ou outras decorações. ・Use caixas cinzas para partes onde diagramas ou imagens são necessários. ・Use a versão gratuita do "Font Awesome" para ícones.
[Escrita] ・Mantenha cada frase relativamente curta. Use uma vírgula pelo menos uma vez por frase. ・Separe os parágrafos a cada 1-2 frases. ・Use Hiragana para Kanji onde parecer natural (ex.: mude 行う para おこなう). ・Use colchetes 「」 para nomes ou diálogos que queira enfatizar. ・Corrija quaisquer erros de digitação ou caracteres omitidos e uniformize o tom para polido (Desu/Masu).
Explicação de cada regra
Para quem deseja entender os detalhes das regras.
1. Layout e Design
Um "layout fácil de entender" organiza a prioridade das informações. Ao limitar as cores a "branco, preto e cinza", o design não sai do controle.
https://x.com/hiroho150cm/status/2061576024878633393
2. Ícones
Especificar o "Font Awesome" para ícones melhora significativamente a aparência.
https://x.com/hiroho150cm/status/2062376294688387540
3. Criando com HTML
Usar HTML torna a geração e a modificação mais suaves.
https://x.com/hiroho150cm/status/2061938409577574818
https://x.com/hiroho150cm/status/2064112737865576597
4. Escrita
A legibilidade se torna alta o suficiente para que você possa usar o texto interno como está.
https://x.com/hiroho150cm/status/2063750350776287429
Para sites com várias páginas, use o Claude Code
Até agora, isso foi sobre LPs (páginas únicas). Para sites com várias páginas, mudamos a abordagem.
As prévias do chat não lidam bem com a alternância entre vários arquivos HTML. Portanto, usamos o "Claude Code".
Prepare uma pasta na sua área de trabalho e gerencie tudo dentro dela. Dessa forma, o Claude Code pode editar vários arquivos HTML adequadamente.
https://x.com/hiroho150cm/status/2065267853922898022
Compartilho técnicas que economizam tempo para produção web e direção usando o Claude.
Continuarei entregando informações úteis, então siga-me se gostar.
