tl;dr
"클로드코드만 썼음."
———————————————
클로드 코드로 UI를 만들면 보통 비슷하게 나옵니다. 둥근 카드에 그라데이션 글로우 뿌려진 그 느낌으로 AI가 만든 티가 확 납니다.
제가 쓴 방법은,
1) awesome-design-md
github.com/VoltAgent/awesome-design-md
Linear, Spotify, Airbnb 같은 기업들 디자인 시스템을 .md 파일 하나로 정리해놓은 오픈소스이고, 색상값, 폰트, 보더, 호버 스타일 이런 거 전부 들어있습니다.
npx getdesign@latest add linear.app
이걸 클로드한테 먹이면 "AI가 만든 것 같은" UI 대신 Linear처럼 보이는 UI로 설정됩니다.
(이것만 먹여놔도 웬만한 디자이너만큼 뽑아내는듯)
2) simeydotme 홀로그램 CSS
포켓몬 카드 홀로그램 효과를 CSS로 재현한 건데, 마우스 따라 빛 반사되고 3D로 기울어지는 그거입니다. 기존 카드 이미지를 재가공하여 CSS로 홀로그램을 입혔습니다.
3) 결과물
- 벤토 그리드 피처 카드
- 티어 뱃지 3D 홀로그램
- 커서 따라다니는 글로우
- 후기 자동 스크롤
- 스크롤 입장 애니메이션
- 텔레그램 로그인 통합
Figma나 특정 AI는 일절 사용하지 않았고, 리서치를 통해 여러 사이트(dbcut.com 나 뭐 기타등등?) 홈페이지 디자인을 먹여 제가 원하는 미감을 학습시켰습니다. 다른 AI 도구는 안썼어요,, 귀찮음.