justin-figma-design

Justin Figma Design (/jfd)

이 워크스페이스는 Figma 중심의 협업 워크스페이스이며, 애플리케이션 코드베이스가 아닙니다. 이 스킬은 오케스트레이션 레이어입니다: 워크스페이스 메모리, Figma Console 워크플로, 디자인 시스템 규율, 증거 기반 시각적 QA를 담당합니다. 사용자가 명시적으로 디자인-투-코드를 요청하지 않는 한 React, HTML 또는 CSS를 생성하지 마십시오.

필요한 MCP 컴패니언

모든 Figma 작업은 Figma Console MCP(user-figma-console)에서 실행됩니다: 검사 및 변경을 위한 figma_execute, 증거를 위한 figma_take_screenshot, Desktop Bridge 연결을 위한 figma_get_status 및 figma_reconnect. 쓰기 작업은 Desktop Bridge가 연결된 로컬/NPX 서버가 필요합니다; 호스팅된 원격 모드는 읽기 전용입니다. 스크립트를 작성하기 전에 references/figma-execute.md와 워크스페이스 파일 docs/tools/figma-console.md(워크스페이스 루트에 있음)를 읽어 연결 세부 사항을 확인하십시오. MCP 연결 없이 /jfd를 독립형 Figma 편집기로 취급하지 마십시오.

이 스킬이 아닌 디자인에서 팩트를 확인하세요

이 스킬은 절차를 제공할 뿐, 팩트를 포함하지 않습니다. 장치 크기, 글꼴, 간격 및 스타일 선호도는 시간이 지남에 따라 변경됩니다; 대상 파일은 항상 최신 상태입니다. 필요한 값(치수, 글꼴, 간격 단계, 색상, 이름 또는 규칙)은 다음 순서로 확인하십시오:

1. 대상 파일. 실제 프레임, 텍스트, 토큰 또는 컴포넌트를 측정합니다.
2. 패밀리. 동일한 섹션에 있는 관련 프레임, 상태 및 화면을 확인합니다.
3. 워크스페이스 메모리. 파일의 docs/files/<alias>/design.md와 docs/preferences.md를 읽고 "마지막 확인" 날짜를 준수합니다.
4. 사용자 또는 현재 조회. 질문하거나 현재 플랫폼 가이드라인을 조회합니다. 기억된 장치 크기나 오래된 기본값을 신뢰하지 마십시오.
5. 기록. 확인된 값을 오늘 날짜와 함께 대상 design.md에 기록하여 다음 세션이 신뢰할 수 있도록 합니다.

프로젝트 값을 이 스킬의 자체 텍스트에서 확인하지 마십시오.

두 가지 워크플로

• 기존 파일 편집(기본값): 측정할 대상이 있습니다. 아래 전체 루프를 따르고, 루트 프레임 크기를 가정하지 마십시오 — 편집 중인 패밀리의 실제 루트를 측정하십시오.
• 처음부터 시작: 측정할 대상이 없으므로 확인 순서는 3~5단계로 진행됩니다. references/starting-from-scratch.md를 읽으십시오. 구축 전에 사용자와 루트 프레임 크기, 타이포그래피 및 테마 지원을 확인한 다음, 즉시 파일의 design.md를 생성하여 이후 모든 세션이 추측 대신 측정할 수 있도록 하십시오.

빈 워크스페이스 초기화

워크스페이스에 docs/preferences.md와 docs/FILES.md가 없으면 init 모드를 사용하십시오. Init은 로컬, 멱등한 스캐폴드입니다; Figma를 열거나, MCP를 호출하거나, 캔버스를 변경하지 않습니다.

1. 호스트에 슬래시 별칭이 없는 경우 jfd init를 /jfd init와 동일하게 처리합니다.
2. 쓰기 전에 누락된 스캐폴드 경로를 나열합니다. 비어 있지 않은 워크스페이스에서는 먼저 확인을 요청합니다. 기존 파일, 디렉터리, 심볼릭 링크 또는 스킬 설치를 덮어쓰지 마십시오.
3. 이 스킬의 assets/templates/에서 누락된 파일만 복사합니다.
4. 누락된 스킬 복사본을 .agents/skills/justin-figma-design/(표준) 및 해당되는 경우 .cursor/skills/justin-figma-design/에 설치합니다.
5. 선택적으로 scripts/init_project.py(Python 3, stdlib만 사용)를 한 번의 일괄 실행으로 사용할 수 있습니다; 에이전트 파일 도구가 기본 경로로 유지됩니다.
6. 스캐폴드를 확인한 후 Figma 링크 또는 파일 키를 요청합니다. 자격 증명이나 파일 데이터를 임의로 생성하지 마십시오.

세부 사항: references/getting-started.md.

운영 모드 선택

비YOLO가 기본값입니다.

• 비YOLO 프로덕션 작업용: 공유 패턴, 화면, 컴포넌트, 변수, 테마, 반응형 변경 및 명시적으로 일회용이 아닌 모든 범위.
• YOLO는 사용자가 명시적으로 "YOLO", "빠른 데모", "신속한 프로토타입" 또는 이와 동등한 표현을 사용하고 범위가 하나의 명명된 보드 또는 상태인 경우에만 사용합니다.
• "컴포넌트 만들기", "라이브러리 업데이트", "라이트/다크 지원" 또는 공유 크롬 변경은 작다고 해서 YOLO가 아닙니다.
• 사용자가 명확하게 구현 또는 실행을 요청할 때까지 계획 모드에 머무르십시오.

YOLO는 라이브러리 오버헤드를 줄입니다; 안전성이나 시각적 QA를 제거하지 않습니다. 공유 크롬, 재사용 가능 패턴, 여러 관련 상태, 라이트/다크 또는 반응형 전파, 마스터 컴포넌트 변경, Auto Layout 리팩터, 비즈니스 규칙 변경 또는 두 번째 보드를 발견하면 비YOLO로 에스컬레이션하십시오. 전체 라우터 및 체크리스트: references/modes-and-workflow.md.

Figma 변경 전

1. 워크스페이스 루트에서 docs/preferences.md와 docs/FILES.md를 읽습니다.
2. 대상 파일 별칭을 확인하고 docs/files/<alias>/design.md를 읽습니다; 화면, 플로우 또는 합성된 표면 작업을 위해 screens.md를 읽습니다.
3. 최신 관련 세션 노트를 읽습니다. 살아있는 design.md와 현재 권위가 오래된 이력 노트보다 우선합니다.
4. 활성 Figma 파일, 페이지, 섹션/프레임 및 권위를 확인합니다. 연결된 파일에서 노드 ID, 컴포넌트, 변수 및 스타일을 다시 검색합니다; 이전 세션의 ID는 오래된 증거이며 권한이 아닙니다.
5. 공유 변경 전에 전체 동일 프레임/상태 패밀리를 인벤토리합니다: 라이트/다크, 확장/축소, 중첩된 활성 경로, 오버레이, 반응형 변형 및 의도적으로 제거된 상태.
6. 편집 중인 패밀리의 루트 프레임을 측정합니다. 장치 크기를 가정하지 마십시오.
7. 텍스트 변경 전에 스타일이 지정된 글꼴 세그먼트를 검사하고 현재 글꼴을 로드합니다. 대체 글꼴은 확인 순서(측정된 텍스트, 그다음 design.md, 그다음 사용자)를 통해 선택하며, 이 스킬에서 선택하지 마십시오.

대상 파일에 design.md가 없으면 먼저 읽기 전용 조사 기준선을 완료합니다. 활성 파일이나 권위를 확인할 수 없으면 중지하고 질문합니다.

일반 그래픽

아이콘 또는 가져온 이미지를 배치하기 전에 워크스페이스 루트에서 docs/assets/README.md와 docs/assets/icons.md를 읽습니다. 기존 파일 컴포넌트와 프로젝트의 승인된 아이콘 소스를 선호합니다; 새 그래픽을 수락하기 전에 벡터 경계, 크기 및 테마 대비를 검사합니다. 아바타는 사용자 제공만 가능합니다; 절대 생성하지 마십시오.

비YOLO 계약

• 먼저 권위 있는 로컬 인스턴스/컴포넌트를 검색하고, 그다음 활성화된 라이브러리, 그다음 더 넓은 라이브러리 검색을 수행합니다. 격차를 문서화한 후에만 생성합니다.
• 승인된 범위에 대한 최소 일관된 디자인 시스템을 구축합니다: 변수와 모드 먼저, 그다음 스타일과 컴포넌트, 그다음 화면 인스턴스.
• 구조적/시각적 상태에는 변형을 사용하고 콘텐츠 유연성에는 컴포넌트 속성을 사용합니다. 분리된 재그리기보다 인스턴스, 인스턴스 교체 및 제어된 래퍼를 선호합니다.
• 레이아웃 의도를 명확하게 만듭니다: 의미 있는 이름, 의미 있는 계층 구조, 자식이 관련된 경우 Auto Layout, 토큰 바인딩, 컴포넌트 설명, 문서화된 접근성/상태 동작.
• 라이트/다크를 두 개의 하드 코딩된 화면이 아닌 변수-모드 매트릭스로 취급합니다. references/variables-and-theming.md를 참조하십시오.
• 관련 화면 패밀리 전체에 공유 변경 사항을 한 번에 적용한 다음, 각 멤버를 QA합니다. 형제가 오래된 경우 단일 프레임 수정은 완료되지 않습니다.

복잡한 작업 전에 references/components-and-design-system.md와 references/layout-and-autolayout.md를 읽으십시오.

레이아웃 규칙

Hug, Fill, Fixed, min/max를 축별로 독립적으로 선택하십시오: 콘텐츠 기반 스택 및 컨트롤에는 Hug; Auto Layout 부모 내에서 의미 있는 사용 가능한 공간이 있는 자식에만 Fill; 의도적인 구조적 경계(측정된 화면 루트, 아이콘 상자, CTA, 보정된 셸)에는 Fixed; 승인된 반응형 한계에는 min/max. 중첩된 Auto Layout, 패딩 및 간격으로 관계를 인코딩하십시오 — 이전 좌표를 유지하는 보이지 않는 스페이서 프레임을 사용하지 마십시오. 절대 위치 / Auto Layout 무시 레이어는 정당화된 오버레이, 크롬, 장식 또는 대상 design.md에 문서화된 예외에만 사용하십시오. 컨테이너 크기를 조정한 후 너비를 소유하는 하위 요소를 감사하십시오; 더 넓은 부모가 완전한 리플로우를 의미하지는 않습니다. 세부 사항: references/layout-and-autolayout.md.

실행 및 확인

검사하고, 하나의 작은 대상 figma_execute를 실행하고, 변경된 모든 ID와 유용한 지오메트리를 반환한 다음, 즉시 figma_take_screenshot으로 스크린샷을 캡처합니다. 라우팅이 활성 파일에 따라 달라지는 경우 쓰기와 스크린샷을 순차적으로 유지합니다. QA는 측정된 구조와 시각적 증거를 결합합니다 — 해당되는 경우 캡처: (1) 포커스된 컴포넌트 크롭, (2) 전체 보드, (3) 관련 패밀리 또는 섹션 개요. 공유 가장자리, 간격, 클리핑, 오버플로, 긴 텍스트 동작, 아이콘/벡터 경계, 대비, 타이포그래피, 숨겨진 컨트롤, 의미 상태, 관련 상태 동등성, 하드 코딩된 값, 확인되지 않은 바인딩 및 라이트/다크 확인을 확인하십시오. 가능한 경우 Figma Check 디자인을 사용하고, 그렇지 않으면 동등한 구조 및 수동 검사를 실행하십시오.

실패한 figma_execute는 대상이 검사될 때까지 잠재적으로 부분적인 것으로 간주하십시오; 실패한 생성 또는 재부모 지정 스크립트를 맹목적으로 다시 실행하지 마십시오. 복구 계약: references/figma-execute.md. 전체 체크리스트: references/qa-and-recovery.md.

마무리

• 변경된 모든 보드 및 필수 패밀리 멤버에 대한 최종 스크린샷을 캡처합니다.
• 의도적인 예외, 자리 표시자, 해결되지 않은 문제 및 범위 경계를 기록합니다.
• 권위, 컴포넌트, 변수, 화면, 루트 크기 또는 드리프트가 변경된 경우 대상 design.md와 screens.md를 업데이트합니다 — 세션 중에 확인된 모든 값을 포함합니다.
• 의미 있는 작업에 대해 docs/sessions/ 아래에 날짜가 기록된 노트를 작성합니다.

대상 파일의 design.md에 문서화된 보호 사항을 준수합니다: 잠금 또는 보호된 원본, 제거된 상태로 유지해야 하는 스타일 또는 상태, 보존해야 하는 사본 및 언어. 프로젝트 메모리에 자격 증명 또는 개인 토큰을 저장하지 마십시오.

이 스킬의 외부 가이드라인은 references/research-sources.md를 읽으십시오.