Skip to content
design-skill logo

Design Skill - 프로페셔널 프레젠테이션 디자인 시스템

design-skill

프레젠테이션 슬라이드를 미려한 HTML로 디자인. 슬라이드 HTML 생성, 시각적 디자인, 레이아웃 구성이 필요할 때 사용.

SKILL.md

Full skill instructions

Design Skill - 프로페셔널 프레젠테이션 디자인 시스템

최고 수준의 비즈니스 프레젠테이션을 위한 HTML 슬라이드 디자인 스킬입니다. 미니멀하고 세련된 디자인, 전문적인 타이포그래피, 정교한 레이아웃을 제공합니다.


핵심 디자인 철학

1. Less is More

  • 불필요한 장식 요소 제거
  • 콘텐츠가 주인공이 되는 디자인
  • 여백(Whitespace)을 적극 활용
  • 시각적 계층 구조 명확화

2. 타이포그래피 중심 디자인

  • Pretendard를 기본 폰트로 사용
  • 폰트 크기 대비로 시각적 임팩트 생성
  • 자간과 행간의 섬세한 조절
  • 웨이트 변화로 강조점 표현

3. 전략적 색상 사용

  • 제한된 색상 팔레트 (2-3색)
  • 모노톤 기반 + 포인트 컬러
  • 배경색으로 분위기 연출
  • 고대비로 가독성 확보

기본 설정

슬라이드 크기 (16:9 기본)

<body style="width: 720pt; height: 405pt;">

지원 비율

비율크기용도
16:9720pt × 405pt기본, 모니터/화면
4:3720pt × 540pt구형 프로젝터
16:10720pt × 450pt맥북

기본 폰트 스택

font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Pretendard 웹폰트 CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/​gh/​orioncactus/​[email protected]/​dist/​web/​static/​pretendard.min.css">

타이포그래피 시스템

폰트 크기 스케일

용도크기웨이트사용 예시
Hero Title72-96pt700-800표지 메인 타이틀
Section Title48-60pt700섹션 구분 제목
Slide Title32-40pt600-700슬라이드 제목
Subtitle20-24pt500부제목, 설명
Body16-20pt400본문 텍스트
Caption12-14pt400캡션, 출처
Label10-12pt500-600뱃지, 태그

자간 설정 (letter-spacing)

/​* 대형 제목: 타이트하게 */
letter-spacing: -0.02em;

/​* 중형 제목 */
letter-spacing: -0.01em;

/​* 본문: 기본 */
letter-spacing: 0;

/​* 캡션, 레이블: 약간 넓게 */
letter-spacing: 0.02em;

행간 설정 (line-height)

/​* 제목 */
line-height: 1.2;

/​* 본문 */
line-height: 1.6 - 1.8;

/​* 한 줄 텍스트 */
line-height: 1;

색상 팔레트 시스템

1. Executive Minimal (기본 권장)

세련된 비즈니스 프레젠테이션용

--bg-primary: #f5f5f0;      /​* 웜 화이트 배경 */
--bg-secondary: #e8e8e3;    /​* 서브 배경 */
--bg-dark: #1a1a1a;         /​* 다크 배경 */
--text-primary: #1a1a1a;    /​* 메인 텍스트 */
--text-secondary: #666666;  /​* 보조 텍스트 */
--text-light: #999999;      /​* 약한 텍스트 */
--accent: #1a1a1a;          /​* 강조 (검정) */
--border: #d4d4d0;          /​* 테두리 */

2. Sage Professional

차분하고 신뢰감 있는 톤

--bg-primary: #b8c4b8;      /​* 세이지 그린 배경 */
--bg-secondary: #a3b0a3;    /​* 짙은 세이지 */
--bg-light: #f8faf8;        /​* 밝은 배경 */
--text-primary: #1a1a1a;    /​* 메인 텍스트 */
--text-secondary: #3d3d3d;  /​* 보조 텍스트 */
--accent: #2d2d2d;          /​* 강조 */
--border: #9aa89a;          /​* 테두리 */

3. Modern Dark

임팩트 있는 다크 테마

--bg-primary: #0f0f0f;      /​* 순수 다크 */
--bg-secondary: #1a1a1a;    /​* 카드 배경 */
--bg-elevated: #252525;     /​* 강조 영역 */
--text-primary: #ffffff;    /​* 메인 텍스트 */
--text-secondary: #b0b0b0;  /​* 보조 텍스트 */
--accent: #ffffff;          /​* 강조 (화이트) */
--border: #333333;          /​* 테두리 */

4. Corporate Blue

전통적 비즈니스 톤

--bg-primary: #ffffff;      /​* 화이트 배경 */
--bg-secondary: #f7f9fc;    /​* 밝은 블루 그레이 */
--text-primary: #1e2a3a;    /​* 다크 네이비 */
--text-secondary: #5a6b7d;  /​* 블루 그레이 */
--accent: #2563eb;          /​* 블루 강조 */
--border: #e2e8f0;          /​* 테두리 */

5. Warm Neutral

따뜻하고 친근한 톤

--bg-primary: #faf8f5;      /​* 크림 화이트 */
--bg-secondary: #f0ebe3;    /​* 웜 베이지 */
--text-primary: #2d2a26;    /​* 다크 브라운 */
--text-secondary: #6b6560;  /​* 미디움 브라운 */
--accent: #c45a3b;          /​* 테라코타 */
--border: #ddd8d0;          /​* 테두리 */

레이아웃 시스템

여백 기준 (padding/​margin)

/​* 슬라이드 전체 여백 */
padding: 48pt;

/​* 섹션 간 여백 */
gap: 32pt;

/​* 요소 간 여백 */
gap: 16pt;

/​* 텍스트 블록 내 여백 */
gap: 8pt;

그리드 시스템

/​* 2단 레이아웃 */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32pt;

/​* 3단 레이아웃 */
grid-template-columns: repeat(3, 1fr);

/​* 비대칭 레이아웃 (40:60) */
grid-template-columns: 2fr 3fr;

/​* 비대칭 레이아웃 (30:70) */
grid-template-columns: 1fr 2.3fr;

디자인 컴포넌트

1. 뱃지/태그

<p style="
  display: inline-block;
  padding: 6pt 14pt;
  border: 1px solid #1a1a1a;
  border-radius: 20pt;
  font-size: 10pt;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
">PRESENTATION</​p>

2. 섹션 넘버

<p style="
  display: inline-block;
  padding: 4pt 12pt;
  background: #1a1a1a;
  color: #ffffff;
  border-radius: 4pt;
  font-size: 10pt;
  font-weight: 600;
">SECTION 1</​p>

3. 로고 영역

<div style="display: flex; align-items: center; gap: 8pt;">
  <div style="
    width: 20pt;
    height: 20pt;
    background: #1a1a1a;
    border-radius: 4pt;
    display: flex;
    align-items: center;
    justify-content: center;
  ">
    <p style="color: #fff; font-size: 12pt;">*</​p>
  </​div>
  <p style="font-size: 12pt; font-weight: 600;">LogoName</​p>
</​div>

4. 아이콘 버튼

<div style="
  width: 32pt;
  height: 32pt;
  border: 1px solid #1a1a1a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
">
  <p style="font-size: 14pt;">↗</​p>
</​div>

5. 구분선

<div style="
  width: 100%;
  height: 1pt;
  background: #d4d4d0;
"></​div>

6. 정보 그리드

<div style="display: flex; gap: 48pt;">
  <div>
    <p style="font-size: 10pt; color: #999; margin-bottom: 4pt;">Contact</​p>
    <p style="font-size: 12pt; font-weight: 500;">334556774</​p>
  </​div>
  <div>
    <p style="font-size: 10pt; color: #999; margin-bottom: 4pt;">Date</​p>
    <p style="font-size: 12pt; font-weight: 500;">March 2025</​p>
  </​div>
</​div>

슬라이드 템플릿

1. 표지 슬라이드 (Cover)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/​gh/​orioncactus/​[email protected]/​dist/​web/​static/​pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #f5f5f0;
      padding: 32pt 48pt;
      display: flex;
      flex-direction: column;
    }
  </​style>
</​head>
<body>
  <!-- 헤더 -->
  <div style="display: flex; justify-content: space-between; align-items: center;">
    <div style="display: flex; align-items: center; gap: 16pt;">
      <div style="display: flex; align-items: center; gap: 8pt;">
        <div style="width: 18pt; height: 18pt; background: #1a1a1a; border-radius: 3pt; display: flex; align-items: center; justify-content: center;">
          <p style="color: #fff; font-size: 10pt;">*</​p>
        </​div>
        <p style="font-size: 11pt; font-weight: 600; color: #1a1a1a;">LogoName</​p>
      </​div>
      <p style="display: inline-block; padding: 4pt 10pt; border: 1px solid #1a1a1a; border-radius: 12pt; font-size: 9pt; font-weight: 500;">PRESENTATION</​p>
    </​div>
    <div style="display: flex; align-items: center; gap: 8pt;">
      <p style="display: inline-block; padding: 4pt 10pt; border: 1px solid #1a1a1a; border-radius: 12pt; font-size: 9pt; font-weight: 500;">OUR PROJECT</​p>
      <div style="width: 28pt; height: 28pt; border: 1px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
        <p style="font-size: 12pt; color: #1a1a1a;">↘</​p>
      </​div>
    </​div>
  </​div>

  <!-- 메인 타이틀 -->
  <div style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
    <h1 style="font-size: 72pt; font-weight: 500; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1.1;">
      Business Deck
    </​h1>
    <p style="font-size: 14pt; color: #666; margin-top: 24pt;">
      <span style="color: #999;">Presented by</​span>  <span style="font-weight: 500; color: #1a1a1a;">Luna Martinez</​span>
    </​p>
  </​div>

  <!-- 푸터 정보 -->
  <div style="display: flex; gap: 64pt;">
    <div>
      <p style="font-size: 9pt; color: #999; margin-bottom: 4pt;">Contact</​p>
      <p style="font-size: 11pt; font-weight: 500; color: #1a1a1a;">334556774</​p>
    </​div>
    <div>
      <p style="font-size: 9pt; color: #999; margin-bottom: 4pt;">Date</​p>
      <p style="font-size: 11pt; font-weight: 500; color: #1a1a1a;">March 2025</​p>
    </​div>
    <div>
      <p style="font-size: 9pt; color: #999; margin-bottom: 4pt;">Website</​p>
      <p style="font-size: 11pt; font-weight: 500; color: #1a1a1a;">www.yourwebsite.com</​p>
    </​div>
  </​div>
</​body>
</​html>

2. 목차 슬라이드 (Contents)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/​gh/​orioncactus/​[email protected]/​dist/​web/​static/​pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #b8c4b8;
      padding: 48pt;
      display: grid;
      grid-template-columns: 1fr 1.8fr;
      gap: 48pt;
    }
  </​style>
</​head>
<body>
  <!-- 왼쪽: 타이틀 -->
  <div style="display: flex; flex-direction: column; justify-content: flex-end;">
    <p style="font-size: 9pt; color: #3d3d3d; margin-bottom: 16pt;">©2025 YOUR BRAND. ALL RIGHTS RESERVED.</​p>
    <h1 style="font-size: 56pt; font-weight: 500; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1.1;">
      Our<br>Contents
    </​h1>
    <div style="width: 32pt; height: 32pt; border: 1px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 24pt;">
      <p style="font-size: 14pt; color: #1a1a1a;">↗</​p>
    </​div>
  </​div>

  <!-- 오른쪽: 목차 리스트 -->
  <div style="display: flex; flex-direction: column; justify-content: center; gap: 16pt;">
    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 1</​p>
      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</​p>
      <p style="font-size: 14pt; color: #666;">(1)</​p>
    </​div>
    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 2</​p>
      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</​p>
      <p style="font-size: 14pt; color: #666;">(2)</​p>
    </​div>
    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 3</​p>
      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</​p>
      <p style="font-size: 14pt; color: #666;">(3)</​p>
    </​div>
    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 4</​p>
      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</​p>
      <p style="font-size: 14pt; color: #666;">(4)</​p>
    </​div>
    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0;">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 5</​p>
      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</​p>
      <p style="font-size: 14pt; color: #666;">(5)</​p>
    </​div>
  </​div>
</​body>
</​html>

3. 섹션 구분 슬라이드 (Section Divider)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/​gh/​orioncactus/​[email protected]/​dist/​web/​static/​pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #1a1a1a;
      padding: 48pt;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  </​style>
</​head>
<body>
  <!-- 상단 섹션 정보 -->
  <div style="display: flex; justify-content: space-between; align-items: flex-start;">
    <div>
      <p style="display: inline-block; padding: 4pt 10pt; background: #fff; color: #1a1a1a; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 1</​p>
    </​div>
    <p style="font-size: 9pt; color: #666;">©2025 YOUR BRAND</​p>
  </​div>

  <!-- 메인 타이틀 -->
  <div>
    <h1 style="font-size: 64pt; font-weight: 500; color: #ffffff; letter-spacing: -0.02em; line-height: 1.1;">
      Introduction
    </​h1>
    <p style="font-size: 16pt; color: #888; margin-top: 16pt; max-width: 400pt; line-height: 1.6;">
      Brief description of what this section covers and why it matters.
    </​p>
  </​div>

  <!-- 페이지 번호 -->
  <div style="display: flex; justify-content: flex-end;">
    <p style="font-size: 10pt; color: #666;">01</​p>
  </​div>
</​body>
</​html>

4. 콘텐츠 슬라이드 (Content)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/​gh/​orioncactus/​[email protected]/​dist/​web/​static/​pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #ffffff;
      padding: 40pt 48pt;
      display: flex;
      flex-direction: column;
    }
  </​style>
</​head>
<body>
  <!-- 헤더 -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32pt;">
    <div style="display: flex; align-items: center; gap: 12pt;">
      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 1</​p>
      <h2 style="font-size: 24pt; font-weight: 600; color: #1a1a1a;">Main Topic</​h2>
    </​div>
    <p style="font-size: 10pt; color: #999;">02</​p>
  </​div>

  <!-- 콘텐츠 영역 -->
  <div style="flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 32pt;">
    <div>
      <h3 style="font-size: 18pt; font-weight: 600; color: #1a1a1a; margin-bottom: 16pt;">Key Point One</​h3>
      <p style="font-size: 13pt; color: #666; line-height: 1.7;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
      </​p>
    </​div>
    <div>
      <h3 style="font-size: 18pt; font-weight: 600; color: #1a1a1a; margin-bottom: 16pt;">Key Point Two</​h3>
      <p style="font-size: 13pt; color: #666; line-height: 1.7;">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
      </​p>
    </​div>
  </​div>

  <!-- 푸터 -->
  <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 16pt; border-top: 1px solid #eee;">
    <p style="font-size: 9pt; color: #999;">www.yourwebsite.com</​p>
    <p style="font-size: 9pt; color: #999;">©2025 YOUR BRAND</​p>
  </​div>
</​body>
</​html>

5. 통계/데이터 슬라이드 (Statistics)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/​gh/​orioncactus/​[email protected]/​dist/​web/​static/​pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #f5f5f0;
      padding: 40pt 48pt;
      display: flex;
      flex-direction: column;
    }
  </​style>
</​head>
<body>
  <!-- 헤더 -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32pt;">
    <h2 style="font-size: 28pt; font-weight: 600; color: #1a1a1a;">Key Metrics</​h2>
    <p style="font-size: 10pt; color: #999;">03</​p>
  </​div>

  <!-- 통계 카드 그리드 -->
  <div style="flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24pt;">
    <div style="background: #1a1a1a; border-radius: 12pt; padding: 28pt; display: flex; flex-direction: column; justify-content: space-between;">
      <p style="font-size: 10pt; color: #888; text-transform: uppercase; letter-spacing: 0.05em;">Revenue Growth</​p>
      <div>
        <p style="font-size: 48pt; font-weight: 600; color: #ffffff; letter-spacing: -0.02em;">85%</​p>
        <p style="font-size: 11pt; color: #666; margin-top: 8pt;">Year over year</​p>
      </​div>
    </​div>
    <div style="background: #ffffff; border-radius: 12pt; padding: 28pt; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #e5e5e0;">
      <p style="font-size: 10pt; color: #888; text-transform: uppercase; letter-spacing: 0.05em;">Active Users</​p>
      <div>
        <p style="font-size: 48pt; font-weight: 600; color: #1a1a1a; letter-spacing: -0.02em;">2.4M</​p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt;">+340K this quarter</​p>
      </​div>
    </​div>
    <div style="background: #ffffff; border-radius: 12pt; padding: 28pt; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #e5e5e0;">
      <p style="font-size: 10pt; color: #888; text-transform: uppercase; letter-spacing: 0.05em;">Customer Satisfaction</​p>
      <div>
        <p style="font-size: 48pt; font-weight: 600; color: #1a1a1a; letter-spacing: -0.02em;">4.9</​p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt;">Out of 5.0 rating</​p>
      </​div>
    </​div>
  </​div>

  <!-- 푸터 -->
  <div style="display: flex; justify-content: flex-end; padding-top: 16pt;">
    <p style="font-size: 9pt; color: #999;">Source: Internal Analytics 2025</​p>
  </​div>
</​body>
</​html>

6. 이미지 + 텍스트 슬라이드 (Split Layout)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/​gh/​orioncactus/​[email protected]/​dist/​web/​static/​pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #ffffff;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  </​style>
</​head>
<body>
  <!-- 이미지 영역 -->
  <div style="background: #e5e5e0; display: flex; align-items: center; justify-content: center; position: relative;">
    <div data-image-placeholder style="width: 100%; height: 100%; background: linear-gradient(135deg, #d0d0c8 0%, #b8b8b0 100%);"></​div>
    <p style="position: absolute; bottom: 16pt; left: 16pt; font-size: 9pt; color: #666;">©2025 YOUR BRAND</​p>
  </​div>

  <!-- 텍스트 영역 -->
  <div style="padding: 48pt; display: flex; flex-direction: column; justify-content: center;">
    <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600; margin-bottom: 24pt; align-self: flex-start;">FEATURE</​p>
    <h2 style="font-size: 32pt; font-weight: 600; color: #1a1a1a; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 20pt;">
      Transform Your Business
    </​h2>
    <p style="font-size: 14pt; color: #666; line-height: 1.7;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </​p>
    <div style="margin-top: 32pt; display: flex; align-items: center; gap: 12pt;">
      <p style="font-size: 12pt; font-weight: 500; color: #1a1a1a;">Learn more</​p>
      <div style="width: 28pt; height: 28pt; border: 1px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
        <p style="font-size: 12pt; color: #1a1a1a;">→</​p>
      </​div>
    </​div>
  </​div>
</​body>
</​html>

7. 팀 소개 슬라이드 (Team)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/​gh/​orioncactus/​[email protected]/​dist/​web/​static/​pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #f5f5f0;
      padding: 40pt 48pt;
      display: flex;
      flex-direction: column;
    }
  </​style>
</​head>
<body>
  <!-- 헤더 -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32pt;">
    <h2 style="font-size: 28pt; font-weight: 600; color: #1a1a1a;">Our Team</​h2>
    <p style="font-size: 10pt; color: #999;">05</​p>
  </​div>

  <!-- 팀원 그리드 -->
  <div style="flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20pt;">
    <div style="text-align: center;">
      <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></​div>
      <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">John Smith</​p>
      <p style="font-size: 10pt; color: #888; margin-top: 4pt;">CEO & Founder</​p>
    </​div>
    <div style="text-align: center;">
      <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></​div>
      <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">Sarah Johnson</​p>
      <p style="font-size: 10pt; color: #888; margin-top: 4pt;">CTO</​p>
    </​div>
    <div style="text-align: center;">
      <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></​div>
      <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">Mike Chen</​p>
      <p style="font-size: 10pt; color: #888; margin-top: 4pt;">Design Lead</​p>
    </​div>
    <div style="text-align: center;">
      <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></​div>
      <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">Emily Davis</​p>
      <p style="font-size: 10pt; color: #888; margin-top: 4pt;">Marketing</​p>
    </​div>
  </​div>
</​body>
</​html>

8. 인용문 슬라이드 (Quote)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/​gh/​orioncactus/​[email protected]/​dist/​web/​static/​pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #1a1a1a;
      padding: 64pt;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
  </​style>
</​head>
<body>
  <p style="font-size: 48pt; color: #444; margin-bottom: 24pt;">"</​p>
  <h2 style="font-size: 28pt; font-weight: 400; color: #ffffff; letter-spacing: -0.01em; line-height: 1.5; max-width: 540pt;">
    The best way to predict the future is to create it.
  </​h2>
  <div style="margin-top: 40pt;">
    <p style="font-size: 13pt; font-weight: 500; color: #ffffff;">Peter Drucker</​p>
    <p style="font-size: 11pt; color: #666; margin-top: 4pt;">Management Consultant</​p>
  </​div>
</​body>
</​html>

9. 타임라인 슬라이드 (Timeline)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/​gh/​orioncactus/​[email protected]/​dist/​web/​static/​pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #ffffff;
      padding: 40pt 48pt;
      display: flex;
      flex-direction: column;
    }
  </​style>
</​head>
<body>
  <!-- 헤더 -->
  <div style="margin-bottom: 32pt;">
    <h2 style="font-size: 28pt; font-weight: 600; color: #1a1a1a;">Our Journey</​h2>
  </​div>

  <!-- 타임라인 -->
  <div style="flex: 1; display: flex; align-items: center;">
    <div style="display: flex; width: 100%; justify-content: space-between; position: relative;">
      <!-- 연결선 -->
      <div style="position: absolute; top: 12pt; left: 40pt; right: 40pt; height: 2pt; background: #e5e5e0;"></​div>

      <!-- 타임라인 아이템들 -->
      <div style="text-align: center; z-index: 1;">
        <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></​div>
        <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2020</​p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">Company Founded</​p>
      </​div>
      <div style="text-align: center; z-index: 1;">
        <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></​div>
        <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2021</​p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">First Product Launch</​p>
      </​div>
      <div style="text-align: center; z-index: 1;">
        <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></​div>
        <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2023</​p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">Series A Funding</​p>
      </​div>
      <div style="text-align: center; z-index: 1;">
        <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></​div>
        <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2025</​p>
        <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">Global Expansion</​p>
      </​div>
    </​div>
  </​div>

  <!-- 푸터 -->
  <div style="display: flex; justify-content: flex-end; padding-top: 16pt;">
    <p style="font-size: 10pt; color: #999;">06</​p>
  </​div>
</​body>
</​html>

10. 마무리 슬라이드 (Closing)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/​gh/​orioncactus/​[email protected]/​dist/​web/​static/​pretendard.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 720pt;
      height: 405pt;
      font-family: 'Pretendard', sans-serif;
      background: #1a1a1a;
      padding: 48pt;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  </​style>
</​head>
<body>
  <!-- 로고 -->
  <div style="display: flex; align-items: center; gap: 8pt;">
    <div style="width: 20pt; height: 20pt; background: #fff; border-radius: 4pt; display: flex; align-items: center; justify-content: center;">
      <p style="color: #1a1a1a; font-size: 12pt;">*</​p>
    </​div>
    <p style="font-size: 12pt; font-weight: 600; color: #ffffff;">LogoName</​p>
  </​div>

  <!-- 메인 메시지 -->
  <div>
    <h1 style="font-size: 56pt; font-weight: 500; color: #ffffff; letter-spacing: -0.02em; line-height: 1.1;">
      Thank You
    </​h1>
    <p style="font-size: 16pt; color: #888; margin-top: 16pt;">
      Questions? Let's discuss.
    </​p>
  </​div>

  <!-- 연락처 정보 -->
  <div style="display: flex; gap: 64pt;">
    <div>
      <p style="font-size: 9pt; color: #666; margin-bottom: 4pt;">Email</​p>
      <p style="font-size: 12pt; font-weight: 500; color: #ffffff;">[email protected]</​p>
    </​div>
    <div>
      <p style="font-size: 9pt; color: #666; margin-bottom: 4pt;">Phone</​p>
      <p style="font-size: 12pt; font-weight: 500; color: #ffffff;">+82 10-1234-5678</​p>
    </​div>
    <div>
      <p style="font-size: 9pt; color: #666; margin-bottom: 4pt;">Website</​p>
      <p style="font-size: 12pt; font-weight: 500; color: #ffffff;">www.company.com</​p>
    </​div>
  </​div>
</​body>
</​html>

고급 디자인 패턴

비대칭 레이아웃

시선을 끄는 독창적인 구성

/​* 황금비율 기반 */
grid-template-columns: 1fr 1.618fr;

/​* 극단적 비대칭 */
grid-template-columns: 1fr 3fr;

오버레이 텍스트

이미지 위 텍스트 배치

<div style="position: relative;">
  <div style="position: absolute; inset: 0; background: rgba(0,0,0,0.5);"></​div>
  <div style="position: relative; z-index: 1;">
    <h2 style="color: #fff;">Overlay Text</​h2>
  </​div>
</​div>

그라데이션 오버레이

<div style="
  background: linear-gradient(to right, #1a1a1a 0%, transparent 60%);
  position: absolute;
  inset: 0;
"></​div>

카드 스타일

<div style="
  background: #ffffff;
  border-radius: 12pt;
  padding: 24pt;
  box-shadow: 0 2pt 8pt rgba(0,0,0,0.08);
"></​div>

텍스트 사용 규칙

필수 태그

<!-- 모든 텍스트는 반드시 다음 태그 안에 -->
<p>, <h1>-<h6>, <ul>, <ol>, <li>

<!-- 금지 - PowerPoint에서 무시됨 -->
<div>텍스트</​div>
<span>텍스트</​span>

권장 사용법

<!-- 좋은 예 -->
<h1 style="...">제목</​h1>
<p style="...">본문 텍스트</​p>

<!-- 나쁜 예 -->
<div style="...">텍스트 직접 입력</​div>

출력 및 파일 구조

파일 저장 규칙

slides/
├── slide-01.html  (표지)
├── slide-02.html  (목차)
├── slide-03.html  (섹션 구분)
├── slide-04.html  (내용)
├── ...
└── slide-XX.html  (마무리)

파일 명명 규칙

  • 2자리 숫자 사용: slide-01.html, slide-02.html
  • 순서대로 명명
  • 특수문자, 공백 사용 금지

워크플로우

  1. 분석: slide-outline.md 읽고 콘텐츠 파악
  2. 테마 결정: 색상 팔레트, 전체적인 무드 선택
  3. 구조 설계: 슬라이드별 레이아웃 타입 결정
  4. 디자인 실행: 각 슬라이드 HTML 생성
  5. 일관성 검토: 전체 프레젠테이션의 통일성 확인
  6. 저장: slides/ 디렉토리에 파일 저장

주의사항

  1. CSS 그라데이션: PowerPoint 변환 시 지원 안됨 - 배경 이미지로 대체
  2. 웹폰트: Pretendard CDN 링크 항상 포함
  3. 이미지 경로: 절대 경로 또는 URL 사용
  4. 호환성: 모든 색상에 # 포함
  5. 텍스트 규칙: div/​span에 직접 텍스트 금지

More Design skills

brandkit logo
Design

brandkit

Premium brand-kit image generation for high-end identity systems, logo concepts, and visual-world presentations.

92.7K 345.8K
View

Premium website design-to-code skill that generates visual references first, then builds faithful frontend implementations.

92.7K 341.7K
View

Premium frontend image direction for landing pages and marketing sites, generating one distinct horizontal image per section.

92.7K 337.8K
View

Premium mobile app screen concepts and flows with clean hierarchy, strong imagery, and distinctive art direction.

92.7K 331.8K
View

Emil Kowalski's philosophy on UI polish, component design, and the invisible details that make software feel good.

43.5K 323.4K
View

Frontend design and iteration for production-grade interfaces, from concept to ship.

76.8K 313.3K
View

Reverse-engineer design tokens from public websites into starter token files for your project.

232 129.9K
View
Animate logo
Design

Animate

Builds an animation from scratch by making the decisions in the order that determines whether it feels right.

43.5K 117.9K
View

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

179.7K 114.2K
View

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

179.7K 100.1K
View

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

179.7K 89.5K
View

Design AI tools

Maze Guru logo
Images

Maze Guru

Chat-to-edit AI studio for product photos, portraits, branding, and video.

Freemium
View
R
Design

RoomGPT

Generate your dream room in seconds.

Paid
View

Redesign your interior in seconds using AI

Paid
View
Reroom logo
Design

Reroom

Transform rooms with AI-generated designs.

Freemium
View
Jife logo
Design

Jife

Transform Your Space with AI-Powered Japanese Interior Designs by Jife

Paid
View
Visily logo
Design

Visily

AI-powered wireframes for non-designers.

Free
View

Revolutionize Property Viewing with AI-Generated Floor Plans and Virtual Tours

Paid
View
Archsynth logo
Design

Archsynth

Transform sketches into stunning architectural renders with AI.

Paid
View