Skills
Codex·Claude·Cursor 같은 AI 코딩 에이전트에 붙여 쓰는 디자인·프론트엔드 스킬 모음. 레퍼런스를 프롬프트로 바꾸고, 랜딩페이지·인터랙션·프론트엔드 워크플로를 만들 때 에이전트가 따를 절차서(SKILL.md)를 제공합니다. Design+Code 창립자 MengTo가 정리한 75개 스킬.
MengTo
🔍 에디터 리뷰
cmore가 저장소를 직접 열어보고 써본 뒤 남긴 사용기입니다. 광고·협찬이 아닙니다. 검증일: 2026-07-09 기준의 기록이며, 도구는 계속 바뀝니다.
cmore.dev 홈과 안쪽 페이지의 스크롤 리빌 모션이 이 저장소의 animation-on-scroll 스킬을 각색한 결과입니다. SKILL.md를 실제 작업 맥락으로 열어 두고, 외부 의존성 없는 IntersectionObserver 버전으로 다시 써서 직각·헤어라인·무그림자 규칙을 지키며 적용했어요. 스킬이 '언제 쓰고, 무엇부터 하고, 어떤 실수를 피하라'까지 절차로 적혀 있어 에이전트가 우리 디자인 언어에 맞게 옮기기 좋았습니다. light-mode-paper·editorial-tech 같은 웹디자인 스킬도 우리 종이·잉크 미학과 겹쳐 참고할 게 많았고요.솔직히: 전부 영어이고 디자이너·프론트엔드 지식을 전제로 해서 코딩 입문자가 곧장 쓰기엔 진입장벽이 있어요. 설치형 패키지가 아니라 저장소를 받아 필요한 SKILL.md를 골라 에이전트에 물리는 방식이라 한 줄 설치로 끝나지도 않습니다.
🧪 우리 사이트에 직접 적용해봤어요
cmore.dev는 리뷰한 오픈소스를 실제로 적용해보는 실험실을 운영합니다. 이 도구를 적용한 결과를 본채 디자인과 나란히 비교해보세요.
설치하기
아직 개발환경(터미널·Git·Node 등)이 없다면 lazy-starter-kit으로 먼저 준비하고 오세요.
설치형 패키지가 아니라 저장소를 클론해 필요한 SKILL.md를 골라 에이전트(Claude Code·Codex·Cursor)에 붙여 쓰는 방식입니다. 대부분 영어 기준이에요.
git clone https://github.com/MengTo/Skills
find agent-skills -name SKILL.md | sort함께 볼 도구
beautify-github-readme
저장소 README를 그 프로젝트다운 한 장으로 다시 짜주는 에이전트 스킬. 시각은 SVG, 내용은 마크다운으로 층을 나눠서, 페이지 전체를 이미지로 굽지 않고도 디자인된 첫 화면을 만듭니다. 전체 개편·에셋만 제작·읽기 전용 감사 세 모드로 나뉘어 있고 커밋·푸시는 승인 없이는 하지 않습니다.
리뷰·설치법 보기 → 디자인hallmark
AI가 만든 티가 나는 디자인(AI 슬롭)을 거부하도록 설계된 Claude Code·Cursor·Codex용 디자인 스킬. 매크로구조 21종과 테마 20종을 로테이션시키고, 57개 슬롭 테스트 게이트로 '어디서 본 듯한 AI 랜딩페이지' 패턴을 걸러냅니다. Together AI가 만들었어요.
리뷰·설치법 보기 → 디자인KEZ-ProductPage-skill
커머스 상세페이지를 Figma 캔버스에 직접 제작·수정하는 Claude Code 스킬. "리뷰 섹션 만들어줘"라고 말하면 Figma 공식 MCP로 실제 파일에 오토레이아웃 프레임을 그립니다. 디자인 규칙을 측정값이 아니라 원리로 정리해 어느 브랜드에든 색·서체만 꽂아 재사용합니다.
리뷰·설치법 보기 →