프런트엔드 & UI
design-skills · Claymorphism
통통하게 둥근 3D 형태, Poppins 헤드라인, 흰 바탕 위 블루.
무엇인가
점토처럼 말랑한 느낌을 흉내 내는 부드럽고 둥글고 통통한 형태의 클레이모픽 UI 가이드라인 스킬. Poppins 디스플레이, Montserrat 본문, 블루 액센트 #3B82F6, 흰 바탕 위 짙은 블루 텍스트.
Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
디자인에 왜 중요한가
- 통통하게 둥근 형태가 별도 라벨 없이도 버튼에 누를 수 있다는 인상을 뚜렷이 줍니다.
- 흰 바탕 위 짙은 블루 텍스트 #1C398E가 팔레트는 경쾌하게 두면서도 대비를 지킵니다.
- 규칙이 메타포 혼용을 막아, 클레이 깊이가 글래스나 플랫과 절대 섞이지 않습니다.
다루는 내용
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
설치 방법
design-skills · Claymorphism
-
저장소를 클론하세요.
git clone https://github.com/bergside/awesome-design-skills -
Codex에 스킬 파일 경로를 지정하세요.
skills/claymorphism/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
클레이 룩을 좌우하는 라디우스와 그림자 토큰을 Codex에 먼저 요청하세요.
-
비슷한 산세리프 둘이 아니라, 규정대로 Poppins 디스플레이와 Montserrat 본문을 짝지으세요.
-
부드러운 형태 처리 속에서도 focus-visible과 비활성 상태가 살아남는지 확인하세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
codex-design 목록에서 더 보기 ↗다른 Codex 디자인 플러그인
프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다. 
디자인 시스템 무엇을 하나 Stitch Design Taste Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다. 
프런트엔드 & UI 무엇을 하나 image-to-code 디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-mobile 프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다. 다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 Codex 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.