brand-landingpage작성자 Seth Hobson

Brand Landing Page 스킬.

Claude Code 및 Codex용 UI 디자인 스킬: 브랜드 아이덴티티 인터뷰를 먼저 진행한 후 Stitch를 통해 랜딩 페이지를 생성하고 반복합니다.

Web & UI
UI 코드

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

2026-09-14 업스트림 파일에서 읽은 서문 및 섹션 제목 · 전체 15,626자

01 기능

Claude Code와 Codex에서 brand-landingpage Skill이 수행하는 작업

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

제품 목적, 브랜드 느낌, 시각적 선호도의 3부 인터뷰를 진행하는 브랜드 우선 랜딩 페이지 디자이너입니다. 답변을 Stitch 디자인 시스템으로 변환하고(형용사를 colorVariant에, 폰트를 headlineFont/bodyFont에, 형태를 roundness에 매핑), 데스크톱과 모바일 화면을 생성하며, 구조화된 피드백(변형, 편집, 롤백)을 통해 반복적인 개선을 유도하고, 버전이 지정된 HTML, DESIGN.md, 색상 토큰, DEPLOY.md가 포함된 배포 준비 완료 번들을 제공합니다.

확립된 시각적 방향이 없는 단일 목적 랜딩 페이지나 제품 마케팅 사이트를 제작하는 사용자를 위한 것입니다. 대시보드, 다중 페이지 앱, 컴포넌트 단위 작업 또는 기존 디자인 목업이 있는 사용자를 위한 것이 아닙니다.

산출물

index.html(데스크톱), mobile.html(생성된 경우), DESIGN.md, color-tokens.json, 사용자 자산, DEPLOY.md 체크리스트가 포함된 배포 준비 완료 zip 번들
브랜드 느낌, 16진수 값과 근거가 있는 색상 방향, 타이포그래피 선택, 형태 라운드 설명을 포함해 디자인 시스템을 문서화하는 DESIGN.md
기본 색상, colorMode, colorVariant, 폰트, roundness 등 구조화된 디자인 토큰이 담긴 color-tokens.json
references/state-and-pitfalls.md의 템플릿에서 생성된 배포 체크리스트 DEPLOY.md

예시 프롬프트 보기 ↗

작동 방식

01
Stitch SDK 및 환경 확인
인터뷰를 시작하기 전에 skill은 누락된 경우 SDK를 설치하고, API 키 환경 변수가 설정되어 있는지 확인한 다음, 인증을 확인하기 위해 최소한의 SDK 호출 하나를 수행합니다.
02
3부로 구성된 브랜드 인터뷰 실행
A 단계에서는 제품명, 제품이 하는 일, 목표 사용자, 원하는 CTA를 파악합니다. B 단계에서는 브랜드 형용사 3개와 라이트/다크 선호도를 파악합니다.
03
인터뷰를 Stitch 파라미터로 변환
skill은 변환 표를 사용해 브랜드 형용사를 colorVariant 열거값에, 라이트/다크를 colorMode에, 폰트 선호도를 headlineFont와 bodyFont에, 각짐/둥글림을 roundness 열거값에 매핑합니다.
04
화면 생성 및 브라우저에서 열기
skill은 deviceType DESKTOP으로 generate_screen_from_text를 호출하고, 반환된 HTML을 .stitch/designs/에 desktop-v1.html로 저장한 다음, OS별 명령을 사용해 로컬에서 엽니다.
05
피드백 루프 반복하기
각 생성이 끝나면 스킬은 세 가지 피드백 질문을 던지고, 사용자 피드백을 세부 수정을 위한 edit_screens 호출이나 탐색을 위한 generate_variants 호출로 변환한 뒤, 새 버전을 증가된 파일명으로 저장합니다.
06
배포 번들 전달하기
이 스킬은 최종 HTML을 index.html로 이름을 바꾸고, 생성된 경우 mobile.html, 브랜드 시스템을 문서화한 DESIGN.md, color-tokens.json, 사용자 자산, 그리고 DEPLOY.md 체크리스트를 포함한 zip 파일을 생성합니다.

02 적합성 확인

brand-landingpage Skill을 사용해야 하는 경우

이러한 종류의 UI 디자인 작업에는 Claude Code 또는 Codex에서 brand-landingpage 스킬을 사용하십시오. 아래 적합성과 제한사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

사용자가 랜딩 페이지, 홈페이지, 마케팅 페이지의 생성, 디자인, 제작을 요청했지만 확립된 비주얼 방향이 없는 경우
사용자가 제품, 사이드 프로젝트, 서비스를 만들었고 랜딩 페이지가 필요하지만 브랜드 아이덴티티나 비주얼 방향에 대해 깊이 고민하지 않은 경우
단일 목적 랜딩 페이지 및 제품 마케팅 사이트

한계 인지하기

사용자가 디자인 목업을 가지고 있는 경우
사용자가 대시보드나 앱 UI가 필요한 경우
사용자가 컴포넌트 수준에서 작업하는 경우
사용자가 멀티페이지 앱을 만들거나 알려진 디자인 토큰으로 리스타일링하는 경우(대신 frontend-design 사용)

제공할 사항

제품명과 목적제품이 무엇을 하는지, 목표 사용자가 누구인지, 방문자가 취해야 할 행동(가입, 데모 사용, 대기자 명단 등록)이 무엇인지.
세 가지 브랜드 형용사이 스킬은 선택할 수 있는 형용사 메뉴를 제공합니다. Phase B에서 Phase C로 넘어가기 위해 필수입니다.
밝은 톤 또는 어두운 톤 선호Stitch 디자인 시스템의 colorMode 매개변수(LIGHT 또는 DARK)에 직접 매핑됩니다.
색상 방향기존 브랜드나 앱 색상을 16진수 값으로, 확립된 팔레트가 없다면 색상에 대한 느낌으로 제공합니다. customColor 매개변수에 매핑됩니다.
글꼴 및 형태 선호모던 대 전통적 글꼴 선호는 headlineFont와 bodyFont에 매핑됩니다.

03 스킬 내부

brand-landingpage 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트를 위해 설정하는 7가지 구체적 지침, 기본값, 한도 — 결과를 바꾸는 파일의 부분

API 키를 절대 표시하지 않기
환경을 확인하거나 인증 실패를 진단할 때 스킬은 Stitch API 키를 절대 표시, 전사, 또는 반복 출력해서는 안 됩니다.
이미지를 요청하지 않기
Stitch는 API를 통한 이미지 업로드를 받지 않으므로, 스킬은 사용자에게 이미지나 로고를 제공하도록 요청해서는 안 됩니다.
HTML 파일을 순차적으로 버전 관리하기
생성된 HTML을 첫 번째 생성에는 desktop-v1.html로, 다음 반복에는 desktop-v2.html로 저장하며, 이후로도 같은 방식으로 계속합니다.
업데이트된 HTML을 항상 브라우저에서 열기
생성, 편집 또는 변형 선택이 끝날 때마다 스킬은 Stitch 응답으로부터 업데이트된 HTML을 저장하고 사용자의 브라우저에서 로컬 파일을 열어야 합니다.
긍정적인 피드백 3회 후 출시 제안
긍정적인 피드백이 3회 이어지면 스킬은 다음과 같이 물어야 합니다: '지금 상태가 견고해 보입니다. 계속 반복할까요, 아니면 출시 후 나중에 다듬을까요?'
협의 불가능한 네 가지 인터뷰 답변
스킬은 Phase A에서 Phase B로 넘어가기 전에 프로젝트명, 하는 일, 타깃 사용자, 원하는 CTA를 수집해야 합니다. 이 네 가지는 협의 대상이 아닙니다.
실패한 생성 작업을 즉시 재시도하지 마세요
생성이 실패하면 즉시 재시도하지 마세요. get_screen 또는 list_screens를 사용해 비동기적으로 완료되었는지 확인하세요.

04 활용하기

Claude Code 또는 Codex에 brand-landingpage 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 Agent에 brand-landingpage 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

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

plugins/brand-landingpage/skills/brand-landingpage/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소가 자체 경로를 문서화할 수도 있습니다.

스킬에 첫 UI 디자인 작업 부여하기

SKILL.md에는 예제 프롬프트가 포함되어 있지 않습니다. 이 스타터는 카탈로그 한 줄 설명에서 작성되었습니다. 작업 줄을 실제 브리프로 교체하십시오.

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.

출처: SKILL.md가 아닌 카탈로그 한 줄 사용 설명에서 작성된 스타터 프롬프트입니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

OS별 명령(macOS는 open, Linux는 xdg-open, Windows는 start)을 사용해 저장된 HTML 파일을 사용자의 브라우저에서 열어 디자인을 완전한 품질로 확인합니다
세 가지 피드백 질문을 합니다: 첫 5초의 직감적 반응, 이것이 당신의 제품처럼 느껴지는지, 잘못되었거나 빠진 것처럼 느껴지는 부분이 있는지
구체적인 디자인 차원으로 사용자의 주의를 이끕니다: 메시지 명확성, CTA 가시성, 사용자가 제시한 형용사와의 색상 일치, 읽기 흐름
세션을 재개할 때 .stitch/metadata.json이 존재하며 프로젝트 ID, 디자인 시스템 에셋 ID, 인터뷰 요약, 화면 기록을 포함하는지 확인합니다
호스팅, 도메인 설정, 애널리틱스, 이미지 교체를 다루는 DEPLOY.md의 배포 체크리스트를 따릅니다

OpenDesign에서 SKILL.md 링크로부터 brand-landingpage를 가져옵니다: Plugins → Add → Skill → Import from link, 그 다음 상단 바에서 선택하세요.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
스킬 파일: plugins/brand-landingpage/skills/brand-landingpage/SKILL.md 검증 시 기록된 콘텐츠 체크섬, 커밋 4236bb9
License: MIT LICENSE에서.
리포지토리 스타: 39,635 이 카탈로그에 18개의 스킬이 포함된 전체 wshobson/agents 저장소에 대해 2026-09-14에 가져온 GitHub 스냅샷입니다. brand-landingpage에 대한 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

0단계: 사전 요구사항 및 Stitch 연결인터뷰를 시작하기 전에 SDK 설치, API 키 환경 변수를 확인하고 최소한의 테스트 호출을 수행합니다
참조 파일워크플로 진행 중 interview-framework.md, stitch-architecture.md, state-and-pitfalls.md를 언제 읽어야 하는지 나열합니다
워크플로 개요네 단계: 설정, 3부로 구성된 인터뷰, 디자인 시스템 변환, 생성 및 검토 루프, 전달 패키지
1단계: 브랜드 인터뷰세 부분: 제품 목적, 형용사로 표현한 브랜드 느낌, 색상·폰트·형태에 대한 시각적 선호
2단계: 디자인 시스템 생성매핑 테이블을 사용해 인터뷰 답변을 Stitch 파라미터로 변환하고, 디자인 시스템을 생성·업데이트하며, DESIGN.md를 작성합니다
3단계: 생성 및 검토 루프데스크톱 화면을 생성하고, 브라우저에서 열고, 세 가지 질문으로 피드백을 수집하고, 편집 또는 변형으로 반복합니다
4단계: 전달 패키지최종 HTML, DESIGN.md, 색상 토큰, 사용자 에셋, DEPLOY.md 체크리스트를 버전이 지정된 zip으로 패키징합니다
Stitch 문서stitch-design.ai의 SDK 사용 문서와 DESIGN.md 예시 링크
재개 및 오류 복구metadata.json에서 상태를 불러오고, 재개 시 생성 실패, 속도 제한, 만료된 프로젝트를 처리합니다

스킬 자체 설명

"브랜드 우선 랜딩 페이지 디자이너 — 브랜드 아이덴티티 인터뷰(색상, 타이포그래피, 형태 언어)를 실행한 다음 Stitch를 통해 배포 준비가 완료된 HTML로 세련된 랜딩 페이지를 생성하고 반복합니다. 사용자가 랜딩 페이지, 홈페이지 또는 마케팅 페이지를 만들거나 디자인하거나 구축하도록 요청하고 확립된 시각적 방향이 없을 때 사용하십시오. 디자인 목업이 있거나, 대시보드 또는 앱 UI가 필요하거나, 컴포넌트 수준에서 작업하거나, 다중 페이지 앱을 구축하거나, 알려진 디자인 토큰으로 리스타일링하는 경우 건너뛰십시오 — 대신 frontend-design을 사용하십시오."

SKILL.md의 프론트 매터 설명입니다. 전체 파일은 약 15,626자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

brand-landingpage 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

제 로고나 제품 스크린샷을 제공할 수 있나요?

Stitch는 텍스트 프롬프트로부터 생성하며 API를 통한 이미지 업로드는 받지 않습니다. 이미지를 첨부하면 스킬이 주요 색상, 분위기, 형태 언어를 직접 설명해 달라고 요청한 뒤 해당 속성들을 디자인에 반영합니다.

원본 파일은 번들에 저장되므로 간단한 img 태그 교체를 통해 최종 HTML에 넣을 수 있습니다.

왜 바로 생성으로 넘어가지 않고 인터뷰를 거쳐야 하나요?

인터뷰는 대부분의 가치가 만들어지는 단계입니다. 인터뷰 없이는 결과물이 일반적인 템플릿에 그칠 것입니다.

인터뷰는 약 5분이 걸리며 제품의 목적, 타깃 사용자, 브랜드 형용사, 시각적 선호도를 파악합니다. 스킬은 이를 바탕으로 획일적인 결과물이 아니라 실제로 귀사의 브랜드에 맞는 디자인 시스템으로 변환합니다.

최종적으로 무엇을 받게 되나요?

index.html로 이름이 변경된 최종 데스크톱 HTML, 모바일 변형을 요청한 경우 mobile.html, 브랜드 디자인 시스템을 문서화한 DESIGN.md, 구조화된 디자인 토큰이 담긴 color-tokens.json, 사용자가 제공한 자산, 배포 체크리스트가 담긴 DEPLOY.md가 포함된 배포 준비 완료 zip 번들을 받게 됩니다. 모든 중간 버전과 상태는 참고를 위해 .stitch/에 보존됩니다.

Brand Landing Page

실제 UI 디자인 작업에서 brand-landingpage를 실행합니다.

OpenDesign을 다운로드하고, SKILL.md 링크에서 brand-landingpage를 가져오고, 위의 프롬프트를 붙여넣고, 결과 전에 계획을 읽으십시오.

OpenDesign 다운로드 모든 스킬 보기

터미널

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