☕️ 제작자의 디자인 사례를 보고 나니, 이 저장소도 한번 살펴보고 싶어졌습니다.

☕️ 제작자의 디자인 사례를 보고 나니, 이 저장소도 한번 살펴보고 싶어졌습니다. AI Design Skills는 랜딩 페이지 제작과 디자인 시안의 애니메이션 작업을 두 가지 Skill로 정리한 프로젝트입니다. GitHub 스타는 현재 약 5.6k. landing-page-design은 제품과 타깃, 전환 목표부터 정리합니다. 콘텐츠 순서를 잡은 뒤 타이포그래피·색상·애니메이션을 구체적인 규칙에 맞춰 구현하는 방식입니다. 로딩 화면, 빈 상태, 키보드 포커스, 폼 유효성 검사처럼 빠뜨리기 쉬운 부분도 챙기도록 되어 있습니다. 디자인 기준이 파일에 들어 있어서 직접 고칠 수도 있습니다. 기본 폰트가 마음에 안 들거나 애니메이션이 느리다면 규칙을 바꾸고, 이후 페이지에도 내 스타일을 적용할 수 있습니다. 🛠️ 다른 하나인 design-to-motion은 정적인 디자인 시안을 움직이게 해줍니다 🎬 차트의 수치가 차례로 표시되고, 목록에 새 항목이 들어오고, 입력창에 프롬프트가 타이핑되는 식입니다. 화면 속 요소가 실제로 하는 일을 반복 데모로 보여주도록 구성돼 있습니다. 60fps MP4와 GIF로 내보내는 과정도 정리돼 있어서 제품 소개, 포트폴리오, X에 올릴 시연 자료를 만들 때 활용할 만합니다. Claude Code, Cursor, Codex 등에서 필요한 Skill을 골라 적용할 수 있습니다. 제품 랜딩 페이지를 만들고 출시용 데모까지 준비한다면, 두 가지를 이어서 써볼 수 있겠네요. 프로젝트는 여기서 확인할 수 있습니다. 🔗 Github #AI #AICaffeine #Github