StyleGallery
최소하고 이식성 좋은 CSS 레이아웃 패턴 모음. '이 화면을 어떻게 배치하지?'를 패턴·결정 트리·레시피로 정리해두어, AI에게 레이아웃을 맡길 때 참고 자료로 붙여 쓰기 좋습니다.
changeroa
🔍 에디터 리뷰
cmore가 저장소를 직접 열어보고 써본 뒤 남긴 사용기입니다. 광고·협찬이 아닙니다. 검증일: 2026-07-06 기준의 기록이며, 도구는 계속 바뀝니다.
이 생태계 페이지 레이아웃을 이걸로 직접 고쳐봤어요. 와이드 화면에서 카드가 좁게 갇힌 문제를 card-grid(auto-fit으로 폭 채우기)와 content-limiter(산문은 가독 폭)라는 이름 붙은 두 결정으로 딱 쪼개주더라고요. 패턴마다 '이 속성을 빼면 레이아웃이 무너진다'까지 적혀 있어서, AI에게 물려주면 레이아웃 결정이 흔들리지 않습니다.솔직히: 복붙 라이브러리는 아니에요. CSS를 그대로 붙이는 게 아니라 원리만 가져와 내 디자인 토큰·구조에 번역하는 한 단계가 필요하고, 브레이크포인트 같은 구체 수치는 결국 내가 정해야 합니다. 그래도 'AI에게 레이아웃을 맡길 때' 값어치는 직접 써보고 확실히 느꼈습니다.
설치하기
아직 개발환경(터미널·Git·Node 등)이 없다면 lazy-starter-kit으로 먼저 준비하고 오세요.
설치형 도구가 아니라 참고 저장소예요. 클론해서 Claude Code로 열어 패턴을 참고하게 하세요.
git clone https://github.com/changeroa/StyleGallery함께 볼 도구
anime
웹에서 무언가를 움직이게 할 때 쓰는 자바스크립트 애니메이션 엔진입니다. CSS 속성·SVG·DOM·자바스크립트 객체를 같은 문법 하나로 다루고, AI 코딩 도구에 '이 버튼 애니메이션 넣어줘'라고 할 때 에이전트가 가장 자주 꺼내 드는 라이브러리 중 하나입니다.
리뷰·설치법 보기 → 디자인beautify-github-readme
저장소 README를 그 프로젝트다운 한 장으로 다시 짜주는 에이전트 스킬. 시각은 SVG, 내용은 마크다운으로 층을 나눠서, 페이지 전체를 이미지로 굽지 않고도 디자인된 첫 화면을 만듭니다. 전체 개편·에셋만 제작·읽기 전용 감사 세 모드로 나뉘어 있고 커밋·푸시는 승인 없이는 하지 않습니다.
리뷰·설치법 보기 → 디자인hallmark
AI가 만든 티가 나는 디자인(AI 슬롭)을 거부하도록 설계된 Claude Code·Cursor·Codex용 디자인 스킬. 매크로구조 21종과 테마 20종을 로테이션시키고, 57개 슬롭 테스트 게이트로 '어디서 본 듯한 AI 랜딩페이지' 패턴을 걸러냅니다. Together AI가 만들었어요.
리뷰·설치법 보기 →