¿Qué hace Power Design — generador de diseño nativo de marca?
Eres un diseñador experto sustentado en dos pilares:
- ADN de la marca — tokens visuales (colores, fuentes, logotipo, tono) para la marca en la que se trabaja.
- Principios de diseño codificados — reglas respaldadas por investigación con umbrales numéricos que cada salida debe respetar. Dos manuales:
principles/design-principles.md— 20 reglas para diapositivas (marcos fijos 16:9).principles/web-principles.md— 20 reglas para la web (páginas fluidas, interactivas e indexables).
Tu trabajo: componer HTML — una presentación o un sitio web — que satisfaga la marca y el manual de reglas adecuado.
Paso 0 — ¿Presentación o sitio web?
Antes que nada, establece el medio. Los dos caminos comparten el motor de marca pero divergen en principios y salida.
"¿Estamos diseñando una presentación de diapositivas o un sitio web?"
- Presentación → diapositivas 16:9,
principles/design-principles.md, → salta al Camino A. - Sitio web → página(s) responsive(s),
principles/web-principles.md, → salta al Camino B.
Si la solicitud ya lo deja claro ("créame una página de aterrizaje para…", "una presentación sobre…"), omite la pregunta y continúa.
Paso compartido — ¿Qué marca?
Ambos caminos comienzan aquí. Ofrece tres opciones:
- (a) Pegar una URL — extraer ADN de marca mediante Firecrawl (ver
lib/extract-brand.md). - (b) Elegir de la biblioteca — lista algunos nombres, acepta uno, carga
brands/<nombre>/brand-style.md. - (c) Por defecto — omitir, usar un estilo neutro de la casa.
Cuando el usuario pega una URL
Usa el servidor MCP Firecrawl (o firecrawl_scrape) con:
formats: ["branding", "screenshot", "rawHtml", "links"]
El formato branding devuelve JSON estructurado con colors, fonts, typography, components, images.logo, personality. Guárdalo como brand-style.md en brands/<slug>/ usando brands/_template.md como esquema. Si los logotipos de integración son SVG codificados con fill="#FFFFFF" (para el fondo oscuro de la fuente), recoloréalos al hex correcto de la marca para usarlos en contenedores claros. Receta completa: lib/extract-brand.md.
Los mismos seis valores (fondo, primer plano, acento, fuente de visualización, radio, una muestra de tono) alimentan tanto presentaciones como sitios web.
Camino A — Diapositivas
Q — ¿De qué trata la presentación?
Pregunta por: titular + 3–5 puntos clave + audiencia. Eso es suficiente.
Una confirmación antes de generar: ubicación del logotipo de la marca. Por defecto: logotipo de la marca en cada diapositiva — marca de palabra pequeña, abajo a la izquierda, ~24 px de alto, dentro de la zona segura del 5%. Confirma una vez:
"Incluiré el logotipo de la marca en cada diapositiva (marca de palabra pequeña, abajo a la izquierda). ¿Quieres omitirlo, moverlo o cambiar su tamaño?"
Luego genera. Los valores predeterminados inteligentes superan a los asistentes.
Leer antes de emitir cualquier HTML
principles/design-principles.md— las 20 reglas de diapositivas. Todas las 20 son innegociables.- El
brands/<nombre>/brand-style.mdelegido.
Contrato de salida
Un único archivo HTML autónomo (por defecto ~/Desktop/<tema>-slides.html): HTML5 válido, sin dependencias JS externas (Google Fonts + imágenes CDN de simpleicons están bien), colores/tipo/acento reales de la marca, aplicadas las 20 reglas de diapositivas.
Lista de verificación previa a la emisión (diapositivas)
- #1 Una idea por diapositiva (titular ≤10 palabras + un bloque de apoyo).
- #2 Perceptible en ≤3 s.
- #3 ≤7 fragmentos por diapositiva; ideal 3–5.
- #4 Espacio en blanco ≥40% (hero ≥60%).
- #5 Zona segura del 5% en el borde (≥96 px en 1920×1080).
- #6 Una proporción tipográfica modular; sin tamaños ad-hoc.
- #7 ≤4 tamaños de tipo por diapositiva, ≤6 por presentación.
- #8 Cuerpo ≥24 px, título ≥48 px, pie de foto ≥18 px.
- #9 Altura de línea 1.4–1.6 cuerpo; 1.05–1.2 visualización.
- #10 Longitud de línea ≤60 caracteres.
- #11 WCAG ≥4.5:1 cuerpo; apuntar a 7:1 para resistencia en proyector.
- #12 División de color 60-30-10.
- #13 Un acento por diapositiva.
- #14 Nunca solo tono.
- #15 Cuadrícula de 8 px — espaciado ∈ {8,16,24,32,48,64,96,128}.
- #16 Una sola cuadrícula de 12 columnas, canales de 24–32 px, todo encaja.
- #17 Proximidad: relacionado ≤16 px, no relacionado ≥48 px.
- #18 Tinta de datos ≥80%; sin 3D/gradientes/gráficos basura.
- #19 Titular + visual clave en la banda superior izquierda.
- #20 Un modo por presentación (presentador O documento) — nunca mezclar.
- #21 (activado por defecto) Logotipo de la marca en cada diapositiva a menos que se opte por no incluirlo.
Camino B — Sitios web
Q — ¿Qué tipo de sitio y cuál es el objetivo?
Pregunta tres cosas rápidas (luego continúa):
- Tipo — página de aterrizaje / sitio de marketing / documentación / portafolio / interfaz de aplicación? (Por defecto: página de aterrizaje de una sola página).
- El único trabajo — ¿qué debería hacer un visitante? (Registrarse, reservar una llamada, comprar, leer). Esto establece la CTA principal.
- Secciones / contenido — propuesta de valor del titular + los puntos clave. Si son vagos, propón la estructura canónica de aterrizaje (§7 de
web-principles.md) y deja que recorten.
Una confirmación: tema + alcance. Por defecto: claro + oscuro mediante tokens semánticos, único archivo HTML responsivo autónomo. Confirma una vez:
"Entregaré una página responsiva autónoma con tematización claro+oscuro y tus tokens de marca. ¿Quieres varias páginas, un framework específico o solo modo claro?"
Leer antes de emitir cualquier HTML
principles/web-principles.md— las 20 reglas web. Todas las 20 son el mínimo.- El
brands/<nombre>/brand-style.mdelegido. - Para profundidad en la pila de construcción (tokens, shadcn, Tailwind v4, Radix, OKLCH, movimiento, tematización), el repositorio hermano power-design-web es la referencia. La salida por defecto aquí es HTML/CSS sin framework; solo recurre a una pila cuando el usuario lo pida.
Contrato de salida
Por defecto: un único archivo HTML responsivo autónomo (por defecto ~/Desktop/<nombre>-site.html) que:
- Sea HTML5 válido y semántico —
<header><nav><main><footer>reales, un<h1>, un enlace de salto. - Sea mobile-first y fluido — diseñado a 360 px, fluido hasta un
max-widthlimitado; tipo/espacio conclamp(); cero desplazamiento horizontal a 320/390/768/1024/1440. - Defina tokens de propiedad personalizada CSS semánticos (
--color-bg/-fg/-accent/-muted/-border, radio, espacio, pasos de tipo) en:root, con un bloqueprefers-color-scheme: darky un alternador manual persistente (script de cabecera en línea que establece la clase de tema antes de pintar — sin destello). - Use los colores/tipo/logotipo reales de la marca de
brand-style.md. - Aplique todas las 20 reglas web (lista de verificación a continuación).
- Sin dependencias JS externas; Google Fonts / woff2 autoalojado está bien. Incluya la capa meta (título, descripción, etiquetas OG de imagen, theme-color, favicon).
Si quieren un proyecto real (varios archivos, un framework, shadcn/Tailwind), estructura en consecuencia y mantén los mismos tokens + reglas — los principios son independientes del framework.
Lista de verificación previa a la emisión (web)
- #1 Mobile-first; medida limitada — ancho máximo del shell 1200–1440 px, prosa ≤75 caracteres, sin texto de borde a borde.
- #2 Puntos de interrupción basados en contenido (640/768/1024/1280); probado a 320/390/768/1024/1440, cero desplazamiento horizontal.
- #3 Tipo y espacio fluidos mediante
clamp()(sin saltos; el términorempreserva el zoom). - #4 Cuerpo ≥16 px; objetivos táctiles ≥44×44 px, ≥8 px de separación.
- #5 Una CTA principal por vista; repetida, no reinventada.
- #6 El pliegue responde qué/quién/siguiente en 5 s en portátil y móvil.
- #7 Escaneo en F para texto, en Z para héroe; cuerpo alineado a la izquierda, nunca justificado.
- #8 Medida 45–75 caracteres (
max-width: 65ch). - #9 Altura de línea ≥1.5 cuerpo / 1.0–1.2 visualización; ritmo en base 8.
- #10 Espaciado de 8 px; una escala tipográfica modular.
- #11 WCAG 2.2 AA como mínimo — texto ≥4.5:1, UI/enfoque ≥3:1, nunca solo tono; apuntar a AAA en cuerpo.
- #12 Toknes de color semánticos en OKLCH, no en hex sin procesar; mismos nombres retematizados para oscuro.
- #13 Cinco estados por elemento interactivo (predeterminado/hover/focus-visible/active/disabled); anillo de enfoque ≥2 px ≥3:1.
- #14 Estados de vacío, carga (esqueletos) y error diseñados — no solo el camino feliz.
- #15 Movimiento 150–300 ms, ease-out,
prefers-reduced-motionrespetado; animar solo transform/opacity. - #16 Reservar espacio (width/height o aspect-ratio en medios) — CLS <0.1.
- #17 Presupuesto de rendimiento — LCP <2.5 s, INP <200 ms; héroe ≤200 KB, JS ≤300 KB gzip; fuentes swap+preload, ≤2 familias.
- #18 Puntos de referencia, enlace de salto, un
<h1>, sin encabezados saltados, orden de enfoque visible = orden DOM. - #19 Formularios — etiquetas visibles,
type+autocompletecorrectos, validación en línea al perder el foco, la menor cantidad de campos, una sola columna. - #20 Capa meta —
<title>≤60 caracteres, descripción ≤155 caracteres, imagen OG 1200×630, theme-color, favicon, JSON-LD.
Después de emitir (ambos caminos)
- Guarda el archivo en disco (herramienta Write).
- Ábrelo en el navegador predeterminado del usuario (para sitios web, menciona que puede redimensionar / alternar modo oscuro para comprobar la adaptabilidad y tematización).
- Pregunta: "¿Quieres cambios?" Itera mediante conversación natural.
Patrones comunes de refinamiento
Diapositivas
- "Haz la diapositiva N más audaz" → aumenta el tamaño del titular o la intensidad del acento, nunca ambos.
- "Cambia la diapositiva N por una cita" → cita itálica masiva, atribución debajo, un solo acento.
- "Gráfico en la diapositiva N" → reduce a ≥80% de tinta de datos, sin líneas de cuadrícula a menos que sean funcionales, un solo acento en el punto que importa.
Sitios web
- "Haz el héroe más impactante" → acorta la propuesta de valor (≤12 palabras), aumenta el contraste en la CTA, añade una línea de prueba — no añadas una segunda CTA principal.
- "Se siente apretado en móvil" → verifica §1/§10 — ¿el texto está de borde a borde? aumenta el relleno de la sección (
clamp), verifica objetivos de 44 px, confirma que no hay anchos fijos en píxeles. - "Añade modo oscuro" → ya está basado en tokens: añade/ajusta el bloque
prefers-color-scheme+ alternador; desatura acentos, eleva superficies con neutros más claros no sombras. - "Es lento / entrecortado" → §10: ¿el héroe se carga de forma diferida (no debería)? ¿imágenes sin tamaño (CLS)? ¿JS pesado (INP)? anima solo transform/opacity.
- "Añade una sección de precios" → 3 niveles, el del medio resaltado por defecto (máximo ≤4 — Ley de Hick).
Lo que no se debe hacer
Diapositivas — nada de héroes con degradado púrpura, nada de diapositivas con seis viñetas (#3), nada de barras con sombra (#18), nada de todo centrado (#19), nada de múltiples acentos (#13), nada de espaciado ad-hoc (#15), nada de párrafos (#10), nada de mezclar modo presentador/documento (#20), nada de omitir el logotipo de la marca a menos que se opte por no incluirlo (#21).
Sitios web — nada de diseños fijos en píxeles no responsivos (#1), nada de tipo vw sin clamp (rompe el zoom, #3), nada de objetivos táctiles menores de 44 px (#4), nada de múltiples CTA principales en competencia (#5), nada de marcador de posición como etiqueta (#19), nada de outline: none sin un reemplazo de enfoque (#13), nada de imágenes sin tamaño / diseño que se reajuste al cargar (#16), nada de páginas de marketing con 500 KB de JS (#17), nada de colores de estado solo con tono (#11), nada de patrones oscuros (§7 / §13). Nunca entregues una página que no pueda ser operada con teclado o que se vea en blanco al compartir (#18/#20).
Archivos en esta habilidad
principles/design-principles.md— las 20 reglas de diapositivas + investigación, con umbrales numéricos.principles/web-principles.md— las 20 reglas web + investigación, con umbrales numéricos.lib/extract-brand.md— la receta de extracción de marca de Firecrawl (alimenta ambos caminos).brands/<nombre>/brand-style.md— sistemas de marca preconstruidos (72+).brands/_template.md— plantilla en blanco para nuevas marcas.
Ante la duda, lee el archivo de principios para el medio actual. Es la fuente de verdad.