프런트엔드 & UI
minimalist-ui
따뜻한 모노크롬 톤의 에디토리얼 인터페이스를 플랫한 벤토 그리드로 만듭니다.
무엇인가
문서 스타일 미니멀 인터페이스를 위한 프런트엔드 규약. 따뜻한 모노크롬 팔레트, 세리프와 모노스페이스로 이루어진 타이포그래피 위계, 1px 테두리 벤토 카드, 은은한 파스텔 액센트를 고정합니다.
Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
디자인에 왜 중요한가
- 모든 카드와 구분선은 산뜻한 라디우스를 가진 1px 밝은 회색 테두리 하나만 씁니다.
- 액센트는 태그와 인라인 코드에만 쓰는 네 가지 워시드 파스텔에서만 가져옵니다.
- 섹션은 밋밋하고 빈 배경 대신 낮은 불투명도의 이미지로 깊이를 얻습니다.
다루는 내용
- Absolute negative constraints
- Typographic architecture
- Color palette
- Component specifications
- Iconography and imagery directives
- Subtle motion and micro-animations
설치 방법
minimalist-ui
-
저장소를 클론하세요.
git clone https://github.com/Leonxlnx/taste-skill -
Codex에 스킬 파일 경로를 지정하세요.
skills/minimalist-skill/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
페이지를 요청하면, 스킬이 py-24나 py-32 같은 큼직한 여백부터 먼저 잡습니다.
-
타입 폭을 max-w-4xl로 제한하고 모노크롬 변수를 곧바로 적용합니다.
-
스크롤 진입 페이드는 IntersectionObserver로 transform과 opacity에만 걸립니다.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.