emil-design-eng (emilkowalski/skills)

리뷰

Codex CLI 0.166 (gpt-6-astra, low reasoning)을 전용 Windows 테스트 PC에서 실행했고, 실행마다 새 임시 프로젝트와 임시 HOME/TMPDIR/캐시를 사용했습니다. 스킬 설치(스킬 사용군), 미설치(대조군), 미설치 상태에서 스킬의 핵심 요구사항만 한 문장으로 압축해 프롬프트에 덧붙인 경우(한 문장 프롬프트군)로 나눴으며, 과제·그룹당 2회씩 실행했습니다. 네트워크는 끄고 /tmp 쓰기는 차단했습니다. 프롬프트에는 스킬 이름을 언급하지 않았습니다(아래에 적은 경우 제외). frontend-design 테스트와 같은 세 가지 브리프를 썼습니다(Tidepool 랜딩 페이지, 수질 대시보드, 클라이밍 짐 홈페이지 리디자인). 각각 외부 의존성 없는 HTML 파일 하나로 작성했습니다. 프롬프트에는 애니메이션이나 스킬을 언급하지 않았고, 스킬 사용군은 그저 스킬이 설치된 상태였습니다.

3개 그룹 비교

Codex CLI에서 18회 실행해 측정했고, LLM 심사 없이 규칙 기반 검사로 채점했습니다. 총점 26.2 / 30, 판정 추천.

판정: 추천 (26.2 / 30). 출처: emilkowalski/skills, skills/emil-design-eng, 커밋 a81dbca에 고정. 설치: npx skills@latest add emilkowalski/skills --skill emil-design-eng. 라이선스: MIT(저장소 LICENSE).

무엇인가

emilkowalski/skills의 emil-design-eng 스킬은 UI 다듬기를 위한 Emil Kowalski의 디자인 엔지니어링 규칙으로, SKILL.md 하나에 약 4,000단어 분량입니다. 언제 애니메이션을 쓸지, 기본값 대신 사용자 정의 ease-out 곡선을 쓸지, 150~300 ms 길이, transform과 opacity만 애니메이션하기, 눌림 피드백(:active에서 scale(0.97)), scale(0)에서 시작하는 애니메이션 금지, 스태거, (hover: hover)로 hover 제한, 모션 줄이기, 히트 영역처럼 눈에 보이지 않는 세부 사항을 다룹니다. 스크립트는 없습니다.

테스트 방법

전용 Windows 테스트 PC에서 Codex CLI 0.166(gpt-6-astra, 낮은 추론)을 실행했고, 실행마다 새 임시 프로젝트와 임시 HOME/TMPDIR/캐시를 사용했습니다. 스킬을 설치한 경우(스킬 사용군), 설치하지 않은 경우(대조군), 스킬 없이 스킬의 핵심 요구사항을 한 문장으로 압축해 프롬프트 끝에 붙인 경우(한 문장 프롬프트군)로 나눴고, 작업마다 각 군 2회씩 실행했습니다. 네트워크는 끄고 /tmp 쓰기는 차단했습니다. 프롬프트에는 스킬 이름을 전혀 언급하지 않았습니다(아래에 적은 표현은 예외).

frontend-design 테스트와 같은 브리프 세 가지(Tidepool 랜딩 페이지, 수질 대시보드, 클라이밍 짐 홈페이지 재디자인)를 사용했고, 모두 자체 완결형 HTML 파일 하나로 작성했습니다. 프롬프트에는 애니메이션이나 스킬을 언급하지 않았고, 스킬 군은 그저 스킬을 설치한 상태였습니다.

1. 브리프로 새 랜딩 페이지 만들기 — 소량 생산 김 스낵 브랜드 Tidepool의 원페이지 랜딩 사이트를 만드세요. 구독으로 판매하며(맛 3종, 상자당 $14, 매월 배송) 합니다. 인라인 CSS를 사용한 자체 완결형 index.html 하나를 작성하고, 필요한 경우에만 최소한의 JS를 쓰세요. 프레임워크와 빌드 도구는 사용하지 마세요…
2. 데이터 밀도 높은 대시보드 UI — 지방자치단체 수질 모니터링 팀을 위한 대시보드 페이지를 만드세요. 6개 관측소의 현재 수치(pH, 탁도, 염소, 수온), 각 관측소의 7일 추세, 경보 패널이 포함되어야 합니다. 인라인 CSS/JS와 하드코딩된 판독값으로 구성된 자체 완결형 dashboard.html 하나를 작성하세요.
3. 기존의 밋밋한 페이지 재구성 — old.html은 Granite Peak Climbing Gym(콜로라도주 볼더)의 현재 홈페이지입니다. 실제 콘텐츠(요금, 수업, 운영 시간, 주소)는 모두 유지하면서 이 특정 암장에 어울리는 페이지로 new.html을 새로 디자인하세요. 프레임워크 없이 자체 완결형 HTML/CSS로 작성하세요…

채점은 프로그램 방식(숨은 테스트, 심어 둔 문제 탐지, 제약 조건 검사, 해당되는 경우 렌더링+OCR)으로 실행당 0~5점입니다. 점수를 결정한 LLM 심사자는 없습니다. 이 스킬은 스크린샷으로 보이지 않는 모션과 상호작용 세부 사항을 다루므로, 생성된 CSS에 대해 규칙 기반 체크리스트를 실행해 채점했습니다(검사 10개: :active 눌림 피드백, 사용자 정의 cubic-bezier, ease-in/linear/기본 ease 사용 안 함, transition: all 사용 안 함, transform/opacity/색상만 애니메이션, 길이 300 ms 이하, 모션 줄이기, 스태거, scale(0) 사용 안 함, (hover: hover)로 hover 제한). 실행당 0~5점입니다. 이는 스킬 자체 규칙과 밀접하게 맞춰져 있어 '페이지가 더 나아졌는가'가 아니라 '스킬을 따랐는가'를 측정합니다.

결과

세 번째 군에 전달한 한 문장 프롬프트: "디자인 엔지니어처럼 다듬으세요. 사용자 정의 이징 곡선(등장에는 ease-out, 기본값이나 ease-in은 절대 사용 금지), 150~300 ms 길이, transform과 opacity만 애니메이션, :active에서 scale(0.97) 같은 눌림 피드백, scale(0)에서 애니메이션 시작 금지, 등장에 스태거 적용, prefers-reduced-motion 존중, 그리고 보이지 않는 세부 사항(hover, active, focus 상태, 44 px 히트 영역)까지 신경 쓰세요."

평균 점수: 스킬 없음 3.33, 스킬 사용 4.75(차이 +1.42). 실행당 토큰: 133k 대 149k(1.12배), 시간: 178초 대 163초. 한 문장 프롬프트 군: 4.5(한 문장 프롬프트 대비 스킬의 이득 +0.25, 스킬 없음 대비 한 문장 프롬프트의 이득 +1.17). 한 문장 프롬프트의 실행당 토큰은 127k이므로 스킬은 한 문장 프롬프트의 1.17배 비용을 씁니다.

무슨 일이 있었나

• 순수 Codex는 눌림 피드백이나 사용자 정의 이징 곡선을 전혀 작성하지 않았습니다. 대조군 페이지 0/6에 :active scale 규칙이나 cubic-bezier가 있었고, 한 문장 프롬프트 군은 6/6, 스킬 사용군은 눌림 6/6, 곡선 5/6이었습니다. 점수는 대조군 3.33, 한 문장 4.50, 스킬 4.75입니다.
• 한 문장 프롬프트가 담지 못한 유일한 규칙인 @media (hover: hover)로 hover 스타일 제한은 스킬 페이지 5/6이 지켰고, 다른 페이지는 0/12였습니다. 이것이 한 문장 대비 스킬의 이점 전체(+0.25)입니다.
• 이미 좋은 습관은 모든 곳에서 흔했습니다. transition: all 없음, transform/opacity/색상만 애니메이션, 모션 줄이기 지원, scale(0) 없음. 대조군도 6/6회 이 항목들을 지켰으므로, 스킬은 기본이 아니라 구체적인 다듬기 규칙을 더합니다.
• 페이지를 블라인드로 살펴보면(데스크톱 스크린샷, 순서 섞음) 18장 모두 다듬어져 있고 망가진 페이지는 없습니다. 세 군의 정적 디자인 품질은 구별되지 않습니다. 스킬이 바꾸는 것은 스크린샷에 보이는 모습이 아니라 체감되는 동작입니다.
• 비용: 실행당 149k 토큰으로 133k(1.12배)와 한 문장 프롬프트 군의 127k에 비해, 디자인 스킬 중 측정한 가장 저렴한 스킬 오버헤드입니다.

항목별 점수

이 테스트의 한계

• 모션 규칙은 페이지를 보는 것이 아니라 CSS 텍스트에서 검사합니다. 전환이 존재해도 어색하게 느껴질 수 있습니다.
• 체크리스트는 스킬 자체 규칙에서 도출했고 한 문장 프롬프트가 그 대부분을 담고 있으므로, 한 문장 프롬프트 군은 짧은 프롬프트의 상한선입니다.
• 정적 페이지 브리프 세 개만 사용했습니다. 스킬이 가장 많은 분량을 할애하는 상호작용 컴포넌트(드롭다운, 토스트, 드로어)는 요청하지 않았습니다.
• 작업·군당 n = 2: 약 1점 미만의 차이는 노이즈입니다.
• 규칙 기반 채점은 검사가 볼 수 있는 것만 측정합니다. 취향이나 결과가 최선인지는 판단할 수 없습니다.

보안

security.md를 참조하세요. 스캔: CRITICAL 0 / HIGH 0 / MEDIUM 0. 판정: 실행해도 안전(네트워크 차단 샌드박스). 깨끗한 스캔 결과가 스킬의 안전성을 증명하지는 않습니다.

결론

눌림 피드백, ease-out 곡선, hover 제한을 따로 요청하지 않아도 갖춘 페이지를 원한다면, 이 스킬은 거의 추가 토큰 비용 없이 이를 제공합니다. 같은 규칙을 나열한 한 문장만으로도 94%까지 도달하므로, 스킬의 가치는 규칙을 몰라도 된다는 데 있습니다.