디자인 시스템
Beautiful Shadows
중립적으로 겹겹이 쌓은 고도감을 위한 완성형 Tailwind 그림자 유틸리티 세 개.
무엇인가
세 가지 강도로 정확히 맞춘 Tailwind 임의 값 그림자 클래스 모음. 각각 Tailwind 기본 그림자 스케일 대신 낮은 불투명도의 중립 레이어를 여럿 겹칩니다.
Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows wit
디자인에 왜 중요한가
- 고도감이 중립적으로 남아, 색이 밴 광이 아래 면을 물들이지 않습니다.
- 세 가지 고정 강도가 각각 컨트롤, 카드, 히어로 미디어에 대응합니다.
- 낮은 불투명도로 겹친 레이어가 뭉툭한 드롭 섀도 하나가 아니라 진짜 깊이로 읽힙니다.
다루는 내용
- Use when
- Shadow utilities
- Examples
- Usage rules
- Avoid
설치 방법
Beautiful Shadows
-
저장소를 클론하세요.
git clone https://github.com/MengTo/Skills -
Codex에 스킬 파일 경로를 지정하세요.
agent-skills/web-design/beautiful-shadows/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
Codex에 md 유틸리티를 카드, 패널, 팝오버에 적용해 달라고 하세요.
-
lg 유틸리티는 히어로 미디어와 모달 같은 컨테이너에 아껴 두세요.
-
그림자마다 깔끔한 표면 채움과 일관된 라디우스를 짝지으세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.