모던 프론트엔드 — 팩 라우터
이 팩은 6개의 방향을 포함합니다. 각 방향은 동일한 크래프트 플로어(Emil Kowalski 애니메이션 캐논 + 슬롭 필터)를 기반으로 하지만, 서로 다른 디자인 질문에 답합니다. 라우터의 역할은 적절한 방향을 빠르게 선택하고 방해되지 않는 것입니다.
이 팩의 정체성은 "일반적인 취향"이 아닙니다. 그것은 구체적으로 다음과 같습니다: 루이 파케/로코모티브 작업의 시네마틱한 자신감 + Emil Kowalski의 보이지 않는 장인 정신. 각 방향은 이 축에 맞춰 큐레이션됩니다. 이 팩에서 구축된 페이지는 동시에 연출(루이 파케)되고 장인 정신(Emil Kowalski)이 담겨야 합니다.
여섯 가지 방향
| 방향 | 답하는 질문 |
|---|---|
cinematic-scroll | "제품을 페이지의 이야기로 만드는 방법은?" |
motion-bento | "마케팅 맥락에서 작동하는 제품 표면을 보여주는 방법은?" |
publication | "페이지를 디자인된 기사처럼 보이게 하는 방법은?" |
nightside | "이 브랜드를 야간에도, 고려되었으며, 화려하지 않게 만드는 방법은?" |
modernist-grid | "타이포그래피와 그리드가 모든 작업을 하도록 두는 방법은?" |
considered-modern | "이것을 차갑지 않고 따뜻하고 전문적으로 읽히게 하는 방법은?" |
방향이 선택됩니다. 협상되지 않습니다. 사용자가 명시적으로 요청하지 않는 한, 팩은 하이브리드 출력을 생성하지 않습니다.
방향 선택
라우터는 다음 순서로 결정합니다.
- 명시적 명명. 사용자가
cinematic-scroll,motion-bento,publication,nightside,modernist-grid, 또는considered-modern을 입력하면 해당 방향으로 라우팅합니다. 유사한 표현도 허용합니다 — 아래 § 별칭을 참조하세요. - 구문 신호. 사용자가 § 구문 라우팅에 나열된 높은 신호 구문 중 하나를 사용하면 일치하는 방향으로 라우팅합니다.
- 브리프 추론. 브리프(제품, 대상, 분위기, 밀도, 에너지)를 읽고 가장 강력한 적합도를 선택하기 위해 § 추론 규칙을 사용합니다.
라우터는 사용자에게 메뉴에서 선택하도록 요청하지 않습니다. 선택하고, 출력 상단에 한 문장으로 선택을 설명합니다("nightside로 갑니다 — 브랜드는 스타트업의 광택보다 늦은 밤의 자신감을 원합니다.").
별칭
cinematic,cinematic product,scrolltell,product launch,immersive→cinematic-scrollbento,premium bento,motion engine,SaaS feature grid,archetype bento→motion-bentoeditorial,editorial premium,magazine,publication,design journal→publicationdark luxe,dark luxury,moody premium,late night UI,after hours→nightsideswiss,swiss system,swiss design,modernist,grid system,typographic poster→modernist-gridwarm modern,humane modern,studio site,professional services→considered-modern
구문 라우팅 (명시적 이름 없음)
- "product launch" / "hardware" / "scroll-driven" / "feels like a film" →
cinematic-scroll - "SaaS landing" / "feature section" / "AI product page" / "bento" →
motion-bento - "magazine" / "image-led" / "publication" / "design studio" →
publication - "dark" + "premium" / "restaurant" / "hospitality" / "exclusive" →
nightside - "rational" / "grid" / "Swiss" / "typographic poster" / "institutional" →
modernist-grid - "professional services" / "agency site" / "warm" / "consultancy" / "studio" →
considered-modern
추론 규칙 (브리프가 모호할 때)
- 강한 내러티브 호 + 제품이 주인공 →
cinematic-scroll - 제품이 하는 것을 미니어처 표면에서 보여줌 →
motion-bento - 타이포그래피 주도 + 큐레이션된 이미지 시퀀싱 →
publication - 깊은 네거티브 공간이 있는 분위기 주도 →
nightside - 구조적 색상이 있는 그리드 주도 →
modernist-grid - 실제 사진이 있는 스튜디오 목소리 →
considered-modern
두 방향이 경쟁하는 것처럼 보이면, 브랜드의 자신감과 더 잘 일치하는 방향을 선택하세요. 프리미엄 시계 브랜드는 아마 nightside를 원할 것이고 motion-bento는 아닐 것입니다. B2B 관찰 가능성 도구는 motion-bento를 원할 것이고 cinematic-scroll은 아닐 것입니다.
팩의 2계층 모델
모든 출력물은 다음 순서로 적용된 두 계층의 산물입니다.
계층 1 — 방향
선택된 스타일 폴더의 skill.md는 디자인 브리프입니다. 다음을 정의합니다.
- 이 방향에 대한 다이얼 보정(분산/모션/밀도 기준선).
- 이 방향을 인식 가능하게 만드는 세 가지 시그니처 무브.
- 재료: 타이포그래피, 색상, 레이아웃, 표면 처리.
- 이 방향에 적합한 모션 안무.
- 잘못된 스타일 지시자(이 방향에 특화된 슬롭 신호).
- 톤 보정을 위한 참조 아티팩트.
계층 2 — 크래프트 캐논 (보편적)
두 개의 파일이 방향에 관계없이 모든 출력물에 적용됩니다. 에이전트는 방향을 선택한 후 이 파일들을 읽습니다.
references/animation.md— Emil Kowalski 애니메이션 캐논. 결정 프레임워크(이징 우선, 유용성 프레임, 빈도, 목적, 지속 시간), 이징 곡선, 크래프트 체크리스트(버튼 프레스, 팝오버 트리거-원점,scale(0.95)진입, 비대칭 타이밍, 제스처 속도), 어떤 규칙이 Emil로부터 직접 온 것인지와 스킬 튜닝된 것인지에 대한 출처 노트.references/forbidden.md— 슬롭 필터. 비주얼/타이포그래피/레이아웃/콘텐츠/컴포넌트/React-프레이머 안티 패턴 + 출력 전에 통과해야 하는 사전 비행 체크리스트.
이것들이 팩이 크래프트 수준에서 "프리미엄"을 정의하는 방법입니다. modernist-grid 버튼도 :active에서 눌립니다. publication 팝오버도 트리거에서부터 스케일됩니다. 금지된 패턴은 6가지 방향 모두에 동일하게 적용됩니다.
컴포넌트 지식 — 파일 열기
방향을 선택한 후, 에이전트는 공유 컴포넌트 라이브러리 연구를 참조합니다.
components/style-recipes.md— 각 방향을 해당 라이브러리의 특정 패턴에 매핑하여 방향을 강화합니다(어떤 GSAP 데모, 어떤 Framer 프리미티브, 어떤 Aceternity 레시피, 어떤 21st.dev 컴포넌트). 이것을 먼저 여십시오.components/gsap-patterns.md— 시네마틱 방향을 위한 GSAP + ScrollTrigger + Lenis 레시피.components/motion-libraries.md— Framer Motion 패턴, React Bits 노트, Aceternity UI 노트 (주의 깊게 적용될 때).components/component-libraries.md— 21st.dev 프리미티브, shadcn 사용자 정의 규칙, Radix 팝오버 원점 적용.
이것들을 템플릿이 아닌 연구 자료로 사용하십시오. 원시 상태로 붙여넣은 것은 키트처럼 읽힙니다. 선택한 방향에 맞게 사용자 정의하십시오.
팩 전체 안전 규칙 — 무조건 적용
이 규칙들은 방향이나 브리프에 의존하지 않습니다. 모든 출력물에 적용됩니다.
- 이모지 없음. 어디서든 — 코드, 마크업, 콘텐츠, 대체 텍스트. Phosphor 또는 Radix 아이콘을 사용하십시오.
- 의존성 확인.
framer-motion,lucide-react,@phosphor-icons/react,@radix-ui/react-icons,zustand등을 가져오기 전에package.json을 확인하십시오. 없으면 먼저 설치 명령어를 출력하십시오. - Tailwind 버전 잠금.
package.json에서 v3 또는 v4를 확인하십시오. - 뷰포트 안정성. 절대
h-screen을 사용하지 마십시오. 전체 뷰포트 표면에는 항상min-h-[100dvh]를 사용하십시오. - 아이콘 패밀리 잠금. Phosphor 또는 Radix, 둘 다는 안 됩니다. 획 두께 1.5 또는 2.0.
Inter,Roboto또는 시스템 산세리프를 식별용으로 사용하지 마십시오.- 순수한
#000000은 사용하지 마십시오. 조정된 오프 블랙을 사용하십시오. - 라일락 금지. 보라색/파란색 AI 그라데이션 글로우는 사용하지 마십시오.
scale(0)진입은 사용하지 마십시오. 항상scale(0.95)+opacity: 0을 사용하십시오.- UI에
ease-in은 사용하지 마십시오. 항상 사용자 정의 큐빅 베지어와 함께ease-out을 사용하십시오.
품질 기준
방향에 관계없이 모든 출력물은 이 기준을 충족해야 합니다.
- 어떤 섹션에서 스크린샷으로 잘라내도 의도적으로 보여야 합니다.
- 로고를 제거해도 여전히 특정하게 느껴져야 합니다. 다른 브랜드가 긴장 없이 교체될 수 있다면 작업은 실패한 것입니다.
- 이미지가 도움이 될 때 히어로 또는 처음 두 섹션에 실제 시각적 미디어(사진, 렌더, 일러스트레이션)를 포함합니다.
- "시각적 미디어"를 그라데이션/파티클/셰이더가 아닌 실제 이미지로 취급합니다.
- 방향의 페이싱과 일치하는 상호작용 상태(로딩, 빈 상태, 에러, 호버, 포커스, 액티브)를 포함합니다.
- 완료되었다고 선언하기 전에
references/forbidden.md의 사전 비행 체크리스트를 통과합니다.
브리프가 광범위할 때
라우터는 가장 강력한 그럴듯한 방향을 선택하고 확정합니다. 타협하지 않습니다.
브리프가 두 방향 사이에서 모호한 경우, 선택은 브랜드의 자신감을 더 잘 보존하는 방향으로 갑니다. 수제 브랜드는 motion-bento보다 cinematic-scroll 또는 nightside로 갑니다. B2B 플랫폼은 publication보다 motion-bento 또는 modernist-grid로 갑니다.
브리프가 어떤 방향에도 잘 맞지 않는 방식으로 광범위하다면, 그것 자체가 신호입니다. 브리프는 코드보다 먼저 날카로워질 필요가 있습니다. 명확한 질문 하나를 한 후 확정하십시오.
팩 예시 — 복사용이 아닌 톤용
두 개의 참조 아티팩트가 examples/에 있습니다.
examples/cinematic-landing.html— Maris & Co., 1947년부터 활동한 뉴포트 세일메이커. 엔드투엔드cinematic-scroll페이지: 비대칭 마스트헤드, 스티키 레터, 인벤토리 벤토, 딥 네이비 인용구, 마그네틱 CTA, 콜로폰 푸터, 3막 페이싱.examples/bento-saas.tsx— Morse, 게임 스튜디오를 위한 사운드 디자인 라이브러리 워크플로우. 다섯 가지 아키타입이 모두 연결된motion-bento페이지.
이것들을 톤 보정을 위해 읽으십시오. 문자 그대로 복사하지 마십시오. 모든 페이지는 자신만의 세계를 발명해야 합니다.