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

24 KiB

Raw Blame History

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

Category: 전자상거래 및 소매 전자상거래 플랫폼. 다크 퍼스트 시네마틱, 네온 그린 강조색, 초경량 타이포그래피.

1. 비주얼 테마 및 분위기

Shopify.com은 다크 퍼스트의 디지털 극장입니다——커머스 플랫폼을 영화 시사회처럼 연출하는 웹사이트입니다. 전체 경험은 깊은 숲의 초록빛이 아주 희미하게 담긴 거의 검은 표면（#02090A、#061A1C、#102620）위에서 펼쳐지며, SaaS 마케팅 페이지라기보다 테크 키노트의 독점 제품 공개 같은 야간 분위기를 만들어냅니다. 이 어둠은 차갑거나 기업적이지 않습니다——어두운 강당 맨 앞줄에 앉아 있는 것 같은, 럭셔리 경험의 따뜻하게 감싸는 어둠입니다.

타이포그래피는 부정할 수 없는 주인공입니다. NeueHaasGrotesk——세련된 Helvetica의 후계자——은 기념비적인 크기（96px）와 믿기 어려울 만큼 가는 굵기（330-400）로 등장하여, 잉크로 인쇄된 것이 아니라 빛으로 새겨진 것 같은 헤드라인을 만들어냅니다. ss03 OpenType 기능은 자형에 독특한 개성을 부여하여 Shopify의 타이포그래피를 일반적인 Helvetica 사용과 차별화합니다. 디스플레이 레이어 아래에서, Inter Variable은 외과적 정밀도로 본문 텍스트를 처리하며, 마찬가지로 특이한 가변 굵기（420、450、550）를 사용합니다——이것들은 전통적인 굵기 정류소 사이의 공간에 존재합니다. 이 정밀함은 모든 세부 사항에 심혈을 기울이는 회사의 신호입니다.

색상은 극도의 절제로 사용됩니다. 주요 강조색은 Shopify 네온 그린（#36F4A4）——포커스 링과 강조 하이라이트에만 등장하는 전기적인 민트 색상으로, 어두운 캔버스에 생물 발광 신호처럼 박동합니다. 더 부드러운 그린 틴트（알로에 #C1FBD4、피스타치오 #D4F9E0）가 분위기 있는 워시를 제공합니다. 흰색은 어두운 표면에서 유일하게 중요한 텍스트 색상이며, 아연 기반의 뉴트럴 스케일（#A1A1AA부터 #3F3F46）이 조용한 정보의 계층 구조를 처리합니다. 결과적으로 커머스 기술이 SF 미래에 속하는 것처럼 느끼게 만드는 디자인이 탄생합니다.

Key Characteristics：

깊은 숲의 청록색 언더톤을 가진 다크 퍼스트 디자인（순수한 검정 아님）
기념비적인 크기（96px）의 초경량 디스플레이 타이포그래피（굵기 330）가 만드는 환상적인 존재감
어둠에 대비한 단일 고에너지 강조색으로서의 네온 그린（#36F4A4）
주요 인터랙티브 형태로서의 풀 필 버튼（9999px 반경）
사진적 깊이감을 만드는 다층 박스 그림자
어두운 UI 맥락에 내장되어 주변 어둠과 어우러지는 제품 스크린샷
텍스트 계층을 위한 아연 기반 뉴트럴 스케일——따뜻함과 차가움의 균형

2. 컬러 팔레트 및 역할

프라이머리

Shopify 화이트（#FFFFFF）：어두운 표면의 기본 텍스트, 버튼 채우기, 고대비 요소
Shopify 블랙（#000000）：바디 배경, 흰색 버튼 위의 텍스트, 최대 대비 기반（--color-shade-100）

세컨더리 및 강조색

네온 그린（#36F4A4）：시그니처 강조색——포커스 링, 인터랙티브 하이라이트, 활성 상태 인디케이터. 전기적이고 생물 발광적
알로에（#C1FBD4）：장식적 배경, 분위기 있는 카드를 위한 부드러운 그린 워시（--color-aloe-10）
피스타치오（#D4F9E0）：미묘한 표면 차별화를 위한 가장 밝은 그린 틴트（--color-pistachio-10）

서피스 및 배경색

보이드（#000000）：루트 페이지 배경——최대 깊이를 위한 진정한 검정
딥 틸（#02090A）：카드 서피스, 콘텐츠 컨테이너——그린 언더톤이 있는 거의 검정
다크 포레스트（#061A1C）：뚜렷한 그린 특성을 가진 섹션 배경
포레스트（#102620）：올라온 어두운 표면, 헤더 배경——가장 따뜻한 어두운 음영
다크 카드 보더（#1E2C31）：어두운 표면의 카드 테두리, 미묘한 경계 정의

뉴트럴 및 텍스트（아연 스케일）

Shade-30（#D4D4D8）：가장 밝은 뉴트럴, 어두운 곳에서 거의 보이지 않는 테두리（--color-shade-30）
뮤트 텍스트（#A1A1AA）：보조 텍스트, 메타데이터, 설명——조용한 목소리
Shade-50（#71717A）：3차 텍스트, 타임스탬프, 가장 중요도가 낮은 정보（--color-shade-50）
Shade-60（#52525B）：비활성 텍스트, 장식적 뉴트럴（--color-shade-60）
Shade-70（#3F3F46）：미묘한 구분선, 거의 보이지 않는 UI 경계（--color-shade-70）
라이트 보더（#E4E4E7）：밝은 표면의 테두리（드물게——라이트 모드 모달에서만）

시맨틱 및 강조색

Link Muted（#9797A2）：밑줄 장식이 있는 뮤트 링크 텍스트
Link Sage（#9DABAD）：청록색 틴트의 뮤트 링크
Link Lavender（#BDBDCA）：더 밝은 링크 변형
Link Mint（#99B3AD）：테마 섹션을 위한 그린 틴트 링크 변형

그라데이션 시스템

다크 틸 워시：#102620 중심에서 #02090A 가장자리로의 방사형 그라데이션——제품 쇼케이스 뒤에 사용
그린 애트모스페릭：히어로 섹션 뒤의 미묘한 그린 틴트 환경 그라데이션, 단색 없이 깊이감 형성
스포트라이트：검정으로 페이드아웃되는 집중된 밝은 영역——키노트 스타일의 프레젠테이션 조명 연출

3. 타이포그래피 규칙

폰트 패밀리

디스플레이： NeueHaasGrotesk（세련된 Helvetica의 후계자, 가변 폰트）

폴백：Helvetica、Arial、sans-serif
OpenType 기능：ss03（스타일리스틱 세트 3——독특한 자형 대안）
사용 가능한 굵기：330、360、400、500、750（가변）
모든 헤딩, 히어로 텍스트, 대형 디스플레이 요소에 사용

바디： Inter-Variable

폴백：Helvetica、Arial、sans-serif
OpenType 기능：ss03
사용 가능한 굵기：400、420、450、500、550（가변）
본문 텍스트, 링크, 버튼, UI 요소에 사용

모노： ui-monospace

폴백：SFMono-Regular、Menlo、Monaco、Consolas、Liberation Mono、Courier New
코드 스니펫, 데이터 레이블, 기술적 콘텐츠에 사용

계층 구조

역할	크기	굵기	줄 높이	자간	비고
Display XL	96px	400	1.00	—	NeueHaasGrotesk, 히어로 헤드라인, "ss03"
Display XL Bold	90.74px	750	1.00	4.54px	NeueHaasGrotesk, 강조 디스플레이
Display XL Tracked	96px	400	1.00	2.4px	NeueHaasGrotesk, 자간 디스플레이
Display Light	96px	330	0.96	—	NeueHaasGrotesk, 환상적인 디스플레이
Heading 1	70px	330	1.00	—	NeueHaasGrotesk, 섹션 타이틀
Heading 2	55px	330	1.16	—	NeueHaasGrotesk, 서브섹션
Heading 3	48px	330	1.14	—	NeueHaasGrotesk, 기능 타이틀
Heading 4	32px	360	1.14	0.32px	NeueHaasGrotesk, 카드 헤딩
Heading 5	28px	500	1.28	0.42px	NeueHaasGrotesk, 소제목
Heading 6	24px	400	1.14	0.36px	NeueHaasGrotesk, 마이너 헤딩
Body Large	20px	500	1.40	0.3px	NeueHaasGrotesk / Inter, 리드 단락
Body	18px	400	1.56	—	Inter-Variable, 표준 바디
Body Medium	18px	550	1.56	—	Inter-Variable, 강조 바디
Body Small	16px	400	1.50	—	Inter / NeueHaasGrotesk, 컴팩트 바디
Body Small Medium	16px	420	1.50	—	Inter-Variable, 약간 강조
Button	16px	400	1.50	—	NeueHaasGrotesk, CTA 텍스트
Nav Link	18px	500	1.25	0.72px	NeueHaasGrotesk, 네비게이션 항목
Caption	14px	500	1.49	0.28px	NeueHaasGrotesk / Inter, 메타데이터
Caption Medium	14px	550	1.49	0.28px	Inter-Variable, 강조 캡션
Overline	15.36px	400	1.50	1.54px	NeueHaasGrotesk, 넓은 자간 레이블
Micro	13px	500	1.50	-0.13px	Inter, 좁은 자간 소문자
Label	12px	400	1.20	0.72px	Inter, 대문자 레이블
Code	16px	400	1.50	—	ui-monospace, 대문자, 코드 블록
Code Small	12px	400	1.33	—	ui-monospace, 대문자, 인라인 코드

원칙

Shopify의 타이포그래피는 가변 폰트 정밀도의 걸작입니다. 디스플레이 레이어는 거의 완전히 굵기 330-400으로 구성되어 있습니다——투영된 빛처럼 어두운 배경 위에 떠 있는 것 같은, 깃털처럼 가벼운 텍스트입니다. 이는 대부분의 SaaS 사이트가 취하는 굵고 무거운 접근 방식과 정반대입니다：다른 사이트들이 소리를 지르는 곳에서 Shopify는 거대한 크기로 속삭입니다. 굵기 330의 96px 헤드라인은 거대한 크기와 섬세한 획의 역설을 만들어내어——기념비적이면서도 섬세하게 느껴집니다. ss03 OpenType 기능은 특정 글자（아마도 'a'、'g' 및 특정 숫자）를 더 세련된 모습으로 만드는 스타일리스틱 세트를 활성화하여, Shopify의 타이포그래피를 표준 Helvetica Neue 사용과 차별화합니다. Inter Variable은 외과적 정밀도로 바디 레이어를 처리하며, 전통적인 정류소 사이에 존재하는 420, 550 같은 굵기를 사용합니다——모든 텍스트가 필요한 정확한 시각적 무게를 갖습니다.

4. 컴포넌트 스타일링

버튼

프라이머리（화이트 필）

배경：화이트（#FFFFFF）
텍스트：블랙（#000000）
테두리：2px solid transparent
테두리 반경：풀 필（9999px）
패딩：12px 26px 12px 16px（비대칭——시각적 균형을 위해 오른쪽 패딩을 더 크게）
호버：약간의 불투명도 감소 또는 배경 이동
포커스：2px #36F4A4（네온 그린）아웃라인 링
트랜지션：all 200ms ease

세컨더리（고스트/아웃라인）

배경：투명
텍스트：화이트（#FFFFFF）
테두리：2px solid 화이트（#FFFFFF）
테두리 반경：풀 필（9999px）
패딩：12px 26px 12px 16px
호버：블랙 텍스트의 화이트 배경으로 채우기
포커스：2px #36F4A4 아웃라인

배지/태그（뉴트럴 필）

배경：rgba(255, 255, 255, 0.2)（서리 유리）
텍스트：화이트（#FFFFFF）
테두리：없음
테두리 반경：약간 둥글게（4px）
패딩：12px 16px
폰트：16px 레귤러

카드 및 컨테이너

배경：어두운 페이지에서 딥 틸（#02090A）
테두리：1px solid #1E2C31（다크 카드 보더）——거의 보이지 않는 경계
테두리 반경：표준 카드 8px, 피처드 카드 12px, 상단 둥근 카드 20px 20px 0 0
그림자：다층 시스템：
- 정지：rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px + rgba(255,255,255,0.03) 0px 1px 0px inset
- 인셋 흰색 하이라이트가 미묘한 상단 테두리 글로우를 생성
호버：그림자가 확장되고 카드가 약간 밝아질 수 있음
트랜지션：box-shadow 300ms ease, transform 200ms ease

인풋 및 폼

배경：투명 또는 다크 포레스트（#061A1C）
텍스트：화이트（#FFFFFF）
테두리：1px solid #3F3F46（Shade-70）
테두리 반경：8px
패딩：12px 16px
포커스：2px solid #36F4A4（네온 그린 포커스 링）
플레이스홀더：Shade-50（#71717A）
트랜지션：border-color 200ms ease

배경：투명（어두운 히어로 위에 오버레이）, 스크롤 시 포레스트（#102620）가 됨
높이：약 64px
왼쪽：Shopify 워드마크 로고（SVG, 어두운 배경에 흰색）
중앙/오른쪽：18px/500 NeueHaasGrotesk 내비 링크, 흰색, 자간 0.72px
CTA：화이트 필 버튼 「Start for free」（오른쪽）
보조 CTA：흰색 테두리의 고스트 버튼
호버：링크가 뮤트 텍스트（#A1A1AA）로 변하거나 밑줄 생성
모바일：햄버거 메뉴, 풀스크린 다크 오버레이
트랜지션：스크롤 시 배경 300ms ease

이미지 처리

제품 스크린샷：어두운 UI 맥락에 내장되어 주변 어둠과 어우러짐
관리 인터페이스 프리뷰：미묘한 카드 테두리가 있는 어두운 배경에 표시
가로세로 비율：다양——히어로 이미지는 넓게（약 16:9）, 피처 샷은 유연하게
모든 이미지는 어두운 컨테이너 안에 플러시하게 배치——밝은 테두리나 프레임 없음
어두운 플레이스홀더 서피스를 가진 지연 로딩

신뢰 지표

통계를 눈에 띄게 표시：「15+」（년），「150M+」（구매자）
NeueHaasGrotesk로 디스플레이 크기의 숫자
파트너/개발자 에코시스템 콜아웃 섹션
페이지 흐름에 통합된 다크 테마 추천사

5. 레이아웃 원칙

간격 시스템

기본 단위：8px

토큰	값	사용
space-1	4px	촘촘한 인라인 간격
space-2	8px	기본 단위, 아이콘 간격
space-3	12px	카드 패딩, 촘촘한 마진
space-4	16px	표준 요소 패딩
space-5	24px	카드 간격, 섹션 패딩
space-6	28px	중간 섹션 간격
space-7	32px	섹션 구분
space-8	36px	큰 패딩
space-9	40px	주요 섹션 패딩
space-10	64px	히어로 섹션 패딩, 큰 간격

그리드 및 컨테이너

최대 컨테이너 너비：약 1280px（가운데 정렬）
히어로：전체 너비, 가장자리에서 가장자리로 이어지는 어두운 배경에 가운데 정렬 텍스트
피처 섹션：텍스트와 제품 스크린샷의 2열 레이아웃
통계 섹션：큰 숫자를 포함한 가로 레이아웃
수평 패딩：데스크탑 64px, 태블릿 32px, 모바일 16px
그리드 간격：주요 콘텐츠 블록 사이 24-32px

여백 철학

Shopify의 여백 전략은 연극적입니다. 섹션들은 광대한 어두운 공간으로 구분됩니다——80px에서 120px의 순수한 검은 호흡 공간——웹페이지가 아닌 프레젠테이션의 페이싱을 만들어냅니다. 각 콘텐츠 블록은 키노트 스타일 스크롤에서 독립적인 「슬라이드」입니다. 섹션 내부에서는 간격이 더 촘촘하고 의도적이어서, 광대한 공허 속에 초점 밀도를 만들어냅니다. 매크로 레벨의 여백과 마이크로 레벨의 정밀함 사이의 대비가 사이트에 시네마틱한 리듬을 부여합니다.

테두리 반경 스케일

값	맥락
4px	태그, 배지, 마이크로 요소
8px	표준 카드, 인풋, 비디오 컨테이너
12px	피처드 카드, 이미지 컨테이너, 버튼（필 아님）
20px	상단 둥근 카드（20px 20px 0 0）, 모달 헤더
340px	대형 둥근 장식 요소
9999px	필 버튼, 필 배지, 내비 요소

6. 깊이와 고도

레벨	처리	사용
베이스	그림자 없음, 어두운 표면	기본 페이지 배경
서틀	`rgba(0,0,0,0.1) 0px 0px 0px 1px` + 인셋 화이트 글로우	정지 카드
미디엄	다층：1px 링 + 2px + 4px + 8px 그림자 스택	올라온 카드, 피처드 섹션
하이	`rgba(0,0,0,0.25) 0px 25px 50px -12px`	모달, 드롭다운, 오버레이
포커스	`0px 0px 0px 2px #36F4A4`	키보드 포커스 링（네온 그린）

Shopify의 그림자 시스템은 유독 정교합니다. 단일 값 그림자 대신, 카드는 누적된 다층 접근 방식을 사용합니다：경계 정의를 위한 1px 링, 자연스러운 빛의 감쇠를 위한 2px/4px/8px 점진적 블러, 상단 조명 유리 표면을 시뮬레이션하는 섬세한 인셋 화이트 글로우（rgba(255,255,255,0.03)）. 어두운 배경에서는 그림자가 이미 어두운 표면에서 더 어두워지기 때문에, 그림자는 전통적인 고도보다 「앰비언트 오클루전」처럼 기능합니다——카드가 위에 떠 있는 것이 아니라 표면 속으로 약간 가라앉는 것처럼 보입니다.

장식적 깊이

다크 틸 그라데이션：히어로 섹션과 제품 쇼케이스 뒤의 앰비언트 방사형 워시
스포트라이트 효과：검정으로 페이드아웃되는 밝은 중심 영역, 키노트 스타일의 연극적 조명 연출
엣지 글로우：인셋 박스 그림자를 통한 어두운 카드의 미묘한 밝은 색 테두리
그린 애트모스페릭 헤일로：브랜드 강조색을 반향하는 배경 그라데이션의 희미한 그린 틴트

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

해야 할 것

깊이를 위해 다크 틸-블랙 서피스 계층（보이드 → 딥 틸 → 다크 포레스트 → 포레스트）을 사용한다
디스플레이 타이포그래피를 굵기 330-400으로 유지한다——환상적인 가벼움이 디자인의 시그니처
네온 그린（#36F4A4）을 포커스 상태와 핵심 강조 하이라이트에만 사용한다
모든 프라이머리 CTA 버튼에 9999px 반경을 적용한다——풀 필은 타협할 수 없다
카드 고도에 다층 그림자 시스템을 사용한다——단일 그림자는 평평해 보인다
모든 텍스트에서 ss03 OpenType 기능을 유지한다——타이포그래피 아이덴티티의 일부
본문 텍스트에 Inter Variable, 헤딩에 NeueHaasGrotesk를 사용한다——역할을 혼합하지 않는다
시네마틱한 페이싱을 위해 섹션 사이에 극적인 간격（80px+）을 만든다

하지 말아야 할 것

어두운 배경의 텍스트에 순수한 검정（#000000）을 사용하지 않는다——흰색（#FFFFFF）만 사용한다
따뜻한 색상（오렌지, 빨강, 노랑）을 도입하지 않는다——팔레트는 엄격하게 쿨 계열（그린, 틸, 뉴트럴）
NeueHaasGrotesk 본문 텍스트에 500 이상의 굵기를 사용하지 않는다——무거운 굵기는 환상적인 느낌을 깨뜨린다
큰 표면에 그린 강조색을 적용하지 않는다——네온 그린은 작고 정밀한 하이라이트에만 사용
인터랙티브 요소에 날카로운 모서리（0px 반경）를 사용하지 않는다——모든 것을 둥글게
밝은 배경을 추가하지 않는다——다크 테마는 근본적인 것이며 선택 사항이 아니다
단일 레이어 박스 그림자를 사용하지 않는다——누적 접근 방식이 시스템
본문 텍스트의 줄 높이를 1.56 이상으로 설정하지 않는다——Shopify의 텍스트는 비교적 컴팩트
같은 크기/역할에서 NeueHaasGrotesk와 Inter를 혼합하지 않는다——굵기 스케일이 다르다
헤딩에 0 미만의 자간을 사용하지 않는다——Shopify 헤딩은 중립 또는 양수 트래킹

8. 반응형 동작

브레이크포인트

이름	너비	주요 변경 사항
모바일	<640px	단일 열, 햄버거 내비, 디스플레이 텍스트 48px로 축소, 16px 패딩
태블릿	640-1024px	2열 그리드 시작, 디스플레이 텍스트 70px, 32px 패딩
데스크탑	1024-1440px	전체 레이아웃, 확장 내비, 96px 디스플레이, 64px 패딩
대형 데스크탑	>1440px	최대 너비 컨테이너 가운데 정렬, 섹션 간격 증가

터치 타겟

최소 터치 타겟：44x44px（WCAG AAA）
필 버튼：최소 48px 높이에 넉넉한 수평 패딩
내비 링크：44px 터치 영역
카드 서피스：링크된 경우 카드 전체를 탭 가능

접힘 전략

내비게이션：전체 수평 링크 → 1024px 이하에서 햄버거 메뉴；로고와 CTA 버튼은 표시 유지
히어로 섹션：96px 디스플레이 → 태블릿에서 70px → 모바일에서 48px；단일 열 가운데 정렬 유지
피처 섹션：텍스트+이미지 2열 → 768px 이하에서 단일 열로 쌓임
통계：가로 행 → 모바일에서 세로로 쌓임
섹션 패딩：뷰포트가 좁아질수록 64px → 40px → 24px → 16px
카드：그리드 → 스택, 모바일에서 전체 너비 유지

이미지 동작

제품 스크린샷：어두운 컨테이너 안에서 반응형, 가로세로 비율 유지
히어로 이미지：모든 브레이크포인트에서 전체 너비, 어두운 플레이스홀더로 지연 로딩
관리 UI 프리뷰：비례하여 크기 조정, 모바일에서 크롭될 수 있음
모든 이미지는 CDN（cdn.shopify.com）과 반응형 srcset 사용

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

빠른 색상 참조

프라이머리 CTA：Shopify 화이트（#FFFFFF）
페이지 배경：보이드 블랙（#000000）
카드 서피스：딥 틸（#02090A）
섹션 배경：다크 포레스트（#061A1C）
올라온 배경：포레스트（#102620）
강조색：네온 그린（#36F4A4）
본문 텍스트：화이트（#FFFFFF）
뮤트 텍스트：뮤트（#A1A1AA）
다크 테두리：다크 카드 보더（#1E2C31）

예시 컴포넌트 프롬프트

「진짜 검정（#000000）배경에 96px/330 NeueHaasGrotesk 흰색 헤드라인, 20px/500의 #A1A1AA 서브타이틀, 두 개의 필 버튼（화이트 필 9999px 반경과 2px 흰색 테두리 고스트）을 가진 히어로 섹션을 만드세요」
「딥 틸（#02090A）위에 1px #1E2C31 테두리, 12px 반경, 다층 그림자（1px 링 + 2px/4px/8px 블러, 10% 블랙）를 가지고, 32px/360 흰색 헤딩과 18px/400 #A1A1AA 본문 텍스트를 담은 피처 카드를 디자인하세요」
「다크 포레스트（#061A1C）위에 96px/750 흰색 숫자（NeueHaasGrotesk）, 16px/400 #A1A1AA 설명 레이블, 통계 블록 사이에 64px의 넉넉한 간격을 가진 통계 섹션을 구축하세요」
「투명한 배경（스크롤 시 #102620이 됨）, 왼쪽에 흰색 Shopify 로고, 18px/500 흰색 내비 링크（0.72px 자간）, 오른쪽에 흰색 필 「Start for free」 버튼을 가진 스티키 내비를 만드세요」
「rgba(255,255,255,0.2) 서리 유리 배경, 4px 반경, 12px 16px 패딩, 16px 흰색 텍스트를 가진 태그/배지를 디자인하세요——어두운 카드 서피스 위에 떠 있습니다」

반복 작업 가이드

이 디자인 시스템으로 생성된 기존 화면을 개선할 때：

한 번에 하나의 컴포넌트에 집중한다
이 문서의 구체적인 색상 이름과 16진수 코드를 참조한다
기억하세요：이것은 다크 퍼스트 디자인——밝은 표면은 예외이지 규칙이 아니다
디스플레이 텍스트는 항상 깃털처럼 가볍게 느껴져야 한다（굵기 330-400）——무겁게 보이면 굵기를 줄인다
네온 그린（#36F4A4）은 소중하다——포커스와 강조에만 절약해서 사용한다
다크 서피스 계층（블랙 → 딥 틸 → 다크 포레스트 → 포레스트）이 미묘한 깊이를 만든다
그림자는 다층으로 이루어져 있다——단일 box-shadow 값으로는 Shopify 카드의 느낌을 재현할 수 없다
ss03 OpenType 기능은 타이포그래피 일관성을 위해 모든 텍스트에서 활성화되어야 한다

24 KiB Raw Blame History Unescape Escape