Claude Code · Codex · Cursor · OpenCode

Claude Code, Codex 및 여러분의 에이전트를 위한 디자인 스킬.

PPT 및 슬라이드 덱, 프론트엔드 및 UI 디자인, 브랜드 시스템, 모션 및 디자인 리뷰를 위한 138개의 오픈소스 스킬 — 실제 SKILL.md 파일에서 카탈로그화되었습니다. 스킬 이름 또는 완료해야 할 작업에서 시작하십시오.

OpenDesign 다운로드 전체 138개 스킬 탐색

작업은 알지만 스킬 이름은 모르십니까? 작업별로 카탈로그 필터링

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, … ---

업스트림 SKILL.md 파일의 머리말 · frontend-design, ui-ux-pro-max, impeccable스냅샷 2026-09-14

Skills

Claude Code 및 Codex용 138개디렉터리 목록이 아닌 실제 SKILL.md 파일에서 읽음

Sources

34개의 오픈소스 리포지토리모든 항목은 업스트림 파일로 연결됩니다

Licenses

MIT · Apache-2.0 · 기타 3개파일 또는 리포지토리 수준에서 확인되었으며 모든 카드에 표시됩니다

최종 확인일

2026-09-14이 날짜에 출처, 라이선스 및 리포지토리 스타가 확인되었습니다

01 전체 스킬

작업별 전체 138개 디자인 스킬.

PPT 및 슬라이드 덱, 프론트엔드 및 UI, 모바일, 브랜드 시스템, 모션 및 비디오, 디자인 리뷰. 모든 카드는 해당 스킬의 SKILL.md로 연결됩니다.

일치하는 스킬이 없습니다.

02 선택 및 시작 방법

디자인 스킬을 선택하고 Claude Code 또는 Codex에서 실행하는 방법

작업과 출력으로 선택하고, 스킬이 필요로 하는 것을 확인한 후, 에이전트에 설치하여 실제 작업을 실행하십시오. Claude Code, Codex, Cursor 및 OpenCode에서 동일한 세 단계가 적용됩니다.

1
스킬 이름이 아닌 작업으로 선택
만들어야 하는 것으로 필터링합니다 — 랜딩 페이지, 프레젠테이션, 브랜드 시스템, 리뷰. 별점을 비교하기 전에 한 줄 용도와 결과물 유형을 비교합니다.
확인실제로 필요한 파일과 출력이 일치하는 두세 개의 후보
카탈로그 · 작업별 필터링01

Motion & Video 27

gsap-scrolltrigger
ScrollTrigger를 사용한 스크롤 연동 애니메이션: 고정, 스크럽, 트리거, 패럴랙스.
Motion & VideoUI code15,248 repo stars
animate
목적, 도구, 속성, 곡선 및 지속시간을 순서대로 결정하여 애니메이션을 처음부터 구축합니다.
Motion & VideoUI code37,516 repo stars
2
스킬이 필요로 하는 것 확인
소스를 열고 요구 사항을 읽으십시오. 일부 스킬은 Google Stitch, HyperFrames 또는 GSAP과 같은 특정 도구에서만 작동하며, 일부는 이미지 생성 서비스가 필요합니다. SKILL.md에 명시된 경우 카탈로그는 필요 사항 아래에 이를 표시합니다.
확인스킬이 지정한 도구 또는 서비스가 설치 전에 프로젝트에서 사용 가능한지 확인
greensock/gsap-skills · SKILL.md02

gsap-scrolltrigger

ScrollTrigger를 사용한 스크롤 연동 애니메이션: 고정, 스크럽, 트리거, 패럴랙스.

필요 사항: 프로젝트에 GSAP 필요

--- 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
에이전트에 설치하고 실제 작업 실행
작성자가 문서화한 방식으로 스킬을 설치하십시오 — 대부분의 리포지토리의 경우 npx skills add 명령 하나입니다 — 그런 다음 Claude Code, Codex 또는 에이전트에서 자신의 콘텐츠로 실제 작업을 실행하십시오. 에이전트가 스킬을 인식하고 사용할 때까지 명령을 복사하는 것은 성공적인 설치가 아닙니다.
확인에이전트가 스킬을 이름으로 나열하고 호출 시 출력이 변경되는지 확인
터미널03
```
$ 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…
```
예시 세션 · 설치 단계와 출력은 에이전트에 따라 다름

03 OpenDesign에서 실행

이 중 38개 스킬이 OpenDesign에 포함되어 있습니다. 나머지는 링크에서 가져옵니다.

OpenDesign는 Claude Code가 사용하는 SKILL.md 형식을 그대로 읽으므로, 이 카탈로그의 모든 스킬은 Claude Code, Codex, Cursor 또는 OpenCode를 엔진으로 하여 실행됩니다.

38
기본 탑재됨
frontend-design, ui-ux-pro-max, impeccable, guizang-ppt-skill, 여덟 가지 GSAP 스킬 등은 설치 시 Plugins → Skills에 있습니다. 위 카탈로그에서 In OpenDesign 태그가 표시됩니다.
↗
링크에서 다른 스킬 가져오기
Plugins → Add → Skill → Import from link에서 스킬 폴더의 GitHub 링크(각 카드의 Source와 동일한 링크)를 붙여넣으면 개인 스킬에 추가됩니다. 로컬 폴더 업로드도 가능합니다.
›_
이미 사용 중인 에이전트로 실행됩니다
상단 바에서 스킬을 선택하면 해당 SKILL.md가 DESIGN.md와 함께 프롬프트에 구성됩니다. Claude Code, Codex, Cursor 또는 OpenCode가 작업을 수행하고, 미리보기와 내보내기는 OpenDesign가 처리합니다.

OpenDesign

이미 사용 중인 코딩 에이전트로 디자인 스킬을 실행하십시오.

OpenDesign은 오픈 소스 로컬 우선 디자인 작업 공간입니다. 코딩 에이전트를 프로토타입, 웹 페이지, 슬라이드 및 HTML 비디오를 위한 디자인 엔진으로 전환합니다 — 자체 키를 사용하여 자신의 기기에서 실행 가능한 실제 파일.

OpenDesign 다운로드 빠른 시작 읽기

이 카탈로그의 스킬은 독립적인 오픈소스 프로젝트입니다. 38개는 OpenDesign에 포함되어 제공되며, 나머지는 저장소 링크에서 가져옵니다. 각 스킬의 고유 가이드가 여전히 적용됩니다.

푸른 만 위의 언덕 마을을 그린 유화로, OpenDesign 사이트 전반에서 사용하는 회화풍 스타일입니다.

Claude Code, Codex 및 여러분의 에이전트를 위한 디자인 스킬.

작업별 전체 138개 디자인 스킬.

디자인 스킬을 선택하고 Claude Code 또는 Codex에서 실행하는 방법

스킬 이름이 아닌 작업으로 선택

스킬이 필요로 하는 것 확인

에이전트에 설치하고 실제 작업 실행

이 중 38개 스킬이 OpenDesign에 포함되어 있습니다. 나머지는 링크에서 가져옵니다.

기본 탑재됨

링크에서 다른 스킬 가져오기

이미 사용 중인 에이전트로 실행됩니다

이미 사용 중인 코딩 에이전트로 디자인 스킬을 실행하십시오.