Quiero crear wireframes de alta calidad al instante.
He recopilado estos prompts en una guía esta vez.
Enseñarle a Claude las reglas de wireframes te ahorrará una cantidad significativa de tiempo.
Tabla de contenido
- Registrar como regla "Skill"
- Prompt para copiar y pegar
- Explicación de cada regla
- Para sitios multipágina, usa Claude Code
Registrar como regla "Skill"
Cuando pegues el prompt, Claude preparará un archivo para la skill. Una vez registrada, solo tendrás que decir "crea un wireframe" a partir de entonces.
- 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 Skill está disponible en planes de pago como Pro y Max.
Prompt para copiar y pegar
Pega lo siguiente en el chat de Claude para iniciar el registro de Skill (registro para recordar como regla).
Simplemente sigue las instrucciones del chat y presiona el ✔️ Botón de guardar.
El siguiente es un prompt de wireframe. Por favor conviértelo en una skill.
Crea un wireframe en HTML. Por favor sigue todas las reglas a continuación.
[Layout] ・Crea un diseño que sea fácil de entender de un vistazo sin que se sienta pesado de leer. ・Crea un diseño sofisticado, urbano y minimalista. ・Utiliza bien toda la página para márgenes y equilibrio. ・Usa Noto Sans JP como fuente y hazla un poco pequeña.
[Diseño] ・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 cajas grises para las partes donde se necesiten diagramas o imágenes. ・Usa la versión gratuita de "Font Awesome" para los íconos.
[Escritura] ・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 cuando sea natural (ej., cambia 行う a おこなう). ・Usa corchetes 「」 para nombres o diálogos que quieras enfatizar. ・Corrige cualquier error tipográfico o caracteres omitidos 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. Layout y Diseño
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 descontrolará.
https://x.com/hiroho150cm/status/2061576024878633393
2. Íconos
Especificar "Font Awesome" para los íconos mejora significativamente la apariencia.
https://x.com/hiroho150cm/status/2062376294688387540
3. Creando 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. Escritura
La legibilidad se vuelve lo suficientemente alta como para que puedas usar el texto interno tal cual.
https://x.com/hiroho150cm/status/2063750350776287429
Para sitios multipágina, usa Claude Code
Hasta ahora, esto ha sido sobre LP (páginas individuales). Para sitios multipágina, 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 administra todo dentro de ella. De esa manera, Claude Code puede editar correctamente varios archivos HTML.
https://x.com/hiroho150cm/status/2065267853922898022
Comparto técnicas de ahorro de tiempo para producción web y dirección usando Claude.
Seguiré brindando información útil, así que por favor sígueme si te gusta.
