Claude Code · Codex · Cursor · OpenCode

Design Skills for Claude Code, Codex and Your Agent.

138 open-source skills for PPT and slide decks, frontend and UI design, brand systems, motion and design review — catalogued from real SKILL.md files. Start from a skill name, or from the job you need to finish.

Download OpenDesign Browse all 138 skills

Know the task but not the skill name? Filter the catalog by task

anthropics/skills01

--- name: frontend-design description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults. --- # Frontend Design Approach this as the design lead at a design studio known for giving every client a distinct visual identity that is not mistaken for anyone else's. This client has already rejected proposals that felt cliché or templated, and is paying for a distinctive point of view: make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief, and take aesthetic risk …

nextlevelbuilder/ui-ux-pro-max-skill02

--- name: ui-ux-pro-max description: UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, … ---

pbakaus/impeccable03

--- name: impeccable description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, … ---

Front matter from the upstream SKILL.md files · frontend-design, ui-ux-pro-max, impeccableSnapshot 2026-09-14

Skills

138 for Claude Code & CodexRead from the real SKILL.md files, not directory listings

Sources

34 open-source repositoriesEvery entry links to its upstream file

Licenses

MIT · Apache-2.0 · 3 othersVerified at file or repository level, shown on every card

Last verified

2026-09-14Sources, licenses and repository stars checked on this date

01 All skills

All 138 Design Skills, by Task.

PPT and slide decks, frontend and UI, mobile, brand systems, motion and video, design review. Every card links to the skill's SKILL.md.

No matching skills.

02 How to choose and start

How to Choose a Design Skill and Run It in Claude Code or Codex.

Pick by task and output, check what the skill needs, then install it in your agent and run one real task. The same three steps work in Claude Code, Codex, Cursor and OpenCode.

1
Choose the Task, Not the Skill Name
Filter by what you need to make — a landing page, a deck, a brand system, a review. Compare the one-line use and the output type before you compare stars.
CheckTwo or three candidates whose output matches the file you actually need.
2
Check What the Skill Needs
Open the source and read the requirements. Some skills only work with a specific tool such as Google Stitch, HyperFrames, or GSAP; some need an image-generation service. The catalog lists these under Needs when the SKILL.md states them.
CheckThe tool or service the skill names is available in your project before you install.
greensock/gsap-skills · SKILL.md02

gsap-scrolltrigger

Scroll-linked animation with ScrollTrigger: pinning, scrub, triggers, parallax.

Needs: GSAP in the project

--- name: gsap-scrolltrigger description: Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks … ---
3
Install It in Your Agent and Run One Real Task
Install the skill the way its author documents it — for most repositories that is one npx skills add command — then run one real task with your own content in Claude Code, Codex or your agent. Copying a command is not a successful install until the agent recognizes and uses the skill.
CheckThe agent lists the skill by name and its output changes when you invoke it.
Terminal03
```
$ npx skills add https://github.com/greensock/gsap-skills --skill gsap-scrolltrigger
✓ gsap-scrolltrigger added for 1 agent
$ claude
› /gsap-scrolltrigger  pin the hero and scrub the timeline on scroll…
```
Illustrative session · install steps and output vary by agent

03 Run them in OpenDesign

38 of These Skills Ship Inside OpenDesign. Import the Rest from a Link.

OpenDesign reads the same SKILL.md format Claude Code uses, so any skill in this catalog runs in it — with Claude Code, Codex, Cursor or OpenCode as the engine.

38
Already Bundled
frontend-design, ui-ux-pro-max, impeccable, guizang-ppt-skill, the eight GSAP skills and more are in Plugins → Skills on install. They carry an In OpenDesign tag in the catalog above.
↗
Import Any Other Skill from Its Link
Plugins → Add → Skill → Import from link, paste the GitHub link of the skill folder — the same link as Source on each card — and it lands in your personal skills. A local folder upload works too.
›_
Runs with the Agent You Already Use
Pick the skill in the top bar and its SKILL.md is composed into the prompt together with your DESIGN.md. Claude Code, Codex, Cursor or OpenCode does the work; the preview and exports are OpenDesign's.

OpenDesign

Run Design Skills with the Coding Agents You Already Use.

OpenDesign is an open-source, local-first design workspace. It turns coding agents into a design engine for prototypes, web pages, slides, and HTML video — real runnable files, on your own machine, with your own keys.

Download OpenDesign Read the quickstart

The skills in this catalog are independent open-source projects. 38 ship inside OpenDesign; the rest import from their repository link. Each skill's own guide still applies.

Oil painting of a hillside village above a blue bay, in the painterly style used across the OpenDesign site

Design Skills for Claude Code, Codex and Your Agent.

All 138 Design Skills, by Task.

How to Choose a Design Skill and Run It in Claude Code or Codex.

Choose the Task, Not the Skill Name

Check What the Skill Needs

Install It in Your Agent and Run One Real Task

38 of These Skills Ship Inside OpenDesign. Import the Rest from a Link.

Already Bundled

Import Any Other Skill from Its Link

Runs with the Agent You Already Use

Run Design Skills with the Coding Agents You Already Use.