brand-landingpagepor Seth Hobson

Brand Landing Page Skill.

Un skill de Claude Code y Codex para diseño de interfaz: primero realiza una entrevista de identidad de marca, luego genera e itera una landing page a través de Stitch.

Web y UI
Código UI

Descargar OpenDesign Ver guía de uso

wshobson/agents · plugins/brand-landingpage/skills/brand-landingpage/SKILL.mdSKILL.md

--- name: brand-landingpage description: Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at … --- ## Phase 0: Prerequisites & Stitch Connection ## Phase 1: Brand Interview ## Phase 2: Design System Creation ## Phase 3: Generate & Review Loop ## Phase 4: Delivery Bundle ## Stitch Documentation

Encabezado y títulos de sección leídos del archivo original el 14 de septiembre de 2026 · 15.626 caracteres en total

01 Qué hace

Qué hace el skill brand-landingpage en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Un diseñador de landing pages centrado en la marca que realiza una entrevista en tres partes (propósito del producto, sensación de marca, preferencias visuales), traduce las respuestas a un sistema de diseño Stitch (asignando adjetivos a colorVariant, fuentes a headlineFont/bodyFont, formas a roundness), genera pantallas de escritorio y móvil, guía un refinamiento iterativo mediante feedback estructurado (variantes, ediciones, reversión) y entrega un paquete listo para el despliegue con HTML versionado, DESIGN.md, tokens de color y DEPLOY.md.

Para usuarios que crean landing pages de un solo propósito o sitios de marketing de producto sin una dirección visual establecida. No para dashboards, aplicaciones multipágina, trabajo a nivel de componente ni usuarios con maquetas de diseño existentes.

Qué produce

Paquete zip listo para el despliegue que contiene index.html (escritorio), mobile.html (si se generó), DESIGN.md, color-tokens.json, assets del usuario y la lista de verificación DEPLOY.md
DESIGN.md que documenta el sistema de diseño con la sensación de marca, dirección de color con código hex y justificación, elecciones tipográficas y descripción del roundness de las formas
color-tokens.json con tokens de diseño estructurados: color primario, colorMode, colorVariant, fuentes, roundness
Lista de verificación de despliegue DEPLOY.md generada a partir de la plantilla en references/state-and-pitfalls.md

Ver el ejemplo de prompt ↗

Cómo funciona

01
Verificar el SDK de Stitch y el entorno
Antes de comenzar la entrevista, el skill instala el SDK si falta, verifica que la variable de entorno de la clave de API esté configurada y realiza una llamada mínima al SDK para confirmar la autenticación.
02
Ejecutar la entrevista de marca en tres partes
La fase A recopila el nombre del producto, qué hace, los usuarios objetivo y el CTA deseado. La fase B recopila 3 adjetivos de marca y la preferencia de modo claro/oscuro.
03
Traducir la entrevista a parámetros de Stitch
El skill asigna los adjetivos de marca al enum colorVariant, claro/oscuro al colorMode, la preferencia de fuente a headlineFont y bodyFont, y agudo/redondeado al enum roundness usando una tabla de traducción.
04
Generar la pantalla y abrirla en el navegador
El skill llama a generate_screen_from_text con deviceType DESKTOP, guarda el HTML devuelto como desktop-v1.html en .stitch/designs/ y lo abre localmente usando el comando específico del sistema operativo.
05
Iterar mediante el bucle de retroalimentación
Después de cada generación, el skill formula tres preguntas de retroalimentación, traduce los comentarios del usuario en llamadas a edit_screens para cambios puntuales o generate_variants para exploración, y guarda las nuevas versiones con nombres de archivo incrementados.
06
Entregar el paquete de despliegue
El skill crea un zip con el HTML final renombrado como index.html, mobile.html si se generó, DESIGN.md que documenta el sistema de marca, color-tokens.json, los recursos del usuario y una checklist DEPLOY.md.

02 Encuentra tu caso de uso

Cuándo Usar la Skill brand-landingpage

Usa el skill brand-landingpage en Claude Code o Codex cuando el trabajo sea diseño de UI de este tipo. El alcance y los límites que siguen están tomados del archivo del propio skill.

Buen caso de uso

El usuario pide crear, diseñar o construir una landing page, una página de inicio o una página de marketing y no tiene una dirección visual establecida
El usuario ha creado un producto, un proyecto personal o un servicio y necesita una landing page, pero no ha pensado mucho en la identidad de marca ni en la dirección visual
Landing pages de propósito único y sitios de marketing de producto

Conozca los límites

El usuario tiene un mockup de diseño
El usuario necesita un dashboard o una interfaz de aplicación
El usuario está trabajando a nivel de componente
El usuario está construyendo una aplicación de varias páginas o rediseñando con tokens de diseño conocidos (use frontend-design en su lugar)

Qué proporcionar

Nombre y propósito del productoQué hace el producto, quiénes son los usuarios objetivo y qué acción deben realizar los visitantes (registrarse, probar la demo, unirse a la lista de espera).
Tres adjetivos de marcaEl skill ofrece un menú de adjetivos para elegir. Es necesario para pasar de la Fase B a la Fase C.
Preferencia de modo claro u oscuroSe corresponde directamente con el parámetro colorMode (LIGHT o DARK) del sistema de diseño Stitch.
Dirección de colorColores existentes de la marca o la app en hexadecimal, o una sensación de color si no hay una paleta establecida. Se corresponde con el parámetro customColor.
Preferencias de tipografía y formaLa preferencia entre una fuente moderna o tradicional se corresponde con headlineFont y bodyFont.

03 Dentro del skill

Reglas que el skill brand-landingpage le da a Claude Code y Codex

7 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Nunca mostrar las claves de API
El skill nunca debe mostrar, transcribir ni repetir la clave de API de Stitch al verificar el entorno o diagnosticar fallos de autenticación.
No pedir imágenes
El skill no debe pedir a los usuarios que proporcionen imágenes o logotipos, ya que Stitch no acepta la carga de imágenes vía API.
Versionar los archivos HTML de forma secuencial
Guardar el HTML generado como desktop-v1.html en la primera generación, desktop-v2.html en la siguiente iteración, y así sucesivamente.
Abrir siempre el HTML actualizado en el navegador
Después de cada generación, edición o selección de variante, el skill debe guardar el HTML actualizado de la respuesta de Stitch y abrir el archivo local en el navegador del usuario.
Proponer el lanzamiento tras 3 rondas positivas
Después de 3 rondas de feedback positivo, el skill debe preguntar: 'Esto se ve sólido. ¿Seguimos iterando o lo lanzamos y refinamos después?'
Cuatro respuestas de la entrevista innegociables
El skill debe recopilar el nombre del proyecto, qué hace, los usuarios objetivo y el CTA deseado antes de pasar de la Fase A a la Fase B. Estas cuatro son innegociables.
No reintentar generaciones fallidas de inmediato
Si la generación falla, no reintentar de inmediato. Usar get_screen o list_screens para comprobar si se completó de forma asíncrona.

04 Ponlo a trabajar

Instalar brand-landingpage en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar brand-landingpage a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/wshobson/agents --skill brand-landingpage

Formulario genérico de la CLI de skills para plugins/brand-landingpage/skills/brand-landingpage/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de interfaz

El SKILL.md no incluye un prompt de ejemplo; este iniciador está escrito desde la línea descriptiva del catálogo. Reemplaza la línea de tarea con tu briefing real.

Starter prompt

Use the brand-landingpage skill on the material I attach. What the skill should do here: Brand-identity interview first, then generates and iterates a landing page through Stitch. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Fuente: prompt de inicio escrito desde el uso de una línea del catálogo (no desde el SKILL.md).

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Abrir el archivo HTML guardado en el navegador del usuario usando el comando específico del sistema operativo (open en macOS, xdg-open en Linux, start en Windows) para ver el diseño con fidelidad completa
Hacer las tres preguntas de feedback: reacción instintiva en los primeros 5 segundos, si esto se siente como su producto y si hay algo que se sienta mal o falte
Dirigir la atención del usuario hacia dimensiones de diseño específicas: claridad del mensaje, visibilidad del CTA, alineación del color con sus adjetivos y flujo de lectura
Verificar que .stitch/metadata.json existe y contiene el ID del proyecto, el ID del asset del sistema de diseño, el resumen de la entrevista y el historial de pantallas al reanudar una sesión
Seguir la lista de verificación de despliegue en DEPLOY.md que cubre hosting, configuración de dominio, analítica e intercambio de imágenes

En OpenDesign importe brand-landingpage desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Seth Hobson
Repository: github.com/wshobson/agents Rama main
Archivo de skill: plugins/brand-landingpage/skills/brand-landingpage/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 4236bb9
License: MIT De LICENSE.
Estrellas del repositorio: 39,635 Captura de GitHub tomada el 14-09-2026 para el repositorio completo wshobson/agents, que contiene 18 skills en este catálogo. No es una calificación ni un recuento de uso de brand-landingpage.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Fase 0: Requisitos previos y conexión con StitchVerificar la instalación del SDK, la variable de entorno de la API key y hacer una llamada de prueba mínima antes de iniciar la entrevista
Archivos de referenciaIndica cuándo leer interview-framework.md, stitch-architecture.md y state-and-pitfalls.md durante el workflow
Resumen del workflowCuatro fases: configuración, entrevista en tres partes, traducción al sistema de diseño, bucle de generación y revisión, paquete de entrega
Fase 1: Entrevista de marcaTres partes: propósito del producto, sensación de marca con adjetivos, preferencias visuales de color, tipografía y forma
Fase 2: Creación del sistema de diseñoTraducir las respuestas de la entrevista a parámetros de Stitch usando una tabla de mapeo, crear y actualizar el sistema de diseño, escribir DESIGN.md
Fase 3: Bucle de generación y revisiónGenerar la pantalla de escritorio, abrirla en el navegador, recopilar feedback mediante tres preguntas, iterar con ediciones o variantes
Fase 4: Paquete de entregaEmpaquetar el HTML final, DESIGN.md, tokens de color, assets del usuario y la lista de verificación DEPLOY.md en un zip versionado
Documentación de StitchEnlaces a la documentación de uso del SDK y ejemplos de DESIGN.md en stitch-design.ai
Reanudación y recuperación de erroresCargar el estado desde metadata.json, gestionar fallos de generación, límites de tasa y proyectos expirados al reanudar

La descripción propia del Skill

"Diseñador de páginas de aterrizaje centrado en marca — realiza una entrevista de identidad de marca (colores, tipografía, lenguaje de formas), luego genera e itera sobre una página de aterrizaje pulida mediante Stitch con HTML listo para despliegue. Úsalo cuando el usuario pida crear, diseñar o construir una página de aterrizaje, página de inicio o página de marketing y no tenga una dirección visual establecida. Omítelo cuando tenga un mockup de diseño, necesite un dashboard o UI de aplicación, esté trabajando a nivel de componente, construyendo una aplicación de múltiples páginas, o rediseñando con design tokens conocidos — usa frontend-design en su lugar."

Descripción del front-matter de SKILL.md. El archivo completo tiene alrededor de 15,626 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill brand-landingpage

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Puedo proporcionar mi propio logo o capturas de pantalla del producto?

Stitch genera a partir de prompts de texto y no acepta cargas de imágenes vía API. Si adjunta una imagen, el skill le pedirá que describa sus colores dominantes, ambiente y lenguaje formal con sus propias palabras, y luego incorporará esos atributos al diseño.

Su archivo original se guarda en el paquete para que pueda incorporarlo al HTML final mediante una simple sustitución de la etiqueta img.

¿Por qué debo pasar por la entrevista en lugar de ir directo a la generación?

La entrevista es donde se crea la mayor parte del valor. Sin ella, el resultado sería una plantilla genérica.

La entrevista dura unos 5 minutos y recopila el propósito del producto, los usuarios objetivo, los adjetivos de marca y las preferencias visuales, que el skill traduce en un sistema de diseño que realmente se ajusta a su marca en lugar de un resultado genérico.

¿Qué obtengo al final?

Un paquete zip listo para desplegar que contiene el HTML de escritorio final renombrado como index.html, mobile.html si solicitó una variante móvil, DESIGN.md que documenta el sistema de diseño de su marca, color-tokens.json con tokens de diseño estructurados, cualquier recurso proporcionado por el usuario, y DEPLOY.md con una lista de verificación de despliegue. Todas las versiones intermedias y el estado se conservan en .stitch/ como referencia.

Brand Landing Page

Ejecute brand-landingpage en una tarea de diseño UI real.

Descarga OpenDesign, importa brand-landingpage desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills