프런트엔드 & UI
Impeccable
프런트엔드 인터페이스를 만들고, 비평하고, 다듬는 스물네 개의 커맨드.
무엇인가
build, evaluate, refine, enhance, fix, iterate로 묶인 커맨드를 갖춘 프런트엔드 디자인 스킬. 프로젝트 컨텍스트와 레지스터 레퍼런스를 읽은 뒤 프로덕션급 코드를 씁니다.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing page
디자인에 왜 중요한가
- 레지스터 구분이 마케팅 페이지와 제품 UI를 서로 다른 디자인 규칙으로 갈라 보냅니다.
- 절대 금지 항목이 그러데이션 텍스트, 옆줄 테두리, 섹션마다 얹은 아이브로 라벨을 걷어냅니다.
- 대비 최저선이 명시적입니다. 본문 텍스트 4.5:1, 큰 텍스트 3:1.
다루는 내용
- Setup
- Design guidance
- The AI slop test
- Commands
- Routing rules
- Hooks
설치 방법
Impeccable
-
저장소를 클론하세요.
git clone https://github.com/pbakaus/impeccable -
Codex에 스킬 파일 경로를 지정하세요.
plugin/skills/impeccable/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
세션마다 context.mjs를 한 번 돌려 스킬이 PRODUCT.md와 DESIGN.md를 불러오게 하세요.
-
critique, polish, animate 같은 커맨드를 대상 파일과 함께 호출하세요.
-
개발 서버를 띄운 상태에서 라이브 모드로 브라우저 안에서 변주를 생성하세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.