brand-landingpage
Design a Brand-First Landing Page with Interactive Interviews
Most landing pages fail because they skip the brand identity step. This skill guides users through a structured brand interview, then generates a polished landing page with a matching design system using the Stitch SDK.
Download the skill ZIP
Upload in Claude
Go to Settings → Capabilities → Skills → Upload skill
Toggle on and start using
Test it
Using "brand-landingpage". Create a landing page for my API tool called DataPipe
Expected outcome:
The skill asks about your product purpose, then guides you through choosing 3 brand adjectives like clean, technical, and modern. After confirming a dark theme with indigo accents, it generates a desktop landing page with hero, code snippet, features, and footer sections.
Using "brand-landingpage". The colors feel wrong, can you change them?
Expected outcome:
The skill asks what feels off about the colors: too bright, too dull, or the wrong hue. After you say too bright, it generates a muted variant with the same layout but adjusted color saturation.
Using "brand-landingpage". I want to compare different layout options
Expected outcome:
The skill generates 3 variants of the landing page with a centered hero, a split layout, and a full-width header. It opens all three in browser tabs and asks which direction you prefer.
Security Audit
Low RiskAll 295 static analysis findings were evaluated against actual file content. All 'weak cryptographic algorithm' findings are false positives caused by hex color codes in brand design reference tables. All 'Ruby/shell backtick execution' findings are false positives from markdown code blocks showing SDK method names and CLI commands. The 'C2 keywords', 'system reconnaissance', 'Windows SAM database', and 'Windows cmd.exe' findings are all false positives resulting from design terminology, brand interview questions, and legitimate file-opening instructions. The 'environment file access' finding is confirmed but represents proper API key management with documented security practices. The 'hardcoded URL' findings are low-severity documentation links for the Stitch SDK. The heuristic 'dangerous combination' finding is a false positive reflecting expected SDK integration patterns (API key + SDK calls + documentation references). No prompt injection, data exfiltration, or malicious intent was detected.
Low Risk Issues (1)
Risk Factors
⚙️ External commands (7)
🌐 Network access (1)
🔑 Env variables (1)
Quality Score
What You Can Build
Launch a Side Project Landing Page
A developer building a CLI tool or open source project needs a landing page but has no design experience. This skill runs a brand interview and generates a professional page.
Create a Startup Marketing Site
An early-stage startup needs a landing page for their SaaS product. The skill helps define brand identity and produces a page with features, pricing, and testimonials sections.
Build a Developer Portfolio Page
A developer or designer wants a personal portfolio landing page. The skill conducts a brand interview and generates a page with featured projects and about sections.
Try These Prompts
Create a landing page for my project called [Project Name]. It is a [description]. The target users are [audience].
I want to design a landing page for my product [Project Name]. Let me go through the brand interview to define my visual identity first.
The hero section on my landing page feels too plain. Can you generate a variant with a bolder layout and more color contrast? Keep the color scheme.
I have a saved design session from yesterday. Resume from where I left off and help me finalize the bundle for deployment.
Best Practices
- Complete the brand interview even if you want to skip it. The questions take 5 minutes and make the difference between a generic template and a page that fits your product.
- Review generated pages by opening the HTML in your browser rather than asking for text descriptions. Visual feedback leads to better design iterations.
- Save your Stitch API key in your environment before starting so the skill can generate and iterate on designs without interruption.
Avoid
- Asking the skill to embed your company logo or upload images. The Stitch SDK generates from text prompts and does not accept image inputs.
- Providing CSS-level feedback like adding padding-top 40px. Translate feedback into design intent such as add more breathing room above the headline.
- Skipping the mobile variant. The desktop layout often needs adjustments for mobile viewing and generating both ensures a consistent experience.
Frequently Asked Questions
Do I need a Stitch account to use this skill?
What happens if my session is interrupted?
Can I use my own brand colors?
Does this skill work with images and logos?
What kind of pages can this skill create?
Can I edit the HTML after generation?
Developer Details
Author
wshobsonLicense
MIT
Repository
https://github.com/wshobson/agents/tree/main/plugins/brand-landingpage/skills/brand-landingpage/Ref
main
File structure