brand-landingpage
Diseña una Página de Aterrizaje Centrada en la Marca con Entrevistas Interactivas
La mayoría de las páginas de aterrizaje fallan porque omiten el paso de la identidad de marca. Esta skill guía a los usuarios a través de una entrevista de marca estructurada, luego genera una página de aterrizaje pulida con un sistema de diseño a juego usando el SDK de Stitch.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "brand-landingpage". Create a landing page for my API tool called DataPipe
Resultado esperado:
La skill pregunta sobre el propósito de tu producto, luego te guía para elegir 3 adjetivos de marca como limpio, técnico y moderno. Después de confirmar un tema oscuro con acentos índigo, genera una página de aterrizaje de escritorio con secciones de héroe, fragmento de código, características y pie de página.
Usando "brand-landingpage". The colors feel wrong, can you change them?
Resultado esperado:
La skill pregunta qué es lo que no funciona con los colores: demasiado brillantes, demasiado apagados o el tono incorrecto. Después de que digas demasiado brillantes, genera una variante más sobria con la misma disposición pero con la saturación de color ajustada.
Usando "brand-landingpage". I want to compare different layout options
Resultado esperado:
La skill genera 3 variantes de la página de aterrizaje con un héroe centrado, una disposición dividida y un encabezado de ancho completo. Abre las tres en pestañas del navegador y pregunta qué dirección prefieres.
Auditoría de seguridad
Riesgo bajoAll 295 static analysis findings were evaluated against actual file content. All 'weak cryptographic algorithm' findings are false positives caused by hex color codes in brand design reference tables. All 'Ruby/shell backtick execution' findings are false positives from markdown code blocks showing SDK method names and CLI commands. The 'C2 keywords', 'system reconnaissance', 'Windows SAM database', and 'Windows cmd.exe' findings are all false positives resulting from design terminology, brand interview questions, and legitimate file-opening instructions. The 'environment file access' finding is confirmed but represents proper API key management with documented security practices. The 'hardcoded URL' findings are low-severity documentation links for the Stitch SDK. The heuristic 'dangerous combination' finding is a false positive reflecting expected SDK integration patterns (API key + SDK calls + documentation references). No prompt injection, data exfiltration, or malicious intent was detected.
Problemas de riesgo bajo (1)
Factores de riesgo
⚙️ Comandos externos (7)
🌐 Acceso a red (1)
🔑 Variables de entorno (1)
Puntuación de calidad
Lo que puedes crear
Lanzar una Página de Aterrizaje para un Proyecto Paralelo
Un desarrollador que crea una herramienta CLI o un proyecto de código abierto necesita una página de aterrizaje pero no tiene experiencia en diseño. Esta skill realiza una entrevista de marca y genera una página profesional.
Crear un Sitio de Marketing para una Startup
Una startup en etapa temprana necesita una página de aterrizaje para su producto SaaS. La skill ayuda a definir la identidad de marca y produce una página con secciones de características, precios y testimonios.
Construir una Página de Portafolio para Desarrollador
Un desarrollador o diseñador quiere una página de aterrizaje de portafolio personal. La skill realiza una entrevista de marca y genera una página con secciones de proyectos destacados y acerca de.
Prueba estos prompts
Create a landing page for my project called [Project Name]. It is a [description]. The target users are [audience].
I want to design a landing page for my product [Project Name]. Let me go through the brand interview to define my visual identity first.
The hero section on my landing page feels too plain. Can you generate a variant with a bolder layout and more color contrast? Keep the color scheme.
I have a saved design session from yesterday. Resume from where I left off and help me finalize the bundle for deployment.
Mejores prácticas
- Completa la entrevista de marca aunque quieras saltártela. Las preguntas toman 5 minutos y marcan la diferencia entre una plantilla genérica y una página que se ajusta a tu producto.
- Revisa las páginas generadas abriendo el HTML en tu navegador en lugar de pedir descripciones de texto. La retroalimentación visual lleva a mejores iteraciones de diseño.
- Guarda tu clave de API de Stitch en tu entorno antes de comenzar para que la skill pueda generar e iterar sobre los diseños sin interrupciones.
Evitar
- Pedir a la skill que incruste el logotipo de tu empresa o suba imágenes. El SDK de Stitch genera a partir de indicaciones de texto y no acepta entradas de imágenes.
- Proporcionar retroalimentación a nivel de CSS como añadir padding-top 40px. Traduce la retroalimentación a intención de diseño como añadir más espacio de respiro sobre el título.
- Saltarse la variante móvil. La disposición de escritorio a menudo necesita ajustes para la visualización móvil y generar ambas garantiza una experiencia consistente.
Preguntas frecuentes
¿Necesito una cuenta de Stitch para usar esta skill?
¿Qué sucede si mi sesión se interrumpe?
¿Puedo usar mis propios colores de marca?
¿Esta skill funciona con imágenes y logotipos?
¿Qué tipo de páginas puede crear esta skill?
¿Puedo editar el HTML después de la generación?
Detalles del desarrollador
Autor
wshobsonLicencia
MIT
Repositorio
https://github.com/wshobson/agents/tree/main/plugins/brand-landingpage/skills/brand-landingpage/Ref.
main
Estructura de archivos