Ixe1/ui-from-image

미션

제공된 참조 이미지를 시각적 진실의 원천으로 취급하세요.

정확성이 속도보다 중요합니다. '대충 비슷하다' 수준에서 멈추지 마세요. 작업은 페이지가 단순히 작동할 때 끝나는 것이 아니라, 렌더링 결과가 참조 이미지와 시각적으로 거의 일치하고 더 이상 명백한 불일치가 남아 있지 않을 때 끝납니다.

검증을 적게 하기보다는 더 많이 하는 방향으로 진행하세요. 텍스트가 잘못되었을 가능성, 컨트롤이 비좁은 상태, 간격이 불안정한 상태, 또는 하나의 뷰포트에 숨겨진 레이아웃 버그가 있을 실질적인 가능성이 있다면 계속 반복 작업하세요.

이 스킬의 모든 필수 확인 및 보고 단계가 완료되고, 명확히 명시된 사소한 불확실성 이상의 알려진 시각적 불일치가 남아 있지 않은 경우가 아니라면 결과를 '충분히 좋다', '출시 준비 완료' 등으로 설명하지 마세요.

기본 출력

리포지토리가 이미 다른 구조를 요구하지 않는 한, 다음을 사용하세요.

• index.html
• styles.css
• script.js

기존 프론트엔드/프레임워크를 적용하는 경우, 리포지토리의 파일 구조를 따르되 프레임워크가 허용하는 만큼 마크업, 스타일링, 동작을 깔끔하게 분리하세요.

작동 모드

• 독립형 작업의 경우, 환경에 사용자가 유지하려는 스타일링 시스템이 이미 포함되어 있지 않다면 기본적으로 일반 HTML/CSS/JS를 사용합니다.
• 리포지토리에 기존 Tailwind/DaisyUI 설정이 있으면 이를 재사용합니다.
• 리포지토리에 이미 다른 확립된 스타일링 시스템이 있다면, 사용자가 명시적으로 요청하지 않는 한 Tailwind/DaisyUI를 경쟁하는 두 번째 시스템으로 도입하지 마세요.
• Tailwind/DaisyUI를 이미 사용 가능하거나 명시적으로 요청한 경우, 이를 디자인 권위자보다는 구현 도구로 취급하세요. 스크린샷과 다를 때마다 기본값을 재정의하세요.
• 먼저 기본 스크린샷의 정확한 참조 치수에서 충실도를 달성하세요.
• 데스크톱 웹페이지 작업의 경우, 좁은 목업이나 POC 스크린샷을 최종 실제 페이지 데스크톱 너비로 취급하지 마세요. 참조 크기 단계 이후에는 레이아웃을 약 1900px 너비의 실제 데스크톱 뷰포트에 맞게 조정하는 것을 선호하며, 스크롤바와 일반적인 브라우저 크롬을 고려하여 1920px 대신 약 1900px을 허용하세요.
• 참조 크기 버전이 시각적으로 가까워진 후에야 태블릿/모바일 동작을 도출하세요.
• 사용자가 더 새롭거나 수정된 스크린샷을 제공하면, 최신 스크린샷이 진실의 원천이 됩니다.

고충실도 규칙

• 레이아웃, 간격, 타이포그래피, 줄 높이, 자간, 색상, 테두리, 테두리 불투명도, 그림자, 그라데이션, 테두리 반경, 이미지 크롭/종횡비 및 시각적 계층 구조를 최대한 가깝게 일치시키세요.
• 기본값이 충분히 가깝지 않은 경우 너비, 높이, 최대 너비, 패딩, 마진, 갭, 테두리 반경, 글꼴 크기, 줄 높이, 자간 및 그림자에 명시적인 값을 사용하세요.
• 텍스트 충실도를 콘텐츠 문제일 뿐만 아니라 레이아웃 문제로 취급하세요. 텍스트가 잘리거나, 비좁거나, 잘못 줄바꿈되거나, 주변 컨트롤의 정렬을 깨뜨리면 페이지가 완료된 것이 아닙니다.
• 모든 보이는 디테일을 필수 항목으로 취급하세요. 미세 디테일을 포함하여:
  • 작은 로고 및 버튼 아이콘
  • 검색 아이콘
  • 드롭다운 캐럿
  • 페이지네이션 셰브론
  • 활성 내비게이션 밑줄/글로우
  • 상태 표시 점
  • 글머리 기호 색상
  • 카드 아이콘
  • 별/즐겨찾기 아이콘
  • 구분선
  • 미묘한 모서리 반경 차이
  • 텍스트 불투명도 변화
• 컨트롤 내부의 작은 아이콘이나 로고가 누락되면 충실도 실패이며, 사소한 누락이 아닙니다.
• 반응형을 위해 필요하거나 참조가 진정으로 모호한 경우가 아니라면 UI를 재설계, 단순화, 장식 또는 '개선'하지 마세요.
• DaisyUI 타이포그래피, 버튼 스타일, 입력 스타일 또는 간격 스케일이 참조와 일치하지 않으면 묵묵히 의존하지 마세요.

기존 프론트엔드 적응 모드

기존 프론트엔드 또는 디자인 시스템 내에서 작업할 때:

• 새 구조를 만들기 전에 현재 코드베이스를 검사하세요.
• 기존 레이아웃 셸, 공유 컴포넌트, 유틸리티 패턴, 타이포그래피 토큰, 간격 스케일, 중단점, 아이콘 규칙 및 테마 변수를 참조를 충실히 표현할 수 있는 곳마다 재사용하세요.
• 처음부터 병렬 구현을 만드는 것보다는 인접한 기존 페이지나 섹션을 적용하는 것을 선호하세요.
• 사용자가 명시적으로 요청하지 않는 한 중복 컴포넌트, 충돌하는 디자인 토큰 또는 두 번째 스타일링 시스템을 도입하지 마세요.
• 스크린샷이 기존 디자인 시스템과 충돌하는 경우, 사용자가 스크린샷이 현재 디자인 언어를 재정의해야 한다고 명시적으로 말하지 않는 한 현재 토큰/컴포넌트와 최대한 일관성을 유지하면서 스크린샷의 페이지 수준 구성을 보존하세요.

참조 수집 및 중단점 처리

• 코딩하기 전에 각 참조 이미지의 정확한 치수를 기록하세요.
• 기본 충실도 단계에서는 가능할 때마다 CSS 픽셀 단위의 정확한 참조 뷰포트 크기로 페이지를 렌더링하세요.
• 데스크톱 참조 이미지가 현대 데스크톱 뷰포트보다 훨씬 좁다면, 해당 너비를 최종 실제 페이지 데스크톱 너비가 아닌 구성/스타일 참조로 취급하세요. 스크린샷의 구조, 계층 구조, 간격 의도 및 시각적 언어를 유지한 후, 약 1900px 뷰포트 너비에서 실제 데스크톱 구현을 확장하고 검증하세요.
• 데스크톱/태블릿/모바일에 대해 여러 참조 이미지가 제공되면 각각을 해당 중단점에 대한 권위 있는 소스로 취급하세요.
• 데스크톱 참조만 있는 경우, 새 섹션이나 상호 작용을 만들지 않고 계층 구조, 순서 및 시각적 균형을 유지하여 태블릿/모바일 레이아웃을 추론하세요.
• 텍스트가 읽기 쉬우면 구두점과 작은 도우미 레이블을 포함하여 정확하게 복제하세요.
• 텍스트가 불명확하면 가장 가까운 합리적인 근사치를 사용하고 불확실성을 보고하세요.
• 스크린샷이 전체 페이지가 아니라 페이지의 잘린 영역을 보여주는 경우, 먼저 보이는 영역을 일치시키세요.

뷰포트 정직성 및 스케일링 안전

• 브라우저 확대/축소, OS DPI 스케일링 및 장치 픽셀 비율을 구현이 견뎌야 하는 환경적 요소로 취급하고, 레이아웃을 왜곡하는 변명으로 사용하지 마세요.
• Playwright 또는 유사한 브라우저 자동화를 사용할 수 있는 경우, 명시적 뷰포트 크기에서 캡처된 자동화 제어 스크린샷을 비교를 위한 기본 충실도 참조로 취급하세요.
• OS DPI 스케일링, 브라우저 확대/축소, 창 크롬 또는 데스크톱 컴포지터 동작이 사람이 화면에서 보는 것에 영향을 미칠 수 있는 경우, 헤드 브라우저 창을 픽셀 충실도의 진실의 원천으로 취급하지 마세요.
• 특히 Windows에서는 기본이 아닌 데스크톱 스케일링이나 브라우저 확대/축소로 인해 기본 페이지 레이아웃이 CSS 픽셀에서 올바르더라도 헤드 브라우저가 시각적으로 오해를 불러일으킬 수 있다고 가정하세요.
• Playwright가 chrome 또는 msedge 브라우저/채널을 열었다고 보고하더라도 여전히 Playwright 기반 확인입니다. 브라우저 자동화가 실제로 중단되지 않는 한 이를 'Playwright에서 전환'이라고 설명하지 마세요.
• CSS zoom, 루트 수준 transform: scale(...), 합성 래퍼 스케일링 또는 유사한 뷰포트 해킹을 사용하여 구현 스크린샷이 참조에 더 가깝게 보이도록 하지 마세요.
• 전체 페이지를 축소하거나 캔버스를 확대하여 너비, 비좁음 또는 접힘 위치 불일치를 '수정'하지 마세요.
• 실제 레이아웃 변경으로 스크린샷 불일치를 해결하세요:
  • 올바른 컨테이너 너비
  • 올바른 그리드 및 플렉스 크기
  • 올바른 갭 및 패딩
  • 올바른 글꼴 크기 및 줄 높이
  • 올바른 컨트롤 높이 및 고유 너비
  • 올바른 반응형 중단점
• 브라우저별 불일치가 나타나면 먼저 사용자 환경을 탓하기 전에 구현의 잘못된 레이아웃 가정, 오버플로 또는 스케일링 해킹을 의심하세요.
• 헤드 브라우저 창과 보정된 뷰포트에서 찍은 Playwright 스크린샷 사이에 불일치가 있는 경우, 충실도 작업을 위해 먼저 스크린샷을 신뢰하고 추가 스크린샷 패스로 구현을 조사한 후 차이를 사용자 머신의 탓으로 돌리세요.
• 충실도 상태를 보고할 때는 다음을 구분하세요:
  • 사용자/브라우저 확대/축소 기본 설정으로 인한 예상되는 리플로우 차이
  • 가로 오버플로, 잘못된 너비 계산, 잘못된 줄바꿈 또는 깨지기 쉬운 중단점 동작과 같은 실제 레이아웃 버그

사전 점검 목록

구현하기 전에 다음을 명시적으로 검사하고 목록화하세요:

1. 페이지 섹션 및 순서
2. 그리드/열 구조 및 대략적인 너비 비율
3. 주요 컨테이너 및 카드 경계
4. 모든 텍스트 블록 및 레이블
5. 모든 보이는 컨트롤 및 상호 작용 상태
6. 모든 아이콘, 로고, 배지, 칩, 상태 표시 점, 구분선 및 장식 표시
7. 모든 이미지 에셋 및 배경 그래픽
8. 타이포그래피 그룹화(히어로 제목, 본문 복사, 필, 버튼, 표 헤더, 표 행, 사이드 카드, 알림 등)
9. 기본, 보조, 음소거, 성공, 경고, 위험 및 강조 색상
10. 예상되는 반응형 의도
11. 복사본 길이, 칩 수 또는 컨트롤 밀도로 인해 비좁아질 가능성이 있는 영역
12. 참조 중단점에서 한 줄로 유지되어야 하는 행 또는 패널

시각적으로 의미 있는 모든 요소에 대한 작동하는 멘탈 맵을 갖추기 전까지 코딩을 시작하지 마세요.

타이포그래피 감사

타이포그래피는 일급 충실도 목표입니다.

• 먼저 리포지토리에서 기존 글꼴 소스를 검사하세요:
  • 전역 CSS
  • Tailwind 설정
  • DaisyUI 테마 설정
  • 디자인 토큰
  • 기존 페이지 컴포넌트
  • 로컬 글꼴 파일
• 기존 프로젝트 글꼴이 참조와 일치하면 사용하세요.
• 참조에 사용자 정의 또는 기본이 아닌 글꼴이 사용된 것으로 보이지만 정확한 글꼴을 사용할 수 없는 경우, 사용 가능한 가장 가까운 옵션을 선택하고 해당 제한 사항을 명시적으로 보고하세요.
• 확인하지 않고 일반 DaisyUI/본문 타이포그래피를 기본값으로 사용하지 마세요.
• 각 시각적 그룹에 대해 타이포그래피를 명시적으로 설정하세요:
  • 로고 텍스트
  • 내비게이션 링크
  • 필/배지
  • 히어로 제목
  • 리드 단락
  • 통계 레이블
  • 통계 값
  • 도우미 텍스트
  • 필터 칩
  • 양식 레이블
  • 표 헤더
  • 표 행
  • 사이드바 제목
  • 알림/타임스탬프
  • 기본 및 보조 버튼
• 글꼴 패밀리뿐만 아니라 다음도 확인하세요:
  • 크기
  • 두께
  • 줄 높이
  • 자간
  • 대소문자
  • 색상/불투명도
• 참조 너비에서 텍스트 줄바꿈 및 줄 바꿈을 검증하세요. 제목이나 단락이 스크린샷과 다르게 줄바꿈되면 수정하세요.
• 컨트롤 및 밀집된 UI에 대한 텍스트 무결성을 검증하세요:
  • 의도하지 않은 잘림 없음
  • 잘린 어센더/디센더 없음
  • 잘못된 줄 높이나 컨트롤 높이로 인한 수직 압축 없음
  • 레이블/도우미 텍스트 충돌 없음
  • 필드 오버플로우하는 플레이스홀더 텍스트 없음

아이콘 및 완전성 감사

페이지 완료를 선언하기 전에 참조의 모든 시각적으로 의미 있는 아이콘 또는 표시가 DOM에 표현되었는지 확인하세요.

여기에는 다음이 포함됩니다:

• 로고 마크
• 버튼 내부의 브랜드 아이콘
• 검색 아이콘
• 드롭다운 캐럿
• 통계 카드 아이콘
• 상태 표시기
• 지도/알림 글머리 기호
• 표 즐겨찾기 아이콘
• 페이지네이션 화살표
• 닫기/재설정/필터 아이콘
• 미묘한 인라인 기호

규칙:

• 작은 UI 아이콘은 에셋으로 간주되며 생략해서는 안 됩니다.
• 작은 UI 아이콘의 경우 기존 리포지토리 아이콘 또는 간단한 인라인 SVG를 선호하세요.
• 리포지토리가 이미 사용 중이거나 사용자가 명시적으로 요청하지 않는 한 새 아이콘 라이브러리를 추가하지 마세요.
• UI 컨트롤(예: Discord)에 사용되는 일반적인 브랜드 마크의 경우, 리포지토리에 이미 적절한 에셋이 없는 한 깔끔한 인라인 SVG 또는 기존 아이콘 컴포넌트를 사용하세요.

레이아웃 맞춤 및 비좁음 규칙

참조 중단점의 경우:

• 반응형 적응을 하기 전에 스크린샷의 구성을 재현하세요.
• 비좁음을 조기에 재설계, 삭제, 축소 또는 주요 그룹을 리플로우하여 해결하지 마세요.
• CSS로 전체 페이지를 스케일링하거나 브라우저 확대/축소 가정에 의존하여 비좁음을 해결하지 마세요.
• 먼저 충실도를 유지하는 옵션을 모두 소진하세요:
  • 참조 뷰포트 크기 일치
  • 컨테이너 너비 및 사이드 열 너비 수정
  • 측정된 값에 맞게 갭을 조이거나 느슨하게 함
  • 올바른 글꼴 크기 및 줄 높이 사용
  • 올바른 컨트롤 너비 및 최소 너비 사용
  • 모든 것을 균등하게 분배하는 대신 각 그리드 열에 대한 올바른 트랙 크기 조정 사용
  • 밀집된 컨트롤에 이웃 요소를 축소하기 전에 실제로 필요한 너비 제공
  • 스크린샷이 이미 줄바꿈을 암시하는 경우에만 줄바꿈 사용
  • 참조가 실제로 여러 행을 사용하는지 검사
• 다음 경우에만 참조 중단점에서 컨트롤을 추가 행으로 이동하세요:
  • 스크린샷이 명시적으로 여러 행을 보여주는 경우, 또는
  • 사용자가 업데이트된 구조를 보여주는 수정된 스크린샷을 제공하는 경우.
• 패스를 수행한 후에도 컨트롤이 여전히 비좁게 느껴지면 비율이 여전히 잘못된 것이라고 가정하고 계속 반복하세요. 비좁음을 '충분히 좋다'로 정규화하지 마세요.
• 더 좁은 중단점의 경우, 계층 구조와 시각적 균형을 유지하면서 깔끔하게 리플로우하세요.

색상, 표면 및 효과 감사

• 기본 표면, 보조 표면, 음소거된 표면, 테두리, 글로우, 그림자, 그라데이션 및 텍스트 불투명도를 최대한 가깝게 일치시키세요.
• 가능하면 참조에서 색상을 샘플링하거나 추정하고 새로운 값을 만들어내지 마세요.
• 다음에 주의하세요:
  • 배경 그라데이션
  • 미묘한 테두리 알파
  • 패널 투명도
  • 참조에 표시되는 호버/활성 강조
  • 주요 콘텐츠와 사이드바 카드 간의 대비 차이
  • 배지, 실시간 표시기, 버튼 및 하이라이트 전반의 강조 색상 일관성

에셋 처리 워크플로우

먼저 페이지에 필요한 모든 보이는 에셋을 목록화하세요:

• 로고
• 히어로 이미지
• 썸네일/카드
• 지도
• 아바타
• 아이콘
• 일러스트레이션
• 배경 그래픽
• 기타 비텍스트 시각 요소들

각 에셋에 대해 정확히 하나의 경로를 선택하세요.

1) 사용자가 에셋을 제공한 경우

• 사용하기 전에 시각적으로 검사하세요.
• 적절한 곳에 사용하세요.
• 참조 구성과 일치하도록 필요에 따라 자르기, 크기 조정, 패딩, 트리밍 또는 마스크하세요.
• 종횡비를 유지하고 절대 왜곡하지 마세요.
• 적절히 object-fit: cover 또는 contain을 사용하세요.
• 에셋의 해상도가 낮거나 불완전한 경우 최대한 가깝게 만들고 제한 사항을 기록하세요.

2) 에셋이 누락되었고 사용자가 생성을 요청하지 않은 경우

• 올바른 대략적인 치수, 종횡비, 테두리 반경, 배치 및 시각적 무게를 가진 명확히 레이블이 지정된 플레이스홀더를 사용하세요.
• 직접 임시 대용 에셋을 만들거나 합성하는 경우...