천드리고 싶은 스킬이 공개되었습니다.
Design+Code 창업자이자 Aura 제작자로 유명한 'Meng To'가 Agent Skills 라이브러리를 오픈소스로 공개했습니다. Codex, Claude Code, Cursor 등에서 사용할 수 있는 75개의 스킬이 포함되어 있으며, 웹디자인, 랜딩페이지, 모션, WebGL, UI 제작 작업을 훨씬 편하게 만들어줍니다.
Meng ToMeng To on Twitter / X​
특히 화면 녹화 영상을 Fable 5 용 프롬프트로 변환하거나, 랜딩페이지 전체를 분석해 프롬프트를 추출하는 스킬은 활용도가 높아 보입니다.
AI로 디자인이나 개발을 하고 있다면 꼭 한 번 사용해보시길 추천드립니다.
0. 먼저 알아야 할 것
"스킬(Skill)"은 AI에게 "이 작업을 할 때는 이렇게 해"라고 알려주는 지침서 텍스트 파일입니다. 파일 하나가 곧 하나의 매뉴얼이라고 생각하시면 됩니다.
이 지침서를 Claude, Cursor 같은 AI 채팅/코딩 도구에 넣어주면, AI가 그 지침을 따라서 훨씬 완성도 높은 결과물(랜딩페이지, 애니메이션, UI 등)을 만들어 줍니다. 사용자가 직접 코드를 쓸 필요는 없습니다. 필요한 건 딱 두 가지입니다.

인터넷 브라우저

Claude(클로드) 또는 ChatGPT 같은 AI 채팅 도구 계정
1단계. 깃허브 저장소 접속하기
브라우저 주소창에 아래 링크를 입력해 접속합니다.
화면이 열리면 위쪽에 MengTo / Skills 라는 제목과 함께, 아래에 폴더/파일 목록이 보입니다. 로그인은 하지 않아도 괜찮습니다. (파일을 "보기"만 할 거라 계정이 필요 없습니다.)
목록 중에 agent-skills 라는 이름의 폴더가 있습니다. 이 폴더 안에 실제 스킬 75개가 전부 들어있습니다. 클릭해서 들어갑니다.

???? 화면 아래로 스크롤하면 README(설명서)가 있는데, 여기서 어떤 스킬들이 있는지 카테고리별 목록을 먼저 훑어볼 수 있습니다. 뭘 고를지 모르겠으면 여기서 먼저 구경하세요. 그래도 모르겠으면 깃허브 링크만 클로드에게 던져주면 알아서 파악합니다.
2단계. 원하는 스킬 폴더 찾기
agent-skills 폴더 안은 아래처럼 4개의 큰 카테고리로 나뉘어 있습니다.
폴더명
내용
스킬 수
web-design
랜딩페이지, 애니메이션, WebGL, CSS 효과, 레이아웃 등
62개
codex
화면 녹화 영상 → 프롬프트 변환, 리서치 자동화 등
10개
ui
UI 프롬프트 작성법
1개
media
이미지 소싱 (Unsplash, Aura 에셋)
2개
원하는 폴더를 클릭해서 들어가면, 그 안에 SKILL.md라는 파일이 보입니다. (폴더에 따라 REFERENCES.md, ARTICLE.md 같은 파일이 같이 있을 수도 있는데, 지금은 무시하고 SKILL.md만 보시면 됩니다.)
3단계. SKILL.md 내용 복사하기
SKILL.md 파일을 클릭하면 내용이 화면에 텍스트로 쭉 보입니다.
화면 오른쪽 위를 보면 작은 아이콘 몇 개가 있는데, 그중 **복사 아이콘(사각형 두 개 겹친 모양)**을 클릭합니다. 이 버튼이 "Copy raw content" 버튼으로, 누르면 파일 내용 전체가 클립보드에 자동으로 복사됩니다.
아이콘이 안 보이거나 헷갈리면: 파일 내용 아무 곳이나 클릭한 다음 Cmd+A(맥) 또는 Ctrl+A(윈도우)로 전체 선택 → Cmd+C / Ctrl+C로 복사해도 동일합니다.
이제 이 스킬 내용은 클립보드에 저장된 상태입니다.
4단계. AI 도구에 붙여넣기
방법 A. Claude(클로드) 채팅에 바로 붙여넣기 — 가장 쉬움
claude.ai 또는 Claude 앱을 엽니다.
새 대화를 시작합니다.
채팅창에 아래처럼 입력합니다.
아래는 웹디자인 작업 지침이야. 이 지침대로 [만들고 싶은 것]을 만들어줘.

(여기에 Cmd+V로 복사한 SKILL.md 내용 붙여넣기)
​
Claude가 지침을 따라서 HTML/CSS 코드를 만들어 줍니다. 코드를 다 이해할 필요는 없고, 결과물(미리보기)만 확인하면 됩니다.
방법 B. Cursor 사용 시 (코드 에디터를 쓰는 경우)
Cursor를 열고 프로젝트를 하나 만듭니다.
채팅창(또는 Rules 설정)에 SKILL.md 내용을 붙여넣습니다.
"이 지침대로 작업해줘"라고 요청하면 Cursor가 실제 파일까지 만들어 줍니다.
방법 C. ChatGPT / Codex 사용 시
작업을 시작하기 전에 SKILL.md 내용을 먼저 붙여넣고 "이 지침을 참고해서 작업해줘"라고 요청한 뒤, 이어서 원하는 결과물을 요청합니다.
5단계. (선택) 여러 스킬을 한 번에 받고 싶다면
github.com/MengTo/Skills 메인 화면에서 초록색 Code 버튼을 클릭합니다.
Download ZIP을 클릭합니다. (git이나 개발 지식 전혀 필요 없습니다.)
압축이 풀리면 agent-skills 폴더 안에서 원하는 SKILL.md 파일들을 필요할 때마다 열어서 복사해 쓰면 됩니다.
6단계. 실전 검증: 멩투가 뽑은 "베스트 4" 스킬, 실제로 다 써봤습니다
멩투가 X(트위터)에 이 라이브러리를 공개하면서 직접 추천한 스킬 4개가 있습니다. 전부 codex 폴더 안에 있는데, 이름만 보고 다 같은 난이도라고 생각하면 안 됩니다. 실제로 하나씩 열어서 돌려본 결과, 난이도 차이가 꽤 큽니다.

스킬
경로
난이도
코딩 지식 없이 바로 가능?
Video to Super Prompt
codex/video-to-superprompt
쉬움
✅ 가능
구조는 완벽히 재현. 하지만 클로드가 이미지/영상까지 제작해주진 못함.
HTML to Interaction Prompts
codex/html-to-interaction-prompts
쉬움
✅ 가능
Stitched Full Page Capture
codex/stitched-full-page-capture
중간
▲ 원리는 수동 재현 가능, 완전 자동화는 코딩 필요
Daily UI Inspiration
codex/daily-ui-inspiration-capture
어려움
❌ 멩투 개인 저장소 전용, 사실상 재현 불가
자주 하는 실수
Q. SKILL.md를 열었는데 글자가 깨져 보여요.
상단에 있는 파일 목록(트리 구조)이 아니라 실제 파일 내용 화면인지 확인하세요. 파일명을 클릭해서 들어가야 내용이 보입니다.
Q. AI한테 붙여넣었는데 반응이 밋밋해요.
스킬 내용만 붙여넣고 끝내지 말고, 뒤에 구체적으로 "무엇을" 만들고 싶은지(업종, 톤, 색감 등) 함께 적어주세요.
Q. 4개 스킬 다 똑같이 쉬운 줄 알았는데 아니네요?
네, codex 폴더 안이라고 다 같은 난이도가 아닙니다. 위 6단계 표를 기준으로, Video to Super Prompt와 HTML to Interaction Prompts부터 시작하는 걸 추천합니다.
요약
github.com/MengTo/Skills 접속 → agent-skills 폴더에서 원하는 스킬 찾기
SKILL.md 내용 전체 복사
Claude 채팅에 (필요하면 영상·이미지와 함께) 붙여넣고 원하는 작업 요청
나온 프롬프트를 Fable 5(claude.ai에서 모델 선택)에 붙여넣어 실제 결과물 확인
codex 폴더 스킬은 난이도 차이가 크니, Video to Super Prompt부터 시작
출처: Anthropic 공식 문서,  X, 스레드
제작:  @trenddalkak.ai
최종 업데이트: 2026년 7월 9일
감사합니다.