프런트엔드 & UI
Details that make interfaces feel better
리뷰 체크리스트가 딸린 열여섯 개의 구체적인 UI 다듬기 규칙.
무엇인가
인터페이스 다듬기를 위한 디자인 엔지니어링 원칙 모음. 동심 라디우스, 시각적 정렬, 겹친 그림자, 시차를 둔 등장 애니메이션, 고정폭 숫자, 터치 영역, transition 특정성까지.
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/
디자인에 왜 중요한가
- 정확한 값을 못 박아, 누를 때 스케일이 어림짐작이 아니라 언제나 0.96입니다.
- 대부분의 컴포넌트가 어딘가 어색해 보이게 만드는 중첩 라디우스 불일치를 바로잡습니다.
- 숫자가 바뀔 때 생기는 레이아웃 이동을 사용자에게 닿기 전에 잡아냅니다.
다루는 내용
- Quick reference
- Core principles
- Common mistakes
- Review output format
- Review checklist
- Reference files
설치 방법
Details that make interfaces feel better
-
저장소를 클론하세요.
git clone https://github.com/jakubkrehel/make-interfaces-feel-better -
Codex에 스킬 파일 경로를 지정하세요.
skills/make-interfaces-feel-better/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
Codex에 컴포넌트를 가리키고 원칙을 적용해 달라고 하세요.
-
리뷰를 요청하면 결과가 Before와 After 표로 돌아옵니다.
-
프런트엔드 변경을 머지하기 전에 열네 항목짜리 체크리스트를 돌리세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.