[Claude] AI 티 안 나는 발표자료 만들기 — frontend-slides
목차
발표자료를 AI에게 맡기면 흔히 “AI가 만든 티”가 난다. frontend-slides는 그걸 피하도록 도와주는 Claude Code 플러그인이다. 설치·사용법, 매뉴얼형 제작 원칙, 그리고 강의에서 쓴 예시 프롬프트 원문까지 짧게 정리한다.
1. frontend-slides란
빌드 도구·의존성 없이 단일 HTML 파일 하나에 슬라이드덱 전체를 담아 생성하는 Claude Code 플러그인. 디자인 지식이 없어도 “AI-slop”(뻔한 AI 느낌) 안 나는 발표자료를 만드는 게 목표다.
| 특징 | 내용 |
|---|---|
| 제로 의존성 | 단일 HTML(인라인 CSS/JS), 별도 빌드 불필요 |
| 스타일 선택 | 취향을 말로 설명하는 대신 시안 보고 고르기 |
| PPT 변환 | 기존 PPT를 웹 슬라이드로 변환 |
| 템플릿 | 34개 이상의 디자인 템플릿 |
| 출력 | 16:9 고정 비율, Vercel 배포·PDF export(Playwright) |
출처: https://github.com/zarazhangrui/frontend-slides
한 줄 요약: frontend-slides = 빌드 없이 단일 HTML로 “AI 티 안 나는” 발표자료를 만들어주는 Claude Code 플러그인.
2. 설치와 호출
/plugin marketplace add https://github.com/zarazhangrui/frontend-slides
/plugin install frontend-slides@frontend-slides설치 후 호출: /frontend-slides:frontend-slides
marketplace add(카탈로그 등록) →install(설치)의 2단계는 다른 플러그인과 동일하다. 🔗 MCP 노트의 “규약 vs 허브” 구도와 같은 패턴.
3. 사용 흐름 — “show, don’t tell”
스타일 취향을 말로 설명하지 않고, 시안 여러 개를 먼저 보여준 뒤 고르게 한다.
| 단계 | 내용 |
|---|---|
| 1 | 발표 내용 수집 |
| 2 | 스타일 시안 3개 생성 |
| 3 | 마음에 드는 시안 선택 |
| 4 | 선택한 스타일로 최종 슬라이드 생성 |
| 5 | 브라우저에서 결과물 오픈 |
한 줄 요약: 내용 수집 → 시안 3개 → 선택 → 최종 생성 → 브라우저 확인. 스타일은 말이 아니라 시안으로 고른다.
4. 매뉴얼형으로 쓸 때의 원칙
화면 캡처가 들어가는 사용 설명서를 만들 땐, 아래를 프롬프트로 직접 지시해야 한다(플러그인이 자동으로 해주는 게 아니다).
| 원칙 | 내용 |
|---|---|
| 슬라이드당 한 메시지 | 한 슬라이드엔 설명 하나만. 여럿이면 슬라이드를 나눈다 |
| 바운딩 박스 | 캡처 위에 박스로 “어디를 클릭하면 화면이 어떻게 바뀌는지” 표시 |
| 이미지 복제 재활용 | 한 캡처에 설명할 포인트가 여럿이면 이미지를 복제해 각각 강조 |
| spotlight 강조 | 특정 위치를 스포트라이트처럼 부각 |
이 원칙들은 실제 사람이 만드는 매뉴얼 관례(한 동작 = 한 슬라이드, 클릭 지점 명시, 반복 캡처 재활용)를 그대로 강제하는 것이라, 결과물이 “직접 만든 매뉴얼”처럼 보인다.
한 줄 요약: 매뉴얼 완성도는 플러그인이 아니라 프롬프트 규칙에서 나온다 — 한 메시지·바운딩박스·이미지 재활용·spotlight를 지시할 것.
5. 예시 프롬프트 (그대로 복붙용)
강의에서 쓴 프롬프트 원문. 앞에
/plan을 붙이면 곧장 실행하지 않고 계획을 먼저 세운다.
① 현재 프로젝트 사용 매뉴얼 만들기
/frontend-slides:frontend-slides 스킬을 사용해서 현재 프로젝트 사용하는 방법에 대해서 사용자 메뉴얼을 만들어야 합니다.
docs/manual 아래에 필요한 자료를 사전에 만드세요.
총 몇개의 슬라이드를 구성을 해야하는지 스스로 설정하세요.
캡처를 하고 바운딩 박스를 그려서 어느 곳을 클릭을 하면 어떻게 화면이 바뀌는지에 대해서 아주 디테일하게 설명을 하세요.
하나의 슬라이드에서는 하나의 설명만 해야합니다 캡처한 내용에서 여러가지 설명을 해야할 때는 캡처 이미지를 복제해서 재활용하세요.
spotlight 효과를 주면서 특정 위치를 강조하는 느낌을 줘도 좋습니다.② 수업자료 PDF를 50장 이상 슬라이드로 정리
docs/*.pdf 파일들을 모두 각각 슬라이드들을 이미지로 추출하세요.
그런 다음 각 슬라이드들을 분석을 진행하세요.
이 수업 자료 내용을 기반으로 최소 50개의 슬라이드를 만들어서 수업 내용을 정리해서 볼 수 있게 해보자.
캡처를 하고 바운딩 박스를 그려서 어느 곳을 클릭을 하면 어떻게 화면이 바뀌는지에 대해서 아주 디테일하게 설명을 하세요.
하나의 슬라이드에서는 하나의 설명만 해야합니다 캡처한 내용에서 여러가지 설명을 해야할 때는 캡처 이미지를 복제해서 재활용하세요.
spotlight 효과를 주면서 특정 위치를 강조하는 느낌을 줘도 좋습니다.③ 가독성 점검 — visual-verdict
/visual-verdict 스킬을 사용해서 겹치는 글자는 없는지 점검하고, 대비 값이 안맞아서 글자가 잘안보이는 문제들도 관련해서 진단 도구를 개발하고 개선하세요.
visual-verdict는 frontend-slides에 포함된 게 아니라 독립된 스킬이라, 네임스페이스 없이/visual-verdict로 부른다.
④ 발표자료 완성
/frontend-slides:frontend-slides 스킬을 사용해서 발표 자료를 완성 시켜주세요.💡 ①②의 “캡처·바운딩박스·한 메시지·spotlight” 블록이 매번 반복돼 거슬리면, 그 규칙을
.claude/commands/slides.md에 한 번 넣고/slides <소재>로 부르면 된다(커맨드 본문이 프롬프트로 주입됨). 다만 강의처럼 그때그때 문구를 손봐 가며 쓸 거라면 위 원문을 그대로 복붙하는 게 더 편하다.
한 줄 요약: 시안 골라 생성 → (매뉴얼이면) 네 가지 원칙 지시 →
/visual-verdict로 가독성 점검 → 완성. 위 예시 프롬프트를 그대로 복붙해 쓰면 된다.
6. 실제로 만들어본 예시 — 구독 다이어트 사용자 메뉴얼
frontend-slides로 직접 만든 “구독 다이어트” 앱의 사용자 메뉴얼(38장). 연결부터 해지까지 클릭 단위로 안내하는 매뉴얼형 슬라이드다.
그림: frontend-slides 결과 — “USER MANUAL · 사용 설명서” 표지. 다크 그린 테마에 “연결부터 해지까지, 화면을 따라만 하면 되는 클릭 단위 사용 안내서”라는 부제, 방향키·Space로 넘기는 단일 HTML 뷰어(38장).
- 산출물:
subscription-diet/docs/manual/구독다이어트_사용자메뉴얼.html - 같은 프로젝트라도 frontend-slides는 “사용법 안내(매뉴얼)” 성격으로 나온다 — slides-grab으로 만든 제품 발표 덱과 결이 다르다(🔗 slides-grab 노트).
한 줄 요약: frontend-slides로 구독 다이어트 사용자 메뉴얼(38장, 단일 HTML)을 만들었다 — “사용 안내”에 초점을 둔 결과물.