스킬 brand-landingpage
📦

brand-landingpage

낮은 위험 ⚙️ 외부 명령어🌐 네트워크 접근🔑 환경 변수

인터랙티브 인터뷰를 활용한 브랜드 우선 랜딩 페이지 디자인

대부분의 랜딩 페이지는 브랜드 아이덴티티 단계를 건너뛰기 때문에 실패합니다. 이 스킬은 사용자를 체계적인 브랜드 인터뷰로 안내한 후, Stitch SDK를 사용하여 일치하는 디자인 시스템이 적용된 세련된 랜딩 페이지를 생성합니다.

지원: Claude Codex Code(CC)
🥉 73 브론즈
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"brand-landingpage" 사용 중입니다. DataPipe라는 API 도구의 랜딩 페이지를 만들어 주세요

예상 결과:

스킬이 제품 목적에 대해 질문한 후, 깔끔함, 기술적, 현대적 같은 3가지 브랜드 형용사를 선택하도록 안내합니다. 인디고 악센트가 있는 다크 테마를 확인한 후, 히어로, 코드 스니펫, 기능, 푸터 섹션이 포함된 데스크톱 랜딩 페이지를 생성합니다.

"brand-landingpage" 사용 중입니다. 색상이 어색한데, 변경할 수 있나요?

예상 결과:

스킬이 색상의 어떤 점이 문제인지 묻습니다: 너무 밝은지, 너무 칙칙한지, 아니면 색조가 잘못되었는지. 너무 밝다고 답하면 동일한 레이아웃에 색상 채도만 조정된 부드러운 변형을 생성합니다.

"brand-landingpage" 사용 중입니다. 다양한 레이아웃 옵션을 비교하고 싶습니다

예상 결과:

스킬이 중앙 정렬 히어로, 분할 레이아웃, 전체 너비 헤더의 3가지 랜딩 페이지 변형을 생성합니다. 세 가지를 모두 브라우저 탭에서 열고 선호하는 방향을 물어봅니다.

보안 감사

낮은 위험
v2 • 5/23/2026

All 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.

4
스캔된 파일
841
분석된 줄 수
4
발견 사항
2
총 감사 수
낮은 위험 문제 (1)
Hardcoded Documentation URLs
SKILL.md contains hardcoded URLs pointing to Stitch SDK documentation. These are legitimate documentation links but represent external network references in the skill instructions.
감사자: claude 감사 이력 보기 →

품질 점수

45
아키텍처
100
유지보수성
87
콘텐츠
43
커뮤니티
83
보안
100
사양 준수

만들 수 있는 것

사이드 프로젝트 랜딩 페이지 출시

CLI 도구나 오픈 소스 프로젝트를 구축하는 개발자가 랜딩 페이지는 필요하지만 디자인 경험이 없을 때, 이 스킬이 브랜드 인터뷰를 진행하고 전문적인 페이지를 생성합니다.

스타트업 마케팅 사이트 제작

초기 스타트업이 SaaS 제품용 랜딩 페이지를 필요로 할 때, 이 스킬이 브랜드 아이덴티티 정의를 돕고 기능, 가격, 사용후기 섹션이 포함된 페이지를 생성합니다.

개발자 포트폴리오 페이지 구축

개발자나 디자이너가 개인 포트폴리오 랜딩 페이지를 원할 때, 이 스킬이 브랜드 인터뷰를 진행하고 주요 프로젝트와 소개 섹션이 포함된 페이지를 생성합니다.

이 프롬프트를 사용해 보세요

빠른 랜딩 페이지 요청
[프로젝트 이름] 프로젝트의 랜딩 페이지를 만들어 주세요. 이 프로젝트는 [설명]입니다. 대상 사용자는 [대상]입니다.
전체 브랜드 인터뷰 워크플로우
[프로젝트 이름] 제품의 랜딩 페이지를 디자인하고 싶습니다. 먼저 브랜드 인터뷰를 통해 시각적 아이덴티티를 정의하겠습니다.
반복적 디자인 개선
랜딩 페이지의 히어로 섹션이 너무 밋밋해요. 더 대담한 레이아웃과 더 높은 색상 대비로 변형을 생성해 주세요. 색상 구성은 유지해 주세요.
저장된 세션 재개
어제 저장한 디자인 세션이 있습니다. 중단한 부분부터 이어서 배포용 번들을 마무리하는 것을 도와주세요.

모범 사례

  • 건너뛰고 싶더라도 브랜드 인터뷰를 완료하세요. 질문은 5분 정도 소요되며, 일반 템플릿과 제품에 맞는 페이지의 차이를 만듭니다.
  • 텍스트 설명을 요청하는 대신 HTML을 브라우저에서 열어 생성된 페이지를 검토하세요. 시각적 피드백이 더 나은 디자인 반복으로 이어집니다.
  • 스킬이 중단 없이 디자인을 생성하고 반복할 수 있도록 시작 전에 Stitch API 키를 환경 변수에 저장하세요.

피하기

  • 스킬에 회사 로고를 삽입하거나 이미지를 업로드하도록 요청하는 것. Stitch SDK는 텍스트 프롬프트로 생성하며 이미지 입력을 받지 않습니다.
  • padding-top: 40px 추가하기 같은 CSS 수준의 피드백을 제공하는 것. 피드백을 '헤드라인 위에 여백을 더 추가'와 같은 디자인 의도로 변환하세요.
  • 모바일 변형을 건너뛰는 것. 데스크톱 레이아웃은 종종 모바일 보기에 맞게 조정이 필요하며, 둘 다 생성해야 일관된 경험을 보장할 수 있습니다.

자주 묻는 질문

이 스킬을 사용하려면 Stitch 계정이 필요한가요?
네. 이 스킬은 Stitch SDK를 사용하여 랜딩 페이지 디자인을 생성합니다. Stitch 계정과 API 키가 필요합니다.
세션이 중단되면 어떻게 되나요?
스킬은 진행 상황을 metadata.json 파일에 저장합니다. 다시 돌아오면 저장된 상태를 확인하고 중단한 부분부터 재개합니다.
자체 브랜드 색상을 사용할 수 있나요?
네. 브랜드 인터뷰 중에 브랜드 색상의 기존 HEX 값을 제공할 수 있습니다. 스킬이 이를 디자인 시스템에 매핑합니다.
이 스킬은 이미지와 로고와 함께 작동하나요?
아니요. Stitch SDK는 텍스트 프롬프트로만 페이지를 생성합니다. 사용자가 제공한 이미지는 수동 삽입을 위해 출력 번들에 저장됩니다.
이 스킬로 어떤 종류의 페이지를 만들 수 있나요?
단일 목적의 랜딩 페이지 및 제품 마케팅 사이트입니다. 다중 페이지 애플리케이션, 대시보드 또는 문서 사이트는 해당되지 않습니다.
생성 후 HTML을 편집할 수 있나요?
스킬은 먼저 Stitch SDK를 통해 반복 개선할 것을 권장합니다. 승인 후 최종 HTML 출력을 수동으로 편집할 수 있습니다.

개발자 세부 정보