Figma 디자인 시스템 랜딩 페이지

개요

완전한 랜딩 페이지 브리프를 Figma 디자인으로 변환합니다. 브리프에서 가장 작은 유용한 페이지 구조를 추론하고, 각 요구 사항을 승인된 디자인 시스템에 매핑하며, 시스템에 단일 일치 컴포넌트가 없는 경우에만 로컬 파생 패턴을 구성하고, 조립 후 자동 시각적 폴리시 패스를 실행합니다.

이 스킬은 Figma에서 디자인합니다. HTML, CSS, React, Next.js 또는 기타 구현 코드를 작성하지 않습니다. 소스 디자인 시스템 라이브러리를 편집하거나 게시하지 않습니다.

승인된 시각적 언어는 진리의 원천입니다. 유일한 의도적인 예외는 다음과 같습니다:

디자인 시스템 글꼴을 사용할 수 없을 때 로컬로 적용되는 Figma 글꼴 대체;
승인된 디자인 시스템 부품과 Figma 기본 요소로 구축된 로컬 파생 구성/컴포넌트로, 시각적 값이 디자인 시스템 스타일 또는 변수에 바인딩됨;
디자인 시스템이나 브리프에 적합한 자산이 없을 때 빈 자산 슬롯.

모든 예외는 완료 보고서에 표시되어야 합니다.

라우팅: Basalam 또는 사용자 지정 디자인 시스템

랜딩 실행마다 디자인 시스템 경로를 Figma 또는 Mobbin 작업 전에 결정합니다.

BASALAM_MODE: 이 패키지에 번들된 Basalam 소스를 사용합니다. 사용자에게 디자인 시스템 링크나 다른 디자인 시스템을 묻지 마십시오.
CUSTOM_DS_MODE: 사용자가 제공한 디자인 시스템 또는 설치된 디자인 시스템 스킬을 사용합니다.
ROUTE_PENDING: 사용자가 랜딩을 요청했지만 브랜드 경로가 아직 명확하지 않습니다.

브리프가 명시적으로 랜딩이 Basalam용이라고 밝히면 다시 묻지 않고 BASALAM_MODE를 선택하십시오. 다른 브랜드나 제품 컨텍스트를 명시적으로 언급하면 CUSTOM_DS_MODE를 선택하십시오. 어느 쪽도 명확하지 않으면 정확히 다음과 같이 물으십시오:

이 랜딩은 Basalam용입니까? 예 / 아니오

경로가 ROUTE_PENDING인 동안에는 Figma 또는 Mobbin을 변경하지 마십시오. 답변을 현재 랜딩 실행으로 제한하십시오. 브리프나 브랜드가 변경되면 경로를 다시 결정하십시오.

첫 사용 온보딩

경로가 확인된 후, 새 대화에서 첫 번째 호출 시 사용자가 이미 모든 필수 입력을 제공하지 않은 경우, 세부 질문이나 사전 검사 전에 경로별로 하나의 짧은 메시지를 보내십시오.

BASALAM_MODE:

시작하려면 다음을 보내주십시오: 1) 브리프 2) Figma 대상 노드/프레임 3) 필요한 자산(있는 경우).
CUSTOM_DS_MODE:

시작하려면 다음을 보내주십시오: 1) 브리프 2) 디자인 시스템 또는 해당 스킬 3) Figma 대상 노드/프레임 4) 필요한 자산(있는 경우).

입력이 이미 완료된 경우 온보딩을 건너뛰고 사전 검사를 실행하십시오. 사용자가 입력을 제공한 후에는 반복하지 마십시오. 누락된 세부 사항만 계속 수집하고, 필수 조건이 여전히 없으면 변경 없이 BLOCKED를 반환하십시오.

사용 시기

사용자가 Figma에서 디자인된 랜딩 페이지를 원하고 다음을 제공할 때 이 스킬을 사용하십시오.

완전한 브리프와 승인된 콘텐츠;
BASALAM_MODE(번들 소스 사용) 또는 CUSTOM_DS_MODE(명시적이고 접근 가능한 Figma 디자인 시스템 소스 하나 사용);
정확하고 편집 가능한 Figma 대상 하나.

Mobbin은 선택적 연구 도구이며 필수 입력이 아닙니다. 구성된 Mobbin MCP를 사용할 수 있는 경우, 누락된 패턴을 구성하기 전에 읽기 전용으로 사용하여 인근 UX 패턴을 찾으십시오. Mobbin 연구가 실제로 필요하지만 구성되고 승인된 Mobbin MCP를 사용할 수 없는 경우, Figma 변경 전에 일시 중지하고 아래 설명된 연결 선택을 제공하십시오. 사용자가 로컬 계속을 선택하거나 연결된 Mobbin에 유용한 일치 항목이 없는 경우, 이 스킬의 로컬 UI/UX 방법으로 계속 진행하십시오.

코드, 복사 전용 작업, 디자인 시스템 생성, 소스 라이브러리 유지 관리, 또는 승인된 Figma 소스와 대상이 없는 제한 없는 시각적 탐색에는 이 스킬을 사용하지 마십시오.

필수 입력

빈 값, 알 수 없음, TBD, 모호함, 접근 불가능 또는 충돌하는 값을 누락으로 처리하십시오. 대상이나 비즈니스 사실을 조용히 선택하지 마십시오.

0. 경로

해결된 BASALAM_MODE 또는 CUSTOM_DS_MODE가 필요합니다. 경로를 알 수 없는 경우 ROUTE_PENDING을 사용하고 Basalam 질문을 하고 변경을 전혀 하지 않은 상태로 답변을 기다리십시오.

1. 브리프

다음이 필요합니다.

제품 또는 서비스와 제공;
대상 고객, 사용자 문제, 인식 수준 및 중요한 이의;
가치 제안과 지원되는 혜택;
하나의 전환 목표와 하나의 기본 CTA;
승인된 사실, 주장, 증거, 가격, 법적 텍스트 및 필요한 경우 섹션 사본;
사용자가 지정한 경우 필수 및 금지 섹션;
언어, 쓰기 방향, 요청된 중단점 및 뷰포트 크기;
각 예상 이미지, 아이콘 또는 일러스트레이션에 대한 의도된 역할, 종횡비 또는 콘텐츠 요구 사항.

사용 가능한 자산 또는 승인된 디자인 시스템 자산을 사용하십시오. 시각적 자산이 없어도 실행이 차단되지는 않습니다. 가장 가까운 허용된 자료 또는 아래 설명된 명시적 빈 자산 슬롯으로 해결할 수 있습니다.

브리프가 명시적으로 허용하고 제공된 사실이 충분할 때만 일반 인터페이스 사본을 초안하십시오. 주장, 증거, 가격, 사용후기, 법적 언어 또는 비즈니스 사실을 절대 지어내지 마십시오.

2. 디자인 시스템 소스

BASALAM_MODE에서는 다음 패키지 상대 경로에서만 번들된 소스를 확인하십시오.

references/basalam-design-system/manifest.json
references/basalam-design-system/BASALAM-RULES.md
references/basalam-design-system/kit/
assets/basalam-design-system/fonts/

Figma 변경 전에 매니페스트, 필수 조정 파일, 관련 컴포넌트 참조 및 글꼴 자산을 확인하십시오. 사용자에게 디자인 시스템 URL을 묻거나 조용히 다른 시스템으로 대체하지 마십시오. 번들이 없거나 무결성 검사에 실패하면 정확한 누락/손상 경로와 함께 BASALAM_DEPENDENCY_MISSING을 반환하고 변경을 전혀 하지 마십시오.

CUSTOM_DS_MODE에서는 읽기 액세스 권한과 식별 가능한 관련 게시된 컴포넌트, 변형, 변수, 텍스트 스타일, 표면/배경 스타일 및 사용 가능한 아이콘/자산이 포함된 명확한 Figma 라이브러리/파일 URL 또는 키가 필요합니다. 적합한 아이콘이나 자산이 없으면 ASSET_NEAREST 또는 ASSET_SLOT으로 처리됩니다. 이는 소스를 자체적으로 무효화하지 않습니다. 둘 이상의 테마나 모드가 있는 경우 의도된 테마나 모드가 필요합니다.

사용자가 CUSTOM_DS_MODE에서 설치된 디자인 시스템 스킬을 지정하면 이 스킬과 함께 로드하십시오. 스킬 이름은 하나의 승인된 Figma 소스를 명확하게 확인할 수 있을 때만 충분합니다. 그렇지 않으면 소스를 누락으로 보고하십시오.

번들된 Basalam 소스

Basalam 경로는 이식 가능합니다. 패키지에는 사용자가 제공한 Basalam 디자인 시스템 규칙, 키트 참조 및 Dana 글꼴 파일의 버전이 지정된 스냅샷이 포함되어 있습니다. 이 스킬 패키지를 기준으로 확인하십시오. 개인 절대 경로를 절대 사용하지 말고 BASALAM_MODE를 위해 별도로 설치된 basalam-design-system 스킬이 필요하지 않습니다.

먼저 BASALAM-RULES.md와 kit/의 두 조정 파일을 읽은 다음 브리프와 관련된 컴포넌트/토큰 참조만 로드하십시오. 번들은 디자인 실행 중 읽기 전용입니다. 매니페스트는 출처, 스냅샷 날짜, 파일 크기 및 SHA-256 해시를 기록합니다. 번들된 글꼴은 리소스이지 글꼴을 자동으로 설치할 권한이 아닙니다. Figma에서 가용성을 확인하고 런타임이 Dana를 볼 수 없는 경우 문서화된 글꼴 정책을 적용하십시오.

3. Figma 대상

정확한 기존 대상 페이지와 삽입 노드/프레임이 URL 또는 동등한 식별자로 제공되고 편집 액세스 권한이 있는 Figma 디자인 파일이 필요합니다. 누락된 부분이 있으면 대체 파일, 페이지 또는 대상을 만들지 마십시오.

파일 수준 URL만으로는 이 요구 사항을 충족하지 않습니다. 기본 페이지를 선택하거나 캔버스 루트를 사용하거나 삽입 프레임을 만들지 마십시오. 누락된 정확한 페이지, 삽입 노드/프레임 및 확인되지 않은 편집 액세스를 별도의 차이점으로 보고하십시오.

불가침 경계

Figma에서만 작업하십시오. 구현 코드를 출력하지 마십시오.
직접 매핑된 시각적 컴포넌트는 명시적으로 승인된 디자인 시스템 소스에 출처가 있어야 합니다.
로컬 파생 구성은 대상 파일에서만 허용됩니다. 시각적 자식은 승인된 디자인 시스템 인스턴스, 게시된 변형, 변수, 텍스트 스타일, 표면/배경 스타일, 아이콘, 승인된 자산 및 Frame, Auto Layout, Text, Rectangle, Component와 같은 기본 Figma 요소일 수 있습니다.
로컬 기본 요소의 모든 시각적 속성은 승인된 디자인 시스템 토큰/스타일에 바인딩되어야 합니다. 문서화된 FONT_FALLBACK 패밀리 재정의를 제외하고 하드코딩된 색상, 그라데이션, 오버레이, 글꼴 크기, 두께, 줄 높이, 간격, 반경, 그림자, 효과 또는 임의의 시각적 값이 허용되지 않습니다.
로컬 파생 컴포넌트는 승인된 인스턴스에서 분리되거나, 소스 라이브러리에 게시되거나, 두 번째 디자인 언어를 조용히 만드는 데 사용되어서는 안 됩니다. 대상 내에 유지되며 출처가 기록됩니다.
타사 라이브러리, 외부 자산, 손으로 그린 아이콘, 복사된 Mobbin 시각 자료 또는 외부 컴포넌트를 절대 사용하지 마십시오.
Mobbin 결과는 UX 참조일 뿐입니다. 승인된 디자인 시스템으로 그들의 계층 구조, 상호 작용 패턴 및 구성을 재해석하십시오. 브랜드 스타일을 재현하거나 자산을 가져오지 마십시오.
모든 필수 패턴이 DIRECT_MAPPED인 경우 Mobbin을 언급하거나 일시 중지하지 마십시오. 사용자가 명시적으로 설정 도움을 요청하지 않는 한 사용자를 대신하여 Mobbin을 설치하거나 연결하지 마십시오.
BASALAM_MODE에서는 번들된 Basalam 소스와 확인된 출처만 사용하십시오. 사용자 지정 또는 관련 없는 디자인 시스템으로 조용히 대체하지 마십시오.
기본 디자인 시스템 글꼴이 항상 선호됩니다. 글꼴 대체는 아래 글꼴 대체 정책에서만 허용됩니다.
배경 폴리시는 기존 디자인 시스템 표면/배경 스타일만 사용할 수 있습니다. 새 그라데이션, 오버레이, 색상 또는 배경 효과를 만들지 마십시오.
폴리시 패스 중에 사본, 주장, 섹션 순서, 섹션 수, CTA 의미 또는 제공된 자산을 변경하지 마십시오.
소스 디자인 시스템 라이브러리를 편집, 게시 또는 변경하지 마십시오.
필요한 필수 조건, 대상, 권한, 콘텐츠, 토큰 또는 유효한 구성 계획이 누락된 동안 부분 디자인을 만들지 마십시오. 승인된 빈 자산 슬롯은 명시적 완료 예외이며 보고되지 않은 부분이 아닙니다.

구성 모드 및 상태

내부 커버리지 맵 및 최종 보고서에서 다음 용어를 사용하십시오.

DIRECT_MAPPED: 기존 승인된 디자인 시스템 컴포넌트/변형이 사용됨.
DS_COMPOSED: 대상에서 승인된 DS 부품과 토큰 바인딩된 Figma 기본 요소로 로컬 구성 또는 로컬 재사용 가능 컴포넌트가 구축됨.
ASSET_NEAREST: 디자인 시스템 또는 브리지에서 가장 가까운 허용된 자산이 사용됨.
ASSET_SLOT: 적합한 자산이 없음. DS 레이아웃/표면 규칙으로 빈 대체 슬롯이 생성됨.
FONT_FALLBACK: 기본 DS 글꼴을 사용할 수 없으며 접근 가능한 Figma 글꼴이 DS 타이포그래피 메트릭을 유지하면서 적용됨.
POLISH_COMMITTED: 자동 폴리시가 QA를 통과함.
ASSEMBLY_DELIVERED_POLISH_ROLLED_BACK: 조립은 유효하지만 두 번 시도 후 폴리시가 실패하여 제거됨.
AWAITING_MOBBIN_CHOICE: 참조 연구가 필요하고 Mobbin이 연결되지 않았으며 사용자가 연결 또는 로컬 계속을 선택하지 않음. 변경이 발생하지 않음.
MOBBIN_SKIPPED_BY_USER: Mobbin을 사용할 수 없음이 확인된 후 사용자가 로컬 UI/UX 방법을 선택함.
ROUTE_PENDING: 랜딩 브랜드 경로를 알 수 없으며 Basalam 질문이 답변을 기다리는 중. 변경이 발생하지 않음.
BASALAM_MODE: 번들된 Basalam 소스가 이 랜딩 실행에 선택됨.
CUSTOM_DS_MODE: 사용자가 제공한 디자인 시스템 소스가 이 랜딩 실행에 선택됨.
BASALAM_DEPENDENCY_MISSING: 번들된 Basalam 소스 또는 무결성 요구 사항이 없거나 유효하지 않음. 변경이 발생하지 않음.
BLOCKED: 필수 조건 또는 필수 구성 규칙을 충족할 수 없음.

DS_COMPOSED, ASSET_SLOT 및 FONT_FALLBACK은 허용되고 문서화된 예외입니다. AWAITING_MOBBIN_CHOICE 및 ROUTE_PENDING은 BLOCKED가 아닌 일시적 일시 중지입니다. BASALAM_DEPENDENCY_MISSING은 변경 없이 사전 검사 중지입니다. 이러한 상태는 임의의 사용자 정의 스타일링을 승인하지 않습니다.

원자적 사전 검사 게이트

변경을 유발하는 Figma 작업 전에 하나의 완전한 읽기 전용 사전 검사를 실행하십시오. 파일, 페이지, 프레임, 노드, 컴포넌트, 인스턴스, 자리 표시자 또는 부분 섹션을 만드는 것은 변경으로 간주됩니다.

Figma 읽기 또는 쓰기 작업 전에 figma:figma-generate-design 및 figma:figma-use를 로드하십시오. BASALAM_MODE에서는 컴포넌트를 확인하기 전에 번들된 Basalam 규칙을 로드하고 매니페스트를 확인하십시오. CUSTOM_DS_MODE에서는 소스를 확인하기 전에 지정된 디자인 시스템 스킬을 로드하십시오.

다음 모든 항목을 함께 검증하십시오.

경로가 결정되었습니다. BASALAM_MODE에서는 번들된 매니페스트, 필수 참조 및 글꼴 자산이 존재하고 유효합니다. CUSTOM_DS_MODE에서는 사용자가 제공한 디자인 시스템 소스가 명시적이고 접근 가능합니다.
브리프에는 필수 사실, 승인된 콘텐츠, CTA, 언어/방향 및 중단점 요구 사항이 포함되어 있습니다.
대상 파일, 페이지, 삽입 노드, 파일 유형 및 편집 권한이 유효합니다.
비즈니스 사실을 지어내지 않고 랜딩 구조를 추론할 수 있습니다.
선택된 모든 섹션, 중단점 및 필수 상태는 DIRECT_MAPPED이거나 유효한 DS_COMPOSED 계획이 있습니다.
모든 DS_COMPOSED 계획은 새 토큰, 스타일, 컴포넌트 라이브러리 편집 또는 외부 자산 없이 승인된 DS 부품과 토큰 바인딩된 기본 Figma 요소로 구축할 수 있습니다.
모든 예상 자산에는 다음 중 하나의 결과가 있습니다. 제공/승인된 자산, ASSET_NEAREST 또는 ASSET_SLOT.
기본 DS 글꼴은 필요한 모든 스크립트, 두께 및 스타일에 사용할 수 있거나 유효한 접근 가능한 Figma 대체 후보가 확인되었습니다.
Mobbin 연구가 필요한지 결정하십시오. 모든 필수 패턴이 DIRECT_MAPPED인 경우 MOBBIN_NOT_NEEDED를 기록하십시오. 그렇지 않으면 MOBBIN_USED, MOBBIN_SKIPPED_BY_USER, MOBBIN_ERROR, MOBBIN_NO_MATCH 또는 LOCAL_UX_METHOD를 기록하십시오. Mobbin이 필요하지만 사용할 수 없고 사용자가 아직 경로를 선택하지 않은 경우 READY를 반환하기 전에 아래 Mobbin 연결 선택을 사용하십시오.

변경 전에 커버리지 테이블을 구축하십시오.

...

(SKILL.md 내용이 잘렸습니다. 전체 문서는 원본과 동일한 구조를 유지하며, 나머지 섹션(글꼴 대체 정책, Mobbin 연결 선택, 디자인 어셈블리, 폴리시 패스, 완료 보고서 등)도 동일한 방식으로 번역되어야 합니다.)

Figma 디자인 시스템 랜딩 페이지 스킬