프론트엔드 앱 빌더

프론트엔드 앱 빌더은(는) 무엇을 하나요?

이 스킬을 사용하여 세련된 프론트엔드 앱, 대시보드, 게임, 크리에이티브 웹사이트, 히어로 섹션, 리디자인 및 기타 시각 중심 UI를 만드세요. 먼저 시니어 프론트엔드 디자이너로서 행동한 다음, 승인된 디자인 스펙을 구현하는 엔지니어로서 행동하세요.

핵심 기준

이 스킬의 두 가지 우선순위는 다른 모든 것보다 우선합니다:

1. 먼저 충분히 멋진 이미지 생성 디자인을 만드세요: 깔끔하고, 통풍이 잘 되며, 독특하고, 완전하며, 읽기 쉽고, 필요할 때 섹션별로 구체적이며, 기본적으로 반복적이지 않아야 합니다.
2. 승인된 디자인과 브라우저 구현이 10/10으로 일치할 때까지 멈추지 마세요. 시각적, 상호작용, 반응형, 에셋 및 타이포그래피 불일치를 view_image 비교가 에이전시 승인을 통과할 수 있을 때까지 계속 수정하세요.

엄격한 규칙

1. 사용자가 명시적으로 거부하거나 기존 디자인 시스템 내의 작은 UI 수정 작업이 아닌 이상, 시각적 컨셉을 위해 이미지 생성을 사용하세요.
2. 코딩하기 전에 요청된 전체 표면을 디자인하세요. 전체 페이지, 앱, 대시보드, 게임 또는 제품 인터페이스의 경우 헤더 또는 히어로 컨셉만으로는 충분하지 않습니다. 여러 섹션으로 구성된 웹사이트와 긴 랜딩 페이지의 경우, 하나의 긴 이미지(세부 정보 손실)보다는 조정된 섹션별 컨셉과 리듬을 위한 선택적 개요를 선호하세요. 앱, 대시보드, 게임 또는 컴팩트한 제품 표면의 경우 먼저 전체 기본 화면과 필요한 상태, 반응형 또는 에셋 컨셉을 생성하세요.
3. Codex 내에서 기본적으로 여러 섹션 웹사이트 컨셉팅은 주요 섹션당 하나의 신선하고, 크며, 읽기 쉬운 이미지 생성 스크린샷으로 진행합니다. 요청에 1-10개의 섹션이 있는 경우 대략 1-10개의 주요 섹션 이미지를 예상하세요. 텍스트, 버튼, 카드 구조, 타이포그래피, 간격 또는 색상을 추출하기에 너무 작은 경우 추가 섹션/세부 스크린샷을 생성하세요. 이전 전체 페이지 이미지를 주요 참조로 자르거나 확대/축소하지 말고, 동일한 디자인 시스템을 유지하는 새로운 독립형 섹션 또는 세부 이미지를 다시 생성하세요.
4. 계획 모드에서는 먼저 디자인을 생성한 다음, request_user_input을 사용하여 구현 세부 사항을 계획하기 전에 디자인 승인을 받으세요.
5. 일단 승인되면 컨셉은 프로덕션 디자인 스펙입니다. 구현 중 창의적인 자유는 허용되지 않습니다: 사용자가 승인하거나 구체적인 차단 요인이 없는 한 레이아웃, 보이는 텍스트, 계층 구조, 컨테이너 모델, 스타일링, 이미지, 밀도 또는 섹션을 재해석하지 마세요. 일반적인 디자인 휴리스틱은 승인된 컨셉을 절대 무시하지 않습니다.
6. 완료 기준은 에이전시 승인 수준의 충실한 구현입니다: 승인된 스펙에 10/10 충실도와 프로덕션 품질의 코드. 브라우저에서 렌더링된 UI가 디자인 리뷰 의견을 받을 경우 계속 수정하세요.
7. 코딩 전에 승인된 이미지에서 작은 디자인 시스템(토큰, 타이포그래피, 컴포넌트 패밀리, 변형, 간격, 아이콘 처리, 컨테이너 규칙)을 구축하세요. 콘텐츠 타이포그래피와 도구, 편집기, 대시보드를 위한 UI 크롬 타이포그래피를 모두 포함하세요. 해당 시스템에서 구현하여 반복되는 요소가 일관되도록 유지하세요.
8. 대시보드, 관리 도구, 편집기, 데이터 중심 도구 및 다중 패널 제품 표면과 같은 새로운 복잡한 앱 UI의 경우, 사용자가 다른 프레임워크를 지정하거나 기존 저장소가 이미 요구하거나 작업이 명시적으로 단일 파일/정적 결과물이 아닌 한 기본적으로 React + Vite를 사용하세요.
9. 기본적으로 주요 제목 위에 히어로 눈썹, 킥커, 사전 제목, 배지 또는 알약 레이블은 금지됩니다. 사용자가 명시적으로 요청하거나 승인된/참조 디자인에 이미 포함된 경우에만 사용하세요.
10. 먼저 브라우저 플러그인/내장 브라우저에서 확인하세요. 브라우저/IAB를 사용할 수 없거나 신뢰할 수 없는 경우에만 Playwright Chromium을 사용하고 폴백 이유를 명시하세요.
11. 최종 핸드오프는 승인된 컨셉과 최신 브라우저 스크린샷 모두에 view_image를 사용할 때까지 차단됩니다. 이 단계는 건너뛰거나 브라우저 검사만으로 대체할 수 없습니다. 쌍을 직접 판단하세요: 이것이 에이전시 승인 수준으로 충실하게 구현되었으며, 훌륭하고 고도로 숙련된 디자인 에이전시가 승인된 디자인의 이 정확한 구현을 승인할 것인가? 그렇지 않다면 계속 수정하세요.
12. 작업이나 사용자가 명시적으로 유지하도록 요구하지 않는 한 핸드오프 전에 임시 QA 아티팩트를 제거하세요.

다른 설치된 스킬과의 조정

이 스킬은 시각적 컨셉팅과 충실한 프론트엔드 구현을 담당합니다. 앱이 프론트엔드 디자인 외부의 기능을 필요로 하는 경우 다른 설치된 스킬을 사용하세요. 공급자 설정은 이미지 생성 컨셉팅, 정적 UI 작업 또는 공급자 지원 동작을 실행하지 않는 디자인 리뷰를 차단해서는 안 되지만, 공급자 지원 동작의 구현 및 검증은 해당 기능에 대해 설치된 스킬을 통해 조정되어야 합니다. 다른 설치된 스킬이 해당 설정을 다루는 경우 플레이스홀더 설정 지침을 피하세요.

AI/모델 생성 출력의 경우, 사용자가 다른 공급자를 지정하거나 OpenAI를 사용하지 말라고 명시적으로 말하지 않는 한 openai-developers:openai-platform-api-key를 사용 가능할 때 사용하세요. 해당 스킬을 사용할 수 있는 경우 가짜 키, 플레이스홀더 환경 변수 또는 수동 API 키 설정 지침 대신 항상 해당 자격 증명 흐름을 사용하세요.

이미지 생성 워크플로우

설치된 @imagegen 스킬을 읽고 따르세요. 웹사이트별 브리핑 지침은 references/imagegen-website-concepts.md를 사용하세요.

Image Gen을 호출하기 전에:

• 사용자의 구체적인 요구 사항을 브리핑에 복사하세요: 제품/페이지 목적, 대상, 필요한 섹션 또는 상태, 워크플로우, 제공된 텍스트, 내비게이션 레이블, CTA 레이블, 데이터 필드, 필요한 미디어, 반응형 요구 사항 및 구현 제약 조건.
• 요청된 전체 표면을 질문하세요: 전체 페이지, 앱 화면, 대시보드, 게임 화면 또는 조정된 섹션/상태 세트. 결과물이 히어로 이상인 경우 컨셉에 다운스트림 섹션, 상태 또는 반응형 연속이 포함되어야 한다고 말하세요. 섹션 수가 알려져 있거나 암시되는 경우 자체 컨셉 스크린샷이 필요한 각 섹션/상태의 이름을 지정하세요.
• 구현 제약 조건을 반복하세요: 코드 네이티브 앱 UI 텍스트 및 컨트롤, 완전히 렌더링된 제품/배경 에셋(적절한 경우 자체 텍스트 및 브랜딩 포함), 분리 가능한 에셋, 재사용 가능한 컴포넌트 패밀리, 의도적인 컨테이너 모델, 기본 카드 그리드 없음, 발명된 히어로 눈썹/킥커/배지/알약 없음, 실용적인 HTML/CSS/컴포넌트 구현.
• 사용자 콘텐츠, 스크린샷 또는 기존 앱의 정보 아키텍처를 유지하세요. Image Gen이 관련 없는 섹션, 가짜 메트릭, 새로운 제품 주장, 추가 대시보드, 새로운 내비게이션 또는 다른 제품 스토리를 발명하도록 두지 마세요.
• 여러 섹션으로 구성된 웹사이트나 긴 랜딩 페이지의 경우 기본적으로 주요 섹션당 하나의 조정된 컨셉 이미지를 생성하세요. 구조와 리듬을 위해서만 선택적 개요를 사용하세요. 텍스트, 버튼 세부 정보, 카드 구조, 간격 또는 타이포그래피를 분석하기 어렵게 만드는 하나의 거대한 압축 보드에 절대 의존하지 마세요.
• 조밀한 앱, 대시보드, 편집기, 제품 표면 및 복잡한 섹션의 경우 단일 전체 화면 이미지에서 읽을 수 없게 될 영역(테이블, 사이드바, 인스펙터, 모달, 툴바, 차트, 양식, 카드, 가격 책정 블록, 평가, 미디어 모듈)에 대해 별도의 상태 또는 세부 컨셉을 생성하세요.
• 컨셉 스크린샷이 구현하기에 너무 작거나, 흐릿하거나, 잘렸거나, 혼잡하거나, 모호한 경우 코딩 전에 새로운 독립형 섹션/상태/세부 스크린샷을 생성하세요. 동일한 팔레트, 타이포그래피 분위기, 컴포넌트 패밀리, 에셋 처리, 밀도 및 섹션 순서를 유지하세요. 이전 이미지의 작은 부분을 진리의 원천으로 자르거나, 슬라이스하거나, 확대/축소하거나, 재사용하지 마세요.
• 게임의 경우 컨셉 외에도 전용 Image Gen 에셋 패스를 계획하세요: 투명한 캐릭터/상태 스프라이트 또는 스프라이트 시트, 지형/플랫폼 타일, 수집품, 장애물, 목표/체크포인트 오브젝트, 소품 및 환경에 깊이가 있는 경우 2-3개의 패럴랙스/배경 레이어. HUD 텍스트, 점수, 컨트롤, 물리 및 충돌은 코드 네이티브로 유지됩니다.

전체 표면 요청에 대해 헤더 전용이거나, 지저분하거나, 일반적이거나, 반복적이거나, 불완전하게 지정되었거나, 읽을 수 없거나, 과도하게 장식되었거나, 명시적으로 요청되지 않았거나 참조에 없는 히어로 눈썹/킥커/배지/알약이 포함된 스펙을 벗어나거나, 충실하게 구현하기 비현실적인 컨셉은 거부하거나 반복하세요.

디자인 품질 기준

컨셉은 시니어 제품 디자이너의 전문적인 제품 목업처럼 보여야 합니다:

• 하나의 명확한 창의적 아이디어 또는 시각적 관점.
• 명확한 제공, 제품 신호 및 기본 작업이 있는 강력한 첫 번째 뷰포트.
• 전체 페이지 리듬: 섹션, 상태, 전환 및 모바일 뷰가 반복적인 카드 스택이나 반복되는 섹션 공식 없이 하나의 시스템으로 설계된 느낌.
• 섹션 간 응집력 있는 흐름: 공유된 간격, 팔레트, 타이포그래피 리듬, 미디어 처리 및 미묘한 전환으로 섹션을 연결하되, 새로운 주요 UI 컴포넌트를 발명하지는 마세요.
• 뛰어난 타이포그래피: 명확한 계층 구조, 스케일, 두께, 줄 높이, 레이블 처리 및 브라우저 기본 크기로 폴백되지 않는 컨트롤/크롬 텍스트.
• 의도적인 여백과 밀도; 명시적으로 요청되거나 승인된 디자인에 없는 한 필러 카드, 히어로 눈썹/킥커 레이블, 알약, 배지, 가짜 메트릭 또는 아이콘 행 없음.
• 기본적으로 더 단순하게: 페이지를 일러스트레이션, 아이콘그래피, 장식용 위젯 또는 복잡한 UI 크롬으로 채우는 대신 더 적고 더 강력한 시각적 요소를 사용하세요.
• 일관된 시각적 시스템: 팔레트, 간격, 반경, 테두리, 그림자, 그라디언트, 아이콘 스타일, 이미지 및 컴포넌트 지오메트리.
• 아이콘이 있는 경우 아이콘 충실도가 중요합니다. 일반적인 근처 아이콘으로 교체하는 대신 승인된 디자인의 아이콘 메타포, 획 두께, 채우기 스타일, 모서리 모양, 크기, 색상, 정렬 및 간격을 일치시키세요.
• 색상 충실도는 필수입니다. 승인된 디자인의 실제 배경, 표면, 텍스트, 테두리, 그림자 및 엑센트 색상을 일치시키세요. 디자인이 흰색 배경을 사용하는 경우 크림색, 아이보리, 베이지, 웜 그레이 또는 부드러워진 오프-화이트 대체 색상 대신 흰색을 사용하세요.
• 히어로 미디어 처리는 승인된 디자인과 일치해야 합니다. 히어로 이미지에 컨셉에 컬러 오버레이나 틴트가 없는 경우 구현에 추가하지 마세요. 가장자리 페이드, 마스크 또는 배경 그라디언트를 이미지 가장자리를 페이지에 혼합하는 데만 사용하고, 컬러 오버레이로 이미지를 세탁하지 마세요.
• 로고, 브랜드 마크, 히어로 이미지, 제품 렌더링, 배경 장면, 일러스트레이션, 텍스처, 포스터, 아바타, 빈 상태 및 게임 스프라이트/타일/배경 레이어에 대한 고품질 생성 에셋. 제품/배경 에셋은 일관된 브랜딩과 에셋에 속하는 경우 이미지 내 텍스트로 완전히 렌더링되어야 합니다.
• 계층 구조를 명확히 하거나, 상태를 나타내거나, 제품을 실물처럼 느끼게 하는 목적 있는 모션.
• 사용자가 정확한 텍스트를 제공하지 않은 경우 구체적이고 일반적이지 않은 텍스트.

기본적으로 깔끔하고, 통풍이 잘되며, 세련된 7/10 창의성: 디자인된 느낌이 들도록 충분히 독특하고, 구축할 수 있도록 충분히 절제되며, 반복적이지 않습니다. "깔끔함"을 편집되고 읽기 쉬운 것으로 해석하고, 비어 있거나 멸균된 것으로 해석하지 마세요.

시각적 방향 기본값

사용자가 더 강력한 아트 디렉션을 제공하지 않은 경우 이 기본값을 사용하세요. 모든 앱을 마케팅 사이트 스타일로 강제하는 대신 제품 유형에 맞게 조정하세요.

• 기준: 대략 7/10 창의성, 낮음-중간 밀도, 넉넉한 간격, 높은 구현 명확성, 높은 타이포그래피 규율, 도메인이 실제 시각적 요소의 이점을 얻을 때 이미지 중심의 순간.
• 컨셉을 생성하기 전에 일관된 시각적 방향을 선택하세요: 하나의 테마 패러다임, 배경 특성, 타이포그래피 특성, 히어로 또는 기본 화면 아키텍처, 섹션/앱 리듬, 2-4개의 시그니처 컴포넌트 모티프 및 1-2개의 모션 큐. 디자인이 일반적인 템플릿처럼 느껴지지 않고 의도적으로 느껴지도록 조합에 전념하세요.
• 히어로 또는 첫 번째 뷰포트: 하나의 명백한 초점, 짧고 읽기 쉬운 헤드라인 또는 기본 작업, 절제된 지원 텍스트, 보이는 기본 작업 및 작은 노트북에서도 작동할 수 있는 충분한 네거티브 공간을 유지하세요. 통계, 칩, 배지, 가짜 컨트롤 또는 경쟁하는 미니 패널로 오프닝 뷰를 혼잡하게 만들지 마세요.
• 헤더 단순성: 기본적으로 깔끔한 브랜드 마크, 필수 내비게이션 및 하나의 기본 작업 또는 컨트롤. 사용자가 명시적으로 요청하거나 제품 워크플로우가 요구하지 않는 한 헤더에 아이콘이 많은 내비게이션, 추가 버튼, 검색 표시줄, 상태 위젯, 분할 컨트롤, 장식용 일러스트레이션 또는 조밀한 제품 크롬을 피하세요.
• 시각적 경제: 많은 작은 장식용 시각적 요소보다는 하나 또는 두 개의 고품질 이미지 또는 일러스트레이션 순간을 선호하세요. 아이콘그래피는 내비게이션, 컨트롤 또는 제품 의미를 명확히 하는 경우에만 사용하세요.
• 컨테이너 규율: 컨셉이나 제품 유형이 실제로 필요하지 않은 한 중첩된 카드, 모든 섹션 주위의 거대한 둥근 래퍼, 기본 벤토/카드 그리드 및 과도하게 프레임된 대시보드를 피하세요. 오픈 레이아웃, 밴드, 레일, 목록, 테이블, 캔버스 또는 하나의 의도적인 프레이밍 움직임을 선호하세요.
• 섹션 리듬: 긴 페이지는 하나의 일관된 브랜드 시스템을 유지하면서 밀도, 이미지 대 텍스트 비율, 정렬, 스케일, 여백 및 시각적 템포를 다양화해야 합니다. 전체 페이지를 통해 동일한 중앙 블록 또는 왼쪽 텍스트/오른쪽 카드 공식을 반복하지 마세요.
• 섹션 연속성: 여러 섹션 컨셉이 하나의 페이지가 되어야 하는 경우 기존 디자인 시스템의 연결 조직(거터, 밴드, 정렬, 반복되는 타이포그래피, 반복되는 미디어 프레임, 색상 리듬 및 작은 전환 간격 이동)을 사용하세요. 사용자가 요청하거나 승인된 컨셉이 보여주지 않는 한 새로운 주요 캐러셀, 아코디언, 가격 책정 카드, 대시보드, 양식, 내비게이션 시스템, 기능 그리드 또는 기타 컴포넌트 패밀리를 발명하지 마세요.
• 미디어 프레이밍: 생성된 이미지는 일반적으로 안정적인 종횡비, 일관된 자르기 로직, 반경, 그림자 및 간격을 갖춘 명확하고 구현하기 쉬운 프레임에 위치해야 합니다. 사용자가 명시적으로 해당 방향을 요청하지 않는 한 무작위 이미지 크기나 콜라주 혼란을 피하세요.
• UI 제약: 작은 레이블, 유틸리티 알약, 유사 시스템 마커, 가짜 메트릭 및 장식용 대시보드 전문 용어는 제품을 명확히 하는 경우에만 허용됩니다. 시각적 필러에 불과한 경우 승인 전에 제거하세요.

컨셉 리뷰 모드

사용자가 먼저 컨셉을 생성하거나, 옵션을 검토하거나, 승인을 기다리도록 요청한 경우에만 사용하세요.

• 컨셉을 생성하고 보여주세요.
• 사용자가 승인할 때까지 반복하세요.
• 사용자가 아직 검토 중인 동안 구현하지 마세요.
• 일단 승인되면 컨셉을 활성 스펙으로 취급하세요.

…

[번역을 위해 잘림]