brand-landingpage — Claude Code plugin: landing page from brand
Runs a brand discovery interview, builds landing pages through Stitch, and hands back a deployment-ready HTML bundle. Useful when the product exists but the palette and page structure don't.
/plugin marketplace add wshobson/agents
/plugin install brand-landingpage@claude-code-workflowsWhat brand-landingpage does
The plugin runs a structured interview: 10 questions across 3 phases — product and purpose, brand feel, visual preferences. Vague or contradictory answers trigger follow-ups. Your adjectives then map onto Stitch parameters: color palette, font pairing, shape direction, color mode.
Each generated page opens in your browser, and you steer it in plain words. Something like "it looks too corporate" becomes targeted Stitch operations. You can edit individual sections, try variants across layout, color and typography, and roll back to earlier versions. Give it a logo or screenshot and it pulls style cues from the image, keeping the originals for developer handoff.
What you get at the end is a zip: final HTML, design tokens as JSON, brand documentation, a deployment checklist. Node.js 18+ is required, and the API key comes from the Stitch web app — the plugin walks you through setup on first run and installs the SDK. Stitch's free tier covers all of it. One catch: Stitch outputs static HTML, so no JS interactivity, forms or animations, and images can't be uploaded through its API. After deployment you'll still swap placeholder images, wire the CTA link and add analytics.
What it helps with
- run a brand interview and lock in a palette with fonts
- generate a landing page from a product description via Stitch
- turn "too corporate" feedback into concrete design edits
- roll a page back to an earlier version
- package HTML, design tokens and a deploy checklist into a zip
Example prompts for the agent
- Create a landing page for my project
- Run the brand interview and build the page
- It looks too corporate — redo the pricing section
How to install brand-landingpage
Plugin marketplace
/plugin marketplace add wshobson/agents/plugin install brand-landingpage@claude-code-workflowsStep by step, with commands for each platform: Claude Code plugins: marketplaces, installing, and building your own
Questions about brand-landingpage
How do I install brand-landingpage in Claude?
Add the marketplace with /plugin marketplace add wshobson/agents, then install the plugin: /plugin install brand-landingpage@claude-code-workflows.
What does brand-landingpage do?
It interviews you about your brand, maps the answers to Stitch parameters, generates and iterates on a landing page, and delivers a zip with HTML, design tokens and brand docs.
What do I need to run it?
Node.js 18+ and a Stitch API key. On first run the plugin points you to the Stitch web app for the key and handles the SDK install; the free tier covers the full feature set.
Source text
brand-landingpage · MIT
# Brand Landing Page
A Claude Code skill that runs a structured brand discovery interview, generates iterative landing pages via Stitch, and delivers a deployment-ready HTML bundle.
Turn brand decisions you haven't made yet into a landing page you'd actually ship.
## When To Use
You have a product, side project, or service that needs a landing page. You can build the product but haven't established a brand direction — color palette, font pairing, visual hierarchy, or page structure. This skill handles the design decisions you'd otherwise skip or guess at.
Just ask Claude to create a landing page for your project. The skill takes it from there.
## What It Does
- **Brand discovery interview** — 10 questions across 3 phases (Product & Purpose, Brand Feel, Visual Preferences) with follow-up triggers for vague or contradictory answers
- **Design system translation** — maps brand adjectives to Stitch parameters: color palette, font pairing, shape direction, color mode
- **Visual feedback loop** — generates landing pages, opens them in your browser, translates feedback ("it looks too corporate") into targeted Stitch operations
- **Iteration** — edit specific sections, explore variants across layout/color/typography, roll back to earlier versions
- **Image handling** — extracts style cues from logos or screenshots you provide, saves originals for developer handoff
- **Delivery bundle** — final HTML, design tokens (JSON), brand documentation, and deployment checklist as a zip
## Setup
Stitch's free tier (350 standard + 200 experimental generations/month) covers all skill functionality — no paid plan required.
The skill walks you through Stitch setup the first time you use it: it'll point you to the Stitch web app for an API key and handle the SDK installation.
Requires Node.js 18+.
## File Structure
```
brand-landingpage/
.claude-plugin/
plugin.json
skills/
brand-landingpage/
SKILL.md # Main skill instructions
references/
interview-framework.md # Brand discovery question bank and feedback guide
stitch-architecture.md # Font/color/prompt/section reference
state-and-pitfalls.md # State schema, pitfalls, DEPLOY.md template
README.md
```
## Limitations
- Stitch generates static HTML (no JS interactivity, no forms, no animations)
- No image upload via Stitch API — logos and images are saved in the bundle for manual integration
- You'll need to replace placeholder images, wire up the CTA link, and add analytics after deployment
© Travis D. Elliott · MIT · wshobson/agents
