프런트엔드 & UI
pick-ui-library
프런트엔드 작업에 엄선한 라이브러리 하나를 딱 짚어 줍니다.
무엇인가
명시적으로 호출하는 조회용 스킬. 프리미티브, 모션, 차트, 가상화, 상태, 스타일링을 아우르는 엄선된 표에서 요청한 작업에 맞는 라이브러리 하나를 추천합니다.
Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly i
디자인에 왜 중요한가
- 작업당 추천은 하나뿐이라, 이것저것 고르며 고민할 필요가 없습니다.
- package.json을 먼저 확인해, 프로젝트에 이미 있는 것을 재사용합니다.
- 직접 만든 드롭다운과 토스트를 잡아내 접근성 있는 프리미티브로 바꿉니다.
다루는 내용
- How to use this
- UI components and primitives
- Motion and visuals
- Charts
- State and styling
- Common mismatches to catch
설치 방법
pick-ui-library
-
저장소를 클론하세요.
git clone https://github.com/emilkowalski/skills -
Codex에 스킬 파일 경로를 지정하세요.
skills/pick-ui-library/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
직접 호출하세요. 스스로 발동하지 않습니다.
-
라이브러리 이름 말고 작업을 말하세요. 예를 들어 ‘토스트가 필요해’처럼요.
-
라이브러리 하나를 짚고, 쓰임을 설명한 뒤 연결까지 해 줍니다.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.