Quiero crear wireframes de alta calidad al instante.
He recopilado estos prompts en una guía para esta ocasión.
Enseñarle las reglas de wireframing a Claude te ahorrará una cantidad significativa de tiempo.
Tabla de contenido
- Registro como regla de "Habilidad"
- Prompt para copiar y pegar
- Explicación de cada regla
- Para sitios web de múltiples páginas, usa Claude Code
Registro como regla de "Habilidad"
Cuando pegues el prompt, Claude preparará un archivo para la habilidad. Una vez registrada, solo tendrás que decir "crea un wireframe" a partir de ese momento.
- Pasa el siguiente "Prompt para copiar y pegar" a Claude y se creará un archivo ZIP.
- Presiona el "Botón de Guardar" que aparece en el chat.
Esto elimina la necesidad de pegar el prompt cada vez.
*La función de Habilidad está disponible en los planes de pago como Pro y Max.
Prompt para copiar y pegar
Pega lo siguiente en el chat de Claude para comenzar el registro de la Habilidad (registro para recordarlo como regla).
Sigue las instrucciones del chat y presiona el ✔️ Botón de Guardar.
Lo siguiente es un prompt de wireframe. Por favor, conviértelo en una habilidad.
Crea un wireframe en HTML. Sigue todas las reglas a continuación.
[Diseño] ・Crea un diseño que sea fácil de entender de un vistazo sin que se sienta como una carga leerlo. ・Crea un diseño sofisticado, urbano y minimalista. ・Aprovecha bien toda la página para los márgenes y el equilibrio. ・Usa Noto Sans JP para la fuente y hazla ligeramente pequeña.
[Estilo] ・Usa solo "blanco, negro y gris" para los colores. ・Mantén el fondo básicamente blanco. No crees páginas que sean completamente negras. ・No uses inglés innecesario, líneas, sombras u otras decoraciones. ・Usa cuadros grises para las partes donde se necesiten diagramas o imágenes. ・Usa la versión gratuita de "Font Awesome" para los iconos.
[Redacción] ・Mantén cada oración algo corta. Usa una coma al menos una vez por oración. ・Separa los párrafos cada 1-2 oraciones. ・Usa Hiragana para Kanji donde sea natural (ejemplo: cambia 行う por おこなう). ・Usa corchetes 「」 para nombres o diálogos que quieras enfatizar. ・Corrige cualquier error tipográfico o carácter omitido y unifica el tono a cortés (Desu/Masu).
Explicación de cada regla
Para aquellos que quieren conocer el desglose de las reglas.
1. Diseño y estilo
Un "diseño fácil de entender" organiza la prioridad de la información. Al limitar los colores a "blanco, negro y gris", el diseño no se descontrola.
https://x.com/hiroho150cm/status/2061576024878633393
2. Iconos
Especificar "Font Awesome" para los iconos mejora significativamente la apariencia.
https://x.com/hiroho150cm/status/2062376294688387540
3. Crear con HTML
Usar HTML hace que la generación y modificación sean fluidas.
https://x.com/hiroho150cm/status/2061938409577574818
https://x.com/hiroho150cm/status/2064112737865576597
4. Redacción
La legibilidad es lo suficientemente alta como para que puedas usar el texto interno tal cual.
https://x.com/hiroho150cm/status/2063750350776287429
Para sitios web de múltiples páginas, usa Claude Code
Hasta ahora, esto ha sido sobre páginas de aterrizaje (páginas individuales). Para sitios web de múltiples páginas, cambiamos el enfoque.
Las vistas previas del chat no manejan bien el cambio entre múltiples archivos HTML. Por lo tanto, usamos "Claude Code".
Prepara una carpeta en tu escritorio y gestiona todo dentro de ella. De esta manera, Claude Code puede editar correctamente múltiples archivos HTML.
https://x.com/hiroho150cm/status/2065267853922898022
Comparto técnicas para ahorrar tiempo en la producción y dirección web usando Claude.
Seguiré compartiendo información útil, así que sígueme si te gusta.
