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 tempo.
Índice
- Registrar como regra de "Skill"
- Prompt de copiar e colar
- Explicação de cada regra
- Para sites com várias páginas, use o Claude Code
Registrar como regra de "Skill"
Quando você colar o prompt, o Claude preparará um arquivo para a skill. Depois de registrada, basta dizer "crie um wireframe" a partir de então.
- Passe o seguinte "Prompt de copiar e colar" 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 em planos pagos como Pro e Max.
Prompt de 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. Por favor, 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 toda a página 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 que sejam totalmente 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 um pouco 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 (por exemplo, mude 行う para おこなう). ・Use colchetes 「」 para nomes ou diálogos que deseja enfatizar. ・Corrija quaisquer erros de digitação ou caracteres omitidos e unifique o tom para polido (Desu/Masu).
Explicação de cada regra
Para quem quer saber 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. Criar com HTML
Usar HTML torna a geração e a modificação 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 múltiplos 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 corretamente múltiplos arquivos HTML.
https://x.com/hiroho150cm/status/2065267853922898022
Compartilho técnicas de economia de tempo para produção web e direção usando o Claude.
Continuarei entregando informações úteis, então, por favor, siga-me se gostar.
