스킬 자체의 표현으로
랜딩 페이지, 포트폴리오, 리디자인을 위한 안티-슬롭 프런트엔드 스킬입니다. 에이전트는 브리프를 읽고 디자인 방향을 추론한 다음, 세 가지 다이얼(DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY)을 설정하여 모든 레이아웃, 모션, 밀도 결정을 통제합니다. 실제 디자인 시스템이 존재하는 경우(Fluent, Carbon, GOV.UK, Polaris) 브리프를 그에 매핑하며, 미학적 성격에 그치는 방향에 대해서는 솔직하게 라벨을 붙입니다.
하드 규칙은 히어로 뷰포트 맞춤, 아이브로우 텍스트 절제, 페이지당 하나의 강조 색상과 하나의 테마, AI 특유의 티가 나는 요소 금지, 그리고 특정 아이콘·폰트·애니메이션 라이브러리를 다룹니다. 리디자인은 감사(audit)로 시작합니다. 마지막에는 모든 항목이 통과해야 코드가 배포되는 기계적인 사전 점검(Pre-Flight Check)으로 마무리됩니다.
산출물
- 코드 작성 전에 명시하는 한 줄짜리 디자인 리드(Design Read)로, 페이지 종류, 대상, 무드 언어, 그리고 지향하는 디자인 시스템 또는 미학적 계열을 담습니다.
- 기본적으로 Tailwind v4를 사용하는 프런트엔드 코드이며, 기존 프로젝트가 요구할 때만 v3로 대체합니다.
- 어떤 부분이 참고용 영감이고 어떤 부분이 공식 자료인지 명확히 밝히는 코드 주석입니다.
- 이미지 소스가 없을 때 명확히 표시된 플레이스홀더 슬롯과, 마지막에 아직 필요한 실제 이미지 목록을 제시합니다.
작동 방식
- 01무엇보다 먼저 브리프를 읽기
에이전트는 기본 미학으로 곧장 넘어가지 않고, 페이지 종류, 무드 단어, 참조 자료, 대상, 기존 브랜드 자산, 암묵적 제약 조건으로부터 사용자가 실제로 원하는 것을 추론합니다.
- 02세 가지 다이얼 설정하기
기본값은 8 / 6 / 4이며, 디자인 리드에 따라 대화식으로 재정의됩니다. 공공 서비스(3 / 2 / 5)부터 에이전시 랜딩 페이지(9 / 8 / 3)까지 사용 사례별 프리셋이 존재합니다.
- 03기반을 솔직하게 선택하기
브리프가 Microsoft, IBM, GitHub, Shopify, Atlassian, 또는 공공 부문을 지향한다면, 해당 CSS를 손으로 재현하는 대신 공식 패키지를 설치해 사용합니다.
- 04기본 스택 적용하기
React 또는 Server Components를 사용하는 Next.js, Tailwind v4, motion/react에서 가져온 Motion을 사용하며, 애니메이션은 클라이언트 리프 컴포넌트에 격리합니다.
- 05사전 점검(Pre-Flight Check) 실행하기
코드를 출력하기 전에 14절 매트릭스의 모든 항목이 통과해야 하며, 체크되지 않은 항목이 하나라도 있으면 작업이 완료되지 않은 것입니다.