제품 마케팅 웹사이트 디자인하기
콘텐츠, 시각적 선택 및 상호작용이 이 특정 제품을 설명하는 웹사이트를 만듭니다. SaaS, 마이크로-SaaS, 서비스, 도구 및 기타 제품을 지원하지만, 프레임워크, 고정된 페이지 수 또는 SaaS 시각 템플릿을 강요하지 않습니다.
실제 작업 확인하기
무엇이든 수정하기 전에 사용자의 요청, 리포지토리 지침, 승인된 제품 정의(예: project.md) 및 기존 마케팅 사이트를 읽습니다. 제품 정의가 없는 경우, 권한 있는 출처로부터 대상 고객, 제공 사항, 사용 가능한 기능 및 사이트 목표를 설정합니다. 의사 결정에 필수적인 정보가 누락된 경우에만 질문합니다. 작업이 브리프, 코딩 에이전트 구현, 외부 빌더 핸드오프 또는 범위가 제한된 업데이트인지 확인합니다. 기존 제품 결정, 아키텍처 및 권한 있는 범위를 유지합니다. 일반적인 웹사이트 편집을 위해 발견 과정을 다시 시작하지 않습니다.
승인된 제품 정의는 제품 사실, 범위, 상업적 결정 및 준비 상태를 소유합니다. 기존 이름과 위치를 유지합니다. 별도의 marketing-site-brief.md 는 웹사이트의 정보 아키텍처, 콘텐츠/디자인 요구 사항, 상호작용 및 검색 계획을 소유합니다. 제품 정의(예: project.md)에서 이를 참조합니다. 전체 제품 정의를 복제하거나 경쟁적인 제품 진실 출처를 만들지 마십시오. 기존 사양은 구현 작업에 대한 책임을 유지합니다.
실제 프레임워크, 경로, 렌더링, 컴포넌트, 종속성 및 호스팅 제약 조건을 검사합니다. 새 사이트의 경우 콘텐츠, 렌더링/인덱싱 요구 사항, 통합, 유지 관리 용이성 및 팀의 제약 조건을 기반으로 호환 가능한 접근 방식을 권장합니다. 최신 프레임워크를 자동으로 선택하지 않고 중요한 트레이드오프를 설명합니다. 디자인 스킬은 프레임워크나 런타임 종속성이 아닌 작업 지침입니다. SaaS는 제품 모델이고, Sass는 스타일링 도구입니다.
이전 가능한 디자인 브리프 생성하기
브리프를 생성할 때 영문 브리프 템플릿 또는 아랍어 템플릿을 사용합니다. 허위 사실을 채우지 않고 프로젝트에 맞게 섹션을 조정합니다. 유용한 작업을 차단하는 알려지지 않은 사항을 식별하고, 차단되지 않는 세부 사항에 대해서는 명시된 가정을 가지고 진행합니다.
제안된 각 페이지에 고유한 방문자 질문, 유용한 콘텐츠 및 다음 행동을 제공합니다. 내용이 부족하거나 중복되는 페이지는 병합합니다. 페이지 카피, 공개 기능 준비 상태, 증거 한계, 탐색, 내부 링크, 미리보기 레이블, 양식 동작, 반응형/RTL 요구 사항, 접근성, 메타데이터, JSON-LD 적용 가능성, 성능 및 수용 조건을 포함합니다. 여러 페이지로 구성된 사이트는 이름이 바뀐 앵커나 거의 동일한 키워드 페이지가 많은 단일 페이지가 아닌 의미 있는 경로와 콘텐츠를 가져야 합니다.
인식 가능한 시각적 방향을 정의합니다: 대상 고객 및 성격, 참조 원칙, 타이포그래피, 색상/간격 토큰, 구성, 에셋, 모션 및 의도적인 제약 조건. 모든 제품에 동일한 히어로/카드/그라데이션/대시보드 공식을 적용하지 마십시오. 다른 제품의 브랜드를 복사하거나 고객 증명을 조작하지 마십시오. 다른 도구가 디자인을 일관되게 실행할 수 있도록 근거를 포함합니다.
프레임워크, 선택적 디자인 스킬 또는 빌더를 선택할 때 디자인 도구 선택을 읽습니다. 호출하기 전에 사용 가능한 디자인 스킬을 검사합니다. 작업에 가장 작은 유용한 조합을 선택하고, 중복을 설명하며, 실제 호스트 호환성을 유지합니다. 명명된 스킬이 설치된 것처럼 가장하지 마십시오. 선택적 외부 스킬은 아트 디렉션이나 리뷰를 개선할 수 있지만, 이 워크플로는 그것들 없이도 여전히 작동합니다. 브리프에 이름이 나타난다고 해서 타사 패키지를 다운로드, 설치 또는 실행하지 마십시오. 선택적 스킬이 PRODUCT.md 또는 DESIGN.md와 같은 파일을 생성하는 경우, 승인된 참조 하에 파생된 도구 출력물 또는 작업 디자인 노트로 명시적으로 매핑합니다. 경쟁하는 제품/마케팅 권위를 조용히 도입하지 마십시오. 런처, 이니셜라이저, 후크 또는 네트워크 지원 헬퍼를 실행하기 전에 현재 진입점과 호환성을 검사합니다. 디자인 스킬이 Markdown 전용이라고 가정하지 마십시오.
직접 구축하거나 동일한 브리프를 핸드오프하기
- 코딩 에이전트 경로: 기존 프로젝트 규칙에 따라 승인된 웹사이트 브리프를 구현합니다. 공유 기반, 대표 페이지 및 기능적 탐색을 구축한 다음 다른 페이지와 상태를 완료합니다. 제품 아이덴티티의 일부인 경우 기존 디자인 시스템을 사용합니다. 작업 기반 이유 없이 교체하지 마십시오.
- 외부 빌더 경로 (예: Lovable): 도구의 실제 지원되는 입력을 사용하여 동일한 정리된 브리프와 필요한 에셋을 제공합니다. 제품 사실을 유지하고 실제 상호작용을 미리보기와 구분하는 범위 제한 지침을 제공합니다. 도구는 이름만 언급되었다고 해서 로컬 파일을 읽을 수 없습니다. 특정 가져오기/내보내기, 프레임워크 또는 동기화 동작을 약속하기 전에 현재 문서를 확인합니다. 병합하기 전에 수신된 코드와 통합 요구 사항을 검사합니다. 애플리케이션을 덮어쓰거나 백엔드를 가정으로 이동하지 마십시오.
어느 경로든 실제 생성된 결과를 검토하고 제한된 패스에서 관찰된 문제를 수정합니다. 도구의 답변을 미리 작성하거나 완료 메시지에서 성공을 주장하지 마십시오. 브리프를 승인한다고 해서 선택한 워크플로 외부에서 게시, 지출, 서비스 프로비저닝 또는 종속성 설치를 의미하지 않습니다. 작업에 의해 이미 승인된 일상적인 되돌릴 수 있는 편집은 반복적인 승인이 필요하지 않습니다.
동작 및 검색 가능성 확인하기
구현 및 최종 검토를 위해 수용 가이드를 사용합니다. 실제 경로 및 중요 작업, 관련 아랍어/라틴어 방향, 모바일/데스크톱 레이아웃, 키보드 사용, 의미 있는 로딩/오류/성공 상태 및 프로덕션 경계 메타데이터를 테스트합니다. 프론트엔드 데모와 실제 저장된 제출을 구분합니다. 실제 등록을 주장하기 전에 실제 레코드를 확인하고, 인덱싱 제어와 별도로 개인 데이터를 보호합니다.
보이는 페이지와 현재 검색 적격성에 적합한 구조화된 데이터를 선택합니다. 스키마를 채우기 위해 리뷰, 가격, 조직, 가용성 또는 평점을 조작하지 마십시오. 구문 및 적용 가능한 검색 요구 사항을 확인합니다. 유효한 JSON-LD가 풍부한 결과 또는 순위를 보장하지 않습니다. llms.txt, 프레임워크 선택 또는 자동화된 SEO 점수를 가시성 보장으로 취급하지 마십시오.
실제로 실행된 검사, 환경/버전, 관찰된 실패 및 테스트되지 않은 영역을 보고합니다. 스크린샷은 해당 뷰포트에서의 외관을 증명할 뿐, 기능적 저장, 프로덕션 인덱싱 또는 현장 성능을 증명하지 않습니다.
필수 최종 검토
브리프, 핸드오프 또는 웹사이트가 완료되었다고 주장하기 전에 요청된 모드에 대해 최종 검토를 수행합니다. 실제 방문자 경험 또는 이전 가능한 브리프를 승인된 범위 및 참조 방향과 비교합니다. 발견 사항을 수정하고 영향을 받은 출력을 다시 확인하며, 간결한 증거를 기록하고 누락된 검사를 공개합니다. 파일 존재, 생성된 스크린샷 및 빌드 성공만으로는 유용한 웹사이트가 확립되지 않습니다.
제품과 웹사이트의 일관성 유지하기
작업에 지속적인 유지보수가 포함된 경우, 영문 AGENTS 스니펫 또는 아랍어 스니펫을 프로젝트의 실제 경로에 맞게 조정합니다. 승인된 제품 변경의 경우 영향 맵을 검사하고 권한 있는 리포지토리 작업 내에서 영향을 받는 웹사이트 콘텐츠, 탐색, 메타데이터, 구조화된 데이터 및 테스트를 업데이트합니다. 계획된 기능과 제공된 기능을 정확하게 표시합니다. 구현된 기능이 모든 방문자에게 자동으로 릴리스되지는 않습니다.
제품 사실, 상업적 조건 또는 외부 종속성이 해결되지 않은 경우, 조용히 조작하지 말고 결정 사항을 표시합니다. 웹사이트가 다른 곳에 있는 경우, 변경되었다고 주장하지 말고 필요한 정확한 후속 조치를 식별합니다. 리포지토리 편집을 배포 및 공개 게시와 구분하여 유지합니다.