Design & Frontend

Design Skill — Professional Presentation Design System

Turns presentation outlines into polished, typographically rigorous HTML slides, solving the problem of AI-generated decks that look amateurish.

48/ 100
Use with care

Useful, but reliability, evidence or controls still have material gaps.

See how it was scored ↓
Works as-is in
Codex · Claude Code
Stars
★ 68
Last updated
10mo ago
html-slidespresentation-designtypographypretendard
+3color-palettesslide-templatespptx

What does this skill do, and when should you use it?

design-skill is one of the skills bundled in the ppt_team_agent repository, located at .claude/skills/design-skill/SKILL.md. It contains no executable code; instead it is a detailed HTML slide design specification: a fixed 16:9 (720pt×405pt) canvas, a type scale built around the Pretendard font with defined sizes, letter-spacing and line-heights, five predefined color palettes, spacing and grid standards, and ten complete slide templates (cover, contents, section divider, content, statistics, split image/text, team, quote, timeline, closing). Output files are saved as slide-01.html onward in a slides/ directory; HTML-to-PPTX conversion is handled by a sibling skill, not this one. The repository is MIT-licensed and authored by Builder Josh.

Reads a slide-outline.md file; generates standalone HTML slide files through a five-step workflow (analyze outline → choose theme palette → plan per-slide layout types → generate each slide's HTML → review consistency). Each slide uses the Pretendard CDN font, strict size/letter-spacing/line-height scales, one of five CSS color variable sets, and reusable components (badges, section numbers, logo blocks, icon buttons, dividers, info grids). Files are saved to slides/ with two-digit numbering (slide-01.html). It also enforces a rule that all text sits in p/h1-h6/ul/ol/li tags so downstream PPTX conversion does not drop it.

Good fit
  • A business professional who needs consistent, branded weekly reports but has no designer
  • A developer using Claude Code or a similar agent to turn content outlines into preview-ready HTML slides automatically
  • Korean-language content creators who want Pretendard typography and professional layout
  • Presenters who must support 16:9, 4:3 and 16:10 screens and projectors
  • Users of the repo's html2pptx pipeline who need higher-quality intermediate HTML before conversion to PPTX

How do you install this skill?

Before you use it
  • The Timeline template is incomplete in the source file (code truncated mid-block) and must be completed before use
  • Pretendard font depends on the jsdelivr CDN; loading may fail offline or from mainland-China networks — consider bundling the font or adding a fallback
  • No license or version metadata inside the skill; verify the repo-level MIT license scope before compliance-sensitive use
  • All content is Korean, which may limit triggering and usability for Chinese-speaking users
  • Static review only: no rendering or conversion was executed, so output quality requires real-world verification
Before you start
Your agent needs
  • Network access
  • Local filesystem
Install first
  • Pretendard webfont via jsDelivr CDN (network access for font loading)

Clone and set up the repository: git clone https://github.com/uxjoseph/ppt_team_agent.git && cd ppt_team_agent && npm install (steps from the README). The skill lives at .claude/skills/design-skill/; Claude Code discovers skills under .claude/skills/ automatically, and for other clients you would copy the design-skill folder into that client's skills directory. The skill itself ships no separate installation instructions — this is undocumented.

Generic route: install into Claude Code manually (macOS / Linux)
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/uxjoseph/ppt_team_agent.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/.claude/skills/design-skill" ~/.claude/skills/
rm -rf "$tmp"

Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.

How do you use this skill?

Try saying

Once installed, send your agent any of these to trigger it:

  • Use design-skill to design this outline as slides

Prepare a slide-outline.md with your content, then invoke the skill (e.g., "Use design-skill to design this outline as slides"). It guides generation of HTML files into slides/ per its spec. The repo provides npm run html2pptx to convert HTML into PPTX; the skill document itself defines no additional commands.

What are this skill's strengths and limitations?

Pros
  • Extremely concrete spec: exact values for font sizes, letter-spacing, line-height, padding and grid ratios yield consistent output
  • Ten full copy-paste templates covering every common business deck slide type
  • Five palettes suited to different contexts (executive minimal, modern dark, corporate blue, warm neutral, sage)
  • Explicit PPTX-conversion constraints (text tag rules, no CSS gradients) reduce rework
Limitations
  • Spec and templates only — no executable scripts; the HTML→PPTX conversion belongs to a separate sibling skill
  • Hard-wired to Pretendard and fixed pt dimensions; changing fonts or canvas size requires manual rework
  • CSS gradients are unsupported in PowerPoint conversion and must be replaced with background images
  • Empty repo description/topics and a README structure that doesn't match the skill path; documentation quality is uneven
  • No test suite or evidence of validation on other agent platforms

How does this skill compare with similar options?

Side by side with related skills; every score comes from the same FSRS standard.

Skill FS score Stars Last updated License
Design Skill — Professional Presentation Design System this page 48 · Use with care ★ 68 10mo ago —
OfficeCLI Morph-PPT Skill 60 · Recommended ★ 32k 13d ago Apache-2.0
Slides Grab HTML Skill 60 · Recommended ★ 1.2k 1mo ago MIT
Slides Grab Design Skill 51 · Use with care ★ 1.2k 1mo ago MIT
Theme Factory 59 · Recommended ★ 3.1k 8mo ago MIT

How did FollowSkills review this skill?

FollowSkills review · FSRS-2.0
Use with care
48/ 100 5-point scale 2.4 / 5
1Trust18 / 25 · 3.6/5

This skill is a purely static design reference document with no script execution, permission requests, external writes, or covert behavior; minimal risk surface. Deducted for: templates depend on an external jsdelivr CDN for the Pretendard font (supply-chain and reachability risk), no disclosed offline fallback, and incomplete in-skill attribution (no license/author metadata inside the skill).

2Reliability8 / 20 · 2.0/5

Content is self-consistent HTML/CSS templates and design specs; happy path is plausible. Deducted for: the Timeline template is truncated mid-code in the source file, no tests, no edge-case handling, no failure-feedback mechanism, and rendering quality cannot be verified in a static read.

3Adaptability7 / 15 · 2.3/5

Scenario is clear (business presentation HTML slide design) and the description field supports semantic triggering. Deducted for: no declared capability boundaries or non-fit ranges, description and body are entirely Korean with no Chinese support, and templates depend on an overseas CDN (jsdelivr), posing reachability risk from mainland-China networks.

4Convention7 / 15 · 2.3/5

Well-layered, readable structure (philosophy → specs → components → templates) with rich examples. Deducted for: no in-skill license metadata (README claims MIT but this is not confirmed at skill level), no versioning or changelog, no known-limitations disclosure, unclear maintenance ownership and update path, and the truncated source file undermines completeness.

5Effectiveness5 / 15 · 1.7/5

As a design template library it offers real marginal value for producing polished HTML slides, and templates are directly copyable. Deducted for: static review cannot verify rendering correctness or visual quality, no representative output evidence, CDN font dependency may degrade output offline, and human review is still required.

6Verifiability3 / 10 · 1.5/5

Only single-source declarative content; no tests, no CI evidence covering this skill, no third-party execution or rendering verification. Deducted for: key claims (design quality, conversion usability) are not independently reproducible and fact/inference separation cannot be validated.

1 2 3 4 5 6

Open a dimension to read why it scored that way

Reviewed Sep 10, 2026 Reviewed revision cfe7781859de Review evidence[1][2][3]

Evidence confidence:Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.

See the full review method →

FAQ

Does it produce .pptx files directly?
No. This skill outputs HTML slide files only; the repo's pptx-skill (html2pptx, built on pptxgenjs and playwright) handles conversion — they are separate skills.
Is an internet connection required?
Every generated HTML slide references the Pretendard webfont from jsDelivr's CDN, so previewing or converting requires network access to that CDN.
How easy is it to change the palette or font?
The five color palettes swap directly; however, the type scale, spacing and 720pt canvas are hard-coded spec values, and deviating from them risks losing consistency.
Can slide dimensions be customized?
The skill defines only 16:9 (720pt×405pt), 4:3 (720pt×540pt) and 16:10 (720pt×450pt); other sizes are outside its specification.

More skills from this repository

All from uxjoseph/ppt_team_agent

Related skills