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.
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).
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.
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.
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.
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.
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.
- 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
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.
- 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
What are this skill's strengths and limitations?
- 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
- 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 do you install this skill?
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.
How do you use this skill?
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.