How to use the Brand Landing Page Designer agent skill

What is an agent skill and what does this one make the agent do?

An agent skill is a folder containing a SKILL.md instruction file and optional reference files and scripts. When a skill is installed, the agent reads it and follows its workflow for matching requests. This skill, named brand-landingpage, changes how the agent approaches a landing page request: instead of producing a generic template, it first asks about your product, the feeling your brand should convey, and your colors, fonts and shapes.

After the interview, the agent uses the Stitch design service to generate landing page screens, shows them to you for feedback, iterates, and packages a deployment-ready HTML bundle that includes a DEPLOY.md file. Project state is saved in a local metadata file (.stitch/metadata.json), so work can resume later.

• Brand interview covering the product, brand feel, and visual preferences
• Screen generation and iteration through Stitch, with feedback rounds
• Deployment-ready HTML bundle with a DEPLOY.md file
• Saved project state so an unfinished page can be resumed

Install the skill from the downloaded ZIP

Download the ZIP from this page and unzip it. To make the skill available across all your projects, place the unzipped folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder instead.

If you use the Claude apps, you can upload the skill instead. Open Settings, go to Capabilities, then Skills, and upload the skill there.

• Personal (all projects): ~/.claude/skills/
• Single project: .claude/skills/ inside the project folder
• Claude apps: Settings → Capabilities → Skills, then upload

Set up Stitch before the first run

The skill depends on the Stitch SDK and a Stitch API key. The skill's own setup phase checks that the SDK is installed (globally by default, or through the project's package manager if you are inside a project) and that the API key environment variable is set. If the key is missing, you generate one from your Stitch dashboard and export it in your shell or add it to a .env file. The skill makes one minimal SDK call to confirm authentication.

Never paste your key into the chat. The skill is written to avoid displaying or echoing the key.

• Stitch SDK, installed globally or in the project
• Stitch API key stored as an environment variable, from your Stitch dashboard
• Shell or .env file access to store the key
• Stitch MCP tools in the agent runtime (optional, but the skill references them)

Trigger the skill with a natural request

You do not need a special command. Ask for a landing page, homepage, or marketing page in plain language, and say that you have no established visual direction. The skill's description tells the agent to use it in that situation.

If you already have a design mockup, design tokens, or need a dashboard, app UI, multi-page app or documentation site, the skill says to use frontend-design instead, so phrase your request accordingly.

• "Design a landing page for my side project. I don't have any brand colors yet."
• "Build a homepage for my API service. I want it to feel calm and modern."
• "Create a marketing page for my waitlist. Walk me through the brand questions first."

What the interview asks

The interview is designed to be short. The agent asks about your project name, what it does, who it is for, and the action visitors should take. It then asks for three brand adjectives, a light or dark preference, and visual preferences for colors, fonts, and shapes. The skill's guidance says it asks no more than 10 questions in total, one at a time.

If you dump a README or product description, the agent should pull answers from it and skip those questions. Short answers are fine.

• Product: name, what it does, target users, desired call to action
• Brand feel: three adjectives, light or dark, optional admired site
• Visual: colors or color feeling, modern or traditional fonts, sharp or rounded shapes

Handling images and logos

Do not plan to upload a logo or screenshot for Stitch to use. The skill notes that Stitch does not accept image uploads via API. If you attach an image, the agent asks you to describe it in your own words, saves the original file in .stitch/user-assets/, and reflects the described style in the design. You then swap the original image into the final HTML yourself with a standard img element.