YLynnLee/reference-to-style

참조를 스타일로

참조를 전체 사이트의 스타일로 변환하고, 시각적 보드(board.html)에 표시하며 측정된 스타일 가이드(style.md)로 뒷받침합니다. 룩은 참조에서, 콘텐츠는 주제에서 비롯됩니다. 스타일을 정의한다고 해서 앱이나 사이트가 변경되지는 않습니다. 적용하는 것은 변경되지만, 사용자가 저장된 스타일의 이름을 지정할 때만 그렇습니다(저장된 스타일 적용하기 참조).

스타일을 페이지 변경 전에 한 번 정렬하세요. 가이드가 진실의 원천입니다: 모든 시각 요소를 가이드로부터 구축하고, 모든 수정 사항을 먼저 가이드에 반영하여, 보드에서 본 내용과 가이드로 구축된 내용이 어긋나지 않도록 하십시오.

눈대중으로 하지 말고 측정하세요. 시각은 참조가 무엇을 하는지 보는 데는 능숙하지만 정확한 색상, 크기 및 간격에는 약합니다. 참조가 보여주는 모든 값은 scripts/measure.py에서 비롯됩니다(그 외의 값은 측정된 값에서 파생되거나 선택된 값이며, 그렇게 명시합니다). 모든 보드 샘플은 scripts/verify.py에 의해 동일한 방식으로 렌더링되고 측정되어 일치할 때까지 반복됩니다. 보드는 시각적인 상태를 유지하고, 숫자는 가이드와 보고서에 있습니다.

조용히 시작하고, 그 다음 조정하세요. 참조는 완전히 집중된 스타일이며, 모든 특성을 모든 요소에 퍼뜨리면 과할 수 있습니다. 따라서 첫 번째 패스에서는 각각의 독특한 특성이 가장 효과적인 곳에만 측정된 값으로 사용되며, 사용자는 검토 시 단일 특성을 높이거나 낮춥니다. 강도 변경은 특성이 나타나는 위치에 영향을 미치며, 측정된 값 자체는 변경되지 않습니다.

사용하지 말아야 할 경우

• 사용자가 자신의 Figma 프레임과 정확히 일치하기를 원하는 경우. 프레임을 구축하십시오.
• 프로젝트에 이미 design/styles/에 저장된 스타일이 있는 경우. 대신 적용하십시오(저장된 스타일 적용하기 참조).

필요 사항

1단계 전에 python3 <이 스킬>/scripts/doctor.py를 실행하십시오(Windows에서는 py -3을 python3 대신 사용). 모든 의존성을 확인하고 누락된 각 항목에 대한 정확한 설치 명령어를 출력합니다.

• 종료 코드 0: 준비 완료.
• 종료 코드 1: Python 패키지가 누락되었습니다. 사용자에게 출력된 명령어를 보여주고 기다리십시오; 이것들 없이는 측정할 수 없습니다.
• 종료 코드 2: 브라우저를 실행할 수 없습니다. 출력된 설치 명령어를 제안하십시오. 사용자가 설치할 수 없는 경우, 이미지 참조만 사용하여 진행하고(라이브 사이트의 스크린샷을 요청하십시오), check.py를 --unverified 플래그와 함께 실행하고, 검토 시 보드의 정확성이 입증되지 않았다고 말하십시오.
• Python 자체가 없는 경우(python3도, Windows에서 py -3도 찾을 수 없는 경우): doctor.py를 실행할 수 없습니다. 사용자에게 이 스킬에 python.org 또는 시스템 패키지 관리자의 Python 3.9 이상이 필요하다고 알리고 기다리십시오. 직접 Python을 설치하지 마십시오.

결정

실행에 필요한 모든 결정을 직접 내리고, 보드에서 멈추십시오. 보드는 사용자에게 전체 스타일을 한눈에 보여주므로, 사용자는 미리 질문 목록이 아닌 그곳에서 평가합니다.

• 묻지 말고 결정하십시오: 가져올 특성과 남길 특성, 각각의 초기 강도, 스타일 이름과 슬러그, 주제 목록, 참조가 일치할 때 방향, 그리고 기존 스타일과 충돌하지 않는 방법. 각 선택을 가이드에 기록하십시오(chosen: 출처 또는 Take/Leave 행). 나중에 변경할 수 있습니다.
• 계속 진행할 수 없는 경우에만 일찍 물으십시오: 참조가 로드되지 않거나 썸네일에 불과한 경우, 의존성이 누락된 경우, 또는 참조가 서로 반대 방향(예: 창백한 제도 용지와 어두운 청사진)을 가리켜 참조나 프로젝트 모두 해결하지 못하는 경우. 그런 다음 옵션, 당신의 선택을 먼저, 그리고 다른 것은 없이 짧은 질문 하나를 하십시오.
• 멈춤을 짧게 유지하십시오. 숫자는 가이드와 verify.md에 있으므로, 메시지에는 표나 측정값이 포함되지 않습니다. 이 블록으로 끝내고 기다리십시오:

입력 필요: 변경할 사항이 있나요?

보드: <board.html 경로> · 정확도: 35/35 측정 일치 (verify.md) 결정된 사항: 이름과 슬러그; 가져온 주요 특성과 남긴 특성; 선택이 있었다면 방향 조용히 시작됨: 각 조용한 특성과 그것이 나타나는 위치를 간략히

1. 특성 강도 조절: 이름을 말하세요(예: "그리드를 더" 또는 "빨간색을 덜")
2. 다른 것 변경: 무엇인지 말하세요
3. 변경 없음: 현재 상태로 스타일 저장

사용 방법: 스타일이 design/styles/<slug>/에 저장되었습니다. 사용하려면 이름을 지정하세요(예: "<slug>를 전체에 적용"). 그 전까지 앱이나 사이트는 변경되지 않습니다.

질문 도구를 사용하는 경우, "입력 필요"로 시작하여 그곳에도 질문을 하십시오. 승인이 필요한 것은 없습니다: 저장된 모든 스타일은 사용할 준비가 되어 있으며, 사용자는 나중에 이름으로 하나를 선택합니다.

단계

1. 참조를 보고 측정하십시오. 각 참조를 여십시오: 라이브 사이트를 스크롤하고 움직임을 관찰하십시오. 로드되지 않거나 썸네일에 불과한 경우 스크린샷을 요청하십시오. 제목이나 URL만으로 작업하지 마십시오. 각 참조의 스크린샷을 references/에 저장하고, 관찰한 움직임을 기록하십시오. PNG를 선호하십시오: JPEG는 얇은 색상 선을 회색으로 만듭니다.

   그런 다음 references/measure.md를 읽고, 가져올 수 있는 특성당 하나의 크롭(제목, 버튼, 규칙, 배경 패치)을 한 번에 모두 측정하십시오.

2. 프로젝트를 읽으십시오. 스타일을 선택하기 전에 하여 방향이 이미 적합하도록 하십시오:

   • design/styles/index.md가 존재하면 읽어서 새 스타일이 이전 스타일과 충돌하지 않도록 하고, 어떤 슬러그가 사용 중인지 기록하십시오.
   • 실제 객체, 재료, 프로세스, 측정값 또는 장소 4~8개를 각각 출처와 함께 나열하십시오. 인덱스의 공유 주제 목록에서 시작하십시오. 주제의 상징이 아닌 실제 사물을 사용하고, 출처를 알 수 없는 것은 제외하십시오.
   • 사이트의 토큰(CSS 사용자 정의 속성, 프레임워크 클래스 또는 Webflow 변수)과 사용 중인 모든 컴포넌트 유형(예: 제목, 버튼, 카드, 그림, 목록 행, 탐색 및 양식)과 각각의 위치를 찾으십시오. 가이드는 그들의 룩을 재스타일링합니다. 콘텐츠와 구조는 그대로 유지됩니다.

3. 스타일을 읽으십시오. 여러 참조가 있는 경우, 그들이 공유하는 것을 읽으십시오. 각 특성을 그것을 보여주는 크롭에 연결하십시오. 그 증거는 채팅이 아닌 가이드에 들어갑니다.

   가져오기: 스타일	남기기: 하나의 참조에 속하는 것
   팔레트, 타입 캐릭터, 선과 모양, 표면, 밀도, 리듬, 위계, 움직임	에셋, 로고, 사본, 정확한 페이지 레이아웃, 일회성 세부 사항

   각 가져오기 특성에 가이드의 강도 열에 기록된 강도를 부여하십시오:

   강도	특성이 나타나는 위치	사용처
   quiet	가장 효과적인 1~3곳만, 이름 지정	모든 독특한 특성(강조 색상, 디스플레이 서체, 텍스처, 모티프)의 시작
   full	적합한 모든 컴포넌트	모든 페이지에 필요한 것의 시작: 페이지 표면, 텍스트 색상, 분위기를 설정하지 않는 특성(예: 사각형 모서리)
   strong	적합한 모든 컴포넌트, 더 많은 공간(더 넓은 영역, 기능적 사용)	사용자가 더 많은 것을 요청할 때만

   조용한 특성을 낮춘다는 것은 그것을 남기기 열로 옮기는 것을 의미합니다.

   스타일을 직접 결정하십시오(결정 참조): 특성, 슬러그가 사용 중이지 않은 이름(사용자가 해당 스타일을 수정하도록 요청하지 않은 경우), 그리고 기존 스타일과 충돌하지 않는 방향을 선택하십시오. 참조가 해결할 수 없는 방식으로 충돌하지 않는 한 여기서 멈추지 마십시오.

4. 가이드를 작성하십시오. 각 실행은 고유한 폴더를 얻으므로, 실행끼리 덮어쓰지 않습니다:

   design/styles/
     index.md              모든 스타일, 적용 위치, 공유 주제 목록
     <slug>/
       style.md            가이드
       board.html          시각적 검증
       measured.json       measure.py가 참조에서 읽은 내용
       verify.md           보드가 참조와 얼마나 일치하는지
       references/         참조 스크린샷
   

   이 스킬의 assets/style.md를 style.md로 복사하고 작성하십시오. 모든 제목을 순서대로 유지하고, 빈 섹션에는 None을 작성하여 모든 가이드가 동일하게 읽히도록 하십시오. 값을 정확히(hex, px, 글꼴 이름) 작성하여, 다른 세션이 참조 없이도 스타일을 재구축할 수 있도록 하십시오.

   • 증거: 측정된 크롭당 하나의 행, measure.py 출력에서 숫자를 복사.
   • 토큰: 모든 토큰은 출처를 명시합니다: crop:<이름>(값이 거기서 측정됨; 색상은 해당 크롭의 판독값 또는 likely 값과 일치해야 함), derived: <규칙>(측정된 토큰에서 구축됨, 예: 호버 색상 또는 4.5:1로 어두워진 텍스트 색상), 또는 chosen: <이유>(참조에 없는 것, 예: 상태 및 본문 서체). 크기 또한 측정값에서 비롯됩니다: 글꼴 크기는 대문자 높이(대문자 타입 크롭의 잉크 높이) ÷ 글꼴의 대문자 높이 비율입니다. 모든 규칙은 실제 주제 출처의 이름을 지정하고 남기기 열의 것은 사용하지 않습니다. 모든 토큰 앞에 --<slug>-를 접두사로 붙여, 스타일이 충돌 없이 페이지를 공유할 수 있도록 하십시오.
   • 컴포넌트: 각 컴포넌트 유형에 속성 테이블(속성, 토큰 또는 정확한 값, 모든 상태)을 제공하여, 추측 없이 재구축할 수 있도록 하십시오. 가능한 곳에 토큰을 사용하십시오. 각 특성의 강도를 따르십시오: 조용한 특성의 명명된 장소 외부의 컴포넌트는 대신 스타일의 더 평범한 토큰(예: 본문 서체 또는 잉크 색상)을 사용합니다.
   • 매핑: 2단계의 모든 기존 토큰, 클래스 또는 변수, 그리고 모든 컴포넌트 유형을 새로운 토큰 또는 컴포넌트 사양에 매핑하십시오. 이것이 스타일 적용이 작동하는 기준이므로, 프로젝트에서 매핑되지 않은 것을 남기지 마십시오: 대체할 것이 없는 경우 Keep 또는 Drop과 이유를 작성하십시오.

5. 스타일을 보여주고 반복하십시오. references/board.md를 읽고, assets/board.html을 파일 복사(다시 입력하지 않고)로 복사하고 가이드만으로 플레이스홀더를 채우십시오: 상태가 있는 모든 컴포넌트 유형, 스타일 섹션, 하나의 매우 작은 실제 섹션, 그리고 움직임. 각각 data-crop으로 태그를 지정하여 크롭이 비롯된 곳을 표시하십시오. 그런 다음 참조에 대해 검증하고 가이드에 대해 확인한 후, 모든 실패를 직접 수정하되 최대 3라운드로 제한하십시오:

   python3 <이 스킬>/scripts/verify.py design/styles/<slug>
   python3 <이 스킬>/scripts/check.py design/styles/<slug>
   

   사용자의 브라우저에서 보드를 열고 board.html과 verify.md의 경로를 제공하십시오.

   그런 다음 스타일과 새로운 주제 항목을 design/styles/index.md에 추가하고, 필요한 경우 assets/index.md에서 생성하십시오. design/styles/는 이 스킬이 프로젝트에서 변경하는 유일한 위치입니다.

   검토를 위해 멈추십시오: 결정 섹션의 블록과 함께: 변경할 사항이 있나요? 정확도는 verify.md로 표시되며, 3라운드 후에도 실패하는 모든 항목과 함께, 사용자가 방향과 강도만 판단하도록 합니다. 각 피드백 라운드에 대해 가이드를 업데이트하고, 보드의 영향을 받는 부분만 재구축한 다음, verify와 check를 한 번 실행하고, 사용자의 변경 사항을 취소하지 않고 최대 3라운드 동안 보고된 내용을 수정하십시오. 이름이나 주제 목록이 변경된 경우 인덱스를 업데이트하고, 보드를 다시 열고 다시 물으십시오. 모든 라운드는 측정된 상태로 종료되므로, 저장된 스타일은 사용자가 멈출 때 항상 정확합니다. 특성을 높이거나 낮추려면 강도(뒤에 (user feedback)를 작성)와 도달하는 컴포넌트를 변경하십시오. 값은 측정된 상태로 유지되므로, 이 작업에는 data-accept가 필요하지 않습니다. 사용자가 참조 자체보다 더 대담한 특성(더 크고, 더 무겁고, 더 채도 높은)을 원하는 경우, 값이 변경됩니다: 아래와 같이 처리하십시오. 사용자가 요청한 변경은 참조에서 멀어지더라도 의도적입니다: 토큰에 chosen: user feedback을 부여하고 해당 샘플을 동일한 이유로 data-accept로 표시하여 verify가 의도적인 것으로 보고하고 실패하지 않도록 하며, verify를 통과시키기 위해 이를 취소하지 마십시오. 사용자가 세부 사항이 아니라 방향 자체를 거부하는 경우, 토큰을 패치하지 마십시오: 3단계로 돌아가서 참조를 다시 읽고, 새로운 방향을 선택하고, 재구축한 후 검토를 위해 다시 멈추십시오.

   사용자가 변경할 사항이 없거나 다른 작업으로 넘어갈 때 실행이 종료됩니다. 승인 단계는 없습니다. 나중에 스타일을 사용하려면 사용자가 이름을 지정하고, 스킬이 적용합니다(저장된 스타일 적용하기 참조).

저장된 스타일 적용하기

사용자가 저장된 스타일을 사용하도록 지정하는 경우(예: "<slug>를 전체에 적용" 또는 "가격 페이지에 <slug> 사용"), references/rollout.md를 읽고 따르십시오. 가이드만으로 작동합니다: 프로젝트에 가이드의 토큰을 추가한 다음, 매핑을 행별로 작업하며 각 컴포넌트의 속성 테이블에서 재스타일링하고 콘텐츠나 구조는 변경하지 않습니다. 1~5단계를 건너뛰십시오: 스타일이 이미 정의되어 있습니다.

예제

examples/drafting-sheet/style.md 및 verify.md를 읽으십시오. JSON 파일과 board.html은 생성된 출력이며, data-crop 태그를 보기 위해서만 열어 볼 가치가 있습니다. examples/drafting-sheet/는 완료된 실행입니다: 도면 시트 참조가 8개의 크롭, 가이드 및 36개의 측정값이 일치하는(하나는 의도적) 보드로 측정되었습니다.

참조: 기술 도면 및 청사진, 성장하는 바퀴에 관한 사이트.

• 가져오기: 얇고 정밀한 선 작업, 격자, 작은 기술 라벨, 조밀한 주석.
• 남기기: 각 도면의 제목 블록, 부품 및 시트 레이아웃.
• 주제: 5.5m 성장 바퀴, 실제 리그 치수, 엔지니어링 도면.
• 규칙: 청사진 치수선 + 실제 리그 치수 = 측정된 값으로 주석이 달린 그림.