프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다. 엄선한 컬렉션
Codex가 진짜 쓸 만한 UI를 내놓게 만드는 디자인 플러그인
OpenAI Codex는 돌아가는 코드를 짭니다. 다만 그냥 두면 무난한 폰트, 평범한 여백, 가운데 정렬된 Helvetica로 흘러가죠. 여기 모은 것은 Codex에 안목을 심어 주는 플러그인 모음입니다. 미감을 잡아 주는 스킬과 디자인 시스템 규칙까지. 하나만 설치해도 되고, Open Design 안에서 전부 돌려도 됩니다.
프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다.
디자인 시스템 무엇을 하나 Stitch Design Taste Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다.
프런트엔드 & UI 무엇을 하나 image-to-code 디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다.
프런트엔드 & UI 무엇을 하나 imagegen-frontend-mobile 프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다.
프런트엔드 & UI 무엇을 하나 imagegen-frontend-web 랜딩 페이지 섹션마다 가로형 레퍼런스 이미지를 하나씩 생성합니다.
프런트엔드 & UI 무엇을 하나 minimalist-ui 따뜻한 모노크롬 톤의 에디토리얼 인터페이스를 플랫한 벤토 그리드로 만듭니다.
프런트엔드 & UI 무엇을 하나 design-taste-frontend 브리프를 읽고 방향을 정한 뒤, 틀에 박히지 않은 인터페이스를 내놓습니다.
디자인 시스템 무엇을 하나 industrial-brutalist-ui 아날로그 그레인을 입힌 견고한 스위스 인쇄체 또는 CRT 터미널 인터페이스를 만듭니다.
프런트엔드 & UI 무엇을 하나 redesign-existing-projects 기존 사이트를 진단하고 기능을 깨뜨리지 않으면서 업그레이드합니다.
디자인 시스템 무엇을 하나 brandkit 브랜드 가이드라인 보드, 로고 시스템, 아이덴티티 덱을 이미지로 생성합니다.
프런트엔드 & UI 무엇을 하나 high-end-visual-design 뻔한 AI 기본값을 막고 에이전시급 레이아웃과 모션을 강제합니다.
프런트엔드 & UI 무엇을 하나 pick-ui-library 프런트엔드 작업에 엄선한 라이브러리 하나를 딱 짚어 줍니다.
프런트엔드 & UI 무엇을 하나 apple-design Apple의 유동적 인터페이스 원칙을 웹의 스프링과 제스처로 옮깁니다.
프런트엔드 & UI 무엇을 하나 animation-vocabulary 두루뭉술한 모션 설명을 정확한 기술 용어로 바꿔 줍니다.
프런트엔드 & UI 무엇을 하나 emil-design-eng Emil Kowalski의 애니메이션 타이밍, 이징, 컴포넌트 다듬기 규칙.
디자인 시스템 무엇을 하나 UI-UX Pro Max · Design 로고, 아이덴티티, 슬라이드, 배너, 아이콘 작업을 하나의 입구에서 분배합니다.
프런트엔드 & UI 무엇을 하나 UI-UX Pro Max · Banner Design 치수에 맞춘 배너를 HTML로 디자인한 뒤 PNG로 내보냅니다.
프런트엔드 & UI 무엇을 하나 UI-UX Pro Max · UI Styling shadcn 컴포넌트와 Tailwind 유틸리티로 접근성 있는 인터페이스를 만듭니다.
디자인 시스템 무엇을 하나 UI-UX Pro Max · Brand 브랜드 가이드라인, 디자인 토큰, 애셋을 서로 어긋나지 않게 맞춥니다.
프런트엔드 & UI 무엇을 하나 UI-UX Pro Max · Slides Chart.js와 레이아웃 패턴으로 HTML 프레젠테이션 덱을 만듭니다.
디자인 시스템 무엇을 하나 UI-UX Pro Max · Design System 3계층 디자인 토큰, 컴포넌트 스펙, 토큰을 지키는 슬라이드 생성.
프런트엔드 & UI 무엇을 하나 design-skills · Editorial Gelasio 세리프와 엄격한 8pt 그리드로 짜인 잡지형 레이아웃.
프런트엔드 & UI 무엇을 하나 design-skills · Terracotta 크림 바탕에 클레이 액센트, DM Serif Display 헤드라인, 긴 글 읽기용.
프런트엔드 & UI 무엇을 하나 design-skills · Dithered 점 패턴 음영과 제한된 팔레트로 만드는 레트로 고대비 화면.
프런트엔드 & UI 무엇을 하나 design-skills · Neumorphism 스톤 그레이의 부드럽게 돌출된 면과 Space Mono 타입.
프런트엔드 & UI 무엇을 하나 design-skills · Bento 크림 바탕에 크기가 제각각인 블록 그리드, Inter 타입, 촘촘한 스케일.
프런트엔드 & UI 무엇을 하나 design-skills · Claymorphism 통통하게 둥근 3D 형태, Poppins 헤드라인, 흰 바탕 위 블루.
프런트엔드 & UI 무엇을 하나 design-skills · Brutalism 거친 콘크리트에서 따온 레이아웃, Darker Grotesque 디스플레이, 빨강과 오커.
프런트엔드 & UI 무엇을 하나 Hallmark 58개의 게이트와 강제된 구조적 다양성을 갖춘 안티슬롭 디자인 플로.
프런트엔드 & UI 무엇을 하나 Impeccable 프런트엔드 인터페이스를 만들고, 비평하고, 다듬는 스물네 개의 커맨드.
디자인 시스템 무엇을 하나 Design DNA 레퍼런스 디자인을 구조화된 JSON으로 뽑아낸 뒤, 그것으로 생성합니다.
디자인 시스템 무엇을 하나 Material 3 Google의 Material Design 3를 Compose, Flutter, 웹에 걸쳐 구현합니다.
프런트엔드 & UI 무엇을 하나 Details that make interfaces feel better 리뷰 체크리스트가 딸린 열여섯 개의 구체적인 UI 다듬기 규칙.
프런트엔드 & UI 무엇을 하나 Agent-Native Plans 텍스트 계획을 와이어프레임과 프로토타입이 딸린 검토용 문서로 바꿉니다.
디자인 시스템 무엇을 하나 Kami 이력서, 백서, 덱, 랜딩 페이지를 하나의 디자인 언어로 조판합니다.
프런트엔드 & UI 무엇을 하나 Border Gradients 카드, 모달, 히어로 면에 정제된 그러데이션 가장자리를 더합니다.
프런트엔드 & UI 무엇을 하나 Masked Reveal 스크롤에 맞춰 오버플로 마스크로 헤드라인을 한 단어씩 드러냅니다.
프런트엔드 & UI 무엇을 하나 Framed Grid Layout 얇은 프레임과 모서리 브래킷으로 정밀한 에디토리얼 레이아웃을 만듭니다.
프런트엔드 & UI 무엇을 하나 Container Lines 콘텐츠 컨테이너 가장자리에 은은한 세로 가이드 선을 긋습니다.
프런트엔드 & UI 무엇을 하나 Skeuomorphic UI 겹친 그러데이션과 그림자로 버튼과 패널에 만질 듯한 깊이를 줍니다.
디자인 시스템 무엇을 하나 Beautiful Shadows 중립적으로 겹겹이 쌓은 고도감을 위한 완성형 Tailwind 그림자 유틸리티 세 개.
프런트엔드 & UI 무엇을 하나 Dither Background 눈에 보이는 4x4 Bayer 디더링과 사각 픽셀로 짜인 캔버스 배경.
프런트엔드 & UI 무엇을 하나 WebGL Laser 흰빛 코어와 브랜드 색이 밴 안개를 두른 전체 화면 셰이더 광선.
디자인 시스템 무엇을 하나 Mesh Gradient Dark Blue Clean 히어로 셸 안에 메시 필드를 품은, 검정에 가까운 네이비 시스템.
프런트엔드 & UI 무엇을 하나 Cinematic Scroll Storytelling 스크롤이 이끄는 랜딩 페이지를 위한 Lenis와 GSAP ScrollTrigger 레시피.
디자인 시스템 무엇을 하나 Agency Grid Layout Minimal 큼직한 헤드라인과 자잘한 대문자 라벨을 갖춘 에디토리얼 멀티컬럼 그리드.
디자인 시스템 무엇을 하나 Glass Dark Mode Clock 원형 캘리브레이션 다이얼을 중심으로 짜인 어두운 프로스티드 면.
프런트엔드 & UI 무엇을 하나 WebGL 3D Object PBR 머티리얼과 진짜 그림자를 갖춘, 빛을 받는 Three.js 히어로 메시.
프런트엔드 & UI 무엇을 하나 GSAP Skills 코어 트윈부터 ScrollTrigger, React까지 아우르는 공식 GSAP 애니메이션 세트.
프런트엔드 & UI 무엇을 하나 Animation Review 시니어급 완성도 기준으로 모션을 찾고, 개선하고, 검토합니다. 다음 단계
세팅은 건너뛰세요. Open Design 안에서 Codex와 디자인하기
Open Design은 Codex를 감싸고 도는 오픈소스 에이전트 네이티브 디자인 워크스페이스입니다. 시스템과 스킬, 템플릿을 일관되게 지켜 주므로 에이전트가 내놓는 결과물은 온전히 여러분의 것입니다.