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

14 KiB

Raw Blame History

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

Category: 미디어 및 소비자 시각적 발견. 레드 액센트, 메이슨리 그리드, 이미지 우선.

1. 비주얼 테마 및 분위기

Pinterest 웹사이트는 시각적 발견을 라이프스타일 매거진처럼 느끼게 만드는 따뜻하고 영감 넘치는 캔버스입니다. 디자인은 부드럽고 약간 따뜻한 흰색 배경 위에 Pinterest 레드（#e60023）를 유일하고 강렬한 브랜드 액센트로 사용합니다. 대부분의 테크 플랫폼의 쿨한 블루와 달리, Pinterest의 뉴트럴 스케일은 뚜렷한 따뜻한 언더톤을 가집니다——그레이는 쿨 스틸이 아닌 올리브/샌드 톤（#91918c, #62625b, #e5e5e0）으로 기울어져 있어 아늑하고 수공예 같은 분위기를 만들어 브라우징을 유도합니다.

타이포그래피는 Pin Sans를 사용합니다——일본어 폰트를 포함한 광범위한 폴백 스택을 가진 커스텀 독점 폰트로, Pinterest의 글로벌 범위를 반영합니다. 디스플레이 크기（70px, 웨이트 600）에서 Pin Sans는 크고 초대하는 헤드라인을 만듭니다. 작은 크기에서 시스템은 컴팩트합니다: 버튼 12px, 캡션 12–14px. CSS 변수 명명 시스템（--comp-*, --sema-*, --base-*）은 정교한 3단계 디자인 토큰 아키텍처를 드러냅니다: 컴포넌트 레벨, 시맨틱 레벨, 베이스 레벨 토큰.

Pinterest를 차별화하는 것은 넉넉한 보더 라디우스 시스템（12px–40px, 원형에는 50%）과 따뜻한 버튼 배경입니다. 세컨더리 버튼（#e5e5e0）은 차가운 그레이가 아닌 뚜렷하게 따뜻한 샌드 톤을 가집니다. 프라이머리 레드 버튼은 16px 라디우스 사용——둥글지만 필 형태는 아닙니다. 따뜻한 배지 배경（hsla(60,20%,98%,.5)——미묘한 노란 따뜻한 세척）과 사진 주도 레이아웃을 결합하면, 기업적이고 무균적이지 않은 수공예적이고 개인적인 디자인이 탄생합니다.

주요 특징:

올리브/샌드 톤 뉴트럴을 가진 따뜻한 화이트 캔버스——아늑함, 임상적이지 않음
Pinterest 레드（#e60023）를 유일한 강렬한 액센트로——결코 미묘하지 않고, 항상 자신감 있음
글로벌 폴백 스택（CJK 포함）을 가진 Pin Sans 커스텀 폰트
3단계 토큰 아키텍처: --comp-* / --sema-* / --base-*
따뜻한 세컨더리 서피스: 샌드 그레이（#e5e5e0）, 따뜻한 배지（hsla(60,20%,98%,.5)）
넉넉한 보더 라디우스: 표준 16px, 큰 컨테이너에는 최대 40px
사진 우선 콘텐츠——핀/이미지가 주요 비주얼 요소
어두운 근보라색 텍스트（#211922）——따뜻하고, 자두빛 힌트가 있음

2. 컬러 팔레트 및 역할

프라이머리 브랜드

Pinterest 레드（#e60023）: 프라이머리 CTA, 브랜드 액센트——강렬하고 자신감 있는 빨강
그린 700（#103c25）: --base-color-green-700, 성공/자연 액센트
그린 700 호버（#0b2819）: --base-color-hover-green-700, 눌린 그린

텍스트

플럼 블랙（#211922）: 프라이머리 텍스트——자두빛 언더톤을 가진 따뜻한 근검정
블랙（#000000）: 세컨더리 텍스트, 버튼 텍스트
올리브 그레이（#62625b）: 세컨더리 설명, 뮤트 텍스트
웜 실버（#91918c）: --comp-button-color-text-transparent-disabled, 비활성 텍스트, 입력 보더
화이트（#ffffff）: 어두운/컬러 서피스 위의 텍스트

인터랙티브

포커스 블루（#435ee5）: --comp-button-color-border-focus-outer-transparent, 포커스 링
퍼포먼스 퍼플（#6845ab）: --sema-color-hover-icon-performance-plus, 퍼포먼스 기능
리커멘데이션 퍼플（#7e238b）: --sema-color-hover-text-recommendation, AI 추천
링크 블루（#2b48d4）: 링크 텍스트 색상
Facebook 블루（#0866ff）: --facebook-background-color, 소셜 로그인
프레스드 블루（#617bff）: --base-color-pressed-blue-200, 눌린 상태

서피스 및 보더

샌드 그레이（#e5e5e0）: 세컨더리 버튼 배경——따뜻하고, 수공예 느낌
웜 라이트（#e0e0d9）: 원형 버튼 배경, 배지
웜 워시（hsla(60, 20%, 98%, 0.5)）: --comp-badge-color-background-wash-light, 미묘한 따뜻한 배지 배경
포그（#f6f6f3）: 라이트 서피스（50% 불투명도）
보더 비활성（#c8c8c1）: --sema-color-border-disabled, 비활성 보더
호버 그레이（#bcbcb3）: --base-color-hover-grayscale-150, 호버 보더
다크 서피스（#33332e）: 다크 섹션 배경

시맨틱

에러 레드（#9e0a0a）: 체크박스/폼 에러 상태

3. 타이포그래피 규칙

폰트 패밀리

프라이머리: Pin Sans, 폴백: -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳＰゴシック, Arial

계층 구조

역할	폰트	크기	웨이트	행간	자간	비고
디스플레이 히어로	Pin Sans	70px (4.38rem)	600	normal	normal	최대 임팩트
섹션 헤딩	Pin Sans	28px (1.75rem)	700	normal	-1.2px	네거티브 트래킹
본문	Pin Sans	16px (1.00rem)	400	1.40	normal	표준 읽기
캡션 볼드	Pin Sans	14px (0.88rem)	700	normal	normal	강한 메타데이터
캡션	Pin Sans	12px (0.75rem)	400–500	1.50	normal	소형 텍스트, 태그
버튼	Pin Sans	12px (0.75rem)	400	normal	normal	버튼 레이블

원칙

컴팩트 타입 스케일: 범위는 12px–70px로 극적인 점프——대부분의 기능적 텍스트는 12–16px로, 밀도 높은 앱 같은 정보 계층을 만듭니다.
따뜻한 웨이트 분포: 헤딩에 600–700, 본문에 400–500. 초경량 웨이트 없음——텍스트는 항상 실질감이 있습니다.
헤딩의 네거티브 트래킹: 28px 헤딩에서 -1.2px는 아늑하고 친밀한 섹션 타이틀을 만듭니다.
단일 폰트 패밀리: Pin Sans가 모든 것을 처리——세컨더리 디스플레이나 모노스페이스 폰트는 감지되지 않았습니다.

4. 컴포넌트 스타일링

버튼

프라이머리 레드

배경: #e60023（Pinterest 레드）
텍스트: #000000（검정——레드 위에 대비를 위한 특이한 선택）
패딩: 6px 14px
라디우스: 16px（넉넉히 둥글지만 필 형태 아님）
보더: 2px solid rgba(255, 255, 255, 0)（투명）
포커스: CSS 변수를 통한 시맨틱 보더 + 아웃라인

세컨더리 샌드

배경: #e5e5e0（따뜻한 샌드 그레이）
텍스트: #000000
패딩: 6px 14px
라디우스: 16px
포커스: 동일한 시맨틱 보더 시스템

서큘러 액션

배경: #e0e0d9（웜 라이트）
텍스트: #211922（플럼 블랙）
라디우스: 50%（원형）
용도: 핀 액션, 네비게이션 컨트롤

고스트/투명

배경: 투명
텍스트: #000000
보더 없음
용도: 3차 액션

카드 및 컨테이너

넉넉한 라디우스（12px–20px）를 가진 사진 우선 핀 카드
대부분의 카드에 전통적인 박스 쉐도우 없음
화이트 또는 따뜻한 포그 배경
일부 이미지 컨테이너에 8px 화이트 두꺼운 보더

인풋

이메일 인풋: 흰 배경, 1px solid #91918c 보더, 16px 라디우스, 11px 15px 패딩
포커스: CSS 변수를 통한 시맨틱 보더 + 아웃라인 시스템

네비게이션

화이트 또는 따뜻한 배경 위의 깔끔한 헤더
Pinterest 로고 + 검색 바 중앙 배치
네비 링크에 Pin Sans 16px
활성 상태에 Pinterest 레드 액센트

이미지 처리

핀 스타일 메이슨리 그리드（Pinterest 시그니처 레이아웃）
이미지 둥근 모서리: 12px–20px
사진을 주요 콘텐츠로——모든 핀은 이미지
피처드 이미지 컨테이너에 두꺼운 화이트 보더（8px）

5. 레이아웃 원칙

간격 시스템

기본 단위: 8px
스케일: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
큰 점프: 섹션 간격에 32px → 80px → 100px

그리드 및 컨테이너

핀 콘텐츠에 메이슨리 그리드（시그니처 레이아웃）
넉넉한 최대 너비를 가진 중앙 정렬 콘텐츠 섹션
전체 너비 다크 푸터
주요 네비게이션 요소로서의 검색 바

공백 철학

영감 밀도: 메이슨리 그리드는 핀을 촘촘히 쌓습니다——콘텐츠 밀도 자체가 가치 제안입니다. 공백은 그리드 내부가 아닌 섹션 사이에 존재합니다.
위에서 숨쉬고, 아래에서 밀도: 히어로/피처 섹션은 넉넉한 패딩을 얻습니다; 핀 그리드는 컴팩트하고 몰입적입니다.

보더 라디우스 스케일

표준（12px）: 소형 카드, 링크
버튼（16px）: 버튼, 인풋, 중형 카드
편안함（20px）: 피처 카드
라지（28px）: 대형 컨테이너
섹션（32px）: 탭 요소, 대형 패널
히어로（40px）: 히어로 컨테이너, 대형 피처 블록
서클（50%）: 액션 버튼, 탭 인디케이터

6. 깊이와 높이

레벨	처리	용도
플랫（레벨 0）	쉐도우 없음	기본——핀은 쉐도우가 아닌 콘텐츠에 의존
서틀（레벨 1）	최소 쉐도우（토큰에서）	높은 오버레이, 드롭다운
포커스（접근성）	`--sema-color-border-focus-outer-default` 링	포커스 상태

쉐도우 철학: Pinterest는 최소한의 쉐도우를 사용합니다. 메이슨리 그리드는 엘리베이션 효과가 아닌 콘텐츠（사진）에 의존하여 시각적 흥미를 만듭니다. 깊이는 서피스 색상의 따뜻함과 컨테이너의 넉넉한 라운딩에서 옵니다.

7. 해야 할 것과 하지 말아야 할 것

해야 할 것

따뜻한 뉴트럴（#e5e5e0, #e0e0d9, #91918c）사용——따뜻한 올리브/샌드 톤이 아이덴티티
Pinterest 레드（#e60023）는 프라이머리 CTA에만 적용——강렬하고 단독
Pin Sans만 독점 사용——모든 것에 하나의 폰트
넉넉한 보더 라디우스 적용: 버튼/인풋에 16px, 카드에 20px 이상
메이슨리 그리드를 밀도 높게 유지——콘텐츠 밀도가 가치
따뜻한 배지 배경（hsla(60,20%,98%,.5)）을 미묘한 따뜻한 워시에 사용
프라이머리 텍스트에 #211922（플럼 블랙）사용——순수한 검정보다 따뜻함

하지 말아야 할 것

쿨 그레이 뉴트럴 사용하지 않기——항상 따뜻한/올리브 톤
프라이머리 텍스트에 순수한 검정（#000000）사용하지 않기——플럼 블랙（#211922）사용
필 형태 버튼 사용하지 않기——16px 라디우스는 둥글지만 필 형태 아님
무거운 쉐도우 추가하지 않기——Pinterest는 디자인적으로 플랫, 깊이는 콘텐츠에서
카드에 작은 보더 라디우스（<12px）사용하지 않기——넉넉한 라운딩이 핵심
추가 브랜드 색상 도입하지 않기——빨강 + 따뜻한 뉴트럴이 완전한 팔레트
얇은 폰트 웨이트 사용하지 않기——Pin Sans 최소 400

8. 반응형 동작

브레이크포인트

이름	너비	주요 변경
모바일	<576px	단일 컬럼, 컴팩트 레이아웃
모바일 라지	576–768px	2컬럼 핀 그리드
태블릿	768–890px	확장 그리드
데스크톱 스몰	890–1312px	표준 메이슨리 그리드
데스크톱	1312–1440px	전체 레이아웃
라지 데스크톱	1440–1680px	확장 그리드 컬럼
울트라 와이드	>1680px	최대 그리드 밀도

접힘 전략

핀 그리드: 5+ 컬럼 → 3 → 2 → 1
네비게이션: 검색 바 + 아이콘 → 단순화된 모바일 네비
피처 섹션: 나란히 → 스택
히어로: 70px → 비례적으로 축소
푸터: 다크 멀티컬럼 → 스택

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

빠른 컬러 레퍼런스

브랜드: Pinterest 레드（#e60023）
배경: 화이트（#ffffff）
텍스트: 플럼 블랙（#211922）
세컨더리 텍스트: 올리브 그레이（#62625b）
버튼 서피스: 샌드 그레이（#e5e5e0）
보더: 웜 실버（#91918c）
포커스: 포커스 블루（#435ee5）

컴포넌트 프롬프트 예시

"히어로 만들기: 흰 배경. 헤드라인은 70px Pin Sans 웨이트 600, 플럼 블랙（#211922）. 레드 CTA 버튼（#e60023, 16px 라디우스, 6px 14px 패딩）. 세컨더리 샌드 버튼（#e5e5e0, 16px 라디우스）."
"핀 카드 디자인: 흰 배경, 16px 라디우스, 쉐도우 없음. 사진이 상단을 채우고, 아래에 16px Pin Sans 웨이트 400 설명을 #62625b로."
"서큘러 액션 버튼 구성: #e0e0d9 배경, 50% 라디우스, #211922 아이콘."
"입력 필드 만들기: 흰 배경, 1px solid #91918c, 16px 라디우스, 11px 15px 패딩. 포커스: 시맨틱 토큰을 통한 블루 아웃라인."
"다크 푸터 디자인: #33332e 배경. 흰색 Pinterest 스크립트 로고. 12px Pin Sans 링크, #91918c로."

이터레이션 가이드

모든 곳에 따뜻한 뉴트럴——올리브/샌드 그레이, 쿨 스틸은 절대 안 됨
Pinterest 레드는 CTA에만——강렬하고 단독
버튼/인풋에 16px 라디우스, 카드에 20px 이상——넉넉하지만 필 형태 아님
Pin Sans가 유일한 폰트——UI는 12px로 컴팩트, 디스플레이는 70px
사진이 디자인을 이끌어——UI는 따뜻하고 미니멀하게 유지
텍스트에 플럼 블랙（#211922）——순수한 검정보다 따뜻함

14 KiB Raw Blame History Unescape Escape