디자이너 Benji Taylor가 새로 공개한 스킬: 에이전트가 React와 CSS를 사용해 마케팅 페이지 헤더 이미지, 기능 카드, 문서 삽입 이미지 등에서 볼 수 있는 '실제 제품처럼' 단순화된 인터페이스를 제작합니다. 정적 일러스트는 물론, 커서 조작이 포함된 10–16초 분량의 데모 애니메이션도 생성할 수 있으며, 컴포넌트 라이브러리, 수십 개의 예제, 녹화 스크립트가 포함되어 있어 에이전트가 완성된 결과물을 캡처하여 자체 검수할 수 있습니다.
보안 감사: 미감사
- 아직 스캔되지 않음
이유
- 코드를 작성하기 전에 계획을 먼저 수립: 위치와 크기 설정(저자가 제시한 참고 기준에 따르면 옆에 텍스트가 배치된 헤더 이미지는 약 720 × 340, 카드는 400 × 300), 이후 테마와 충실도 결정, 그 다음 3–5개의 스토리 비트와 하나의 결과물 작성; 모바일 바에 들어갈 수 있는 경우 compact 버전을 별도로 제작
- 가장 유사한 '골드 스탠다드' 예제(정적 카드, AI 채팅, 폼 오류, 드래그 앤 드롭 정렬, 차트 드래그, 테이블 편집 등)를 복제하여 시작하고, node scripts/film.mjs를 사용하여 정지 프레임과 전체 영상을 촬영한 후 예제와 나란히 비교
- 일반적인 실패 사례 나열: 정보 과부하, 와이어프레임처럼 보이는 경우, 전체 창을 카드 내부로 축소하여 네 방향 여백이 생기는 경우, 모든 요소가 동일한 시각적 비중을 갖는 경우, 그리고 보라색과 반짝임 효과가 포함된 전형적인 AI 아이콘 패턴; 실제 텍스트는 스토리와 관련된 부분에만 배치하며 일반적으로 3–7개만 사용하고 나머지는 플레이스홀더 바를 사용
- kit/ 폴더에는 Stage, Window, Phone, 커서 스크립트 Act 등의 구성 요소가 제공됨; 스킬 디렉터리에 MIT 라이선스 명시
- skills.sh에 처음 등재된 지 1일 만에, 24시간 동안 804회 설치됨(관심도만 반영)
사용법
- 설치 명령어는 감사 통과 후 표시됨; 제품 데모 애니메이션, 기능 카드 일러스트 또는 가짜 UI(faux UI) 제작 요청 시 트리거됨
- 계정이나 외부 서비스 불필요; React, react-dom, lucide-react 필요하며, 예제는 npm install 및 npm run dev를 통해 미리보기 가능
리스크
- 이번 주 감사 미진행으로 고정 C등급이며 설치 명령어 미표시; SKILL.md에서 에이전트가 npm으로 의존성을 설치하고 스킬에 포함된 film.mjs 녹화 스크립트를 실행하도록 지시하지만, 해당 스크립트는 스캔되지 않음; skills.sh 페이지에 SKILL.md 및 제3자 감사 결과가 표시되지 않으며, 이번 검토는 GitHub 원문을 기준으로 함
- 예제에 Figma, Linear, Slack, Gmail 등 실제 제품의 모방 인터페이스와 실제 로고가 포함되어 있으며, SKILL.md에서는 상호작용만 차용하고 타사 제품 식별 정보는 사용하지 않도록 요구함; 자체 페이지에 적용할 때 타사 제품 스크린샷으로 오인되지 않도록 주의
- 저장소가 방금 공개되어 스타 수가 한 자릿수; 프로세스가 길고(계획, 촬영, 비교, 재검토, REHEARSAL.md 작성) 토큰 소모량이 큼