AI 스킬 50선 — 초보자용 설치·사용 가이드
페이지 정보
작성자 컴세이프119 댓글 0건 조회 9회 작성일 26-07-24 22:47본문
① 화면 디자인 스킬 (프론트엔드 & UI)
웹·앱 화면을 만들고 다듬는 스킬 10개. 화면을 예쁘게 잡고, 색·정렬을 맞추고, 움직임(애니메이션)을 넣고, 피그마를 코드로 바꾸는 것까지 — "보이는 화면을 프로처럼 만들어주는 도구 세트"입니다.
1. frontend-design — 화면을 예쁘게 만들어줌
기능 : 밋밋한 화면을 짜임새 있고 보기 좋게 잡아줍니다. 색·여백·글자 크기 같은 기본기를 프로처럼 맞춰줘요.
언제 켜지나 : "화면 예쁘게 만들어줘", "이 UI 개선해줘" 같은 요청을 할 때.
설치 (복붙) : Claude Code에 아래 두 줄을 순서대로 입력 (frontend-design은 example-skills 묶음에 포함).
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
설치 후 사용법 : "이 페이지 디자인 다듬어줘"라고 하면 Claude가 알아서 이 스킬을 씁니다.
2. impeccable — 어긋난 색·정렬을 다듬어줌
기능 : 삐뚤어진 정렬, 안 맞는 색, 어긋난 간격 같은 디테일을 자동으로 잡아줍니다.
언제 켜지나 : "정렬이 안 맞아", "색이 촌스러운데 다듬어줘" 같은 요청을 할 때.
설치 (복붙) : 터미널에서 프로젝트 폴더로 간 뒤 입력.
npx impeccable install
설치 후 사용법 : 설치 후 AI 도구 안에서 /impeccable init을 한 번 실행하면 준비 완료. 이후 "이 화면 색·정렬 어긋난 데 잡아줘"라고 하면 됩니다.
3. design-taste-frontend — 밋밋한 화면을 세련되게
기능 : 평범한 화면에 세련된 감각을 입혀 완성도를 올려줍니다.
언제 켜지나 : "좀 더 고급스럽게", "감각적으로 만들어줘" 같은 요청을 할 때.
설치 (복붙) : 터미널에 입력.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
설치 후 사용법 : "이 랜딩페이지 좀 더 세련되고 트렌디하게 바꿔줘"라고 하면 발동됩니다.
4. animate — 움직임을 부드럽게
기능 : 버튼·화면 전환·호버 효과 같은 움직임(애니메이션)을 부드럽고 자연스럽게 넣어줍니다.
언제 켜지나 : React에서 애니메이션, 전환 효과, 모달 같은 움직임을 만들어달라고 할 때 자동으로.
설치 (복붙) : 터미널에 입력.
npx skills add https://github.com/delphi-ai/animate-skill --skill animate
설치 후 사용법 : "이 버튼에 부드러운 호버 애니메이션 넣어줘" 같이 말하면 자동으로 켜져요.
5. design-motion-principles — 어색한 움직임을 잡아줌
기능 : 애니메이션이 어색하거나 과하지 않도록, 좋은 움직임의 원칙을 적용해 자연스럽게 다듬어줍니다.
언제 켜지나 : "애니메이션이 어색해", "움직임을 자연스럽게 다듬어줘" 같은 요청을 할 때.
설치 (복붙) : 터미널에 입력.
npx skills add kylezantos/design-motion-principles
설치 후 사용법 : 설치 후 그냥 "이 전환 움직임이 어색한데 자연스럽게 만들어줘"라고 하면 됩니다.
6. theme-factory — 색·글자를 통일된 세트로
기능 : 색상·글꼴·간격을 하나의 통일된 테마(디자인 세트)로 묶어줘서 화면 전체가 일관되게 합니다.
언제 켜지나 : "색과 글꼴을 통일해줘", "테마 만들어줘" 같은 요청을 할 때.
설치 (복붙) : frontend-design과 같은 묶음(example-skills)에 있어요.
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
설치 후 사용법 : "이 사이트 색이랑 글꼴을 통일된 테마로 정리해줘"라고 하면 됩니다.
7. Figma → code (Figma-Context-MCP) — 피그마 디자인을 코드로
기능 : 피그마에서 만든 디자인을 Claude가 읽어서 그대로 코드로 바꿔줍니다. (피그마 계정과 API 키 필요)
언제 켜지나 : "이 피그마 디자인을 코드로 만들어줘" 같은 요청을 할 때.
설치 (복붙) : 이건 스킬이 아니라 MCP 서버예요. 터미널에 입력 (YOUR-KEY 자리에 본인 피그마 API 키).
claude mcp add figma-context -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio
설치 후 사용법 : 피그마 프레임 링크를 붙이고 "이 디자인 코드로 구현해줘"라고 하면 됩니다.
8. playwright-mcp — 화면을 스스로 보고 고침
기능 : Claude가 실제 브라우저를 열어 화면을 직접 보고 클릭·입력해보면서, 문제를 찾아 고칩니다.
언제 켜지나 : "이 사이트 직접 돌려보고 안 되는 거 찾아줘", "화면 테스트해줘" 같은 요청을 할 때.
설치 (복붙) : 이것도 MCP 서버예요. 터미널에 입력.
claude mcp add playwright npx @playwright/mcp@latest
설치 후 사용법 : "이 로그인 화면 직접 돌려보고 버그 있는지 확인해줘"라고 하면 됩니다.
9. brandkit — 로고·색·폰트를 한 번에
기능 : 로고 방향, 색 팔레트, 글꼴, 브랜드 적용 예시까지 브랜드 정체성 보드를 한 번에 만들어줍니다.
언제 켜지나 : "브랜드 로고·색·폰트를 한 번에 잡아줘" 같은 요청을 할 때.
설치 (복붙) : 터미널에 입력.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "brandkit"
설치 후 사용법 : "우리 브랜드 로고·색·폰트 세트 만들어줘"라고 하면 됩니다.
10. designer-skills — 기획·정리·점검을 챙겨줌
기능 : 디자인 리서치, UX 전략, UI 디자인, 인터랙션 등 디자인 전 과정을 챙겨주는 스킬 모음입니다.
언제 켜지나 : "디자인 기획부터 점검까지 도와줘" 같은 요청을 할 때.
설치 (복붙) : Claude Code에 입력해 스킬 창고 등록 후, /plugin 메뉴에서 원하는 걸 골라 설치.
/plugin marketplace add Owl-Listener/designer-skills
설치 후 사용법 : /plugin 입력 → Discover 탭에서 design-research, ui-design 등을 골라 설치. 이후 "UX 전략 짜줘" 같이 물으면 발동합니다.
② 이미지·영상 제작 스킬 (이미지·그래픽·비디오)
말로 이미지·그래픽·영상을 만드는 스킬 10개. 이미지를 생성하고 고치고, 카드뉴스·차트·로고를 만들고, 코드로 영상까지 만드는 — "보이는 콘텐츠를 찍어내는 도구 세트"입니다.
1. nano-banana — 말로 이미지를 만들고 고쳐줌
기능 : 말(프롬프트)만으로 이미지를 만들고 수정합니다. 구글의 이미지 생성 모델(나노바나나)을 Claude에서 바로 쓰게 해줘요. (이미지당 약간의 생성 비용이 들 수 있음)
언제 켜지나 : "이미지 만들어줘", "이 사진 이렇게 바꿔줘" 같은 요청을 할 때.
설치 (복붙) : Claude Code에 스킬 창고 등록 후 설치.
/plugin marketplace add devonjones/devon-claude-skills
/plugin install nano-banana@devon-claude-skills
설치 후 사용법 : "가을 분위기의 카페 사진 이미지 만들어줘"라고 하면 자동으로 켜져요.
2. banana-claude — 이미지 프롬프트를 알아서 짜줌
기능 : 원하는 이미지를 말하면, 그걸 잘 만들 수 있는 상세 프롬프트를 알아서 짜줍니다. (마찬가지로 이미지 생성 비용은 들 수 있음)
언제 켜지나 : "이런 느낌의 이미지를 만들고 싶은데 프롬프트 지어줘" 같은 요청을 할 때.
설치 (복붙) : Claude Code에 스킬 창고 등록 후 설치.
/plugin marketplace add AgriciDaniel/banana-claude
/plugin install banana-claude@banana-claude-marketplace
설치 후 사용법 : "미니멀 스타일의 제품 사진용 프롬프트 짜줘"라고 하면 됩니다.
3. canvas-design — 카드뉴스를 수정 가능한 그래픽으로
기능 : 카드뉴스나 포스터 같은 그래픽을, 나중에 수정할 수 있는 형태로 만들어줍니다.
언제 켜지나 : "카드뉴스 만들어줘", "수정 가능한 그래픽으로" 같은 요청을 할 때.
설치 (복붙) : anthropics/skills 묶음(example-skills)에 포함돼 있어요.
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
설치 후 사용법 : "이 문구로 카드뉴스 한 장 만들어줘"라고 하면 됩니다.
4. algorithmic-art — 배경용 패턴 이미지를 만들어줌
기능 : 코드로 그려지는 기하학적 패턴·배경 이미지를 만들어줍니다.
언제 켜지나 : "배경용 패턴 만들어줘", "추상적인 그래픽 배경" 같은 요청을 할 때.
설치 (복붙) : anthropics/skills 묶음(example-skills)에 포함.
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
설치 후 사용법 : "파란색 계열의 추상 패턴 배경 만들어줘"라고 하면 됩니다.
5. data-visualization (data 플러그인) — 데이터를 차트·그래프로
기능 : 표·숫자 데이터를 보기 좋은 차트·그래프·대시보드로 만들어줍니다.
언제 켜지나 : "이 데이터 차트로 만들어줘", "대시보드 만들어줘" 같은 요청을 할 때.
설치 (복붙) : Claude Code에 입력.
claude plugin marketplace add anthropics/knowledge-work-plugins
claude plugin install data@knowledge-work-plugins
설치 후 사용법 : "이 매출 데이터를 지역별 막대그래프로 만들어줘"라고 하면 됩니다.
6. svg-logo-designer — 로고를 여러 버전으로 만들어줌
기능 : 워드마크·레터마크·엠블럼 등 여러 유형의 SVG 로고를 깔끔한 벡터 코드로 여러 버전 만들어줍니다.
언제 켜지나 : "로고 만들어줘", "SVG 로고 여러 안 뽑아줘" 같은 요청을 할 때.
설치 (복붙) : Claude Code에 스킬 창고 등록 후, 메뉴에서 svg-logo-designer 설치.
/plugin marketplace add rknall/Skills
설치 후 사용법 : /plugin 메뉴에서 설치 후 "카페 브랜드 로고 3안 만들어줘"라고 하면 됩니다.
7. remotion-superpowers — 코드로 영상을 통째로 만들어줌
기능 : Remotion(코드로 영상 만드는 도구)을 Claude가 다루게 해서, 코드 기반으로 영상을 통째로 만들어줍니다.
언제 켜지나 : "코드로 영상 만들어줘", "Remotion으로 영상 만들자" 같은 요청을 할 때.
설치 (복붙) : Claude Code에 스킬 창고 등록 후 설치 (Node.js 필요).
/plugin marketplace add DojoCodingLabs/remotion-superpowers
/plugin install remotion-superpowers@remotion-superpowers
설치 후 사용법 : /setup을 한 번 돌려 필요한 걸 깔고, "5초짜리 인트로 영상 만들어줘"라고 하면 됩니다.
8. claude-remotion (remotion 본체) — 영상 프로젝트 자체를 만들기
기능 : Remotion은 코드로 영상을 만드는 도구 자체예요. 새 영상 프로젝트를 만들어 시작합니다.
언제 켜지나 : 새 영상 프로젝트를 처음부터 만들 때. (7번 remotion-superpowers와 함께 쓰면 좋음)
설치 (복붙) : 터미널에 입력 (Node.js 필요).
npx create-video@latest
설치 후 사용법 : 프로젝트가 생기면, 그 폴더에서 Claude에게 "이 영상에 자막과 전환 효과 넣어줘"라고 하면 됩니다.
9. blender-motion — 3D 화면·영상을 만들어줌
기능 : Blender(무료 3D 프로그램)를 Claude가 다루게 해서 3D 화면·영상을 만들어줍니다. (Blender 설치 필요)
언제 켜지나 : "3D 영상 만들어줘", "Blender로 모션 만들자" 같은 요청을 할 때.
설치 (복붙) : 먼저 Blender MCP를 연결합니다. 터미널에 입력.
claude mcp add BlenderMCP sse http://localhost:9876/sse
설치 후 사용법 : Blender에 부가 기능(애드온)을 깔고 연결한 뒤, 스킬 파일을 ~/.claude/skills/에 넣으면 준비 완료. 설치가 까다로우니 원본 15분 가이드( github.com/LobzyJay/motion-design-with-claude )를 따라가세요.
10. aftereffects-motion — 영상 효과를 만들어줌
기능 : After Effects(영상 효과 프로그램)를 Claude가 다루게 해서 영상 효과를 만들어줍니다. (After Effects 필요)
언제 켜지나 : "AE 효과 만들어줘", "애프터이펙트로 모션" 같은 요청을 할 때.
설치 (복붙) : After Effects MCP를 연결합니다. after-effects-mcp 폴더에서 npm install 후 터미널에 입력.
claude mcp add AfterEffectsMCP node "$(pwd)/after-effects-mcp/build/index.js"
설치 후 사용법 : 9번과 같은 레포( github.com/LobzyJay/motion-design-with-claude )의 15분 가이드를 따라 스킬까지 깔면, "이 로고에 등장 애니메이션 넣어줘" 같이 쓸 수 있어요.
③ AI 제품 만들기 스킬 (제품 & 인터랙션)
AI가 사람과 어떻게 주고받을지, 답을 어떻게 보여줄지 같은 AI 제품의 사용자 경험을 설계하는 스킬 10개.
이 카테고리는 설치가 간단해요. 대부분 같은 레포(ai-design-skills)에 있어, 아래 통 설치 한 번이면 1~8번이 다 들어옵니다. (9·10번만 다른 묶음이라 따로 한 줄 추가)
이 카테고리 통 설치 (복붙)
claude plugin marketplace add Owl-Listener/ai-design-skills
claude plugin install model-interaction-design@ai-design-skills
1. context-window-design — AI가 기억할 내용을 잘 관리하게
기능 : AI는 한 번에 기억할 양이 정해져 있어 대화가 길어지면 앞부분을 까먹어요. 뭘 기억하고 뭘 버릴지를 설계하도록 도와줍니다.
언제 켜지나 : "대화가 길어지면 앞 내용을 잊어버려요" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "긴 상담 AI가 앞 내용을 자꾸 까먹는데 기억 관리 설계 도와줘"라고 하면 됩니다.
2. conversation-patterns — 대화가 끊겨도 자연스럽게 이어줌
기능 : 누가 먼저 말할지, 오해가 생기면 어떻게 바로잡을지 대화의 리듬과 구조를 설계합니다.
언제 켜지나 : "대화가 딱딱해요", "흐름을 자연스럽게" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "챗봇 대화가 어색한데 자연스러운 흐름으로 설계해줘"라고 하면 됩니다.
3. generative-ui — 답을 글 대신 버튼·카드로 보여줌
기능 : 글로만 답하는 대신 폼·카드·차트 같은 화면 요소를 즉석에서 만들어 보여주게 설계합니다.
언제 켜지나 : "답을 버튼이나 카드로 보여주고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "긴 글 대신 사용자가 바로 고를 카드 형태로 보여주게 해줘"라고 하면 됩니다.
4. progressive-disclosure — 기능을 한 번에 안 쏟고 차근차근
기능 : 초보자가 AI가 뭘 할 수 있는지 몰라 헤매지 않도록, 기능을 적절한 속도로 하나씩 보여줍니다.
언제 켜지나 : "온보딩을 어떻게 설계하죠?" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "처음 온 사용자에게 기능을 차근차근 알려주는 온보딩 설계해줘"라고 하면 됩니다.
5. multimodal-orchestration — 글·이미지·도구를 알맞게 섞음
기능 : 글, 그림, 음성, 도구를 상황에 맞게 조합합니다. "쓸 수 있으니까"가 아니라 "지금 이게 맞으니까" 고르게 해요.
언제 켜지나 : "언제 음성으로, 언제 글로 답해야 하죠?" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "상황에 따라 글·이미지·음성을 골라 쓰는 기준 잡아줘"라고 하면 됩니다.
6. mixed-initiative-flow — AI와 사용자가 주고받는 흐름을 정리
기능 : AI가 앞장서서 이끌지, 사용자가 지시하고 AI는 따르기만 할지 — 주도권을 누가 언제 쥘지 설계합니다.
언제 켜지나 : "AI가 먼저 질문하게 할까 기다리게 할까?" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "우리 AI가 너무 수동적인데, 언제 나서고 언제 맡길지 기준 잡아줘"라고 하면 됩니다.
7. frustration-detection — 사용자가 짜증 내면 알아채고 맞춤
기능 : 대문자·느낌표·반복 같은 신호로 사용자 감정을 읽고 톤을 맞춥니다.
언제 켜지나 : "사용자가 화났을 때 AI가 어떻게 반응해야 하죠?" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "고객이 짜증 난 상태일 때 AI가 알아채고 톤 바꾸게 해줘"라고 하면 됩니다.
8. feedback-loops — 사용자 반응을 받아 더 나아지게 함
기능 : 좋아요/싫어요, 답 고쳐 쓰기 같은 반응을 잘 받아 AI가 같은 실수를 반복하지 않게 합니다.
언제 켜지나 : "사용자 피드백을 어떻게 받죠?" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "사용자 피드백을 언제 어떻게 받을지 설계해줘"라고 하면 됩니다.
9. human-in-the-loop — 필요할 때 사람이 끼어들게 해줌
기능 : AI가 혼자 다 처리하지 않고, 중요한 순간에 사람이 검토·승인·수정하는 지점을 설계합니다.
언제 켜지나 : "중요한 결정은 사람이 확인하게 하고 싶어요" 같은 질문을 할 때.
설치 (복붙) : 이 스킬은 design-agent-orchestration 묶음 소속이라 따로 설치.
claude plugin install design-agent-orchestration@ai-design-skills
설치 후 사용법 : "결제나 중요 액션 전에 사람 승인을 받는 지점 넣어줘"라고 하면 됩니다.
10. agent-role-design — AI에게 역할을 나누어 맡김
기능 : 여러 AI(에이전트)가 함께 일할 때, 각각이 뭘 하고 뭘 알고 뭘 책임지는지 역할을 나눠 설계합니다.
언제 켜지나 : "여러 AI에게 역할을 나눠 맡기고 싶어요" 같은 질문을 할 때.
설치 (복붙) : 이 스킬도 design-agent-orchestration 묶음 소속.
claude plugin install design-agent-orchestration@ai-design-skills
설치 후 사용법 : "리서치하는 AI와 글 쓰는 AI로 역할을 나누고 싶어요. 설계해줘"라고 하면 됩니다.
④ 프롬프트 설계 스킬 (행동 & 프롬프트)
AI에게 주는 지시문(프롬프트)을 잘 짜는 스킬 10개. 지시문의 뼈대를 잡고, 예시를 넣고, 단계별로 풀게 하고, 규칙을 명확히 정하는 — "AI에게 일 시키는 법을 설계하는 도구 세트"입니다.
대부분 prompt-architecture 묶음 소속이라, 아래 통 설치 한 번이면 1~8번이 다 들어옵니다.
이 카테고리 통 설치 (복붙)
claude plugin marketplace add Owl-Listener/ai-design-skills
claude plugin install prompt-architecture@ai-design-skills
1. system-prompt-structure — AI 지시문의 뼈대를 잡아줌
기능 : 역할·맥락·제약·형식 같은 훌륭한 시스템 프롬프트의 구조(뼈대)를 잡아줍니다.
언제 켜지나 : "시스템 프롬프트를 어떻게 짜야 하죠?" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "고객상담 AI의 시스템 프롬프트 뼈대를 잡아줘"라고 하면 됩니다.
2. persona-architecture — AI의 성격·말투를 일정하게 유지
기능 : AI의 캐릭터·목소리·성격을 정해서 언제 대화해도 일관되게 유지합니다.
언제 켜지나 : "AI 성격을 일정하게 유지하고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "우리 브랜드 톤에 맞는 AI 캐릭터를 정해줘"라고 하면 됩니다.
3. tone-calibration — 상황에 맞게 말투를 조절해줌
기능 : 격식·따뜻함·확신도·스타일을 상황별로 조절합니다.
언제 켜지나 : "상황에 맞게 말투를 바꾸고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "민감한 문의엔 정중하게, 일반 문의엔 친근하게 말투 바뀌게 해줘"라고 하면 됩니다.
4. few-shot-patterns — 예시를 줘서 원하는 답을 유도
기능 : 좋은 예시 몇 개를 AI에게 보여줘서 원하는 방향으로 답을 이끌어냅니다.
언제 켜지나 : "예시를 줘서 원하는 형식으로 만들고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "이런 스타일로 답하게 하려면 어떤 예시를 넣어야 하는지 짜줘"라고 하면 됩니다.
5. chain-of-thought-design — 복잡한 문제를 단계별로 풀게 함
기능 : 어려운 문제를 한 번에 답하게 하지 않고, 단계별로 생각하게 만들어 더 좋은 답을 내게 합니다.
언제 켜지나 : "복잡한 문제를 단계별로 풀게 하고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "이 복잡한 계산을 AI가 단계별로 풀게 프롬프트 짜줘"라고 하면 됩니다.
6. constraint-specification — 형식·길이 같은 규칙을 명확히
기능 : 출력 형식·길이·톤·내용 경계 같은 규칙을 프롬프트 안에 명확히 정해줍니다.
언제 켜지나 : "답 형식이나 길이를 고정하고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "답을 항상 3줄 이내, 존댓말로 나오게 규칙 정해줘"라고 하면 됩니다.
7. context-engineering — 필요한 정보를 딱 맞게 넣어줌
기능 : 어떤 정보를 AI에게 어떤 순서로 넣을지를 설계해, 딱 필요한 만큼만 정확히 넣어줍니다.
언제 켜지나 : "AI에게 정보를 어떻게 넣어야 잘 답하죠?" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "이 작업에 필요한 정보만 골라 어떤 순서로 넣을지 정리해줘"라고 하면 됩니다.
8. template-design — 반복 작업용 지시문 틀을 만들어줌
기능 : 매번 새로 쓸 필요 없이, 빈칸만 바꾸면 되는 재사용 프롬프트 틀을 만들어줍니다.
언제 켜지나 : "반복 작업용 프롬프트 틀을 만들고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "상품 설명 글을 매번 같은 형식으로 뽑는 프롬프트 틀 만들어줘"라고 하면 됩니다.
9. prompt-versioning — 지시문을 버전별로 관리해줌
기능 : 프롬프트를 고쳐가며 버전별로 관리하고, 뭐가 잘 먹혔는지 추적합니다.
언제 켜지나 : "프롬프트를 버전별로 관리하고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "이 프롬프트의 이전 버전과 비교해서 뭐가 더 나은지 정리해줘"라고 하면 됩니다.
10. emotional-design — 사용자 감정에 맞춰 반응하게 함
기능 : 사용자가 답답해하거나 기뻐하거나 힘들어할 때, AI가 감정에 맞춰 반응하도록 설계합니다. (system-behavior-shaping 묶음 소속)
언제 켜지나 : "사용자 감정에 맞춰 반응하게 하고 싶어요" 같은 질문을 할 때.
설치 (복붙) : 이 스킬은 다른 묶음이라 한 줄 더 설치.
claude plugin install system-behavior-shaping@ai-design-skills
설치 후 사용법 : "사용자가 힘들어하는 상황일 때 AI가 공감하며 반응하게 설계해줘"라고 하면 됩니다.
⑤ 믿을 수 있는 AI 스킬 (신뢰 & 안전)
AI가 선을 넘지 않게, 솔직하게, 안전하게 동작하도록 만드는 스킬 10개. 해서는 안 되는 선을 정하고, 모르는 건 모른다고 솔직히 말하고, 문제를 미리 막고, 답의 품질을 점검하는 — "믿을 수 있는 AI를 만드는 도구 세트"입니다.
1~6번은 ai-alignment-reasoning(신뢰·안전) 묶음, 7~9번은 evaluation(평가) 묶음, 10번은 orchestration 묶음에 있어요. 아래 세 줄을 순서대로 복붙하세요.
통 설치 (셋 다 복붙)
claude plugin marketplace add Owl-Listener/ai-design-skills
claude plugin install ai-alignment-reasoning@ai-design-skills
claude plugin install evaluation@ai-design-skills
1. guardrail-design — AI가 넘지 말아야 할 선을 정함
기능 : AI가 해도 되는 것과 하면 안 되는 것의 경계(가드레일)를 정해줍니다.
언제 켜지나 : "AI가 하면 안 되는 걸 정하고 싶어요" 같은 질문을 할 때.
설치 : ai-alignment-reasoning 통 설치에 포함.
설치 후 사용법 : "이 고객상담 AI가 절대 하면 안 되는 행동의 선을 정해줘"라고 하면 됩니다.
2. trust-calibration — 확실한지 아닌지 솔직히 알려줌
기능 : 사용자가 AI를 너무 많이도, 너무 적게도 믿지 않도록, 확신도와 근거를 솔직히 보여줍니다.
언제 켜지나 : "AI가 확실한지 아닌지 솔직히 보여주게 하고 싶어요" 같은 질문을 할 때.
설치 : ai-alignment-reasoning 통 설치에 포함.
설치 후 사용법 : "확실하지 않은 답은 확실하지 않다고 표시하게 설계해줘"라고 하면 됩니다.
3. transparency-patterns — 아는 것·모르는 것을 투명하게
기능 : AI가 뭘 알고 뭘 모르는지, 얼마나 확신하는지를 사용자에게 투명하게 보여줍니다.
언제 켜지나 : "AI가 아는 거랑 모르는 걸 투명하게 보여주고 싶어요" 같은 질문을 할 때.
설치 : ai-alignment-reasoning 통 설치에 포함.
설치 후 사용법 : "AI가 확실히 아는 부분과 추측인 부분을 구분해 보여주게 해줘"라고 하면 됩니다.
4. harm-anticipation — 문제 생길 상황을 미리 막음
기능 : AI가 오작동하거나 오용될 수 있는 상황을 미리 찾아 대비합니다.
언제 켜지나 : "AI가 잘못될 수 있는 상황을 미리 대비하고 싶어요" 같은 질문을 할 때.
설치 : ai-alignment-reasoning 통 설치에 포함.
설치 후 사용법 : "이 AI 서비스가 오용될 수 있는 상황들을 미리 찾아서 막는 방법 알려줘"라고 하면 됩니다.
5. escalation-design — 위급하면 위로 넘겨 처리하게
기능 : AI가 감당 못 할 상황이면 언제 사람에게 넘기고, 거절하고, 되물어 질문해야 할지를 설계합니다.
언제 켜지나 : "어려운 상황은 사람에게 넘기게 하고 싶어요" 같은 질문을 할 때.
설치 : ai-alignment-reasoning 통 설치에 포함.
설치 후 사용법 : "AI가 못 푸는 문제는 상담원에게 넘기는 기준과 방식 설계해줘"라고 하면 됩니다.
6. bias-detection-design — 편향된 답을 찾아내 바로잡음
기능 : AI 답에 편향(치우침)이 있는지 찾아내고 줄이는 검토 과정을 설계합니다.
언제 켜지나 : "AI 답이 편향되지 않게 하고 싶어요" 같은 질문을 할 때.
설치 : ai-alignment-reasoning 통 설치에 포함.
설치 후 사용법 : "이 AI가 특정 집단에 편향된 답을 하지 않는지 점검하는 방법 알려줘"라고 하면 됩니다.
7. output-quality-rubrics — 답의 품질을 기준으로 점검
기능 : 좋은 답이란 무엇인지(정확성·관련성·도움)를 기준으로 정해 답의 품질을 점검합니다.
언제 켜지나 : "답의 품질을 어떻게 평가하죠?" 같은 질문을 할 때.
설치 : evaluation 통 설치에 포함.
설치 후 사용법 : "우리 AI 답변의 품질을 점검할 기준표 만들어줘"라고 하면 됩니다.
8. failure-taxonomy — 어디서 틀릴지 유형별로 정리
기능 : AI가 틀리는 방식(없는 사실 지어내기·거부·엉뚱한 소리·톤 불일치 등)을 유형별로 정리합니다.
언제 켜지나 : "AI가 어떤 식으로 틀리는지 정리하고 싶어요" 같은 질문을 할 때.
설치 : evaluation 통 설치에 포함.
설치 후 사용법 : "우리 AI가 자주 틀리는 유형들을 분류해서 정리해줘"라고 하면 됩니다.
9. task-success-metrics — 일을 잘했는지 숫자로 평가
기능 : AI가 실제로 사용자 목표를 이뤄줬는지를 숫자로 측정합니다.
언제 켜지나 : "AI가 일을 잘했는지 숫자로 보고 싶어요" 같은 질문을 할 때.
설치 : evaluation 통 설치에 포함.
설치 후 사용법 : "우리 AI가 고객 문제를 실제로 해결했는지 측정할 지표 만들어줘"라고 하면 됩니다.
10. handoff-protocols — 필요하면 사람에게 넘겨줌
기능 : AI에서 사람으로, 또는 AI에서 다른 AI로 일을 넘길 때 매끄럽게 이어지도록 설계합니다.
언제 켜지나 : "AI가 사람에게 일을 넘길 때 자연스럽게 하고 싶어요" 같은 질문을 할 때.
설치 (복붙) : 이 스킬은 design-agent-orchestration 묶음 소속이라 따로 설치.
claude plugin install design-agent-orchestration@ai-design-skills
설치 후 사용법 : "AI 상담에서 상담원으로 넘길 때 대화 맥락을 매끄럽게 전달하는 방식 설계해줘"라고 하면 됩니다.
✅ 마무리
이것으로 총 50개 스킬을 다 설치하고 쓸 수 있습니다. 핵심은 딱 하나 — 스킬은 깔아두면 끝입니다. 명령어를 외울 필요 없이, 그냥 평소처럼 "이거 해줘"라고 물으면 Claude가 알아서 맞는 스킬을 꺼내 씁니다.
설치가 안 되거나 명령어가 헷갈릴 때는, 각 스킬이 속한 GitHub 레포에서 원본 설치 안내를 확인하세요.
웹·앱 화면을 만들고 다듬는 스킬 10개. 화면을 예쁘게 잡고, 색·정렬을 맞추고, 움직임(애니메이션)을 넣고, 피그마를 코드로 바꾸는 것까지 — "보이는 화면을 프로처럼 만들어주는 도구 세트"입니다.
1. frontend-design — 화면을 예쁘게 만들어줌
기능 : 밋밋한 화면을 짜임새 있고 보기 좋게 잡아줍니다. 색·여백·글자 크기 같은 기본기를 프로처럼 맞춰줘요.
언제 켜지나 : "화면 예쁘게 만들어줘", "이 UI 개선해줘" 같은 요청을 할 때.
설치 (복붙) : Claude Code에 아래 두 줄을 순서대로 입력 (frontend-design은 example-skills 묶음에 포함).
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
설치 후 사용법 : "이 페이지 디자인 다듬어줘"라고 하면 Claude가 알아서 이 스킬을 씁니다.
2. impeccable — 어긋난 색·정렬을 다듬어줌
기능 : 삐뚤어진 정렬, 안 맞는 색, 어긋난 간격 같은 디테일을 자동으로 잡아줍니다.
언제 켜지나 : "정렬이 안 맞아", "색이 촌스러운데 다듬어줘" 같은 요청을 할 때.
설치 (복붙) : 터미널에서 프로젝트 폴더로 간 뒤 입력.
npx impeccable install
설치 후 사용법 : 설치 후 AI 도구 안에서 /impeccable init을 한 번 실행하면 준비 완료. 이후 "이 화면 색·정렬 어긋난 데 잡아줘"라고 하면 됩니다.
3. design-taste-frontend — 밋밋한 화면을 세련되게
기능 : 평범한 화면에 세련된 감각을 입혀 완성도를 올려줍니다.
언제 켜지나 : "좀 더 고급스럽게", "감각적으로 만들어줘" 같은 요청을 할 때.
설치 (복붙) : 터미널에 입력.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
설치 후 사용법 : "이 랜딩페이지 좀 더 세련되고 트렌디하게 바꿔줘"라고 하면 발동됩니다.
4. animate — 움직임을 부드럽게
기능 : 버튼·화면 전환·호버 효과 같은 움직임(애니메이션)을 부드럽고 자연스럽게 넣어줍니다.
언제 켜지나 : React에서 애니메이션, 전환 효과, 모달 같은 움직임을 만들어달라고 할 때 자동으로.
설치 (복붙) : 터미널에 입력.
npx skills add https://github.com/delphi-ai/animate-skill --skill animate
설치 후 사용법 : "이 버튼에 부드러운 호버 애니메이션 넣어줘" 같이 말하면 자동으로 켜져요.
5. design-motion-principles — 어색한 움직임을 잡아줌
기능 : 애니메이션이 어색하거나 과하지 않도록, 좋은 움직임의 원칙을 적용해 자연스럽게 다듬어줍니다.
언제 켜지나 : "애니메이션이 어색해", "움직임을 자연스럽게 다듬어줘" 같은 요청을 할 때.
설치 (복붙) : 터미널에 입력.
npx skills add kylezantos/design-motion-principles
설치 후 사용법 : 설치 후 그냥 "이 전환 움직임이 어색한데 자연스럽게 만들어줘"라고 하면 됩니다.
6. theme-factory — 색·글자를 통일된 세트로
기능 : 색상·글꼴·간격을 하나의 통일된 테마(디자인 세트)로 묶어줘서 화면 전체가 일관되게 합니다.
언제 켜지나 : "색과 글꼴을 통일해줘", "테마 만들어줘" 같은 요청을 할 때.
설치 (복붙) : frontend-design과 같은 묶음(example-skills)에 있어요.
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
설치 후 사용법 : "이 사이트 색이랑 글꼴을 통일된 테마로 정리해줘"라고 하면 됩니다.
7. Figma → code (Figma-Context-MCP) — 피그마 디자인을 코드로
기능 : 피그마에서 만든 디자인을 Claude가 읽어서 그대로 코드로 바꿔줍니다. (피그마 계정과 API 키 필요)
언제 켜지나 : "이 피그마 디자인을 코드로 만들어줘" 같은 요청을 할 때.
설치 (복붙) : 이건 스킬이 아니라 MCP 서버예요. 터미널에 입력 (YOUR-KEY 자리에 본인 피그마 API 키).
claude mcp add figma-context -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio
설치 후 사용법 : 피그마 프레임 링크를 붙이고 "이 디자인 코드로 구현해줘"라고 하면 됩니다.
8. playwright-mcp — 화면을 스스로 보고 고침
기능 : Claude가 실제 브라우저를 열어 화면을 직접 보고 클릭·입력해보면서, 문제를 찾아 고칩니다.
언제 켜지나 : "이 사이트 직접 돌려보고 안 되는 거 찾아줘", "화면 테스트해줘" 같은 요청을 할 때.
설치 (복붙) : 이것도 MCP 서버예요. 터미널에 입력.
claude mcp add playwright npx @playwright/mcp@latest
설치 후 사용법 : "이 로그인 화면 직접 돌려보고 버그 있는지 확인해줘"라고 하면 됩니다.
9. brandkit — 로고·색·폰트를 한 번에
기능 : 로고 방향, 색 팔레트, 글꼴, 브랜드 적용 예시까지 브랜드 정체성 보드를 한 번에 만들어줍니다.
언제 켜지나 : "브랜드 로고·색·폰트를 한 번에 잡아줘" 같은 요청을 할 때.
설치 (복붙) : 터미널에 입력.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "brandkit"
설치 후 사용법 : "우리 브랜드 로고·색·폰트 세트 만들어줘"라고 하면 됩니다.
10. designer-skills — 기획·정리·점검을 챙겨줌
기능 : 디자인 리서치, UX 전략, UI 디자인, 인터랙션 등 디자인 전 과정을 챙겨주는 스킬 모음입니다.
언제 켜지나 : "디자인 기획부터 점검까지 도와줘" 같은 요청을 할 때.
설치 (복붙) : Claude Code에 입력해 스킬 창고 등록 후, /plugin 메뉴에서 원하는 걸 골라 설치.
/plugin marketplace add Owl-Listener/designer-skills
설치 후 사용법 : /plugin 입력 → Discover 탭에서 design-research, ui-design 등을 골라 설치. 이후 "UX 전략 짜줘" 같이 물으면 발동합니다.
② 이미지·영상 제작 스킬 (이미지·그래픽·비디오)
말로 이미지·그래픽·영상을 만드는 스킬 10개. 이미지를 생성하고 고치고, 카드뉴스·차트·로고를 만들고, 코드로 영상까지 만드는 — "보이는 콘텐츠를 찍어내는 도구 세트"입니다.
1. nano-banana — 말로 이미지를 만들고 고쳐줌
기능 : 말(프롬프트)만으로 이미지를 만들고 수정합니다. 구글의 이미지 생성 모델(나노바나나)을 Claude에서 바로 쓰게 해줘요. (이미지당 약간의 생성 비용이 들 수 있음)
언제 켜지나 : "이미지 만들어줘", "이 사진 이렇게 바꿔줘" 같은 요청을 할 때.
설치 (복붙) : Claude Code에 스킬 창고 등록 후 설치.
/plugin marketplace add devonjones/devon-claude-skills
/plugin install nano-banana@devon-claude-skills
설치 후 사용법 : "가을 분위기의 카페 사진 이미지 만들어줘"라고 하면 자동으로 켜져요.
2. banana-claude — 이미지 프롬프트를 알아서 짜줌
기능 : 원하는 이미지를 말하면, 그걸 잘 만들 수 있는 상세 프롬프트를 알아서 짜줍니다. (마찬가지로 이미지 생성 비용은 들 수 있음)
언제 켜지나 : "이런 느낌의 이미지를 만들고 싶은데 프롬프트 지어줘" 같은 요청을 할 때.
설치 (복붙) : Claude Code에 스킬 창고 등록 후 설치.
/plugin marketplace add AgriciDaniel/banana-claude
/plugin install banana-claude@banana-claude-marketplace
설치 후 사용법 : "미니멀 스타일의 제품 사진용 프롬프트 짜줘"라고 하면 됩니다.
3. canvas-design — 카드뉴스를 수정 가능한 그래픽으로
기능 : 카드뉴스나 포스터 같은 그래픽을, 나중에 수정할 수 있는 형태로 만들어줍니다.
언제 켜지나 : "카드뉴스 만들어줘", "수정 가능한 그래픽으로" 같은 요청을 할 때.
설치 (복붙) : anthropics/skills 묶음(example-skills)에 포함돼 있어요.
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
설치 후 사용법 : "이 문구로 카드뉴스 한 장 만들어줘"라고 하면 됩니다.
4. algorithmic-art — 배경용 패턴 이미지를 만들어줌
기능 : 코드로 그려지는 기하학적 패턴·배경 이미지를 만들어줍니다.
언제 켜지나 : "배경용 패턴 만들어줘", "추상적인 그래픽 배경" 같은 요청을 할 때.
설치 (복붙) : anthropics/skills 묶음(example-skills)에 포함.
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
설치 후 사용법 : "파란색 계열의 추상 패턴 배경 만들어줘"라고 하면 됩니다.
5. data-visualization (data 플러그인) — 데이터를 차트·그래프로
기능 : 표·숫자 데이터를 보기 좋은 차트·그래프·대시보드로 만들어줍니다.
언제 켜지나 : "이 데이터 차트로 만들어줘", "대시보드 만들어줘" 같은 요청을 할 때.
설치 (복붙) : Claude Code에 입력.
claude plugin marketplace add anthropics/knowledge-work-plugins
claude plugin install data@knowledge-work-plugins
설치 후 사용법 : "이 매출 데이터를 지역별 막대그래프로 만들어줘"라고 하면 됩니다.
6. svg-logo-designer — 로고를 여러 버전으로 만들어줌
기능 : 워드마크·레터마크·엠블럼 등 여러 유형의 SVG 로고를 깔끔한 벡터 코드로 여러 버전 만들어줍니다.
언제 켜지나 : "로고 만들어줘", "SVG 로고 여러 안 뽑아줘" 같은 요청을 할 때.
설치 (복붙) : Claude Code에 스킬 창고 등록 후, 메뉴에서 svg-logo-designer 설치.
/plugin marketplace add rknall/Skills
설치 후 사용법 : /plugin 메뉴에서 설치 후 "카페 브랜드 로고 3안 만들어줘"라고 하면 됩니다.
7. remotion-superpowers — 코드로 영상을 통째로 만들어줌
기능 : Remotion(코드로 영상 만드는 도구)을 Claude가 다루게 해서, 코드 기반으로 영상을 통째로 만들어줍니다.
언제 켜지나 : "코드로 영상 만들어줘", "Remotion으로 영상 만들자" 같은 요청을 할 때.
설치 (복붙) : Claude Code에 스킬 창고 등록 후 설치 (Node.js 필요).
/plugin marketplace add DojoCodingLabs/remotion-superpowers
/plugin install remotion-superpowers@remotion-superpowers
설치 후 사용법 : /setup을 한 번 돌려 필요한 걸 깔고, "5초짜리 인트로 영상 만들어줘"라고 하면 됩니다.
8. claude-remotion (remotion 본체) — 영상 프로젝트 자체를 만들기
기능 : Remotion은 코드로 영상을 만드는 도구 자체예요. 새 영상 프로젝트를 만들어 시작합니다.
언제 켜지나 : 새 영상 프로젝트를 처음부터 만들 때. (7번 remotion-superpowers와 함께 쓰면 좋음)
설치 (복붙) : 터미널에 입력 (Node.js 필요).
npx create-video@latest
설치 후 사용법 : 프로젝트가 생기면, 그 폴더에서 Claude에게 "이 영상에 자막과 전환 효과 넣어줘"라고 하면 됩니다.
9. blender-motion — 3D 화면·영상을 만들어줌
기능 : Blender(무료 3D 프로그램)를 Claude가 다루게 해서 3D 화면·영상을 만들어줍니다. (Blender 설치 필요)
언제 켜지나 : "3D 영상 만들어줘", "Blender로 모션 만들자" 같은 요청을 할 때.
설치 (복붙) : 먼저 Blender MCP를 연결합니다. 터미널에 입력.
claude mcp add BlenderMCP sse http://localhost:9876/sse
설치 후 사용법 : Blender에 부가 기능(애드온)을 깔고 연결한 뒤, 스킬 파일을 ~/.claude/skills/에 넣으면 준비 완료. 설치가 까다로우니 원본 15분 가이드( github.com/LobzyJay/motion-design-with-claude )를 따라가세요.
10. aftereffects-motion — 영상 효과를 만들어줌
기능 : After Effects(영상 효과 프로그램)를 Claude가 다루게 해서 영상 효과를 만들어줍니다. (After Effects 필요)
언제 켜지나 : "AE 효과 만들어줘", "애프터이펙트로 모션" 같은 요청을 할 때.
설치 (복붙) : After Effects MCP를 연결합니다. after-effects-mcp 폴더에서 npm install 후 터미널에 입력.
claude mcp add AfterEffectsMCP node "$(pwd)/after-effects-mcp/build/index.js"
설치 후 사용법 : 9번과 같은 레포( github.com/LobzyJay/motion-design-with-claude )의 15분 가이드를 따라 스킬까지 깔면, "이 로고에 등장 애니메이션 넣어줘" 같이 쓸 수 있어요.
③ AI 제품 만들기 스킬 (제품 & 인터랙션)
AI가 사람과 어떻게 주고받을지, 답을 어떻게 보여줄지 같은 AI 제품의 사용자 경험을 설계하는 스킬 10개.
이 카테고리는 설치가 간단해요. 대부분 같은 레포(ai-design-skills)에 있어, 아래 통 설치 한 번이면 1~8번이 다 들어옵니다. (9·10번만 다른 묶음이라 따로 한 줄 추가)
이 카테고리 통 설치 (복붙)
claude plugin marketplace add Owl-Listener/ai-design-skills
claude plugin install model-interaction-design@ai-design-skills
1. context-window-design — AI가 기억할 내용을 잘 관리하게
기능 : AI는 한 번에 기억할 양이 정해져 있어 대화가 길어지면 앞부분을 까먹어요. 뭘 기억하고 뭘 버릴지를 설계하도록 도와줍니다.
언제 켜지나 : "대화가 길어지면 앞 내용을 잊어버려요" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "긴 상담 AI가 앞 내용을 자꾸 까먹는데 기억 관리 설계 도와줘"라고 하면 됩니다.
2. conversation-patterns — 대화가 끊겨도 자연스럽게 이어줌
기능 : 누가 먼저 말할지, 오해가 생기면 어떻게 바로잡을지 대화의 리듬과 구조를 설계합니다.
언제 켜지나 : "대화가 딱딱해요", "흐름을 자연스럽게" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "챗봇 대화가 어색한데 자연스러운 흐름으로 설계해줘"라고 하면 됩니다.
3. generative-ui — 답을 글 대신 버튼·카드로 보여줌
기능 : 글로만 답하는 대신 폼·카드·차트 같은 화면 요소를 즉석에서 만들어 보여주게 설계합니다.
언제 켜지나 : "답을 버튼이나 카드로 보여주고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "긴 글 대신 사용자가 바로 고를 카드 형태로 보여주게 해줘"라고 하면 됩니다.
4. progressive-disclosure — 기능을 한 번에 안 쏟고 차근차근
기능 : 초보자가 AI가 뭘 할 수 있는지 몰라 헤매지 않도록, 기능을 적절한 속도로 하나씩 보여줍니다.
언제 켜지나 : "온보딩을 어떻게 설계하죠?" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "처음 온 사용자에게 기능을 차근차근 알려주는 온보딩 설계해줘"라고 하면 됩니다.
5. multimodal-orchestration — 글·이미지·도구를 알맞게 섞음
기능 : 글, 그림, 음성, 도구를 상황에 맞게 조합합니다. "쓸 수 있으니까"가 아니라 "지금 이게 맞으니까" 고르게 해요.
언제 켜지나 : "언제 음성으로, 언제 글로 답해야 하죠?" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "상황에 따라 글·이미지·음성을 골라 쓰는 기준 잡아줘"라고 하면 됩니다.
6. mixed-initiative-flow — AI와 사용자가 주고받는 흐름을 정리
기능 : AI가 앞장서서 이끌지, 사용자가 지시하고 AI는 따르기만 할지 — 주도권을 누가 언제 쥘지 설계합니다.
언제 켜지나 : "AI가 먼저 질문하게 할까 기다리게 할까?" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "우리 AI가 너무 수동적인데, 언제 나서고 언제 맡길지 기준 잡아줘"라고 하면 됩니다.
7. frustration-detection — 사용자가 짜증 내면 알아채고 맞춤
기능 : 대문자·느낌표·반복 같은 신호로 사용자 감정을 읽고 톤을 맞춥니다.
언제 켜지나 : "사용자가 화났을 때 AI가 어떻게 반응해야 하죠?" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "고객이 짜증 난 상태일 때 AI가 알아채고 톤 바꾸게 해줘"라고 하면 됩니다.
8. feedback-loops — 사용자 반응을 받아 더 나아지게 함
기능 : 좋아요/싫어요, 답 고쳐 쓰기 같은 반응을 잘 받아 AI가 같은 실수를 반복하지 않게 합니다.
언제 켜지나 : "사용자 피드백을 어떻게 받죠?" 같은 질문을 할 때.
설치 : 위 통 설치(model-interaction-design)에 포함.
설치 후 사용법 : "사용자 피드백을 언제 어떻게 받을지 설계해줘"라고 하면 됩니다.
9. human-in-the-loop — 필요할 때 사람이 끼어들게 해줌
기능 : AI가 혼자 다 처리하지 않고, 중요한 순간에 사람이 검토·승인·수정하는 지점을 설계합니다.
언제 켜지나 : "중요한 결정은 사람이 확인하게 하고 싶어요" 같은 질문을 할 때.
설치 (복붙) : 이 스킬은 design-agent-orchestration 묶음 소속이라 따로 설치.
claude plugin install design-agent-orchestration@ai-design-skills
설치 후 사용법 : "결제나 중요 액션 전에 사람 승인을 받는 지점 넣어줘"라고 하면 됩니다.
10. agent-role-design — AI에게 역할을 나누어 맡김
기능 : 여러 AI(에이전트)가 함께 일할 때, 각각이 뭘 하고 뭘 알고 뭘 책임지는지 역할을 나눠 설계합니다.
언제 켜지나 : "여러 AI에게 역할을 나눠 맡기고 싶어요" 같은 질문을 할 때.
설치 (복붙) : 이 스킬도 design-agent-orchestration 묶음 소속.
claude plugin install design-agent-orchestration@ai-design-skills
설치 후 사용법 : "리서치하는 AI와 글 쓰는 AI로 역할을 나누고 싶어요. 설계해줘"라고 하면 됩니다.
④ 프롬프트 설계 스킬 (행동 & 프롬프트)
AI에게 주는 지시문(프롬프트)을 잘 짜는 스킬 10개. 지시문의 뼈대를 잡고, 예시를 넣고, 단계별로 풀게 하고, 규칙을 명확히 정하는 — "AI에게 일 시키는 법을 설계하는 도구 세트"입니다.
대부분 prompt-architecture 묶음 소속이라, 아래 통 설치 한 번이면 1~8번이 다 들어옵니다.
이 카테고리 통 설치 (복붙)
claude plugin marketplace add Owl-Listener/ai-design-skills
claude plugin install prompt-architecture@ai-design-skills
1. system-prompt-structure — AI 지시문의 뼈대를 잡아줌
기능 : 역할·맥락·제약·형식 같은 훌륭한 시스템 프롬프트의 구조(뼈대)를 잡아줍니다.
언제 켜지나 : "시스템 프롬프트를 어떻게 짜야 하죠?" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "고객상담 AI의 시스템 프롬프트 뼈대를 잡아줘"라고 하면 됩니다.
2. persona-architecture — AI의 성격·말투를 일정하게 유지
기능 : AI의 캐릭터·목소리·성격을 정해서 언제 대화해도 일관되게 유지합니다.
언제 켜지나 : "AI 성격을 일정하게 유지하고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "우리 브랜드 톤에 맞는 AI 캐릭터를 정해줘"라고 하면 됩니다.
3. tone-calibration — 상황에 맞게 말투를 조절해줌
기능 : 격식·따뜻함·확신도·스타일을 상황별로 조절합니다.
언제 켜지나 : "상황에 맞게 말투를 바꾸고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "민감한 문의엔 정중하게, 일반 문의엔 친근하게 말투 바뀌게 해줘"라고 하면 됩니다.
4. few-shot-patterns — 예시를 줘서 원하는 답을 유도
기능 : 좋은 예시 몇 개를 AI에게 보여줘서 원하는 방향으로 답을 이끌어냅니다.
언제 켜지나 : "예시를 줘서 원하는 형식으로 만들고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "이런 스타일로 답하게 하려면 어떤 예시를 넣어야 하는지 짜줘"라고 하면 됩니다.
5. chain-of-thought-design — 복잡한 문제를 단계별로 풀게 함
기능 : 어려운 문제를 한 번에 답하게 하지 않고, 단계별로 생각하게 만들어 더 좋은 답을 내게 합니다.
언제 켜지나 : "복잡한 문제를 단계별로 풀게 하고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "이 복잡한 계산을 AI가 단계별로 풀게 프롬프트 짜줘"라고 하면 됩니다.
6. constraint-specification — 형식·길이 같은 규칙을 명확히
기능 : 출력 형식·길이·톤·내용 경계 같은 규칙을 프롬프트 안에 명확히 정해줍니다.
언제 켜지나 : "답 형식이나 길이를 고정하고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "답을 항상 3줄 이내, 존댓말로 나오게 규칙 정해줘"라고 하면 됩니다.
7. context-engineering — 필요한 정보를 딱 맞게 넣어줌
기능 : 어떤 정보를 AI에게 어떤 순서로 넣을지를 설계해, 딱 필요한 만큼만 정확히 넣어줍니다.
언제 켜지나 : "AI에게 정보를 어떻게 넣어야 잘 답하죠?" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "이 작업에 필요한 정보만 골라 어떤 순서로 넣을지 정리해줘"라고 하면 됩니다.
8. template-design — 반복 작업용 지시문 틀을 만들어줌
기능 : 매번 새로 쓸 필요 없이, 빈칸만 바꾸면 되는 재사용 프롬프트 틀을 만들어줍니다.
언제 켜지나 : "반복 작업용 프롬프트 틀을 만들고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "상품 설명 글을 매번 같은 형식으로 뽑는 프롬프트 틀 만들어줘"라고 하면 됩니다.
9. prompt-versioning — 지시문을 버전별로 관리해줌
기능 : 프롬프트를 고쳐가며 버전별로 관리하고, 뭐가 잘 먹혔는지 추적합니다.
언제 켜지나 : "프롬프트를 버전별로 관리하고 싶어요" 같은 질문을 할 때.
설치 : 위 통 설치(prompt-architecture)에 포함.
설치 후 사용법 : "이 프롬프트의 이전 버전과 비교해서 뭐가 더 나은지 정리해줘"라고 하면 됩니다.
10. emotional-design — 사용자 감정에 맞춰 반응하게 함
기능 : 사용자가 답답해하거나 기뻐하거나 힘들어할 때, AI가 감정에 맞춰 반응하도록 설계합니다. (system-behavior-shaping 묶음 소속)
언제 켜지나 : "사용자 감정에 맞춰 반응하게 하고 싶어요" 같은 질문을 할 때.
설치 (복붙) : 이 스킬은 다른 묶음이라 한 줄 더 설치.
claude plugin install system-behavior-shaping@ai-design-skills
설치 후 사용법 : "사용자가 힘들어하는 상황일 때 AI가 공감하며 반응하게 설계해줘"라고 하면 됩니다.
⑤ 믿을 수 있는 AI 스킬 (신뢰 & 안전)
AI가 선을 넘지 않게, 솔직하게, 안전하게 동작하도록 만드는 스킬 10개. 해서는 안 되는 선을 정하고, 모르는 건 모른다고 솔직히 말하고, 문제를 미리 막고, 답의 품질을 점검하는 — "믿을 수 있는 AI를 만드는 도구 세트"입니다.
1~6번은 ai-alignment-reasoning(신뢰·안전) 묶음, 7~9번은 evaluation(평가) 묶음, 10번은 orchestration 묶음에 있어요. 아래 세 줄을 순서대로 복붙하세요.
통 설치 (셋 다 복붙)
claude plugin marketplace add Owl-Listener/ai-design-skills
claude plugin install ai-alignment-reasoning@ai-design-skills
claude plugin install evaluation@ai-design-skills
1. guardrail-design — AI가 넘지 말아야 할 선을 정함
기능 : AI가 해도 되는 것과 하면 안 되는 것의 경계(가드레일)를 정해줍니다.
언제 켜지나 : "AI가 하면 안 되는 걸 정하고 싶어요" 같은 질문을 할 때.
설치 : ai-alignment-reasoning 통 설치에 포함.
설치 후 사용법 : "이 고객상담 AI가 절대 하면 안 되는 행동의 선을 정해줘"라고 하면 됩니다.
2. trust-calibration — 확실한지 아닌지 솔직히 알려줌
기능 : 사용자가 AI를 너무 많이도, 너무 적게도 믿지 않도록, 확신도와 근거를 솔직히 보여줍니다.
언제 켜지나 : "AI가 확실한지 아닌지 솔직히 보여주게 하고 싶어요" 같은 질문을 할 때.
설치 : ai-alignment-reasoning 통 설치에 포함.
설치 후 사용법 : "확실하지 않은 답은 확실하지 않다고 표시하게 설계해줘"라고 하면 됩니다.
3. transparency-patterns — 아는 것·모르는 것을 투명하게
기능 : AI가 뭘 알고 뭘 모르는지, 얼마나 확신하는지를 사용자에게 투명하게 보여줍니다.
언제 켜지나 : "AI가 아는 거랑 모르는 걸 투명하게 보여주고 싶어요" 같은 질문을 할 때.
설치 : ai-alignment-reasoning 통 설치에 포함.
설치 후 사용법 : "AI가 확실히 아는 부분과 추측인 부분을 구분해 보여주게 해줘"라고 하면 됩니다.
4. harm-anticipation — 문제 생길 상황을 미리 막음
기능 : AI가 오작동하거나 오용될 수 있는 상황을 미리 찾아 대비합니다.
언제 켜지나 : "AI가 잘못될 수 있는 상황을 미리 대비하고 싶어요" 같은 질문을 할 때.
설치 : ai-alignment-reasoning 통 설치에 포함.
설치 후 사용법 : "이 AI 서비스가 오용될 수 있는 상황들을 미리 찾아서 막는 방법 알려줘"라고 하면 됩니다.
5. escalation-design — 위급하면 위로 넘겨 처리하게
기능 : AI가 감당 못 할 상황이면 언제 사람에게 넘기고, 거절하고, 되물어 질문해야 할지를 설계합니다.
언제 켜지나 : "어려운 상황은 사람에게 넘기게 하고 싶어요" 같은 질문을 할 때.
설치 : ai-alignment-reasoning 통 설치에 포함.
설치 후 사용법 : "AI가 못 푸는 문제는 상담원에게 넘기는 기준과 방식 설계해줘"라고 하면 됩니다.
6. bias-detection-design — 편향된 답을 찾아내 바로잡음
기능 : AI 답에 편향(치우침)이 있는지 찾아내고 줄이는 검토 과정을 설계합니다.
언제 켜지나 : "AI 답이 편향되지 않게 하고 싶어요" 같은 질문을 할 때.
설치 : ai-alignment-reasoning 통 설치에 포함.
설치 후 사용법 : "이 AI가 특정 집단에 편향된 답을 하지 않는지 점검하는 방법 알려줘"라고 하면 됩니다.
7. output-quality-rubrics — 답의 품질을 기준으로 점검
기능 : 좋은 답이란 무엇인지(정확성·관련성·도움)를 기준으로 정해 답의 품질을 점검합니다.
언제 켜지나 : "답의 품질을 어떻게 평가하죠?" 같은 질문을 할 때.
설치 : evaluation 통 설치에 포함.
설치 후 사용법 : "우리 AI 답변의 품질을 점검할 기준표 만들어줘"라고 하면 됩니다.
8. failure-taxonomy — 어디서 틀릴지 유형별로 정리
기능 : AI가 틀리는 방식(없는 사실 지어내기·거부·엉뚱한 소리·톤 불일치 등)을 유형별로 정리합니다.
언제 켜지나 : "AI가 어떤 식으로 틀리는지 정리하고 싶어요" 같은 질문을 할 때.
설치 : evaluation 통 설치에 포함.
설치 후 사용법 : "우리 AI가 자주 틀리는 유형들을 분류해서 정리해줘"라고 하면 됩니다.
9. task-success-metrics — 일을 잘했는지 숫자로 평가
기능 : AI가 실제로 사용자 목표를 이뤄줬는지를 숫자로 측정합니다.
언제 켜지나 : "AI가 일을 잘했는지 숫자로 보고 싶어요" 같은 질문을 할 때.
설치 : evaluation 통 설치에 포함.
설치 후 사용법 : "우리 AI가 고객 문제를 실제로 해결했는지 측정할 지표 만들어줘"라고 하면 됩니다.
10. handoff-protocols — 필요하면 사람에게 넘겨줌
기능 : AI에서 사람으로, 또는 AI에서 다른 AI로 일을 넘길 때 매끄럽게 이어지도록 설계합니다.
언제 켜지나 : "AI가 사람에게 일을 넘길 때 자연스럽게 하고 싶어요" 같은 질문을 할 때.
설치 (복붙) : 이 스킬은 design-agent-orchestration 묶음 소속이라 따로 설치.
claude plugin install design-agent-orchestration@ai-design-skills
설치 후 사용법 : "AI 상담에서 상담원으로 넘길 때 대화 맥락을 매끄럽게 전달하는 방식 설계해줘"라고 하면 됩니다.
✅ 마무리
이것으로 총 50개 스킬을 다 설치하고 쓸 수 있습니다. 핵심은 딱 하나 — 스킬은 깔아두면 끝입니다. 명령어를 외울 필요 없이, 그냥 평소처럼 "이거 해줘"라고 물으면 Claude가 알아서 맞는 스킬을 꺼내 씁니다.
설치가 안 되거나 명령어가 헷갈릴 때는, 각 스킬이 속한 GitHub 레포에서 원본 설치 안내를 확인하세요.
관련링크
댓글목록
등록된 댓글이 없습니다.
