frontend-slides: 코딩 에이전트로 웹 슬라이드 만들기
frontend-slides는 코딩 에이전트를 위한, star가 가장 많은 오픈소스 PPT skill로, 슬라이드를 브라우저에서 바로 발표할 수 있는 깔끔하고 현대적인 웹 페이지로 만들어 줍니다. 이 글에서는 그것이 무엇인지, 설치와 사용법, 진짜 잘하는 것(그리고 한계), 다른 Claude PPT skill들과의 비교, 그리고 하나의 skill로는 감당하기 어려워질 때 Agent-Native Design Workspace가 어디서부터 이어받는지를 다룹니다.
슬라이드 덱이 필요하고 이미 터미널에서 살고 있다면, frontend-slides는 그것을 얻는 가장 깔끔한 방법 중 하나입니다. 이것은 코딩 에이전트 스킬입니다. 프레젠테이션 앱을 여는 대신, 이미 쓰고 있는 에이전트에게 덱을 설명하기만 하면, frontend-slides가 당신의 아이디어를 웹 페이지로 만든 슬라이드로 바꿔 줍니다——진짜 HTML과 CSS로, 브라우저에서 바로 발표하죠.
같은 종류 중에서 가장 인기 있는 선택지이기도 합니다. 25k GitHub star와 MIT 라이선스를 갖춘 frontend-slides는 점점 늘어나는 Claude PPT 스킬 선반의 맨 위에 있습니다. 이 글은 그것이 무엇인지, 어떻게 설치하고 프롬프트를 주는지, 무엇을 잘하고 어디서 멈추는지, 이 분야의 다른 스킬들과 어떻게 견주는지, 그리고 하나의 덱이 계속 이어지는 작업 뭉치가 될 때 온전한 워크스페이스가 어디서 들어맞는지를 다룹니다.
frontend-slides란
frontend-slides는 스킬입니다——당신의 코딩 에이전트(Claude Code, Codex, Cursor 등)가 작업 중간에 불러와 한 가지를 잘 해내도록 패키지화된 지시문 묶음이죠. 여기서 그 한 가지는 프레젠테이션 만들기입니다. 에이전트가 이미 가진 프런트엔드 역량을 빌려 슬라이드로 향하게 합니다. 당신이 덱을 평범한 말로 설명하면, 에이전트가 깔끔하고 현대적인 웹 페이지를 슬라이드당 하나씩 써 주고, 당신은 그것을 브라우저에서 넘겨 봅니다.
출력은 설계부터 웹 네이티브입니다. 각 슬라이드가 HTML과 CSS이기 때문에 완전한 제어권을 얻습니다——맞춤 레이아웃, 진짜 타이포그래피, 그러데이션, 트랜지션, 임베드된 차트 등 브라우저가 렌더링할 수 있는 무엇이든요. Zara Zhang이 만들고 유지하며, MIT로 오픈소스이고, 다른 스킬들과 마찬가지로 모델 키 지참 방식입니다. 당신이 API 키를 제공하면, 스킬이 솜씨를 제공합니다.
어떻게 작동하나
루프는 짧고 대부분 대화로 이루어집니다.
- 스킬 설치——frontend-slides를 코딩 에이전트의 스킬 디렉터리에 클론하거나 추가합니다(저장소에 설치 단계가 있습니다). 모델 키는 직접 준비하세요.
- 덱 설명——주제, 청중, 톤, 대략적인 슬라이드 수를 에이전트에 프롬프트로 줍니다. 브리프가 구체적일수록 만들어지는 구조가 좋아집니다.
- 만들게 하기——에이전트가 슬라이드를 웹 페이지로 생성하고, 발표를 위해 브라우저에서 엽니다.
- 반복——평범한 말로 수정을 요청하고("도입부를 다듬어줘", "3번 슬라이드를 2단 비교로 만들어줘", "더 따뜻한 팔레트로") 다시 렌더링합니다. 그냥 CSS이기 때문에 무엇이든 직접 손으로 편집할 수도 있습니다.
- 발표 또는 내보내기——브라우저에서 발표하거나, 공유용으로 PDF로 내보냅니다.
무엇을 잘하나(그리고 솔직한 한계)
frontend-slides가 가장 빛나는 때는 웹 네이티브 슬라이드와, 그 겉모습에 대한 완전한 제어를 원할 때입니다. HTML과 CSS가 편하다면, 당신과 디자인 사이를 가로막는 것이 아무것도 없습니다——어떤 슬라이드든 열어서 손으로 바꾸고, 덱 전체를 git으로 버전 관리하고, 여러 덱에 걸쳐 컴포넌트를 재사용할 수 있죠. 개발자에게는 바로 그 점이 매력의 전부입니다. 독점 포맷 파일이 아니라 코드베이스처럼 동작하는 슬라이드니까요.
솔직한 한계는 그 강점의 이면입니다. 출력은 웹 페이지이지 .pptx가 아닙니다——그러니 조직이 네이티브 도형이 들어간 편집 가능한 PowerPoint를 필요로 한다면, 이건 그 도구가 아닙니다(그것을 겨냥한 스킬은 아래 점수표를 보세요). 편안함의 하한선도 있습니다. HTML과 CSS에서 멀어질수록 "완전한 제어"는 스스로를 설득하기 어려워집니다. 그리고 여느 단일 스킬과 마찬가지로, frontend-slides가 만드는 것은 하나의 덱입니다——프로젝트를 가로질러 브랜드를 이어주지도, 디자인 시스템을 동기화된 상태로 유지하지도 않습니다. 날카로운 단일 목적 도구이고, 스스로 그렇다는 점에 솔직합니다.
frontend-slides 대 다른 Claude PPT 스킬
frontend-slides가 이 범주의 유일한 스킬은 아니며, 올바른 선택은 당신에게 필요한 출력과 감당할 수 있는 라이선스에 달려 있습니다.
| 도구 | 출력 | 라이선스 | 가장 적합한 용도 |
|---|---|---|---|
| frontend-slides | HTML 웹 슬라이드 | MIT | 웹 네이티브 덱, 완전한 CSS 제어 |
| guizang-ppt-skill | HTML(에디토리얼) | AGPL-3.0 | 공들여 디자인한 느낌의 덱 |
| dashiAI | 편집 가능한 프레젠테이션 | AGPL-3.0 | 비개발자가 편집할 수 있는 출력 |
| Open Design | 브랜드에 맞는 편집 가능한 덱 + 템플릿 | Apache-2.0 | 디자인 시스템에 묶여 워크스페이스 안에 있는 덱 |
세련된 에디토리얼 룩을 원한다면 견줘 볼 형제는 guizang-ppt-skill입니다. 결과물이 비개발자도 편집 가능한 상태로 남아야 한다면 dashiAI가 바로 그것을 위해 만들어졌습니다. frontend-slides는 덱이 당신이 온전히 소유하는 웹 페이지 그 자체이기를 원할 때 이깁니다.
Open Design이 들어맞는 지점
frontend-slides는 터미널 안의 덱에는 훌륭한 단일 목적 스킬입니다. 하지만 스킬은 스크립트입니다——프로젝트를 가로질러 브랜드를 이어주지도, 결과물을 실제 워크스페이스에서 편집 가능한 상태로 유지하지도, 덱을 나머지 디자인 작업과 조율하지도 못합니다.
Open Design은 스킬 위에 있는 계층입니다. 이미 쓰고 있는 코딩 에이전트 바깥에 자리하는, 오픈소스(Apache-2.0)이자 로컬 우선, 키 지참 방식의 Agent-Native Design Workspace죠. 덱을 설명하면 에이전트가 디자인 시스템에 맞춰 편집 가능한 덱을 생성합니다——그래서 매번 빈 페이지에서 시작하는 대신 늘 브랜드에 맞게 유지됩니다——그리고 Open Design은 자체 HTML 덱 템플릿을 플러그인 라이브러리에서 제공합니다. 이것은 frontend-slides와 같은 발상에 집을 마련해 준 셈입니다. 당신의 파일, 당신의 브랜드, 편집 가능하고 계속 당신의 것. 오늘 코딩 에이전트로 슬라이드를 만들고 있다면, Open Design이 Claude Code와 어떻게 함께 작동하는지 살펴보세요.
명령줄에서 빠른 웹 네이티브 덱을 원할 때는 frontend-slides를 쓰세요. 덱이 브랜드에 맞고, 편집 가능하며, 더 큰 디자인 작업의 일부여야 할 때는 워크스페이스로 손을 뻗으세요.
자주 묻는 질문
frontend-slides는 무료인가요? 네. MIT 라이선스로 오픈소스이며 무료로 쓸 수 있습니다——모델 API 키만 직접 준비하면 됩니다. MIT는 관대해서 상업적 사용에도 우호적입니다.
frontend-slides는 어떻게 쓰나요? 스킬을 코딩 에이전트의 스킬 디렉터리에 설치한 뒤, 덱(주제, 청중, 분량)을 설명하세요. 에이전트가 슬라이드를 웹 페이지로 만들어 줍니다. 평범한 말로 반복하고 브라우저에서 발표하면 됩니다.
frontend-slides는 PowerPoint로 내보내지나요? 아니요——브라우저에서 발표하는 웹 슬라이드(HTML/CSS)를 만들며, 공유용으로 PDF로 내보낼 수 있습니다. 네이티브 도형이 들어간 편집 가능한 .pptx가 필요하다면, frontend-slides 대신 그 출력을 위해 만들어진 스킬을 보세요.
frontend-slides는 누구에게 가장 잘 맞나요? 웹 네이티브 슬라이드와 완전한 CSS 제어를 원하는 개발자——웹 플랫폼 위에서 편안하게 살며, 프레젠테이션 앱을 여느니 덱을 git으로 버전 관리하고 싶은 사람들입니다.
스킬과 디자인 워크스페이스 중 무엇을 써야 하나요? frontend-slides 같은 스킬은 빠르고 일회성인 덱에 이상적입니다. Open Design 같은 Agent-Native Design Workspace는 브랜드에 맞고 편집 가능한 덱이 나머지 디자인 작업과 함께 살아가야 할 때 더 잘 맞습니다.
핵심 정리
frontend-slides는 코딩 에이전트로 슬라이드를 만드는 방법 중 star가 가장 많으며, 그럴 만합니다. 웹 네이티브 덱, 완전한 CSS 제어, MIT 라이선스, 그 모든 것이 당신이 이미 일하는 터미널에서 구동됩니다. 빠르고 브라우저 우선인 덱을 원하고 HTML과 CSS가 편하다면, 설치하고 마음껏 프롬프트하세요. 하나의 덱이 편집 가능한 상태로 유지되고 디자인 시스템에 묶여야 하는, 계속 이어지고 브랜드에 맞는 작업으로 바뀔 때——바로 그 지점에서 Agent-Native Design Workspace가 이어받습니다.