ThreeUI 3D 페이지
ThreeUI를 시각적 참고 소스로 사용하세요. 단순히 프롬프트를 무작정 붙여넣는 용도가 아닙니다. 목표는 히어로 효과, 타이포그래피, 간격, 모션, 콘텐츠가 하나의 아트 방향성을 갖춘 일관되고 프로덕션 준비가 완료된 인터페이스를 만드는 것입니다.
워크플로우
-
사용자 요청에서 디자인 브리프를 확립하세요: 제품, 대상 고객, 원하는 분위기, 주요 콘텐츠, 필요한 브랜드 제약 조건. 제품 주장을 지어내거나 제공된 카피를 데모 카피로 대체하지 마세요.
-
번들 카탈로그를 검색하세요:
node scripts/threeui.mjs search "liquid metal launch button" node scripts/threeui.mjs search "奢侈品香水 落地页 烟雾" -
호환 가능한 후보 두세 개를 선정한 후, 가장 강력한 후보를 검사하세요:
node scripts/threeui.mjs show <item-id> node scripts/threeui.mjs guide <item-id> -
하나의 앵커 효과를 선택하세요. 최대 하나의 보조 ThreeUI 요소만 추가하고, 이 요소가 명확한 계층 또는 상호작용 역할을 수행할 때만 사용하세요. 페이지를 더 복잡하게 만들기 위해 관련 없는 셰이더를 쌓지 마세요.
-
애플리케이션 코드를 변경하기 전에 references/integration.md를 읽으세요. 여기에는 소스, 에셋, 구성, 성능, 검증 규칙이 포함되어 있습니다.
결정 규칙
- 효과를 콘텐츠에 일치시키세요. 차분한 제품 페이지에 자동으로 고에너지 파티클 필드를 적용하지 말고, 대시보드에 시네마틱 전체 화면 셰이더를 주요 표면으로 사용하지 마세요.
- 새 사이트를 만드는 경우
Landing Pages및Hero카테고리의 전체 페이지 또는 히어로를 선호하세요. 기존 UI에 깊이가 필요하면 배경 컴포넌트를, 요청 범위가 더 작으면 버튼이나 UI 요소를 선호하세요. - 카탈로그의
runtime,interaction,asset,variants메타데이터를 사용하여 대상 스택 또는 성능 범위와 충돌하는 후보를 거부하세요. - 이미지 및 모션 효과를 디자인의 한 레이어로 취급하세요. 주변 레이아웃, 서체 규모, 여백, 대비, 콜 투 액션이 여전히 결과물 완성도를 결정합니다.
- 카탈로그에 적합한 커뮤니티 컴포넌트가 없으면 명확히 밝히고, 프로젝트의 기존 스택에서 가장 가까운 적절한 솔루션을 구축하세요. Pro 또는 사용 불가능한 ThreeUI 에셋을 사용했다고 주장하지 마세요.
소스 규칙
- 커뮤니티 소스는 MIT 라이선스입니다. 저작자 표시 및 번들 라이선스 고지를 유지하세요. references/THIRD_PARTY_NOTICES.md를 참조하세요. 원격 ThreeUI 썸네일이나 미리보기를 재배포하지 마세요.
- npm 패키지
@designcodeio/threeui와 문서화된 가져오기 이름을 선호하세요. 전체 템플릿 카탈로그를 대상 프로젝트에 복사하지 마세요. - 구현 가이드가 존재하면 즉흥적으로 작업하기 전에 먼저 따르세요. 가이드는 정식 소스 파일, 에셋, 런타임 버전, 동작을 식별합니다.
- 정확한 소스를 사용할 수 있는 경우, 작성된 셰이더, 지오메트리 또는 에셋을 대략적인 시각적 근사치로 대체하지 마세요.
- Pro MCP 또는 CLI는 사용자가 자신의 인증된 접근 권한을 가진 경우에만 사용하세요. 생성된 프로젝트에 자격 증명을 요청하거나 저장하거나 포함시키지 마세요.
완료 기준
작업을 마치기 전에 대상 프로젝트의 빌드, 테스트, 린트 명령어를 실행하세요. 데스크톱 및 모바일 렌더링, 브라우저 콘솔 출력, reduced-motion 동작, 해당하는 경우 WebGL 폴백 경로를 검사하세요. 실행된 정확한 검사와 완료할 수 없었던 검증을 보고하세요.