brand-landingpage

Brand-first landing page designer that interviews your brand identity, then generates and iterates on deployment-ready HTML.

wshobson ↓ 30k

Claude Code

View source ↗

What it does

"What's your gut reaction in the first 5 seconds?"
"Does this feel like YOUR product?"
"Is there anything that feels wrong, missing, or not quite right?"
Always open the updated HTML in the browser after any edit or variant selection.
Update metadata after every state change. Never discard previous versions.
After 3 rounds of positive feedback: "This is looking solid. Keep iterating or ship it and refine later?"
After 5 rounds: "What's the single most important change left?"

Requirements & configuration

3. Verify the API key env var (as named in the docs) is set. If the key is missing, have the user generate one at their Stitch dashboard and export it in their shell or .env.
| CSS-level feedback ("needs more padding", "font too small") | Translate to design intent | editscreens with design-level instruction |

Configuration: DEPLOY

Derived from the skill's own SKILL.md documentation · extracted 2026-07-23

Brand-first landing page designer that interviews your brand identity, then generates and iterates on deployment-ready HTML.

Source

Repository: https://github.com/wshobson/agents

brand-landingpage FAQ

What does the brand-landingpage skill do?

> 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 component level, building a multi-page app, or restyling with known design tokens — use frontend-design instead. "What's your gut reaction in the first 5 seconds?" "Does this feel like YOUR product?"

What does brand-landingpage require?

3. Verify the API key env var (as named in the docs) is set. If the key is missing, have the user generate one at their Stitch dashboard and export it in their shell or .env. | CSS-level feedback ("needs more padding", "font too small") | Translate to design intent | editscreens with design-level instruction | Configuration keys: DEPLOY.

How do I install brand-landingpage?

Run: npx -y skills add https://github.com/wshobson/agents --skill brand-landingpage --agent claude-code — the source lives at github.com/wshobson/agents.

Maintain brand-landingpage?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![brand-landingpage on getagentictools](https://getagentictools.com/badge/skills/wshobson-agents-brand-landingpage.svg)](https://getagentictools.com/skills/wshobson-agents-brand-landingpage?ref=badge)

npx agentictools info skills/wshobson-agents-brand-landingpage

The second line is the CLI lookup for this page — handy in READMEs and docs.