/frontend-slides 사용법 매뉴얼 · 2026
분량 6 슬라이드
제작 시간 5 분
도구 Claude Code
대상 당신의 서비스

이 슬라이드, 5분 만에 만들었습니다.

메타 · Claude Code 플러그인

Claude Code 플러그인 하나로요. 지금 보여드릴 그 도구 로 만든 결과물이 바로 이 슬라이드.

§ 01 — 설치

GitHub 링크 한 줄, 그게 전부.

https://github.com/zarazhangrui/frontend-slides

클로드 코드에 위 링크 던지고 이 플러그인 설치해줘 라고 부탁하면 끝납니다. 설치는 자동으로 진행돼요.

§ 02 — 호출

한 줄 입력으로 시작.

/frontend-slides

채팅창에 그대로 입력하면, 클로드가 네 가지 를 차례로 물어봅니다. 답만 잘 하면 슬라이드 한 벌이 옵니다.

§ 03 — 답하기

네 가지만 답하면 끝.

— 01
용도
피치덱·강의·컨퍼런스·내부 발표
— 02
분량
Short 5–10장·Medium 10–20장·Long 20장+
— 03
내용
완성 원고도, 초안도, 주제 한 줄도 다 OK
— 04
스타일
미리보기 3개 보여주면 그중 하나 고르기
§ 04 — 결과

HTML 한 파일 이 옵니다.

— 01
HTML 파일 1 개 생성
단일 파일 · 의존성 0
— 02
브라우저 자동으로 열림
즉시 미리보기
— 03
좌우 화살표·스페이스로 넘김
키보드 · 터치 · 클릭

필요하면 PDF 로 변환하거나 Vercel 에 배포해서 링크 한 줄로 공유할 수도 있습니다.

§ 05 — 더 나아가기

화면 캡쳐도 부탁하면 넣어줍니다.

스크린샷 한 장 던지고 이 자리에 넣어줘 라고 부탁하면, 클로드가 알아서 자르고 정렬해서 슬라이드에 박아줍니다.

스크린샷 슬라이드 3 뒤에 넣어줘. 카드 잘라내고 가운데 정렬로.
PNG · JPG · 자동 자르기 · 자동 정렬
§ 06 — 한 발짝 더

스크린샷도 클로드가 떠줍니다.

이미지 미리 안 만들어도 됩니다. dev 서버 켜서 직접 떠 박아줘 라고 부탁하면, 헤드리스 브라우저까지 클로드가 다 띄워서 박습니다.

dev 서버 켜서 메인 화면 캡쳐해 슬라이드 4 뒤에 넣어줘.
헤드리스 브라우저 자동 · 잘라내기 자동 · 다시 종료까지
— 끝.
당신 서비스 · 한 줄 요약만 · 던지면 됩니다.

— 지금 노트북 열어서 /frontend-slides 한번 호출해보세요. 5 분 안에, 당신만의 슬라이드 한 벌이 나옵니다.

← / → space swipe
01 / 08