현지화된 읽기 가이드
emil-design-eng목적, 사용법 및 출처
이 스킬은 UI 완성도, 컴포넌트 디자인, 애니메이션 결정, 그리고 소프트웨어 사용 경험을 훌륭하게 만드는 보이지 않는 세부 사항에 대한 에밀 코왈스키의 철학을 담고 있습니다.
출처 검색됨:
- 소스 저장소
- vercel-labs/open-agents
- SKILL.md
.agents/skills/emil-design-eng/SKILL.md- 저장소 Star
- 5,871
- 저장소 최근 업데이트
- 2026-08-29
- 능력 분류
- 에이전트 워크플로
- 최근 수집 시간
라이선스: MIT
워크플로 발췌본은 이해를 돕기 위한 자료이며, Codez에서 제공하는 실행 가능한 명령어가 아닙니다. 이 페이지를 생성하는 데 타사 Skill은 사용되지 않았습니다.
아래의 목적 및 워크플로 관련 내용은 읽기 쉽도록 정리 및 번역된 상위 자료입니다. 이는 별도로 분류된 Codez 편집 분석과는 별개입니다.
이 스킬의 기능
이 스킬은 UI 완성도, 컴포넌트 디자인, 애니메이션 결정, 그리고 소프트웨어 사용 경험을 훌륭하게 만드는 보이지 않는 세부 사항에 대한 에밀 코왈스키의 철학을 담고 있습니다.
업스트림 워크플로우 작동 방식
스프링은 언제 사용해야 할까요?
관성을 활용한 드래그 상호작용, "생동감"을 주는 요소(애플의 다이내믹 아일랜드처럼), 애니메이션 도중 중단될 수 있는 제스처, 장식적인 마우스 트래킹 상호작용
상류 통로 · L143 ↗설계 엔지니어링
당신은 장인 정신을 지닌 디자인 엔지니어입니다. 모든 디테일이 조화를 이루어 완벽한 느낌을 주는 인터페이스를 만들어냅니다. 모두가 충분히 훌륭한 소프트웨어를 만드는 세상에서, 당신의 감각이야말로 차별화 요소라는 것을 이해하고 있습니다.
상류 통로 · L6 ↗맛은 타고나는 것이 아니라 후천적으로 길러지는 것입니다.
좋은 취향은 개인적인 선호가 아닙니다. 그것은 훈련된 본능입니다. 뻔한 것을 넘어 무엇이 가치를 높이는지 알아보는 능력입니다. 훌륭한 작품들을 접하고, 왜 어떤 것이 좋은 느낌을 주는지 깊이 생각하고, 끊임없이 연습함으로써 이러한 능력을 키울 수 있습니다. UI를 만들 때는 단순히 작동하게 만드는 데 그치지 마세요. 최고의 인터페이스가 왜 그런 느낌을 주는지 연구하세요. 애니메이션을 역설계하고, 상호작용을 분석하고, 호기심을 가지세요.
상류 통로 · L12 ↗Before: transition: all 300ms
After: transition: transform 200ms ease-out
────────────────────────────
Before: scale(0)
After: scale(0.95)요구 사항 및 설정
이 파일에서 간략한 요구사항 구절이 선택되지 않았습니다. 이는 해당 스킬에 종속성이 없다는 의미는 아닙니다. 저장소 설정 지침 및 참조 파일을 확인하십시오.
제한 사항 및 품질 검사
절대 크기에서 애니메이션을 만들지 마세요(0)
현실 세계에서는 어떤 것도 완전히 사라졌다 다시 나타나지 않습니다. 움직이는 요소들은 원래 있던 곳에서 다시 나타납니다.scale(0)마치 어디선가 갑자기 나타난 것처럼 보입니다. 시작은...scale(0.9)또는 그 이상의 크기를 불투명도와 결합하면, 처음에는 거의 보이지 않는 크기만으로도 입구가 더욱 자연스럽게 느껴집니다. 마치 바람이 빠져도 형태가 드러나는 풍선처럼 말이죠.
안전한 시험 사용부터 시작하세요
- 지원되는 호스트와 저장소 설치 지침을 확인하세요. 스킬 디렉토리와 해당 디렉토리에서 참조하는 스크립트, 자산 및 문서를 함께 보관하세요.SKILL.md단독으로는 종속성을 생략할 수 있습니다.
- 에이전트에 실제 입력값, 원하는 출력값 및 승인 기준을 제공하십시오. 호출 구문 및 사용 가능한 도구는 호스트에 따라 다르므로 이 사이트는 범용 설치 명령을 제공하지 않습니다.
- 원본 워크플로를 임시 프로젝트 또는 복사본에서 테스트해 보세요. 파일, 원격 서비스 또는 유료 리소스를 변경하는 작업은 허용하기 전에 검토하십시오.
- 출력 결과를 원본 품질 검사 및 자체 요구 사항에 맞춰 검증하십시오. 트리거가 성공적으로 작동했거나 저장소의 별점 수가 높다고 해서 반드시 올바른 결과가 나오는 것은 아닙니다.
원문에서 더 자세한 내용을 읽어보세요.
- 설계 엔지니어링
- 맛은 타고나는 것이 아니라 후천적으로 길러지는 것입니다.
- 보이지 않는 세부 사항들이 모여 복합적인 효과를 낸다.
- 아름다움은 지렛대 역할을 한다.
- 검토 형식 (필수)
- 애니메이션 결정 프레임워크
- 1이 애니메이션은 꼭 필요한 건가요?
- 2목적은 무엇인가요?
- 3어떤 완화 기법을 사용해야 할까요?
- 4속도는 얼마나 빨라야 할까요?
- 인지된 성과
- 봄 애니메이션
- 스프링은 언제 사용해야 할까요?
- 스프링 기반 마우스 상호작용
- 스프링 구성
- 중단 가능성 이점
- 버튼은 반응성이 좋아야 합니다.
- 절대 크기에서 애니메이션을 만들지 마세요(0)
- 원산지를 알 수 있는 팝오버를 만들어 보세요
- 툴팁: 이후 마우스 오버 시 지연 시간 건너뛰기
- 중단 가능한 UI를 구현하려면 키프레임 대신 CSS 전환 효과를 사용하세요.
- 불완전한 전환을 가리기 위해 흐림 효과를 사용하세요.
- @starting-style을 사용하여 진입 상태를 애니메이션화합니다.
- translateY를 백분율로 변환
- scale() 함수는 자식 노드의 크기도 조정합니다.
- 3깊이에 대한 D 변환
- 변환 원점
- 애니메이션용 클립패스
- 삽입된 모양
- 색상 전환이 완벽한 탭
관련 기술
번역 및 범위
이 독서 안내서는 고정된 상류 지역에서 발췌한 구절들을 소개합니다.SKILL.md본 번역은 보조 번역이며, 완전한 설명서 또는 호환성 테스트를 보장하는 것은 아닙니다. 사용 전에 원본 및 참조 파일을 반드시 읽어 주십시오.
이 소개글은 아래 고정된 버전을 참조하며, 현재 저장소 활동 및 수집 시간은 별도로 표시됩니다.
- 고정된 소스
- 원문을 읽어보세요 ↗
- 출처 검색됨
- 소스 커밋
cf865e94de7729751c747171785b6ce57e7b178c- 출처 SHA-256
9d261c73de2c2c4dc5662ab20117b8e045c7b71958f8042acf037325444ebe6b