처음부터 또는 PowerPoint 파일을 변환하여 멋진 HTML 프레젠테이션을 만드는 코딩 에이전트 기술입니다. Claude Code 플러그인으로 패키지되어 있으며, 핵심 SKILL.md는 파일 시스템 및 셸 접근 권한을 가진 다른 코딩 에이전트도 읽을 수 있습니다.

📺 공략 및 튜토리얼 시청

처음 오신 분들? 이 초보자용 영상은 처음부터 끝까지 전체 과정을 안내해 드립니다.

▶️ 유튜브에서 시청하세요 → (초보자 친화적인 공략 및 튜토리얼)

이것이 하는 일은

프론트엔드 슬라이드는 CSS나 자바스크립트를 몰라도 비디자이너가 아름다운 웹 프레젠테이션을 만들 수 있도록 돕습니다. “보여주기, 말하지 말라” 방식을 사용합니다: 미적 취향을 단어로 설명하라고 요구하는 대신, 시각적 미리보기를 생성하고 원하는 것을 선택할 수 있게 합니다.

다음은 이 스킬을 통해 만든 덱입니다:

https://github.com/user-attachments/assets/ef57333e-f879-432a-afb9-180388982478

주요 특징

• **의존성 제로 — 인라인 CSS/JS가 포함된 단일 HTML 파일. npm, 빌드 도구, 프레임워크 없음.
• 시각적 스타일 발견 — 디자인 선호도를 명확히 표현할 수 없나요? 문제없습니다. 생성된 시각적 미리보기에서 선택하세요.

Frontend Slides

A coding-agent skill for creating stunning HTML presentations — from scratch or by converting PowerPoint files. It is packaged as a Claude Code plugin, and the core SKILL.md can also be read by other coding agents with filesystem and shell access.

📺 Watch the Walkthrough & Tutorial

New here? This beginner-friendly video walks you through the whole thing, start to finish.

▶️ Watch on YouTube → (beginner-friendly walkthrough and tutorial)

What This Does

Frontend Slides helps non-designers create beautiful web presentations without knowing CSS or JavaScript. It uses a “show, don’t tell” approach: instead of asking you to describe your aesthetic preferences in words, it generates visual previews and lets you pick what you like.

Here is a deck about the skill, made through the skill:

https://github.com/user-attachments/assets/ef57333e-f879-432a-afb9-180388982478

Key Features

• Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools, no frameworks.
• Visual Style Discovery — Can’t articulate design preferences? No problem. Pick from generated visual previews.
• PPT Conversion — Convert existing PowerPoint files to web, preserving all images and content.
• Anti-AI-Slop — Curated distinctive styles that avoid generic AI aesthetics (bye-bye, purple gradients on white).
• Bold Template Pack — Optional design-forward templates from beautiful-html-templates, loaded progressively so safe presets still work as the default fallback.
• Production Quality — Accessible, fixed 16:9, well-commented code you can customize.

Installation

Via Claude Code Custom Marketplace Source

Install directly from this public GitHub repo. Run these as two separate Claude Code messages; do not paste both lines into the prompt at once.

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

After that finishes, run:

/plugin install frontend-slides@frontend-slides

Use the HTTPS URL. The shorter zarazhangrui/frontend-slides form may make Claude Code try SSH, which can fail if GitHub is not already in your known_hosts file.

Then use it by typing /frontend-slides:frontend-slides in Claude Code. Claude Code namespaces plugin-installed skills as /plugin-name:skill-name.

Claude Code Manual Installation

Copy the skill files to your Claude Code skills directory:

# Create the skill directory
mkdir -p ~/.claude/skills/frontend-slides/scripts

# Copy the user-facing skill files