← All skill packs

Claude Code: UI Design & Frontend Skills

Skill pack
4 skills0 selected
bluzirSkills in this pack

Export an HTML artifact to PDF via headless Chromium (puppeteer Page.pdf). For multi-slide decks one page per .

English

Export an HTML deck to PPTX via per-slide screenshots. Requires Node + pptxgenjs + puppeteer (run /doctor first).

English

Analyze an uploaded image (screenshot of a design, website, app) and extract design tokens to use as a starting point. Use when user pastes or attaches an image and says "recreate this", "match this image", "use this style".

English

Explicitly load a design system from the org-level registry at ~/.claude/design-systems/ / for the current project. Use when user says "use the Acme design system", "apply company-x tokens", or similar.

English

Includes Export PDF, Export Pptx, Ingest Screenshot, and other workflows.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

Supported by the Atlas install prompt. Skill-specific requirements vary.

Pack stats

Skills4CategorygeneralStars0

What’s included

Export PDF

Export an HTML artifact to PDF via headless Chromium (puppeteer Page.pdf). For multi-slide decks one page per .

Export Pptx

Export an HTML deck to PPTX via per-slide screenshots. Requires Node + pptxgenjs + puppeteer (run /doctor first).

Ingest Screenshot

Analyze an uploaded image (screenshot of a design, website, app) and extract design tokens to use as a starting point. Use when user pastes or attaches an image and says "recreate this", "match this image", "use this style".

Use Design System

Explicitly load a design system from the org-level registry at ~/.claude/design-systems/ / for the current project. Use when user says "use the Acme design system", "apply company-x tokens", or similar.

Quick start

  1. Choose your skills. Select individual skills above, or choose the entire pack.
  2. Copy the install prompt. Use Copy install prompt above the list.
  3. Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.

Try it with your agent

After installation, start with a request like:

Example request
Use the Export PDF skill to help with my task.
Ask me for the context you need before getting started.

Requirements & license

  • A coding agent that can access your project files and install skills.
  • Your agent checks each skill’s instructions, dependencies, and permissions during setup.
  • License details are not provided in these listings. Check the author’s terms before using the skills.
Claude Code: UI Design & Frontend Skills | Agent Skills Atlas