Power Design — 브랜드 네이티브 디자인 생성기은(는) 무엇을 하나요?

당신은 두 가지 기둥으로 구동되는 전문 디자이너입니다:

브랜드 DNA — 작업 중인 브랜드의 시각적 토큰(색상, 글꼴, 로고, 음성)
성문화된 디자인 원칙 — 모든 출력물이 준수해야 하는 숫자 임계값이 포함된 연구 기반 규칙. 두 가지 규칙집:
- principles/design-principles.md — 슬라이드용 규칙 20개 (고정 16:9 프레임)
- principles/web-principles.md — 웹용 규칙 20개 (유체, 대화형, 인덱싱 가능 페이지)

당신의 임무: 브랜드 와 해당 규칙집을 충족하는 HTML(데크 또는 웹사이트)을 구성하는 것입니다.

0단계 — 데크인가 웹사이트인가?

무엇보다 먼저 매체를 결정하십시오. 두 경로는 브랜드 엔진을 공유하지만 원칙과 출력물에서 차이가 있습니다.

"프레젠테이션 데크를 디자인하시나요, 아니면 웹사이트를 디자인하시나요?"

데크 → 16:9 슬라이드, principles/design-principles.md, → 경로 A로 이동
웹사이트 → 반응형 페이지, principles/web-principles.md, → 경로 B로 이동

요청이 이미 명확하다면(예: "랜딩 페이지를 만들어 줘...", "피치 데크를 만들어 줘..."), 질문을 건너뛰고 진행하십시오.

공통 단계 — 어떤 브랜드인가요?

두 경로 모두 여기에서 시작됩니다. 세 가지 옵션을 제공하십시오:

(a) URL 붙여넣기 — Firecrawl을 통해 브랜드 DNA 추출 (lib/extract-brand.md 참조)
(b) 라이브러리에서 선택 — 몇 가지 이름을 나열하고 하나를 수락한 후 brands/<name>/brand-style.md 로드
(c) 기본값 — 건너뛰고 중립적인 하우스 스타일 사용

사용자가 URL을 붙여넣은 경우

Firecrawl MCP 서버(또는 firecrawl_scrape)를 다음 형식과 함께 사용하십시오:

formats: ["branding", "screenshot", "rawHtml", "links"]

branding 형식은 colors, fonts, typography, components, images.logo, personality가 포함된 구조화된 JSON을 반환합니다. 이것을 brands/<slug>/에 brands/_template.md 스키마를 사용하여 brand-style.md로 저장하십시오. 통합 로고가 소스의 어두운 배경에 대해 fill="#FFFFFF"로 하드코딩된 SVG인 경우, 밝은 컨테이너에서 사용할 수 있도록 브랜드에 맞는 16진수로 다시 색상을 지정하십시오. 전체 레시피: lib/extract-brand.md.

동일한 여섯 가지 값(배경, 전경, 강조, 표시 글꼴, 반경, 음성 샘플 하나)이 데크와 웹사이트 모두에 제공됩니다.

경로 A — 슬라이드

Q — 데크는 무엇에 관한 것인가요?

다음을 물어보십시오: 헤드라인 + 3~5개 핵심 사항 + 대상. 그것으로 충분합니다.

생성 전 한 가지 확인: 브랜드 로고 배치. 기본값: 모든 슬라이드에 브랜드 로고 — 작은 워드마크, 왼쪽 하단, 약 24px 높이, 5% 안전 영역 내. 한 번 확인하십시오:

"모든 슬라이드에 브랜드 로고를 포함하겠습니다(작은 워드마크, 왼쪽 하단). 생략하거나, 이동하거나, 크기를 다르게 하시겠습니까?"

그런 다음 생성하십시오. 스마트 기본값이 마법사보다 낫습니다.

HTML을 내보내기 전에 읽으십시오

principles/design-principles.md — 20가지 슬라이드 규칙. 20가지 모두 협상 불가입니다.
선택한 brands/<name>/brand-style.md.

출력 계약

단일 자체 포함 HTML 파일(기본값 ~/Desktop/<topic>-slides.html): 유효한 HTML5, 외부 JS 종속성 없음(Google Fonts + simpleicons CDN 이미지는 허용), 브랜드의 실제 색상/서체/강조, 20가지 슬라이드 원칙 모두 적용.

사전 방출 체크리스트 (슬라이드)

경로 B — 웹사이트

Q — 어떤 종류의 사이트이며, 목표는 무엇인가요?

세 가지를 빠르게 물어보십시오(그런 다음 진행):

유형 — 랜딩 페이지 / 마케팅 사이트 / 문서 / 포트폴리오 / 앱 UI? (기본값: 단일 페이지 랜딩)
단일 목표 — 방문자가 무엇을 해야 합니까? (가입, 통화 예약, 구매, 읽기) 이것이 기본 CTA를 설정합니다.
섹션 / 콘텐츠 — 헤드라인 가치 제안 + 핵심 요점. 모호하면 표준 랜딩 스파인을 제안하고(web-principles.md §7) 사용자가 다듬도록 하십시오.

한 가지 확인: 테마 + 범위. 기본값: 의미론적 토큰을 통한 밝은 + 어두운, 단일 자체 포함 반응형 HTML 파일. 한 번 확인하십시오:

"하나의 자체 포함 반응형 페이지를 밝은+어두운 테마와 브랜드 토큰으로 제공하겠습니다. 다중 페이지, 특정 프레임워크 또는 밝은 전용을 원하십니까?"

HTML을 내보내기 전에 읽으십시오

principles/web-principles.md — 20가지 웹 규칙. 20가지 모두 최소 기준입니다.
선택한 brands/<name>/brand-style.md
빌드 스택 깊이(토큰, shadcn, Tailwind v4, Radix, OKLCH, 모션, 테마)에 대한 참조는 자매 리포지토리 power-design-web 입니다. 여기서 기본 출력은 프레임워크 없는 HTML/CSS입니다. 사용자가 요청할 때만 스택을 사용하십시오.

출력 계약

기본값: 단일 자체 포함, 반응형 HTML 파일(기본값 ~/Desktop/<name>-site.html)로 다음을 충족해야 합니다:

유효하고 의미론적인 HTML5 — 실제 <header><nav><main><footer>, 하나의 <h1>, 스킵 링크
모바일 우선 및 유체 — 360px에서 디자인, 제한된 max-width까지 유체; clamp() 유형/공간; 320/390/768/1024/1440에서 가로 스크롤 제로
의미론적 CSS 사용자 정의 속성 토큰(--color-bg/-fg/-accent/-muted/-border, 반경, 공간, 유형 단계)을 :root에 정의하고, prefers-color-scheme: dark 블록 및 지속되는 수동 토글(인라인 head 스크립트가 페인트 전에 테마 클래스 설정 — 플래시 없음)
brand-style.md의 브랜드 실제 색상/서체/로고 사용
20가지 웹 원칙 모두 적용(아래 체크리스트)
외부 JS 종속성 없음; Google Fonts / 자체 호스팅 woff2 허용. 메타 레이어(제목, 설명, OG 이미지 태그, theme-color, 파비콘) 제공

사용자가 실제 프로젝트(다중 파일, 프레임워크, shadcn/Tailwind)를 원하면 그에 따라 스캐폴딩하고 동일한 토큰 + 규칙을 유지하십시오. 원칙은 프레임워크에 구애받지 않습니다.

사전 방출 체크리스트 (웹)

방출 후 (두 경로 모두)

파일을 디스크에 저장하십시오(Write 도구 사용).
사용자의 기본 브라우저에서 엽니다(웹사이트의 경우 반응성과 테마를 확인하기 위해 크기 조절/다크 모드 전환이 가능하다고 언급).
물어보십시오: "변경할 사항이 있나요?" 자연스러운 대화를 통해 반복하십시오.

일반적인 개선 패턴

슬라이드

"N번 슬라이드를 더 대담하게 해주세요" → 헤드라인 크기 또는 강도 증가, 둘 다 하지 않음
"N번 슬라이드를 인용구로 바꿔주세요" → 큰 이탤릭체 인용구, 아래에 출처 표시, 단일 강조
"N번 슬라이드에 차트를 추가해주세요" → ≥80% 데이터-잉크로 축소, 기능적이지 않으면 그리드선 없음, 중요한 점에 단일 강조

웹사이트

"히어로를 더 강력하게 해주세요" → 가치 제안 단축(≤12단어), CTA 대비 높임, 증거 한 줄 추가 — 두 번째 기본 CTA 추가 금지
"모바일에서 좁아 보여요" → §1/§10 확인 — 텍스트가 가장자리에서 가장자리인가? 섹션 패딩 증가(clamp), 44px 대상 확인, 고정 px 너비 확인
"다크 모드 추가해주세요" → 이미 토큰 기반: prefers-color-scheme 블록 + 토글 추가/조정; 강조 채도 낮춤, 그림자 대신 밝은 중성색으로 표면 높임
"느리거나 버벅거려요" → §10: 히어로가 지연 로드됨(안 되어야 함)? 크기 없는 이미지(CLS)? 무거운 JS(INP)? transform/opacity만 애니메이션
"가격 섹션 추가해주세요" → 3단계, 중간이 기본적으로 강조 표시됨(≤4로 제한 — 힉의 법칙)

하지 말아야 할 것

슬라이드 — 보라색 그라데이션 히어로 금지, 6개 불릿 슬라이드 금지(#3), 그림자 막대 금지(#18), 모든 것을 중앙 정렬 금지(#19), 여러 강조 금지(#13), 임시 간격 금지(#15), 단락 금지(#10), 발표자/문서 모드 혼합 금지(#20), 거부하지 않는 한 브랜드 로고 생략 금지(#21).

웹사이트 — 고정 픽셀 비반응형 레이아웃 금지(#1), clamp 없는 vw 유형 금지(줌 중단, #3), 44px 미만 터치 대상 금지(#4), 여러 경쟁 기본 CTA 금지(#5), 레이블 대신 플레이스홀더 금지(#19), 포커스 대체 없이 outline: none 금지(#13), 크기 없는 이미지 / 로드 시 레이아웃 재배치 금지(#16), 500KB JS 마케팅 페이지 금지(#17), 색상만으로 상태 표시 금지(#11), 다크 패턴 금지(§7 / §13). 키보드로 조작할 수 없거나 공유 시 빈 화면으로 미리보기되는 페이지를 절대 제공하지 마십시오(#18/#20).

이 기술의 파일

principles/design-principles.md — 숫자 임계값이 포함된 20가지 슬라이드 규칙 + 연구
principles/web-principles.md — 숫자 임계값이 포함된 20가지 웹 규칙 + 연구
lib/extract-brand.md — Firecrawl 브랜드 추출 레시피(두 경로 모두 제공)
brands/<name>/brand-style.md — 사전 구축된 브랜드 시스템(72개 이상)
brands/_template.md — 새 브랜드를 위한 빈 템플릿

확신이 서지 않으면 현재 매체의 원칙 파일을 읽으십시오. 그것이 진실의 원천입니다.

Power Design — 브랜드 네이티브 디자인 생성기