디자인 시스템
Material 3
Google의 Material Design 3를 Compose, Flutter, 웹에 걸쳐 구현합니다.
무엇인가
md.sys 토큰 네임스페이스, 30개가 넘는 컴포넌트, 적응형 레이아웃, 테마, M3 Expressive를 아우르는 Material Design 3 가이드. Jetpack Compose가 주 대상이고 Flutter와 @material/web은 보조입니다.
>
디자인에 왜 중요한가
- 컬러, 타입, 모양, 고도 토큰이 하드코딩된 hex와 라디우스 값을 대신합니다.
- 톤 기반 면이 그림자 대신 깊이를 담아, 현행 MD3 스펙과 맞아떨어집니다.
- 점수제 감사가 열 개 범주를 평가하고 수정 사항을 우선순위대로 나열합니다.
다루는 내용
- Design token system
- Component quick reference
- Common patterns
- Anti-patterns
- M3 Expressive
- MD3 compliance audit
설치 방법
Material 3
-
저장소를 클론하세요.
git clone https://github.com/hamen/material-3-skill -
Codex에 스킬 파일 경로를 지정하세요.
skills/material-3/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
플랫폼을 지정하면 Codex가 Compose, Flutter, CSS 커스텀 프로퍼티 중에서 고릅니다.
-
컴포넌트를 요청하면 올바른 변형과 토큰 연결까지 함께 받습니다.
-
URL이나 소스 파일에 감사를 돌려 준수 여부 리포트를 받으세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.