프론트엔드 슬라이드|웹 기반 고급 프레젠테이션 제작

파워포인트 대신 코드로 슬라이드를 만듭니다. 디자인 취향을 말로 설명할 필요 없이 여러 시안을 직접 만들어 보여주고 고르게 하는 방식이라, 보라색 그라데이션 같은 흔한 AI 티가 안 납니다. 스타 2만 개 이상으로 이 분야에서 가장 널리 쓰이는 커뮤니티 스킬입니다.

도도리 AI연구소 · 최종 수정 2026년 10월 4일 · CC BY-NC 4.0

디자인 분야 · 글쓰기·콘텐츠 용도 · 개발자용입니다.

frontend-slides 스킬 설치 한 줄

Claude Code 에서 마켓플레이스를 먼저 등록합니다. Claude Code 는 터미널·데스크톱 앱(Mac·Windows)·웹(claude.ai/code)·VS Code·JetBrains 확장 어디서든 쓰며, 명령을 넣는 자리에 붙여 넣으시면 됩니다.

frontend-slides 스킬 설치 절차 전체

위 한 줄에서 막히셨다면 여기를 보십시오. 터미널로 쓰시는 분을 위해 터미널 여는 법부터 확인 명령까지 순서대로 적어 두었습니다. 데스크톱 앱·웹·편집기 확장으로 쓰시면 터미널 여는 단계는 건너뛰고 명령 입력 칸에 같은 줄을 넣으시면 됩니다.

# zarazhangrui/frontend-slides 설치

## 1. 마켓플레이스를 등록합니다

/plugin marketplace add https://github.com/zarazhangrui/frontend-slides

## 2. 플러그인을 넣습니다

/plugin install frontend-slides@frontend-slides

## 3. Claude Code 를 다시 시작합니다

쓰시던 방식대로 Claude Code 를 껐다 켜십시오.
터미널이면 claude 를 끝내고 다시 실행하고, 데스크톱 앱·웹·편집기
확장이면 그 세션을 새로 여십시오. 실행 중인 세션은 시작할 때 읽은
목록을 그대로 씁니다.

대화만 하는 Claude 앱은 여기서 다시 시작할 대상이 아닙니다.
그쪽에는 스킬이 들어가지 않습니다.

## 4. 확인

넣고 나면 관련 작업에서 알아서 불러 씁니다.
매번 지정하지 않아도 됩니다.

이렇게 시켜 보세요

넣고 나서 바로 던져 볼 수 있는 지시문입니다. 누르면 복사됩니다.

알아 둘 것

frontend-slides 스킬 안 될 때 확인할 것

파워포인트로 바로 안 열립니다

결과물이 HTML 이라 웹으로 공유하거나 PDF 로 내보내야 합니다. pptx 파일이 꼭 필요하면 다른 스킬을 쓰십시오.

언제 쓰고, 언제 안 쓰나

완성도가 중요한 투자 유치·브랜드 소개 자료에 씁니다. 파워포인트 파일 자체가 필요한 상황에는 맞지 않습니다.

비슷한 것 중에 왜 이걸

guizang-ppt-skill 과 같은 HTML 슬라이드지만 만드는 방식이 다릅니다. 저쪽은 매거진과 스위스, 정해진 두 스타일 중에 고르는 것이고 이건 시안을 여러 개 만들어 보여준 다음 고르게 합니다. 취향을 말로 설명할 수 없을 때 그 차이가 큽니다. 다만 결과가 HTML 이라 파워포인트로 열리지 않습니다. 파일 자체를 넘겨야 한다면 elite-powerpoint-designer 를 쓰십시오.

디자인 도구를 고를 때

Figma 등 디자인 툴과 연동합니다. 팀 플랜이 필요한 기능인지, 읽기 권한만 요구하는지 편집 권한까지 요구하는지 확인하세요.

원본 보기

스킬의 실제 내용은 SKILL.md 파일 하나에 들어 있습니다. 넣기 전에 한 번 읽어 보시는 것을 권합니다. 스킬은 Claude 에게 그대로 들어가는 지시문이라, 무엇을 시키는지 확인하지 않고 쓰면 의도치 않은 동작을 할 수 있습니다.

GitHub 에서 zarazhangrui/frontend-slides 열기

이 작업에 쓰는 장비 제휴 링크

만든 화면을 실제 기기에서 확인하는 작업입니다.

갤럭시 Z 폴드8접이식 화면. 접었을 때와 폈을 때 폭이 두 배 가까이 다릅니다.(삼성전자) 삼성 공식 갤럭시 Z 폴드8 울트라 (1TB) (SM-F976N) (자급제폰) (크림) 3,301,100원보기 ↗아이패드A16 모델. 만든 화면을 손으로 확인하는 용도입니다.Apple 2025 아이패드 (A16 모델) 636,650원보기 ↗노트북 거치대화면을 눈높이로 올립니다. 알루미늄, 접이식.애니클리어 프리미엄 알루미늄 노트북 거치대 받침대 AP-1 15,760원보기 ↗

이 페이지는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 이용자가 내는 금액은 달라지지 않습니다.

직접 만든 PPT 스킬

도도리 AI연구소가 직접 만들어 실제 발주처 제안서에 쓴 스킬 4종입니다. 회사 대표 색에 맞춘 제안서가 .pptx 로 나오고, 한글 폰트가 깨지지 않게 고정돼 있습니다. 지시문은 전부 공개, 빌더 묶음은 회원 무료입니다.

PPT 디자인 스킬 4종 전부 보기 →

별점과 댓글

이 스킬을 써 보신 분의 별점(5점 만점)과 한마디입니다. 작성자는 아이디 앞 3자만 보입니다(예: wor****). 읽는 데는 제한이 없고, 남기는 것은 로그인한 회원만 됩니다. 한 사람이 한 번이며 다시 쓰면 앞의 것을 덮어씁니다.

자주 묻는 것

프론트엔드 슬라이드 스킬(frontend-slides)은 어떻게 설치합니까?

클로드 코드 대화창에 /plugin marketplace add https://github.com/zarazhangrui/frontend-slides 을 치십시오. 넣은 뒤에는 클로드를 완전히 껐다 켜야 반영됩니다. 창만 닫으면 안 됩니다.

프론트엔드 슬라이드 스킬은 무엇을 합니까?

파워포인트 대신 코드로 슬라이드를 만듭니다. 디자인 취향을 말로 설명할 필요 없이 여러 시안을 직접 만들어 보여주고 고르게 하는 방식이라, 보라색 그라데이션 같은 흔한 AI 티가 안 납니다. 스타 2만 개 이상으로 이 분야에서 가장 널리 쓰이는 커뮤니티 스킬입니다.

프론트엔드 슬라이드 스킬은 언제 씁니까?

광고·투자 유치·브랜드 소개처럼 완성도가 중요한 발표 자료를 파워포인트보다 훨씬 고급스럽게 뽑고 싶을 때입니다. 완성도가 중요한 투자 유치·브랜드 소개 자료에 씁니다. 파워포인트 파일 자체가 필요한 상황에는 맞지 않습니다.

프론트엔드 슬라이드 스킬을 쓸 때 걸리는 데가 있습니까?

파워포인트로 바로 안 열립니다. 결과물이 HTML 이라 웹으로 공유하거나 PDF 로 내보내야 합니다. pptx 파일이 꼭 필요하면 다른 스킬을 쓰십시오.

함께 보면 좋은 스킬

어느 것부터 깔지 모르겠다면 클로드 스킬 추천 15개를 보십시오. 67개를 직접 깔아 보고 골랐습니다.