사용 가이드로 건너뛰기
Power Design작성자 ItsssssJack

Power Design 스킬.

먼저 매체를 선택한 다음, 슬라이드와 웹사이트의 요구 사항을 혼동하지 않고 브랜드를 적용하세요.

  • 웹 디자인
  • 프레젠테이션
  • 브랜드 시스템
소스 검토 · Power DesignSKILL.md
작업 웹 디자인 생성물 • HTML 프레젠테이션 또는 반응형 웹사이트. 연결된 글꼴과 이미지는 네트워크 접근이 필요할 수 있습니다. • 새 소스 브랜드를 추출할 때 재사용할 수 있는 브랜드 스타일 기록. • 콘텐츠, 레이아웃, 접근성에 대해 슬라이드 또는 웹사이트 체크리스트로 검토한 결과물. 시작하기 전에 URL 기반 브랜드 추출에는 Firecrawl이 필요합니다. 기본 결과물은 외부 JavaScript 의존성을 피하지만, 글꼴이나 이미지 에셋은 여전히 각각의 사용 가능 여부와 권리 확인이 필요할 수 있습니다.
편집 요약 · 검토한 소스 2026-10-07 · 생성된 예시 아님

01 기능 소개

브랜드 중심의 HTML 덱 또는 웹사이트 만들기

공통 브랜드 추출과 프레젠테이션 및 반응형 웹사이트용 별도 규칙을 갖춘 HTML 디자인 워크플로입니다.

소스 기반 워크플로실행 벤치마크 아님

작동 방식

Power Design에는 브랜드 기반을 공유하는 두 가지 출력 경로가 있습니다. 고정 프레임 HTML 프레젠테이션과 반응형 웹사이트입니다. Firecrawl을 통한 브랜드 URL, 번들된 브랜드 스타일 또는 중립 기본값을 사용할 수 있습니다. 이후 동일한 배경, 전경, 강조색, 글꼴, 모서리 반경, 어조 참조가 각 매체별 규칙에 반영됩니다.

이 구분이 중요한 이유는 투사되어 읽히는 슬라이드와 사용 가능한 웹 페이지의 제약이 다르기 때문입니다. 슬라이드 경로는 제한된 콘텐츠 양, 안전 영역, 하나의 시각적 포인트, 명확한 발표 모드를 강조합니다. 웹사이트 경로는 반응형 레이아웃, 시맨틱 구조, 키보드 접근, 테마 동작, 폼, 메타데이터를 추가합니다. 이는 설계 목표이며 측정된 성능 결과가 아닙니다.

예상 결과물

  • HTML 프레젠테이션 또는 반응형 웹사이트. 연결된 글꼴과 이미지는 네트워크 접근이 필요할 수 있습니다.
  • 새 소스 브랜드를 추출할 때 재사용할 수 있는 브랜드 스타일 기록.
  • 콘텐츠, 레이아웃, 접근성에 대해 슬라이드 또는 웹사이트 체크리스트로 검토한 결과물.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    덱 또는 웹사이트 선택

    규칙이나 캔버스를 고르기 전에 출력 매체를 먼저 정합니다.

  2. 02
    브랜드 입력 확보

    권한이 있는 URL 추출, 기존 라이브러리 스타일 또는 중립 기본값을 사용합니다.

  3. 03
    알맞은 규칙서 적용

    슬라이드에는 프레젠테이션 제약을, 웹사이트에는 반응형 상호작용 요구 사항을 적용합니다.

  4. 04
    저장 및 확인

    결과물을 열어 매체별 동작을 검토하고, 실제 결과를 바탕으로 반복 개선합니다.

02 활용 상황

사용 시기

URL 기반 브랜드 추출에는 Firecrawl이 필요합니다. 기본 결과물은 외부 JavaScript 의존성을 피하지만, 글꼴이나 이미지 에셋은 여전히 각각의 사용 가능 여부와 권리 확인이 필요할 수 있습니다.

적합한 경우

  • 브랜드 HTML 프레젠테이션브라우저 기반 덱이 목표 결과물일 때 유용합니다.
  • 반응형 마케팅 페이지토큰화된 라이트·다크 처리를 갖춘 프레임워크 없는 기본값을 제공합니다.

확인할 한계

  • PPTX 내보내기 도구 아님문서화된 기본 출력은 HTML이며 네이티브 PowerPoint 파일이 아닙니다.
  • 브랜드 추출에는 접근 권한 필요URL 기반 브랜딩은 사용 가능한 Firecrawl 연동과 접근 가능한 소스 자료에 달려 있습니다.
  • 목표는 측정값이 아님나열된 성능 예산과 가독성 기준은 자동으로 충족되었다고 주장하지 말고 실제 결과물에서 확인해야 합니다.

준비할 입력

  • 매체와 목적결과물이 덱인지 사이트인지, 그리고 어떤 행동이나 메시지를 뒷받침해야 하는지 알려 주세요.
  • 브랜드 소스URL, 알려진 라이브러리 브랜드, 또는 중립 스타일 사용 허가를 제공하세요.
  • 콘텐츠와 대상실제 주장, 섹션, 핵심 내용, 대상 독자를 제공하세요.

03 핵심 결정

중요한 결정

  1. 매체별 규칙

    고정 슬라이드 캔버스가 웹사이트의 밀도를 따라서는 안 되며, 웹페이지가 프레젠테이션 전용 상호작용 가정을 따라서도 안 됩니다.

  2. 공유 브랜드 기록

    추출한 브랜드 스타일은 두 경로에 모두 사용할 수 있고, 레이아웃 규칙은 별도로 유지됩니다.

  3. 단순한 HTML 기본값

    소스는 더 큰 프로젝트나 프레임워크가 명시적으로 필요하지 않다면 자체 완결형 출력을 선호합니다.

04 예시 브리프

집중된 브리프 시도

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

원칙, 브랜드 라이브러리, 추출 참조 자료를 스킬과 함께 보관하세요. 소스는 범용 한 줄 설치 명령을 제시하지 않습니다.

업스트림 소스 파일
https://github.com/ItsssssJack/power-design/blob/f0c4143a38787aa33975b0e1811ccdf27d3014a1/SKILL.md

URL 기반 브랜드 추출에는 Firecrawl이 필요합니다. 기본 결과물은 외부 JavaScript 의존성을 피하지만, 글꼴이나 이미지 에셋은 여전히 각각의 사용 가능 여부와 권리 확인이 필요할 수 있습니다.

하나의 결과물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.

예시 브리프
power-design을 사용해 제공된 워크숍을 위한 슬라이드 덱이 아닌 반응형 HTML 페이지를 만드세요. 제공된 브랜드 스타일 파일과 확인된 행사 정보를 사용하세요. 등록 행동은 하나로 유지하고, 키보드 사용과 라이트/다크 테마를 지원하며, 실제 뷰포트 및 성능 확인 결과는 설계 목표와 별도로 보고하세요.

결과 확인

실제 결과물을 다음의 관찰 가능한 기준에 따라 확인하세요.

  • 선택한 출력이 올바른 매체의 규칙을 따릅니다.
  • 브랜드 값을 제공되었거나 추출된 스타일에서 추적할 수 있습니다.
  • 웹사이트 또는 덱을 의도한 브라우저 환경에서 확인합니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들되어 있다거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함되어 있음을 의미하지 않습니다.

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정된 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.

소스 소유자
ItsssssJack
스킬 파일
SKILL.md
라이선스
MIT
검토한 스냅샷
2026-10-07 · f0c4143a3878
편집 소스 요약
공통 브랜드 추출과 프레젠테이션 및 반응형 웹사이트용 별도 규칙을 갖춘 HTML 디자인 워크플로입니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타는 특정 시점의 인기 지표일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

PowerPoint 파일을 만들 수 있나요?

소스는 HTML 프레젠테이션을 설명합니다. 네이티브 PPTX 결과물에는 별도의 변환 또는 제작 워크플로가 필요합니다.

항상 Firecrawl이 필요한가요?

URL 추출 경로만 Firecrawl에 의존합니다. 소스는 기존 브랜드 스타일과 중립 기본값도 제공합니다.

웹사이트에 라이트 모드와 다크 모드가 포함되나요?

범위를 변경하지 않는 한, 유지되는 수동 전환 기능과 함께 문서화된 웹사이트 기본값에 포함됩니다.

OpenDesign

다음 디자인 반복을 위한 공간을 만드세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/ItsssssJack/power-design/blob/f0c4143a38787aa33975b0e1811ccdf27d3014a1/SKILL.md