brand-landingpage Skill for Claude Code: Brand-First Landing Page Designer

Makes Claude interview you about your brand, then design and refine a landing page with Stitch and hand you deployment-ready HTML.

Installs: 39.7K; on skills.sh
Stars: 42.1K; on GitHub
Files: 3; besides SKILL.md
Updated: Oct 2026; last repo commit

brand-landingpage makes Claude act as a design consultant. It runs a short brand interview, turns your answers into a design system in Stitch, generates a landing page, opens it in your browser and refines it from your feedback until you approve. Then it packs the HTML, design notes and a deploy checklist into a zip.

You need a Stitch API key and Node.js 18 or newer, and Claude may install the Stitch SDK for you. The README says Stitch produces static HTML, so forms, animations and interactivity are yours to add after delivery.

Good for

Developers who built a product and need a landing page but have no brand direction
Founders and side-project makers who want a page they can ship quickly
Anyone who wants colors, fonts and tone chosen from a short interview

Install brand-landingpage

Claude Code

Copy this prompt.

Install the brand-landingpage skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

Phase 0: Prerequisites & Stitch Connection
Getting Stitch Ready
SDK Usage Notes
Reference Files
Workflow Overview
Phase 1: Brand Interview
Opening
Phase A: Product & Purpose
Phase B: Brand Feel
Phase C: Visual Preferences
Image Handling
Phase 2: Design System Creation
Translation Table
Steps
Phase 3: Generate & Review Loop
First Generation

Key facts

Author: Travis D. Elliott (plugin.json), inside the wshobson/agents repo
License: MIT (plugin.json)
Version: 1.0.1 (plugin.json)
Installs on skills.sh: 39,701 as of 2026-11-02
GitHub stars: 42,081 for the whole wshobson/agents repo, 2026-11-02
Last repo commit: 2026-10-30
What is inside: 4 files including SKILL.md: 3 reference guides (interview framework, Stitch architecture, state and pitfalls). No scripts.
Needs: Node.js 18+, the Stitch SDK and a Stitch API key (the skill walks you through setup the first time)
Stitch free tier: 350 standard and 200 experimental generations a month covers all skill features
Limits: Stitch makes static HTML: no JS interactivity, forms or animations

What it includes

Checks the Stitch SDK and API key, then makes one test call
Claude installs the SDK if it is missing, checks that the key env var is set, and makes one small call to confirm sign-in. It must never show or echo the key.
Runs code · Phase 0: Stitch setup
About 10 questions in 3 parts, around 5 minutes
Part A is product and purpose, B is brand feel (three adjectives, light or dark), C is visual taste (colors, fonts, sharp or rounded). Claude does not skip it, because it makes the page fit your brand.
Read · Phase 1: Brand interview
Turns your answers into Stitch design settings
Maps adjectives to a color variant, light or dark mode, a primary color, fonts and roundness. Writes .stitch/DESIGN.md and .stitch/metadata.json.
Write · Phase 2: Design system
Generates a desktop page, opens it in your browser, asks for feedback
Each version is saved as desktop-v1.html, desktop-v2.html and so on in .stitch/designs/. Targeted edits use edit_screens, bigger changes use generate_variants.
Runs code · Phase 3: Generate and review loop
Three questions after every version
Gut reaction in 5 seconds, does it feel like your product, and what feels wrong or missing. After 3 good rounds it asks whether to ship; after 5 it asks for the single most important change.
Read · Feedback prompts
Optional mobile layout after you approve the desktop one
Generated with deviceType MOBILE and reviewed for typically 1-2 rounds.
Write · Mobile variant
A zip with index.html, optional mobile.html, design tokens and DEPLOY.md
The bundle holds the final HTML, DESIGN.md, color-tokens.json, any assets you gave and a deployment checklist.
Runs code · Phase 4: Delivery bundle
Picks up from .stitch/metadata.json
If the file exists, Claude resumes at the saved stage instead of re-interviewing you.
Files · Resume

From the official docs

Permissions

Medium risk

Claude runs setup commands, writes files in your project and sends your brand answers to Stitch. Check the SDK install command before you approve it and use a Stitch key made only for this.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It may install the Stitch SDK on your machine
If the SDK is missing, SKILL.md has Claude install it, with a global install by default, and it names no package or command. It tells Claude to treat the Stitch SDK documentation at stitch-design.ai as the ground truth, so the install command comes from that site. Check the command before you approve it, or tell Claude to install it in the project. github.com
It needs a Stitch API key in your shell or .env
Use a key made only for this skill and keep .env out of git. SKILL.md tells Claude never to show the key. github.com
Your product details are sent to Stitch
Your interview answers become prompts to Stitch, which generates the pages. Do not put unreleased or confidential details in them. github.com
It writes files and opens your browser
Expect a .stitch/ folder, versioned HTML files and a zip. Claude opens each version with open, xdg-open or start, and builds the zip with a zip -r command. github.com

Technical details

Talks to	Stitch API (your brand answers and page prompts). Stitch SDK documentation on stitch-design.ai
Sign-in and keys	A Stitch API key you create in the Stitch dashboard and export in your shell or .env. SKILL.md says never to display, transcribe or echo it.
Scopes	Writes a .stitch/ folder in your project (metadata.json, DESIGN.md, designs, user-assets) and a zip bundle Installs the Stitch SDK if missing (global by default) Opens generated HTML files in your default browser

Questions

What does the brand-landingpage skill do?

It makes Claude interview you about your product and brand, then design a landing page with Stitch and refine it with your feedback. At the end you get deployment-ready HTML in a zip.

How do I install brand-landingpage?

Use the install box at the top of this page. The wshobson/agents README says its skills installers add a single skill without the plugin's agents, commands or hooks.

Do I need a Stitch account and API key?

Yes. SKILL.md has Claude check for the Stitch SDK and an API key set as an environment variable, and ask you to make one in your Stitch dashboard if it is missing. The README says Stitch's free tier covers everything the skill does. It also needs Node.js 18 or newer.

How long is the interview and what do I get at the end?

About 10 questions, around 5 minutes. The final zip holds index.html, mobile.html if you asked for it, a design folder with DESIGN.md and color-tokens.json, any assets, and DEPLOY.md.

Can I give it my logo?

Not to Stitch. SKILL.md says Stitch does not accept image uploads through its API, so Claude asks you to describe the logo, saves your original file to .stitch/user-assets/ and puts it in the bundle for you to swap into the HTML.

When should I not use it?

SKILL.md says to skip it when you already have a design mockup, need a dashboard or app UI, work at component level, build a multi-page app, or restyle with known design tokens. It points to the frontend-design skill for those cases.

Is brand-landingpage safe?

It runs commands and writes files in your project, so read what it proposes. It may install the Stitch SDK globally, it needs a Stitch API key from your shell or .env, and your answers go to Stitch to generate pages. SKILL.md says never to display or echo the key.

Does it work in Codex or Cursor?

The plugin README calls it a Claude Code skill. The plugin folder also contains a Codex plugin manifest, but the README does not describe using it in Codex or Cursor.

Information

updated Nov 2, 2026

Repository: wshobson/agents
Folder: plugins/brand-landingpage/skills/brand-landingpage

wshobson/agents skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

brand-landingpage SKILL.md · github.com
brand-landingpage plugin.json · github.com
brand-landingpage README · github.com
brand-landingpage state-and-pitfalls.md · github.com
wshobson/agents README · github.com