brand-landingpageby Seth Hobson

Brand Landing Page Skill.

A Claude Code and Codex skill for UI design: brand-identity interview first, then generates and iterates a landing page through Stitch.

Web & UI
UI code

Download OpenDesign View usage guide

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

Front matter and section headings read from the upstream file on 2026-09-14 · 15,626 characters in full

01 What it does

What the brand-landingpage Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A brand-first landing page designer that runs a three-part interview (product purpose, brand feel, visual preferences), translates answers into a Stitch design system (mapping adjectives to colorVariant, fonts to headlineFont/bodyFont, shapes to roundness), generates desktop and mobile screens, leads iterative refinement through structured feedback (variants, edits, rollback), and delivers a deployment-ready bundle with versioned HTML, DESIGN.md, color tokens, and DEPLOY.md.

For users building single-purpose landing pages or product marketing sites who have no established visual direction. Not for dashboards, multi-page apps, component-level work, or users with existing design mockups.

What it produces

Deployment-ready zip bundle containing index.html (desktop), mobile.html (if generated), DESIGN.md, color-tokens.json, user assets, and DEPLOY.md checklist
DESIGN.md documenting the design system with brand feel, color direction with hex and rationale, typography choices, and shape roundness description
color-tokens.json with structured design tokens: primary color, colorMode, colorVariant, fonts, roundness
DEPLOY.md deployment checklist generated from the template in references/state-and-pitfalls.md

See the example prompt ↗

How It Works

01
Verify Stitch SDK and Environment
Before starting the interview, the skill installs the SDK if missing, verifies the API key environment variable is set, and makes one minimal SDK call to confirm auth.
02
Run three-part Brand Interview
Phase A captures product name, what it does, target users, and desired CTA. Phase B captures 3 brand adjectives and light/dark preference.
03
Translate Interview to Stitch Parameters
The skill maps brand adjectives to colorVariant enum, light/dark to colorMode, font preference to headlineFont and bodyFont, and sharp/rounded to roundness enum using a translation table.
04
Generate Screen and Open in Browser
The skill calls generate_screen_from_text with deviceType DESKTOP, saves the returned HTML as desktop-v1.html in .stitch/designs/, and opens it locally using the OS-specific command.
05
Iterate Through Feedback Loop
After each generation, the skill asks three feedback questions, translates user feedback into edit_screens calls for targeted changes or generate_variants for exploration, and saves new versions with incremented filenames.
06
Deliver Deployment Bundle
The skill creates a zip with the final HTML renamed to index.html, mobile.html if generated, DESIGN.md documenting the brand system, color-tokens.json, user assets, and a DEPLOY.md checklist.

02 Find your fit

When to Use the brand-landingpage Skill

Use the brand-landingpage skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

User asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction
User has built a product, side project, or service and needs a landing page but hasn't thought much about brand identity or visual direction
Single-purpose landing pages and product marketing sites

Know the Boundaries

User has a design mockup
User needs a dashboard or app UI
User is working at component level
User is building a multi-page app or restyling with known design tokens (use frontend-design instead)

What to Provide

Product name and purposeWhat the product does, who the target users are, and what action visitors should take (sign up, try demo, join waitlist).
Three brand adjectivesThe skill provides a menu of adjectives to choose from. Required to move from Phase B to Phase C.
Light or dark preferenceMaps directly to colorMode parameter (LIGHT or DARK) in the Stitch design system.
Color directionExisting brand or app colors as hex, or a color feeling if they have no established palette. Maps to customColor parameter.
Font and shape preferencesModern vs traditional font preference maps to headlineFont and bodyFont.

03 Inside the skill

Rules the brand-landingpage Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Never Display API Keys
The skill must never display, transcribe, or echo the Stitch API key when verifying the environment or diagnosing authentication failures.
Do Not Ask for Images
The skill must not ask users to provide images or logos because Stitch does not accept image uploads via API.
Version HTML Files Sequentially
Save generated HTML as desktop-v1.html for the first generation, desktop-v2.html for the next iteration, and so on.
Always Open Updated HTML in Browser
After every generation, edit, or variant selection, the skill must save the updated HTML from the Stitch response and open the local file in the user's browser.
Prompt to Ship After 3 Positive Rounds
After 3 rounds of positive feedback, the skill should ask: 'This is looking solid. Keep iterating or ship it and refine later?'
Four non-negotiable Interview Answers
The skill must collect project name, what it does, target users, and desired CTA before moving from Phase A to Phase B. These four are non-negotiable.
Do Not Retry Failed Generations Immediately
If generation fails, do not retry immediately. Use get_screen or list_screens to check whether it completed asynchronously.

04 Put it to work

Install brand-landingpage in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add brand-landingpage to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

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

Generic skills CLI form for plugins/brand-landingpage/skills/brand-landingpage/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

The SKILL.md does not include an example prompt; this starter is written from the catalog one-liner. Replace the task line with your real brief.

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.

Source: starter prompt written from the catalog one-line use (not from the SKILL.md).

Check the First Result

What the SKILL.md itself says a correct result looks like:

Open the saved HTML file in the user's browser using OS-specific command (open on macOS, xdg-open on Linux, start on Windows) to see the design at full fidelity
Ask the three feedback questions: gut reaction in the first 5 seconds, does this feel like your product, and is there anything that feels wrong or missing
Draw user attention to specific design dimensions: message clarity, CTA visibility, color alignment with their adjectives, and reading flow
Verify .stitch/metadata.json exists and contains project ID, design system asset ID, interview summary, and screen history when resuming a session
Follow the deployment checklist in DEPLOY.md that covers hosting, domain setup, analytics, and image swaps

In OpenDesign import brand-landingpage from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill file: plugins/brand-landingpage/skills/brand-landingpage/SKILL.md Content checksum recorded at verification; commit 4236bb9
License: MIT From LICENSE.
Repository stars: 39,635 GitHub snapshot taken 2026-09-14 for the whole wshobson/agents repository, which contains 18 skills in this catalog. Not a rating or usage count for brand-landingpage.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

Phase 0: Prerequisites & Stitch ConnectionVerify SDK installation, API key environment variable, and make minimal test call before starting interview
Reference FilesLists when to read interview-framework.md, stitch-architecture.md, and state-and-pitfalls.md during the workflow
Workflow OverviewFour phases: setup, three-part interview, design system translation, generate and review loop, delivery bundle
Phase 1: Brand InterviewThree parts: product purpose, brand feel with adjectives, visual preferences for color font and shape
Phase 2: Design System CreationTranslate interview answers to Stitch parameters using mapping table, create and update design system, write DESIGN.md
Phase 3: Generate & Review LoopGenerate desktop screen, open in browser, collect feedback through three questions, iterate with edits or variants
Phase 4: Delivery BundlePackage final HTML, DESIGN.md, color tokens, user assets, and DEPLOY.md checklist into versioned zip
Stitch DocumentationLinks to SDK usage documentation and DESIGN.md examples at stitch-design.ai
Resume & Error RecoveryLoad state from metadata.json, handle generation failures, rate limiting, and expired projects on resume

The Skill's Own 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 component level, building a multi-page app, or restyling with known design tokens — use frontend-design instead.”

Front-matter description from SKILL.md. The full file is about 15,626 characters. Read the full file on GitHub.

06 Before you install

Questions About the brand-landingpage Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Can I provide my own logo or product screenshots?

Stitch generates from text prompts and does not accept image uploads via API. If you attach an image, the skill will ask you to describe its dominant colors, mood, and shape language in your own words, then incorporate those attributes into the design.

Your original file is saved in the bundle so you can swap it into the final HTML with a straightforward img tag replacement.

Why do I need to go through the interview instead of jumping straight to generation?

The interview is where most of the value is created. Without it, the result would be a generic template.

The interview takes about 5 minutes and captures product purpose, target users, brand adjectives, and visual preferences, which the skill translates into a design system that actually fits your brand rather than a one-size-fits-all output.

What do I get at the end?

A deployment-ready zip bundle containing the final desktop HTML renamed to index.html, mobile.html if you requested a mobile variant, DESIGN.md documenting your brand design system, color-tokens.json with structured design tokens, any user-provided assets, and DEPLOY.md with a deployment checklist. All intermediate versions and state are preserved in .stitch/ for reference.

Brand Landing Page

Run brand-landingpage on a Real UI Design Task.

Download OpenDesign, import brand-landingpage from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills