0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。

2026-10-15 21:17:28 +08:00

13 KiB

Raw Blame History

Figma에서 영감받은 디자인 시스템

Category: 디자인 & 크리에이티브 협업 디자인 도구. 선명한 다색상, 장난기 있으면서도 전문적인.

1. 비주얼 테마 & 분위기

Figma의 인터페이스는 스스로를 디자인한 디자인 도구입니다 — 커스텀 가변 폰트(figmaSans)가 극세(weight 320)에서 볼드(weight 700) 사이를 조율하되, 대부분의 타이포그래피 시스템이 결코 탐색하지 않는 특이한 중간 값(330, 340, 450, 480, 540)에 정류하는, 타이포그래피 정교함의 교과서적 사례입니다. 이 세밀한 굵기 제어 덕분에 모든 텍스트 요소는 정밀하게 조율된 시각적 무게를 지니며, "레귤러 대 볼드"라는 단순한 도구 대신 미세한 차이를 통해 위계를 만들어냅니다.

이 페이지는 흥미로운 이중성을 드러냅니다. 인터페이스 크롬은 엄격하게 흑백(감지된 색상이 문자 그대로 #000000과 #ffffff뿐)인 반면, 히어로 섹션과 제품 쇼케이스는 선명한 다색 그라디언트 — 일렉트릭 그린, 밝은 노랑, 짙은 보라, 핫 핑크 — 로 폭발합니다. 이 분리는 디자인 시스템 자체가 무색임을 의미하며, 제품의 화려한 결과물을 히어로 콘텐츠로 대우합니다. Figma의 마케팅 페이지는 본질적으로 화려한 예술 작품을 전시하는 흰 갤러리 벽입니다.

가변 폰트 너머에서 Figma를 돋보이게 하는 것은 원형과 필(pill) 형태의 기하학입니다. 버튼은 50px 반경(필) 또는 50%(아이콘 버튼용 완전한 원형)을 사용하여 유기적인 툴 팔레트 같은 느낌을 만들어냅니다. 점선 아웃라인 포커스 표시(dashed 2px)는 Figma 에디터의 선택 핸들을 연상시키는 의도적인 디자인 선택입니다 — 웹사이트의 UI 언어가 제품의 UI 언어를 참조하는 것입니다.

주요 특성:

특이한 굵기 정류점을 가진 커스텀 가변 폰트(figmaSans): 320, 330, 340, 450, 480, 540, 700
엄격하게 흑백인 인터페이스 크롬 — 색상은 제품 콘텐츠에만 존재
넓은 자간과 대문자 기술 레이블을 위한 figmaMono
필(50px) 및 원형(50%) 버튼 기하학
Figma 에디터 선택 핸들을 반영한 점선 포커스 아웃라인
선명한 다색 히어로 그라디언트 (그린, 옐로우, 퍼플, 핑크)
전역적으로 활성화된 OpenType "kern" 기능
전반에 걸친 음수 자간 — 본문 텍스트조차 -0.14px에서 -0.26px

2. 색상 팔레트 & 역할

Primary

순수 검정 (#000000): 모든 텍스트, 모든 솔리드 버튼, 모든 테두리. 인터페이스의 유일한 "색상".
순수 흰색 (#ffffff): 모든 배경, 흰색 버튼, 어두운 표면 위의 텍스트. 이진법의 나머지 절반.

참고: Figma의 마케팅 사이트는 인터페이스 레이어에 오직 이 두 가지 색상만 사용합니다. 모든 선명한 색상은 제품 스크린샷, 히어로 그라디언트, 임베드 콘텐츠에만 나타납니다.

Surface & Background

순수 흰색 (#ffffff): 기본 페이지 배경 및 카드 표면.
글래스 블랙 (rgba(0, 0, 0, 0.08)): 보조 원형 버튼 및 유리 효과를 위한 미묘한 어두운 오버레이.
글래스 화이트 (rgba(255, 255, 255, 0.16)): 어둡거나 컬러풀한 표면 위의 버튼을 위한 서리 낀 유리 오버레이.

Gradient System

히어로 그라디언트: 일렉트릭 그린, 밝은 노랑, 짙은 보라, 핫 핑크를 사용한 선명한 다중 정류 그라디언트. 이 그라디언트는 히어로 섹션의 시각적 시그니처입니다 — 도구의 창의적 가능성을 표현합니다.
제품 섹션 그라디언트: 개별 제품 영역(디자인, 개발자 모드, 프로토타이핑)은 쇼케이스에서 각기 다른 색상 테마를 사용할 수 있습니다.

3. 타이포그래피 규칙

Font Family

Primary: figmaSans, 폴백: figmaSans Fallback, SF Pro Display, system-ui, helvetica
Monospace / Labels: figmaMono, 폴백: figmaMono Fallback, SF Mono, menlo

위계

역할	폰트	크기	굵기	줄 높이	자간	비고
디스플레이 / 히어로	figmaSans	86px (5.38rem)	400	1.00 (타이트)	-1.72px	최대 임팩트, 극도의 자간
섹션 제목	figmaSans	64px (4rem)	400	1.10 (타이트)	-0.96px	기능 섹션 타이틀
소제목	figmaSans	26px (1.63rem)	540	1.35	-0.26px	강조된 섹션 텍스트
소제목 라이트	figmaSans	26px (1.63rem)	340	1.35	-0.26px	가벼운 섹션 텍스트
기능 타이틀	figmaSans	24px (1.5rem)	700	1.45	normal	볼드 카드 제목
본문 대	figmaSans	20px (1.25rem)	330–450	1.30–1.40	-0.1px to -0.14px	설명, 인트로
본문 / 버튼	figmaSans	16px (1rem)	330–400	1.40–1.45	-0.14px to normal	표준 본문, 내비게이션, 버튼
본문 라이트	figmaSans	18px (1.13rem)	320	1.45	-0.26px to normal	가벼운 본문 텍스트
모노 레이블	figmaMono	18px (1.13rem)	400	1.30 (타이트)	0.54px	대문자 섹션 레이블
모노 소형	figmaMono	12px (0.75rem)	400	1.00 (타이트)	0.6px	대문자 소형 태그

원칙

가변 폰트 정밀도: figmaSans는 대부분의 시스템이 결코 사용하지 않는 굵기를 씁니다 — 320, 330, 340, 450, 480, 540. 이는 극적인 도약 대신 미묘한 굵기 차이를 통해 위계를 만들어냅니다. 330과 340의 차이는 거의 감지하기 어렵지만 구조적으로 의미 있습니다.
라이트를 기본으로: 대부분의 본문 텍스트는 320–340(일반적인 400 "레귤러"보다 가벼운)을 사용하여, 디자인 도구 미학과 어울리는 에테르 같고 공기처럼 가벼운 읽기 경험을 만들어냅니다.
어디서나 커닝: 모든 텍스트 요소는 OpenType "kern" 기능을 활성화합니다 — 커닝은 선택 사항이 아니라 구조적입니다.
기본값으로 음수 자간: 본문 텍스트도 -0.1px에서 -0.26px 자간을 사용하여, 전반적으로 타이트한 텍스트를 만듭니다. 디스플레이 텍스트는 -0.96px와 -1.72px로 더욱 압축됩니다.
구조를 위한 모노: 양수 자간(0.54px–0.6px)과 함께 대문자로 사용한 figmaMono는 기술적 이정표 레이블을 만듭니다.

4. 컴포넌트 스타일링

버튼

블랙 솔리드 (필)

Background: 순수 검정 (#000000)
텍스트: 순수 흰색 (#ffffff)
Radius: 아이콘 버튼에는 원형 (50%)
Focus: dashed 2px outline
최대 강조

화이트 필

Background: 순수 흰색 (#ffffff)
텍스트: 순수 검정 (#000000)
Padding: 8px 18px 10px (비대칭 수직)
Radius: pill (50px)
Focus: dashed 2px outline
어둡거나 컬러풀한 표면 위의 표준 CTA

글래스 다크

Background: rgba(0, 0, 0, 0.08) (미묘한 어두운 오버레이)
텍스트: 순수 검정
Radius: 원형 (50%)
Focus: dashed 2px outline
밝은 표면 위의 보조 액션

글래스 라이트

Background: rgba(255, 255, 255, 0.16) (서리 낀 유리)
텍스트: 순수 흰색
Radius: 원형 (50%)
Focus: dashed 2px outline
어둡거나 컬러풀한 표면 위의 보조 액션

카드 & 컨테이너

Background: 순수 흰색
Border: 없음 또는 최소화
Radius: 6px (소형 컨테이너), 8px (이미지, 카드, 다이얼로그)
Shadow: 미묘한 수준에서 중간 수준의 고도 효과
카드 콘텐츠로서의 제품 스크린샷

특이 컴포넌트

제품 탭 바

수평 필 형태 탭 (50px 반경)
각 탭은 Figma 제품 영역(디자인, 개발자 모드, 프로토타이핑 등)을 표현
활성 탭 강조 표시

히어로 그라디언트 섹션

전체 너비의 선명한 다색 그라디언트 배경
86px 디스플레이 제목이 포함된 흰색 텍스트 오버레이
그라디언트 안에 떠 있는 제품 스크린샷

점선 포커스 표시

모든 인터랙티브 요소는 포커스 시 dashed 2px 아웃라인 사용
Figma 에디터의 선택 핸들을 참조
웹사이트와 제품을 연결하는 메타 디자인 선택

5. 레이아웃 원칙

간격 시스템

기본 단위: 8px
스케일: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px

그리드 & 컨테이너

최대 컨테이너 너비: 1920px까지
히어로: 중앙 정렬 콘텐츠를 가진 전체 너비 그라디언트
제품 섹션: 교차 쇼케이스
푸터: 어두운 전체 너비 섹션
559px에서 1920px까지 반응형

공백 철학

갤러리 같은 호흡: 넉넉한 간격은 각 제품 섹션이 자체 전시물로서 숨 쉬게 합니다.
시각적 호흡으로서의 색상 섹션: 그라디언트 히어로와 제품 쇼케이스는 모노크롬 인터페이스 섹션들 사이에 색채적 여유를 제공합니다.

테두리 반경 스케일

최소 (2px): 소형 링크 요소
미묘 (6px): 소형 컨테이너, 구분선
편안함 (8px): 카드, 이미지, 다이얼로그
필 (50px): 탭 버튼, CTA
원형 (50%): 아이콘 버튼, 원형 요소

6. 깊이 & 고도

레벨	처리 방식	용도
플랫 (레벨 0)	그림자 없음	페이지 배경, 대부분의 텍스트
표면 (레벨 1)	그라디언트/어두운 섹션 위의 흰 카드	카드, 제품 쇼케이스
고도 (레벨 2)	미묘한 그림자	떠 있는 카드, 호버 상태

그림자 철학: Figma는 그림자를 절제하여 사용합니다. 주요 깊이 메커니즘은 배경 대비 (컬러풀하거나 어두운 섹션 위의 흰 콘텐츠)와 제품 스크린샷 자체가 가진 고유한 입체감입니다.

7. Do's and Don'ts

Do

정밀한 가변 굵기(320–540)로 figmaSans를 사용하세요 — 세밀한 굵기 제어 자체가 디자인입니다
인터페이스를 엄격하게 흑백으로 유지하세요 — 색상은 제품 콘텐츠에서만 옵니다
모든 인터랙티브 요소에 필(50px) 및 원형(50%) 기하학을 사용하세요
dashed 2px 포커스 아웃라인을 적용하세요 — 시그니처 접근성 패턴입니다
모든 텍스트에 "kern" 기능을 활성화하세요
레이블에는 양수 자간과 함께 대문자 figmaMono를 사용하세요
전반에 걸쳐 음수 자간을 적용하세요 (-0.1px에서 -1.72px)

Don't

인터페이스 색상을 추가하지 마세요 — 모노크롬 팔레트는 절대적입니다
표준 폰트 굵기(400, 500, 600, 700)를 사용하지 마세요 — 가변 폰트의 고유 정류점(320, 330, 340, 450, 480, 540)을 사용하세요
버튼에 날카로운 모서리를 사용하지 마세요 — 필과 원형 기하학만 허용됩니다
솔리드 포커스 아웃라인을 사용하지 마세요 — 점선이 시그니처입니다
본문 폰트 굵기를 450 이상으로 높이지 마세요 — 가벼운 굵기 미학이 핵심입니다
본문 텍스트에 양수 자간을 사용하지 마세요 — 항상 음수입니다

8. 반응형 동작

브레이크포인트

이름	너비	주요 변경 사항
소형 모바일	<560px	컴팩트 레이아웃, 스택
태블릿	560–768px	소폭 조정
소형 데스크탑	768–960px	2열 레이아웃
데스크탑	960–1280px	표준 레이아웃
대형 데스크탑	1280–1440px	확장됨
울트라 와이드	1440–1920px	최대 너비

축소 전략

히어로 텍스트: 86px → 64px → 48px
제품 탭: 모바일에서 가로 스크롤
기능 섹션: 단일 열로 스택
푸터: 다열 → 스택

9. 에이전트 프롬프트 가이드

빠른 색상 참조

모든 것: "순수 검정 (#000000)" 과 "순수 흰색 (#ffffff)"
Glass Dark: "rgba(0, 0, 0, 0.08)"
Glass Light: "rgba(255, 255, 255, 0.16)"

예시 컴포넌트 프롬프트

"선명한 다색 그라디언트(그린, 옐로우, 퍼플, 핑크) 위에 히어로를 만드세요. 헤드라인은 86px figmaSans 굵기 400, line-height 1.0, letter-spacing -1.72px. 흰 텍스트. 흰 필 CTA 버튼 (50px 반경, 8px 18px 패딩)."
"필 형태 버튼(50px 반경)으로 제품 탭 바를 디자인하세요. 활성: 블랙 배경, 흰 텍스트. 비활성: 투명, 검정 텍스트. figmaSans 20px 굵기 480."
"섹션 레이블을 만드세요: figmaMono 18px, 대문자, letter-spacing 0.54px, 검정 텍스트. Kern 활성화."
"20px figmaSans 굵기 330, line-height 1.40, letter-spacing -0.14px로 본문 텍스트를 만드세요. 흰 배경 위의 순수 검정."

반복 가이드

가변 폰트 굵기 정류점을 정확하게 사용하세요: 320, 330, 340, 450, 480, 540, 700
인터페이스는 항상 검정 + 흰색 — 크롬에 색상을 추가하지 마세요
솔리드가 아닌 점선 포커스 아웃라인
본문에는 항상 음수 자간, 모노 레이블에는 항상 양수 자간
버튼/탭에는 필(50px), 아이콘 버튼에는 원형(50%)

13 KiB Raw Blame History Unescape Escape