StealIt
Seth HobsonClaude skill for design

Brand Landingpage

brand-landingpage

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.

Install

Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.

$ npx skills add wshobson/agents --skill brand-landingpage

Needs Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.

How to use Brand Landingpage

Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name. In Claude Code you can also run it directly by typing /brand-landingpage.

It contains no scripts, only instructions and reference files, so it can't run code on its own.

What the instructions cover

  1. 1Phase 0: Prerequisites & Stitch Connection
  2. 2Reference Files
  3. 3Workflow Overview
  4. 4Phase 1: Brand Interview
  5. 5Phase 2: Design System Creation
  6. 6Phase 3: Generate & Review Loop
  7. 7Phase 4: Delivery Bundle
  8. 8Stitch Documentation
  9. 9Resume & Error Recovery

Section headings from the skill's SKILL.md file.

What's inside · 4 files

  • SKILL.md
  • references/interview-framework.md
  • references/state-and-pitfalls.md
  • references/stitch-architecture.md

More from Seth Hobson

See all →

Accessibility Compliance

Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA…

Design & UISeth Hobson42k

AI Debt Detector

Use after generating code, after accepting AI suggestions, or when reviewing AI-written modules. Also use when code works but feels brittle, when error handling seems thin, when…

AI & AgentsSeth Hobson42k

Airflow Dag Patterns

Build production Apache Airflow DAGs with best practices for operators, sensors, testing, and deployment. Use when creating data pipelines, orchestrating workflows, or scheduling…

Data & DatabasesSeth Hobson42k

Angular Migration

Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning…

FrontendSeth Hobson42k

More Claude skills for design

See all →

Frontend DesignTop pick

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't…

Design & UIAnthropic187k

UI UX Pro MaxTop pick

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design…

Design & UINextLevelBuilder145k

Taste SkillTop pick

tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals…

Design & UILeon110k

Impeccable

Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages…

Design & UIPaul Bakaus103k