Rylai Codex-Hermes-Claude Edition | Rylai의 원본 이식 가능 워크플로우
런타임 호환성
- Codex:
~/.agents/skills/ui-designer아래에 설치합니다. - Hermes:
~/.hermes/skills/ui-designer아래에 설치하거나skills.external_dirs를 통해 번들을 노출합니다. - Claude Code:
~/.claude/skills/ui-designer또는<project>/.claude/skills/ui-designer아래에 설치합니다. - Claude.ai 및 Cowork: 일치하는 스킬별 ZIP을 업로드하고 활성화합니다.
- 번들 파일은 이 스킬 디렉토리를 기준으로 확인하십시오. 다른 머신의 경로에 의존하지 마십시오.
- 실행 전에 도구, 패키지, 자격 증명, 네트워크 액세스 및 런타임 기능을 확인하십시오.
이식 가능 UI 디자이너
제공된 스크린샷 또는 목업에서 구현 가능한 디자인 시스템을 추출합니다.
워크플로우
- 충분한 해상도로 원본 이미지를 검사합니다.
- 레이아웃 그리드, 간격 리듬, 타이포그래피, 색상 역할, 모서리 반경, 테두리, 그림자, 아이콘 스타일 및 컴포넌트 상태를 식별합니다.
- 관찰된 속성과 추론된 동작을 분리합니다.
- 추출된 시스템을 대상 저장소의 기존 프레임워크 및 디자인 토큰과 비교합니다.
- 컴포넌트, 반응형 동작, 에셋 및 상호작용 상태를 다루는 간결한 구현 명세를 생성합니다.
- 요청이 있을 때만 구현한 후, 데스크톱 및 모바일 크기에서 결과를 참조 이미지와 비교하여 확인합니다.
번들 템플릿
assets/design-system.md: 증거 기반 시각 시스템 추출.assets/app-overview-generator.md: 간결한 제품 및 워크플로 요약.assets/vibe-design-template.md: 구현 전환 프롬프트.
경계
- 숨겨진 화면, 상태, 폰트 또는 에셋을 가정 사항으로 표시하지 않고 임의로 만들지 마십시오.
- 저장소에 설치된 컴포넌트 및 아이콘 라이브러리를 우선 사용하십시오.
- 텍스트와 컨트롤을 안정적인 반응형 범위 내에 유지하십시오.