ai-design-skills: AI 코딩 도구를 위한 오픈소스 디자인 규칙 컬렉션

2026년 10월 25일, 엘라야(Elaya, @elayadesigns)는 X 포스트에서 자신의 커스텀 AI 디자이너 스킬이 오픈소스라고 밝혔습니다. 포스트에 연결된 GitHub 저장소 elayadesign/ai-design-skills는 AI 코딩 도구용 디자인 스킬 컬렉션이며 MIT 라이선스로 배포됩니다.

이미지 출처: Elaya (@elayadesigns)

이번 컬렉션은 AI 코딩 도구용 독립형 마크다운(.md) 규칙 파일들로 구성되어 있습니다.

주요 포함 스킬 및 구성 요소

저장소는 목적별로 분리된 모듈형 폴더 구조를 채택하고 있어 필요한 규칙만 골라 프로젝트에 적용할 수 있습니다.

• landing-page-design: 랜딩 페이지를 처음부터 구축할 때 필요한 인테이크 질의응답, 페이지 구조 설계, 전환율 중심 카피라이팅, 그리고 타입·간격·반경·모션을 포함한 전체 시각 시스템을 정의합니다.
• design-to-motion: 정적 디자인을 픽셀 단위로 정확한 애니메이션 쇼케이스로 변환하는 스펙을 제공합니다. 빈 상태에서 로드된 상태로 이어지는 루프 모션, 변경하지 않은 배경, X용 MP4·웹사이트·800×500 GIF 출력을 포함합니다.
• 출처 및 크레딧 반영: landing-page-design은 Leon Lin의 taste-skill에서 콘텐츠 현실성과 모션 아이디어를 가져와 적용했으며, MIT 라이선스와 관련 세부 크레딧은 해당 SKILL.md에 명시되어 있습니다.

주요 AI 코딩 도구별 설치 및 적용 경로

ai-design-skills의 설치는 각 도구가 사용하는 프로젝트 규칙 경로에 스킬 파일이나 폴더를 배치하는 방식입니다.

• Claude Code: .claude/skills/ 디렉토리에 대상 스킬 폴더를 복제(git clone 및 cp -r)하여 자연어 명령으로 호출합니다.
• Cursor: .cursor/rules/ 디렉토리에 개별 스킬의 SKILL.md 파일을 다운로드하여 배치하거나, 설정의 Rules for AI 항목에 직접 붙여넣습니다.
• Codex / Windsurf / Cline: 스킬의 SKILL.md를 각각 AGENTS.md, .windsurfrules, .clinerules로 복사하거나 일반 시스템 프롬프트에 붙여넣습니다.

각 스킬의 폰트, 컬러, 간격, 모션 값은 파일 하단 근처의 한 섹션에 있습니다. 저장소를 포크해 해당 섹션을 수정하면 나머지 스킬 규칙도 그 변경을 따릅니다.

출처

• GitHub 공식 저장소: elayadesign/ai-design-skills
• 프로젝트 공개 소스 X 포스트: Elaya (@elayadesigns) 2026-10-25 X 포스트