Communitygithub.com

TIKAZI/TIKAZ-Codex-Frontend-Design

아트 디렉션 기반의 프론트엔드 워크플로우로, 구현 확장 전에 시각적 방향성을 검증합니다.

TIKAZ-Codex-Frontend-Design란 무엇인가요?

이 스킬은 프론트엔드 디자인과 아트 디렉션에 특화된 전문 기술로, 시각적 방향성을 먼저 증명한 후에 구현 규모를 확장하는 방법론을 제공합니다. TIKAZ 방법론에 따라 화면을 '설득', '조작', '읽기', '경험'의 네 가지 표면 유형으로 분류하고, 각 프로젝트에 대해 하나의 디자인 리드, 세 가지 프로젝트 다이얼(변형, 모션, 밀도), 하나의 지배적 구성, 세 가지 반대 목표를 설정합니다. `frontend-design-studio`가 아트 디렉션과 구현을 주도하며, 다른 지원 스킬이 승인된 시각적 세계를 덮어쓰지 못하도록 합니다. 아트 디렉션 증명으로는 내비게이션, 첫 번째 뷰포트, 하나의 대표적인 하위 섹션을 데스크탑과 모바일 모두에서 제시해야 하며, 완료 게이트로 디자인 계약서, 대상 뷰포트의 스크린샷 증거, 주요 상태, 모션 축소 동작, 빌드/테스트 증거, 컴포넌트 라이선스 상태, 한계점을 명시한 핸드오프가 필요합니다. 이 스킬은 Codex 환경에서 사용되며, `code-intelligence`와 `engineering-delivery`로 변경 영향을 라우팅하기 전에 디자인 증명이 승인되어야 합니다.

지원 대상~Claude Code✓Codex CLI~Cursor
npx skills add TIKAZI/TIKAZ-Codex-Frontend-Design

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

프론트엔드 디자인

TIKAZ에 의해 설계, 통합, 리팩토링 및 지속적으로 유지 관리됩니다.

TIKAZ 방법

  1. 화면을 설득, 조작, 읽기, 경험으로 분류합니다. 모든 제품에 랜딩 페이지식 화려함을 적용하지 마십시오.
  2. 하나의 디자인 리드, 세 가지 프로젝트 다이얼(변형, 모션, 밀도), 하나의 지배적 구성, 세 가지 반대 목표를 작성합니다.
  3. frontend-design-studio가 아트 디렉션과 구현을 담당하도록 합니다. 지원 스킬은 승인된 시각적 세계를 덮어쓸 수 없습니다.
  4. 아트 디렉션 증명을 구축합니다: 내비게이션, 첫 번째 뷰포트, 하나의 대표적인 하위 섹션, 데스크탑과 모바일을 함께.
  5. 저장소 전체의 변경 영향을 디자인 증명이 승인된 후에만 code-intelligence로 라우팅하고, 프로덕션 실행은 engineering-delivery로 라우팅합니다.
  6. 별도의 시각적/제품 QA와 구현 QA 패스를 실행합니다.

완료 게이트

커밋된 디자인 계약서, 대상 뷰포트의 스크린샷 증거, 주요 상태, 모션 축소 동작, 빌드/테스트 증거, 컴포넌트 라이선스 상태, 그리고 남은 한계점을 명시한 핸드오프가 필요합니다.

참고자료/routing.md 및 참고자료/output-contract.md를 읽으십시오.

관련 스킬