이샨-파리하르/웹사이트-디자인

웹사이트 디자인

약한 모델을 포함한 모든 AI 에이전트가 세계적 수준의 미적이고 기능이 풍부한 웹사이트를 구축하고 배포할 수 있는 파이프라인입니다. 각 단계는 명명된 아티팩트를 생성하고 다음 단계에서 이를 다시 읽으므로 어떤 결정도 다시 만들어지거나 손실되지 않습니다. 스킬-크리에이터 규칙을 통해 트리거됩니다. 모든 설명은 한 줄짜리 인용된 문자열입니다.

파이프라인 아티팩트(작업 메모리): DESIGN BRIEF(대상, 분위기, 다이얼) → DIRECTION(스타일, 팔레트, 타이포그래피, 허용/금지) → TOKENS(표준 CSS 커스텀 속성, 다크 모드) → SECTION MAP(헤드라인/본문/에셋/CTA 슬롯이 있는 정렬된 섹션) → DEPLOY SPEC(호스트, 유형, URL, 롤백).

라우팅 패턴: 파이프라인 + 패싯

파이프라인(순서대로, 단계를 건너뛰지 않음):

1. briefing - 사용자 메시지, 링크, 스크린샷, 저장소에서 DESIGN BRIEF를 추출합니다.
2. direction - HTML 또는 CSS 이전에 스타일, 팔레트, 타이포그래피를 선택합니다.
3. system - DIRECTION을 TOKENS로 변환하고 테마/다크 모드를 연결합니다.
4. structure - TOKENS와 DIRECTION을 SECTION MAP으로 변환합니다.
5. components - 블록 레시피(하위: 네비게이션, 히어로, 기능 섹션, 사회적 증명, 전환, 양식)로 각 섹션을 구축합니다.
6. content - 모든 SECTION MAP 슬롯을 실제 카피와 실제 에셋으로 채웁니다.
7. motion - MOTION 다이얼의 섹션별 애니메이션 사양입니다.
8. quality - 검토 전용 게이트: 안티-슬롭, 접근성, 성능, 감사, 프로덕션, 프리플라이트(최종 게이트).
9. deploy - 호스트 선택: higgsfield 또는 generic.

패싯(단계가 아닌 진입점):

• 사이트가 이미 존재하는 경우(URL, 저장소, 파일) → redesign에서 시작한 후 파이프라인에 다시 진입합니다.
• quality/* 리프는 검토 전용입니다. 빌드 시가 아니라 확인 시에 로드합니다.
• version-control은 모든 단계와 함께 실행됩니다. 각 아티팩트가 생성될 때 커밋합니다. 웹데브 관리 사이트 저장소(WEBSITES/)에서 작업하는 경우 이 작업이 필수입니다.

하위 항목

• briefing - 새 빌드의 경우 항상 첫 번째입니다. VARIANCE/MOTION/DENSITY 다이얼이 있는 DESIGN BRIEF를 생성합니다.
• direction - ui-ux-pro-max 검증 검색을 통한 스타일, 팔레트, 타이포그래피입니다. DIRECTION.md를 생성합니다.
• system - 표준 토큰, 테마, 다크 모드입니다. TOKENS를 생성합니다.
• structure - 정렬된 섹션 및 슬롯 개수입니다. SECTION MAP을 생성합니다.
• components - 섹션 종류별 블록 레시피입니다. 섹션당 하나의 리프를 로드합니다.
• content - 실제 카피, 실제 이미지, 채우기 없음. CONTENT를 생성합니다.
• motion - 애니메이션 사양, GSAP 스켈레톤, 감소된 모션 경로입니다.
• preflight - 최종 게이트입니다. 모든 품질 형제를 참조한 후 배포로 넘깁니다.
• deploy - 호스팅 라우터: higgsfield(웹사이트/앱/게임) 또는 일반 정적 호스트. DEPLOY SPEC을 생성합니다.
• redesign - 사이트가 이미 존재할 때 감사 우선 진입점입니다.
• version-control - 모든 단계에 걸친 Git 규율입니다. 작업을 커밋하지 않은 상태로 두지 마십시오.

탐색(루트 라우터 전용)

• 이동: 단계를 알고 있습니까? 해당 하위 항목을 직접 로드하십시오. 전체 트리를 로드하지 마십시오.
• 걷기: 결정 자체가 명확하지 않은 경우에만 사용하십시오. 한 번에 하나의 라우터를 읽으십시오.
• 작업 중인 단계를 알리십시오. 단계가 변경되면 그렇게 말하십시오.
• 재라우팅: 로드된 리프가 작업과 모순되는 경우 여기로 돌아와 다시 선택하십시오. 리프를 즉흥적으로 변경하지 마십시오.
• 넓은 분기는 하위 경로와 분할된 작업이 있는 하위 에이전트에 위임하십시오. 해당 하위 트리만 로드됩니다.
• 상한: 리프는 상위 항목의 규칙을 절대 초과하지 않습니다. 이 파일이 충돌 시 우선합니다.

규칙

_build/plan-expanded.md에서 승격되었으며, 서브트리의 모든 노드에 바인딩됩니다.

• 약한 모델 증명: 결정 테이블, 구체적인 숫자("padding 96-128px", 절대 "넉넉한"이 아님), 리프당 3-8개의 통합 가능하고 grep 가능한 합격/불합격 검사. 한 줄로 설명하여 더 똑똑한 모델이 일반화할 수 있도록 합니다. 기계적 규칙은 그 자체로 독립적입니다.
• 주제 기반 근거: 모든 미적 선택은 구체적인 주제, 대상 및 주요 작업(산업, 재료, 전문 용어)에 고정됩니다. 8-11세 소녀를 위한 장난감 가게와 재무 분석가를 위한 도구는 달라야 합니다. 모든 곳에서 실제 콘텐츠를 사용합니다. 콘텐츠가 없으면 briefing을 통해 구체적인 카피를 제안하고 확인을 받으십시오.
• 언어 불가지론: 원칙은 references/stack-adapters.md의 의미론적 HTML + CSS에 있습니다. React, Tailwind 또는 어떤 프레임워크에도 의존하지 마십시오.
• 표준 토큰: system에서 정의되며 모든 곳에서 사용됩니다: --bg --surface --text --text-muted --accent --accent-contrast --border --destructive, --radius --radius-lg, --font-display --font-body --font-mono, --space-1..--space-10 (4 8 12 16 24 32 48 64 96 128), --container, --shadow-1 --shadow-2.
• briefing의 다이얼: 정수 1-10, 정확한 이름 VARIANCE(1 최소, 10 비대칭/예술), MOTION(1 정적, 10 영화적), DENSITY(1 드문, 10 빽빽한). 새 다이얼을 절대 만들지 마십시오.
• ui-ux-pro-max 프로토콜: 방향/시스템 선택은 팩의 스타일/팔레트/타이포그래피 데이터에 대해 검증됩니다. 결과가 비어 있으면 내장 테이블로 대체하고 그렇게 명시하십시오.
• 다섯 개의 아티팩트는 펜스 블록으로 이동하며, 이름으로 다시 읽고 절대 메모리에서 읽지 않습니다.
• 머리말: name:은 디렉토리와 일치하고, description:은 한 줄짜리 인용된 트리거 문자열입니다.
• 스타일: em-대시 없음(하이픈 또는 마침표 사용), 이모지 없음, 절대 금지 사항은 anti-slop에만 있으며, 형제는 루트 상대 경로로 상호 연결됩니다(heroes).

양보할 수 없는 사항

• 어떤 노드에서도 em-대시를 사용하지 않습니다. 안티-슬롭 리프의 감지기가 이를 grep합니다.
• 가짜 로고, 사용후기, 통계 또는 브랜드 이미지를 만들지 않습니다. content가 제안하고 사용자가 확인합니다.
• 플레이스홀더 토큰을 사용하지 않습니다. 모든 섹션은 표준 토큰 세트를 통해 렌더링됩니다.
• 디자인 시스템을 혼합하지 않습니다. 빌드당 하나의 스타일 패밀리, 하나의 팔레트, 하나의 타이프 페어링입니다.
• 커밋되지 않은 아티팩트는 없습니다. version-control은 각 단계 출력을 다음 단계가 시작되기 전에 커밋합니다.
• preflight가 통과되지 않으면 배포하지 않습니다.
• 차트는 이 스킬의 범위에서 명시적으로 제외됩니다. 데이터 시각화(ui-ux-pro-max의 25개 차트 유형)의 경우, 그리드 + 막대를 즉흥적으로 구현하는 대신 python ~/.agents/skills/ui-ux-pro-max/scripts/search.py "<data shape>" --domain chart를 쿼리하십시오.