무료 AI 스킬
뻔하지 않고 개성 있는 UI 디자인 방향을 잡아줘요.
무료 다운로드 (frontend-design.zip)새 UI를 만들거나 기존 UI를 다시 디자인할 때, "어디서 본 듯한" 템플릿 느낌이 아니라 확실한 개성이 있는 비주얼 방향을 잡아주는 Anthropic 공식 스킬입니다. "작은 스튜디오의 디자인 리드가 이 프로젝트를 맡았다"는 관점에서, 타이포그래피·색감·여백·레이아웃 하나하나에 의도적인 선택을 하도록 안내합니다. 그냥 "예쁘게 해줘"보다 훨씬 구체적인 결과물이 나옵니다. [사용 예시] "우리 서비스 랜딩페이지 디자인 방향을 정해줘"라고 요청하면, 막연한 조언 대신 "이 프로젝트는 신뢰감보다 재미를 우선해야 한다 → 그래서 세리프체 대신 굵은 산세리프에 손글씨 느낌 포인트를 섞는다" 같은, 근거가 있는 구체적 디자인 방향을 제시합니다.
1. 이 페이지의 파란색 "무료 다운로드" 버튼을 마우스 왼쪽 버튼으로 한 번 클릭하세요. 2. 다운로드가 끝나면 화면 아래쪽이나 브라우저 오른쪽 위에 다운로드된 파일이 나타납니다. 보통 "다운로드"(Downloads) 폴더에 저장됩니다. 3. 파일 이름이 ".zip"으로 끝나면 압축 파일입니다. 그 파일 위에서 마우스 오른쪽 버튼을 클릭한 뒤 "압축 풀기"(또는 "여기에 풀기")를 선택하세요. 그러면 같은 이름의 폴더가 새로 하나 생깁니다. 이 스킬은 실제 코드를 작성/실행하는 걸 도와주는 성격이라, 일반 채팅(Claude.ai, ChatGPT 등)보다는 개발자용 프로그램에서 가장 잘 작동합니다. [Claude Code에서 쓰는 법] (추천) 4. 컴퓨터에 Claude Code가 설치되어 있어야 합니다. 5. 압축을 푼 폴더를 작업 중인 프로젝트 폴더 안의 ".claude/skills" 폴더에 그대로 넣습니다 (그런 폴더가 없다면 새로 만들어서 넣으면 됩니다). 6. Claude Code를 껐다가 다시 켭니다. 7. 관련 작업을 요청하면 이 스킬 내용을 참고해서 도와줍니다. [Cursor, GitHub Copilot 등 다른 코딩 도구] 요즘 나오는 코딩 도구 대부분이 같은 방식(SKILL.md 파일)을 지원합니다. 각 프로그램의 "Skills" 또는 "Rules" 설정 메뉴에서 이 폴더를 추가하면 됩니다. 정확한 메뉴 위치는 프로그램마다 조금씩 다릅니다. [Claude.ai나 ChatGPT에서도 참고 자료로는 쓸 수 있어요] 실제 스크립트를 실행하지는 못하지만, 파일을 업로드하고 "이 방법대로 알려줘"라고 요청하면 안내 내용을 참고해서 답변해줍니다. [마음에 안 들면 지우는 방법] · Claude.ai / ChatGPT / Grok: 설정의 "Skills" 목록에서 이 스킬 옆에 있는 휴지통(삭제) 아이콘을 누르면 바로 제거됩니다. · Claude Code / 다른 코딩 도구: ".claude/skills" 폴더 안에서 이 스킬 폴더를 찾아 마우스 오른쪽 버튼 → 삭제(휴지통으로 이동)를 누르면 됩니다. 컴퓨터의 다른 프로그램에는 전혀 영향이 없고, 그냥 폴더 하나가 없어지는 것뿐이라 안심하고 지우셔도 됩니다.
원본 출처: https://github.com/anthropics/skills/tree/main/skills/frontend-design
HANDLED