skills.rest
uxjoseph
uxjosephCOMMUNITY
Explore all skills by this author →
GitHub

design-skill

Generate HTML slide templates with typography, color palettes, and layout tokens.

68|47|Updated Dec 23, 2025
Search Tags:#typography#design#layout#HTML#presentation#slides#color-palette
One-click install
npx skills add https://github.com/uxjoseph/ppt_team_agent --skill design-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-skill
Source: https://github.com/uxjoseph/ppt_team_agent/tree/main/.claude/skills/design-skill
Command: npx skills add https://github.com/uxjoseph/ppt_team_agent --skill design-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing engaging, production-ready slide HTML can be time-consuming and inconsistent across teams. This Skill provides a design system and templates to quickly generate visually polished slide HTML.

Core Features & Use Cases

  • Generate HTML slide templates with consistent typography, color palettes, and layout tokens.
  • Provide reusable templates and style rules that can be adapted for marketing decks, executive briefs, and internal presentations.
  • Use Case: A design team needs a cohesive deck template to launch a new product; they customize content blocks and export a complete set of slides.

Quick Start

Provide an outline or content for slides to the design-skill and it will output a complete HTML slide deck based on the selected theme. Example: Deck: "Quarterly Review"; Sections: "Overview", "Metrics", "Roadmap".

Frequently Asked Questions about design-skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate HTML slide templates from a presentation outline?▼

To generate HTML slide templates, provide your deck title and section outline. The system outputs complete, ready-to-export HTML slides with consistent typography, color palettes, and grid layout tokens.

Can I create a design system with typography and color tokens for presentation slides?▼

Yes, you can create a design system for presentation slides. The output includes reusable typography tokens, color palettes, spacing rules, and layout grids to maintain visual consistency across marketing decks.

What is the best way to build reusable HTML layouts for professional decks?▼

The best way to build reusable HTML layouts is to generate templates with predefined style rules. This produces cohesive content blocks adaptable for executive briefs and internal presentations.

Do I need specific design tools to customize the exported HTML slide templates?▼

You do not need specific design tools to customize the exported HTML slide templates. The generated content blocks and style tokens can be adapted directly in HTML for marketing decks.

Does this approach work for both short executive briefs and longer marketing decks?▼

Yes, this approach works for varying deck lengths. The generated grid layouts and template system are designed to scale from short executive briefs to comprehensive product launch presentations.

Why are my presentation slide HTML designs inconsistent across different decks?▼

Presentation slide HTML designs become inconsistent without a unified design system. Applying standardized typography, color tokens, and spacing rules ensures visually polished and cohesive output across teams.

Related Skills

Explore More Design & Creative Skills→
khapn-2933khapn-2933

tkm:generate-slide

Convert text outlines into HTML or PPTX presentation slides.

Community
Advanced
Clos01Clos01
3

html-ppt-xhs-white-editorial

Create white editorial HTML presentation decks with reusable slide templates.

Community
Intermediate
loadinglucianloadinglucian
1

frontend-design

Transform vague frontend requirements into production-ready HTML/CSS/JS components.

Community
Advanced
Clos01Clos01
3

html-ppt-taste-editorial

Generate editorial-minimalist 16:9 HTML presentation decks with refined typography and structured slide layouts.

Community
Intermediate