이 PPT, 12분 만에 만들어졌어요

지금 보고 있는 슬라이드 모두를

Claude Code 한 곳에서

빈 폴더 + 다섯 번의 채팅

빈 폴더에서 claude 띄우기

mkdir my-deck && cd my-deck && claude

폴더 안으로 Claude Code 가 들어옵니다 — 여기서부터 채팅

"이런 PPT 만들고 싶어"

Reveal.js v5 로 PPT 시작점 짜줄래?
- CDN 한 줄로 (npm 설치는 안 했으면 좋겠어)
- 슬라이드 7 장 빈 골격
- Pretendard 폰트, 흰 배경
- 색·radius 토큰은 :root 변수 6 개로 잠가둬
나중에 vercel 에 배포할 거야.

한 번에 의도·제약·다음 단계까지 묶어 던져요

"주제는 이거고, 톤은 이렇게"

주제: "이 PPT, 12분 만에 만들어졌어요"
청중은 바이브 코딩 해커톤 참가자야.

- 토스 같은 친근체 ("~해요 / ~예요")
- 한 슬라이드 한 메시지. 본문 한 줄 + 보조 한 줄
- 1번 hook → 2~6번 단계 풀기 → 7번 CTA
- antfu 데크 (talks.antfu.me) 처럼 큰 헤딩 · 좁은 본문

레퍼런스 한 줄 ("~처럼") 이 백 단어보다 단단해요

"이런 분위기로 갈게"

색은 자기 취향대로:
  "Notion 처럼 깨끗한 회색 톤"
  "Toss 같은 따뜻한 아이보리 + 파랑 accent"
  "antfu 데크 같은 어두운 보라"
  "브랜드 색이 있으면 그걸로 — #FF5722 accent"

폰트도 한 줄로:
  "Pretendard / Inter / JetBrains Mono"

레퍼런스 데크 한 줄 던지면 토큰까지 알아서 잡아줘요

본 결과 보고 한 줄씩 갈음

"3번 슬라이드 좀 더 비워줘 — 카피 한 줄로"
"코드블럭 글자 너무 작아. 1.2rem 으로 키워"
"6번 헤딩 강조 빼고 그냥 큰 글씨로"
"전환은 fade — slide 는 좀 산만해"
"마지막에 QR 코드 + url 한 자리 추가해줄래?"

"좀 더 / 좀 덜 / 비워 / 빼" — 자연 대화 어감이 잘 통해요

"이제 올려줘"

vercel deploy --prod 한 줄로 배포해줘.
도메인은 decks.xingu.kr/my-deck/ 자리.
DNS 는 이미 잡혀있어.

한 줄에 살아있는 URL 이 떨어집니다

이 URL 이 그렇게 나왔어요

지금 보고 있는 이 화면, 그대로

바이브 코더가 채팅 치는 패턴

• 한 번에 묶어 던진다 — 의도 + 제약 + 톤 + 다음 단계까지. Claude Code 가 한 번에 다 잡아요
• "~처럼" 레퍼런스 — "antfu 데크처럼" / "Toss 같은 톤" — 한 줄이 백 단어보다 단단
• 부정형도 OK — "X는 빼고" / "Y 하지 말고" / "그건 너무 진해" — 효과 있음
• 슬라이드 번호로 가리키기 — "3번 좀 더 비워" / "마지막에 추가" — 정확
• 좀 더 / 좀 덜 — 결과 보고 자연 대화로 다듬기. 명령형보다 잘 통해요
• 한 슬라이드 한 메시지 — 청중 위한 자리지만 Claude 도 이 안에서 구체화 잘함

여러분도 빈 폴더에서

mkdir my-deck && cd my-deck && claude

"Reveal.js v5 로 PPT 시작점. CDN 한 줄, 7 장 골격, Pretendard."
"주제: ___. 토스 톤. 한 메시지. hook → 본문 → CTA."
"색은 ___ 톤. ___ 데크처럼."
"3번 한 줄로 / 코드블럭 키워 / 전환 fade / QR 추가"

vercel deploy --prod

decks.xingu.kr 에서 봐요

레퍼런스 풀

studio/decks/_references/ · 영감 100 개에서 추린 핵심 패턴 8 개

• Auto-animate as story spine — 한 객체가 데크 전체를 가로지름
• Magic Move 코드 모핑 — 변형 자체가 카피
• antfu 좌우 split + 큰 섹션 디바이더
• Reveal vertical drilling — 메인은 가로, 깊이는 세로
• Mono-only 타이포 + grid — 한 family 한 그리드
• Fragments 단계 폭로 — 한 슬라이드 안 점진
• Spectacle JSX 합성 — 슬라이드를 React 컴포넌트로
• antfu 미니멀 footer — 카운터·프로그레스만

xingu 토큰 (이번 데크가 쓴 자리)

:root {
  --color-bg: oklch(99% 0.002 60);
  --color-text: oklch(22% 0.01 42);
  --color-text-soft: oklch(45% 0.012 42);
  --color-accent: oklch(48% 0.07 45);
  --color-border: oklch(91% 0.008 50);
  --radius: 8px;
  --radius-panel: 12px;
}

여러분 톤은 자기 색으로 — 토큰 자리만 잠그면 한 데크가 정합