AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载导读本文围绕 open-design 仓库中内置的Shopify 品牌设计系统包design-systems/shopify/展开完整讲解这套以深色优先的电影感电商视觉语言为核心的设计规范从深青绿底色分层、超细字重展示排版、霓虹绿强调色到全圆角胶囊按钮、多层阴影与 8px 间距系统并延伸至 Tokens 落地实现tokens.css、参考组件components.html、Tailwind v4 映射tailwind-v4.css以及面向 AI Agent 的提示指南。读完本文你将掌握如何在 OpenDesign 的 Design System 工作流中理解、引用并落地这套 Shopify 风格的设计系统包括完整的色彩十六进制值、排版字号/字重表、组件样式参数与可直接复制的示例提示词。说明本文描述的视觉语言以仓库内置设计规范文档 design-systems/shopify/DESIGN-zh-tw.md 为骨架其源码佐证来自同一包内的 tokens.css 与 components.html。根据 source/evidence.md 的声明该包源自 OpenDesign 策展的内置 fixturebundled fixture并非对上游品牌官网的实时抓取因此本文所有数值均以仓库内规范与代码为准。1. 设计系统包的整体结构在深入了解视觉语言之前先了解这套设计系统在 open-design 仓库中的组织方式。根据 design-systems/README.mddesign-systems/下每个子目录都是一个可移植的设计系统包其最小机器可读结构为design-systems/slug/ ├── manifest.json ├── DESIGN.md └── tokens.cssShopify 包是包含更丰富文件Design System 2.0 形态的完整示例实际文件清单为见 manifest.jsondesign-systems/shopify/ ├── manifest.json # 发现元数据、来源声明、文件路径 ├── DESIGN.md # 面向 Agent 的权威设计散文本主题正体中文版为 DESIGN-zh-tw.md ├── DESIGN-zh-tw.md # 本指南对应的正体中文设计规范 ├── USAGE.md # Agent 阅读顺序与使用约定 ├── tokens.css # 编译后的语义 Token 样式表唯一事实来源 ├── design-tokens.json # 派生出的 Design Tokens JSON ├── tailwind-v4.css # 派生出的 Tailwind v4 映射 ├── components.html # 独立组件 fixture英雄区/卡片/统计/表单等 ├── components.manifest.json # 派生的组件与 Token 索引 ├── source/ │ ├── evidence.md # 来源证据声明 │ ├── tokens.source.json # 来源 Token │ └── token-contract.report.json # Token 契约报告 └── preview/ ├── colors.html # 色彩预览页 ├── typography.html # 排版预览页 └── spacing.html # 间距预览页依据 USAGE.md 的约定使用该包的正确顺序是先读USAGE.md理解包契约再读DESIGN.md即本指南对应的设计散文理解视觉意图与反模式随后把tokens.css粘贴到第一个 artifact 的style块中再编写组件 CSS组件层参考components.manifest.json与components.html视觉核对可打开preview/页面。此外 manifest.json 还声明了craft建议color与accessibility-baseline表示该包建议配合仓库中的 craft/color.md 与 craft/accessibility-baseline.md 校验规范使用。2. 视觉主题与氛围根据 DESIGN-zh-tw.md 的界定这套 Shopify 设计语言的核心是深色优先的数位剧场整个体验在近黑色表面上展开表面带有深邃森林绿的最微弱低语#02090A、#061A1C、#102620营造出夜间科技发布会式氛围。这种黑暗并非冷酷的企业感而是像坐在黑暗礼堂前排的温暖包覆感。Key Characteristics关键特征深色优先设计带有深邃森林青绿色底调非纯黑色超细展示排版字重 330以纪念碑式尺寸96px创造飘逸存在感霓虹绿#36F4A4作为黑暗中单一的高能强调色完整圆角按钮9999px 圆角半径作为主要互动形状分层的多级盒阴影创造摄影般的深度感产品截图嵌入深色 UI 环境中与周围黑暗融为一体基于锌色的中性色阶处理文字层次——在冷暖之间取得平衡这一视觉意图在 tokens.css 头部注释中被总结为三句话黑暗即剧场深青绿表面分层、NeueHaasGrotesk 可变字体在 96px 纪念碑尺度上的不可能轻盈、以及霓虹绿是唯一的高能强调色仅用于焦点环与强调高亮。这三句注释与 components.html 的meta description完全一致说明视觉规范与代码实现是相互印证的。3. 色彩面板与用途3.1 主色Shopify 白#FFFFFF深色表面上的主要文字、按鈕填充、高对比度元素Shopify 黑#000000页面主背景、白色按钮上的文字、最大对比度基础--color-shade-1003.2 辅助色与强调色霓虹绿#36F4A4标志性强调色——焦点环、互动高亮、启用状态指示器电子感与生物发光感芦荟绿#C1FBD4装饰性背景、氛围卡片的柔和绿色渲染--color-aloe-10开心果绿#D4F9E0细微表面差异化的最浅绿色调--color-pistachio-103.3 表面与背景色名称色值用途虚空黑#000000根页面背景——真正的黑色以获得最大深度深青绿#02090A卡片表面、内容容器——带有绿色底调的近黑色深森林绿#061A1C具有明显绿色特征的区块背景森林绿#102620提升的深色表面、页首背景——最温暖的深色调深色卡片边框#1E2C31深色表面上的卡片边框细微的边界定义3.4 中性色与文字色锌色阶名称色值用途Shade-30#D4D4D8最浅中性色深色上几乎不可见的边框--color-shade-30静默文字#A1A1AA次级文字、元数据、描述——安静的声音Shade-50#71717A三级文字、时间戳、最不重要的信息--color-shade-50Shade-60#52525B停用文字、装饰性中性色--color-shade-60Shade-70#3F3F46细微分隔线几乎不可见的 UI 边界--color-shade-70浅色边框#E4E4E7浅色表面上的边框罕用——仅出现在浅色模态框中3.5 语义色与链接色Link Muted#9797A2带下划线装饰的静默链接文字Link Sage#9DABAD青绿色调的静默链接Link Lavender#BDBDCA较浅的链接变体Link Mint#99B3AD主题区块的绿色调链接变体3.6 渐变系统深青绿渲染从#102620中心到#02090A边缘的径向渐变——用于产品展示区后方绿色氛围英雄区块后方细微的绿色调环境渐变在不使用纯色的情况下创造深度聚光灯亮度集中区域逐渐消退至黑色——创造发布会风格的演示照明效果3.7 Token 落地从设计语言到 CSS 变量上述色彩体系在 tokens.css 中被精确绑定为语义 Token。以下是实现中的关键映射对应:root块:root { /* Surface 表面 */ --bg: #000000; /* void — 真正黑色根背景 */ --surface: #02090a; /* deep teal — 卡片表面 */ --surface-warm: #061a1c; /* dark forest — 区块背景 */ /* Foreground 前景 */ --fg: #ffffff; /* 深色画布上唯一的文字颜色 */ --fg-2: #ffffff; /* 与 fg 相同深色画布不分二级墨色 */ --muted: #a1a1aa; /* 静默灰 — 次级文字 */ --meta: #71717a; /* shade-50 — 时间戳、三级信息 */ /* Border 边框 */ --border: #1e2c31; /* 深色卡片边框 */ --border-soft: #3f3f46; /* shade-70 — 细微分隔线 */ /* Accent 强调色 */ --accent: #36f4a4; /* 霓虹绿 — 仅用于焦点环与强调高亮 */ --accent-on: #000000; /* 霓虹绿上的黑色文字 */ --accent-hover: #2de097; /* 悬停时稍深的霓虹绿 */ --accent-active: color-mix(in oklab, var(--accent), black 14%); /* Semantic 语义色 */ --success: #36f4a4; --warn: #eab308; --danger: #dc2626; }注意两个实现细节--fg-2与--fg相同这是因为深色画布上只有白色一种墨色--accent-hover与--accent-active提供了强调色的交互状态其中 active 状态使用了 CSScolor-mix(in oklab, ...)计算在 components.manifest.json 的 56 个已声明 Token 中被完整登记。由 design-tokens.json 的派生报告可知该包共声明 56 个 Token全部有源码背书sourceBackedTokens56其中 26 个为 A1 身份层、18 个为 A1 结构层、8 个为 A1 身份层--bg、--surface等、4 个为 B-slot 槽位层契约评分为 100、等级为 excellent。每个 Token 均标注了其来源行号例如--bg的来源为tokens.css:36、--surface为tokens.css:37——这意味着 Token 契约与样式表声明一一对应可在审计时逐条回溯。4. 排版规则4.1 字体族展示字体NeueHaasGrotesk精致的 Helvetica 后裔可变字体备用字体Helvetica、Arial、sans-serifOpenType 特性ss03风格集 3——独特的字形替代方案可用字重330、360、400、500、750可变用于所有标题、英雄文字和大型展示元素内文字体Inter-Variable备用字体Helvetica、Arial、sans-serifOpenType 特性ss03可用字重400、420、450、500、550可变用于内文文字、链接、按钮、UI 元素等宽字体ui-monospace备用字体SFMono-Regular、Menlo、Monaco、Consolas、Liberation Mono、Courier New用于代码片段、数据标签、技术内容在 tokens.css 中三个字体族被绑定为--font-display: NeueHaasGrotesk, Helvetica Neue, Helvetica, Arial, sans-serif; --font-body: Inter Variable, Inter, Helvetica Neue, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;4.2 层级结构完整字号表角色大小字重行高字距备注Display XL96px4001.00—NeueHaasGrotesk英雄标题ss03Display XL Bold90.74px7501.004.54pxNeueHaasGrotesk强调展示Display XL Tracked96px4001.002.4pxNeueHaasGrotesk间距展示Display Light96px3300.96—NeueHaasGrotesk飘逸展示Heading 170px3301.00—NeueHaasGrotesk区块标题Heading 255px3301.16—NeueHaasGrotesk子区块Heading 348px3301.14—NeueHaasGrotesk功能标题Heading 432px3601.140.32pxNeueHaasGrotesk卡片标题Heading 528px5001.280.42pxNeueHaasGrotesk小标题Heading 624px4001.140.36pxNeueHaasGrotesk次要标题Body Large20px5001.400.3pxNeueHaasGrotesk / Inter引言段落Body18px4001.56—Inter-Variable标准内文Body Medium18px5501.56—Inter-Variable强调内文Body Small16px4001.50—Inter / NeueHaasGrotesk紧凑内文Body Small Medium16px4201.50—Inter-Variable轻微强调Button16px4001.50—NeueHaasGroteskCTA 文字Nav Link18px5001.250.72pxNeueHaasGrotesk导航项目Caption14px5001.490.28pxNeueHaasGrotesk / Inter元数据Caption Medium14px5501.490.28pxInter-Variable强调说明文字Overline15.36px4001.501.54pxNeueHaasGrotesk宽字距标签Micro13px5001.50-0.13pxInter紧字距小文字Label12px4001.200.72pxInter大写标签Code16px4001.50—ui-monospace大写代码区块Code Small12px4001.33—ui-monospace大写行内代码在 Token 层字号尺度被收敛为--text-xs12px到--text-4xl96px共 9 档12pxlabel、14pxcaption、18pxbody、20pxbody large、32pxheading 4、48pxheading 3、70pxheading 1、96pxdisplay XL。行高方面--leading-tight: 1.00对应 96px Display XL--leading-body: 1.56对应内文--tracking-display: 0em表示 NeueHaasGrotesk 在展示尺度下字距中性而 0.32px2.4px 的正向字距存在于较小的 NeueHaas 尺寸上由 components.html 内联设置。4.3 排版原则Shopify 的排版是可变字体精准度的大师级示范。展示层几乎完全使用 330-400 的字重——羽毛般轻盈的文字看起来像投影光一样悬浮于深色背景之上。这与大多数 SaaS 网站采取的粗重方式截然相反别人大声呼喊Shopify 却在巨大尺度上低语。96px 标题配以 330 字重创造出巨大尺寸与纤细笔画的悖论既有纪念碑感又有脆弱感。ss03OpenType 特性启用了一个风格集赋予特定字符可能是 a、g 和某些数字更精致的外观使 Shopify 的排版有别于标准 Helvetica Neue 的用法。Inter Variable 以外科手术般的精准处理内文层使用 420 和 550 等存在于传统档位之间的字重——每段文字都拥有其所需的准确视觉重量。在实现层面ss03是通过font-feature-settings: ss03全局启用的。components.html 的body规则中明确写入该声明并注释 ss03 on all text per brand spech1/h2/h3、.btn、.stat-number等规则也分别重复声明确保所有文本节点一致启用。5. 元件样式5.1 按钮主要按钮白色填充背景白色#FFFFFF文字黑色#000000边框2px 透明实线圆角半径完整圆角9999px内边距12px 26px 12px 16px不对称——右侧更多内边距以获得视觉平衡悬停轻微透明度降低或背景偏移焦点2px#36F4A4霓虹绿外框过渡all 200ms ease次要按钮幽灵/轮廓背景透明文字白色#FFFFFF边框2px 白色实线#FFFFFF圆角半径完整圆角9999px内边距12px 26px 12px 16px悬停填充为白色背景配黑色文字焦点2px#36F4A4外框徽章/标签中性填充背景rgba(255, 255, 255, 0.2)雾面玻璃文字白色#FFFFFF边框无圆角半径轻微圆角4px内边距12px 16px字体16px 常规在 components.html 中按钮的实现如下与规范一一对应.btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 12px 26px 12px 16px; /* 不对称内边距 */ border-radius: var(--radius-sm); /* 9999px 全圆角胶囊 */ font-family: var(--font-display); font-size: var(--text-base); font-weight: 400; font-feature-settings: ss03; line-height: 1.5; cursor: pointer; border: 2px solid transparent; transition: all var(--motion-base) var(--ease-standard); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* 霓虹绿焦点环 */ .btn-primary { background: var(--fg); color: var(--bg); } .btn-primary:hover { opacity: 0.9; } .btn-ghost { background: transparent; color: var(--fg); border-color: var(--fg); } .btn-ghost:hover { background: var(--fg); color: var(--bg); }值得注意的是焦点环不是border或outline而是通过box-shadow: var(--focus-ring)即0 0 0 2px #36f4a4实现的 2px 霓虹绿外框——这与设计规范中的焦点2px#36F4A4外框精确吻合。5.2 卡片与容器背景深色页面上的深青绿#02090A边框1px 实线#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 8pxrgba(255,255,255,0.03) 0px 1px 0px inset内嵌白色高亮创造细微的顶部边缘发光效果悬停阴影扩展卡片可能略微变亮过渡box-shadow 300ms easetransform 200ms ease在 tokens.css 中这套多层级阴影被封装为--elev-raised--elev-raised: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, /* 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; /* 内嵌顶部发光 */5.3 输入框与表单背景透明或深森林绿#061A1C文字白色#FFFFFF边框1px 实线#3F3F46Shade-70圆角半径8px内边距12px 16px焦点2px 实线#36F4A4霓虹绿焦点环占位符Shade-50#71717A过渡border-color 200ms easecomponents.html 中.field input的焦点实现同时切换border-color: var(--accent)与box-shadow: var(--focus-ring)即2px 实线霓虹绿 霓虹绿焦点环的双重反馈。5.4 导航列背景透明叠加在深色英雄区上滚动时变为森林绿#102620高度约 64px左侧Shopify 文字标志SVG深色背景上的白色中/右18px/500 NeueHaasGrotesk 导航链接白色字距 0.72pxCTA白色圆角按钮「Start for free」右侧次要 CTA带白色边框的幽灵按钮悬停链接变为静默文字#A1A1AA或出现下划线移动端汉堡菜单全屏深色遮罩层过渡滚动时背景 300ms ease5.5 图片处理产品截图嵌入深色 UI 环境中与周围黑暗融为一体管理界面预览展示在带细微卡片边框的深色背景上长宽比多样——英雄图片较宽约 16:9功能截图较灵活所有图片在深色容器内平铺——无亮色边框或外框延迟加载配以深色占位表面5.6 信任指标突出展示统计数据「15」年、「150M」买家数字以 NeueHaasGrotesk 展示级别显示合作伙伴/开发者生态系统专区深色主题的评价评论融入页面流程中统计数字在 components.html 中通过.stat-number实现font-family: var(--font-display)、font-size: var(--text-3xl)70px、font-weight: 750、line-height: 1.00并在特性区块中以 96px 展示尺度的#36F4A4霓虹绿数字展示品牌强调色与圆角值96px、#36F4A4、9999px。6. 版面配置原则6.1 间距系统基础单位8px标记值用途space-14px紧凑行内间距space-28px基础单位图标间距space-312px卡片内边距紧凑外边距space-416px标准元素内边距space-524px卡片间距区块内边距space-628px中等区块间距space-732px区块分隔space-836px大内边距space-940px主要区块内边距space-1064px英雄区块内边距大间距Token 层收敛为--space-14px到--space-1264px共 8 档4/8/12/16/24/28/36/64px并以--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px三个变量管理区块纵向节奏对应下方留白哲学的戏剧性区块间距。6.2 网格与容器最大容器宽度约 1280px居中英雄区全宽边到边的深色背景配置中文字功能区带文字和产品截图的双栏版面统计区块配大数字的水平版面水平内边距桌面 64px平板 32px移动端 16px网格间距主要内容块之间 24-32px对应 Token--container-max: 1280px--container-gutter-desktop: 64px、--container-gutter-tablet: 32px、--container-gutter-phone: 16px。components.html 中.container以max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop)实现并在 1023px 与 639px 断点降级。6.3 留白哲学Shopify 的留白策略是戏剧性的。区块之间以大片深色空间分隔——80px 到 120px 的纯黑呼吸空间——创造出简报的节奏而不是网页的节奏。每个内容块都是主题演讲式滚动中独立的投影片。在区块内部间距更紧凑也更有意图在广阔的虚空中创造焦点密度。宏观层面的空旷与微观层面的精准之间的对比赋予网站其电影般的韵律。6.4 圆角半径尺度值应用场景4px标签、徽章、微型元素8px标准卡片、输入框、影片容器12px特色卡片、图片容器、按钮非圆角胶囊20px顶部圆角卡片20px 20px 0 0模态框页首340px大型圆角装饰元素9999px圆角胶囊按钮、圆角胶囊徽章、导航元素Token 映射为--radius-sm: 9999px全圆角胶囊——所有 CTA 按钮、--radius-md: 8px标准卡片与输入框、--radius-lg: 12px特色卡片、--radius-pill: 9999px。其中注释明确写道所有主要 CTA 使用全圆角胶囊——不可妥协的品牌身份。7. 深度与层级层级处理方式用途基础无阴影深色表面默认页面背景细微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)。在深色背景上阴影从已经很深的表面继续加深因此阴影更像环境遮蔽而不是传统的高度——卡片看起来略微下沉入表面而不是漂浮在其上。在 Token 层--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised多层级叠加、--focus-ring: 0 0 0 2px #36f4a4构成了完整的层级体系。装饰性深度深青绿渐变英雄区块和产品展示区后方的环境径向渲染聚光灯效果从中心亮区消退至黑色的区域营造发布会式戏剧照明边缘发光通过内嵌盒阴影在深色卡片上形成细微的亮色边缘绿色氛围光晕背景渐变中的微弱绿色调呼应品牌强调色8. 该做与不该做该做使用深青绿-黑色表面层次虚空黑 → 深青绿 → 深森林绿 → 森林绿来营造深度保持展示排版在 330-400 字重——飘逸的轻盈感是设计的标志将霓虹绿#36F4A4专门用于焦点状态和关键强调高亮为所有主要 CTA 按钮套用 9999px 圆角半径——完整圆角胶囊不可妥协为卡片高度使用多层阴影系统——单一阴影看起来平淡在所有文字中保持ss03OpenType 特性——这是排版身份的一部分内文使用 Inter Variable标题使用 NeueHaasGrotesk——不要混淆它们的角色在区块之间创造戏剧性间距80px以获得电影般的节奏不该做不要在深色背景上将纯黑色#000000用于文字——只用白色#FFFFFF不要引入暖色橙色、红色、黄色——色盘严格限于冷色绿色、青绿色、中性色不要为 NeueHaasGrotesk 内文使用高于 500 的字重——重字重会破坏飘逸感不要将绿色强调色套用于大面积区域——霓虹绿只用于小而精准的高亮不要在互动元素上使用尖角0px 圆角——所有元素都应有圆角不要添加亮色背景——深色主题是根本不是可选的不要使用单层盒阴影——叠加方式是整个系统不要将内文的行高设定在 1.56 以上——Shopify 的文字相对紧凑不要在同等大小/角色下混用 NeueHaasGrotesk 和 Inter——它们的字重尺度不同不要为标题设定低于 0 的字距——Shopify 标题的字距为中性或正值这些约束在 USAGE.md 中也有对应强调避免在复制的:rootToken 块之外使用原始十六进制值避免独立于tokens.css重新定义 Tailwind 或 design-token 值。9. 响应式行为9.1 断点名称宽度主要变化移动端640px单栏汉堡导航展示文字缩至 48px16px 内边距平板640-1024px双栏网格开始展示文字 70px32px 内边距桌面1024-1440px完整版面展开导航96px 展示文字64px 内边距大桌面1440px最大宽度容器居中增加区块间距在 components.html 中容器与区块内边距的响应式降级与上述断点一致1023px以下.container使用--container-gutter-tablet32px、section使用--section-y-tablet64px639px以下使用--container-gutter-phone16px与--section-y-phone40px。hero-grid在 1023px 以下折叠为单栏stats-grid在 639px 以下折叠为垂直堆叠。9.2 触控目标最小触控目标44x44pxWCAG AAA圆角胶囊按钮最低 48px 高度配慷慨的水平内边距导航链接44px 触控区域卡片表面链接时整张卡片可点击9.3 折叠策略导航列水平全链接 → 1024px 以下变汉堡菜单Logo 和 CTA 按钮保持可见英雄区块96px 展示文字 → 平板 70px → 移动端 48px保持单栏居中对齐功能区文字图片双栏 → 768px 以下叠加为单栏统计水平列 → 移动端叠加为垂直区块内边距随视口缩小从 64px → 40px → 24px → 16px卡片网格 → 叠加移动端保持全宽9.4 图片行为产品截图在深色容器内响应式显示保持长宽比英雄图片所有断点全宽延迟加载配深色占位符管理 UI 预览按比例缩放移动端可能裁切所有图片使用 CDNcdn.shopify.com配响应式 srcset10. 智能代理提示指南10.1 快速颜色参考用途取值主要 CTAShopify 白#FFFFFF页面背景虚空黑#000000卡片表面深青绿#02090A区块背景深森林绿#061A1C提升背景森林绿#102620强调色霓虹绿#36F4A4内文文字白色#FFFFFF静默文字静默灰#A1A1AA深色边框深色卡片边框#1E2C3110.2 示例组件提示以下提示词直接来自设计规范可在调用 Agent 生成界面时使用「在真实黑色#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 Logo18px/500 白色导航链接配 0.72px 字距右侧白色圆角胶囊按钮「Start for free」」「设计一个带 rgba(255,255,255,0.2) 雾面玻璃背景、4px 圆角、12px 16px 内边距、16px 白色文字的标签/徽章——漂浮在深色卡片表面上」10.3 迭代指南使用此设计系统完善已生成的界面时每次专注于一个元件引用本文件中的具体颜色名称和十六进制代码记住这是深色优先设计——浅色表面是例外不是规则展示文字应始终感觉羽毛轻盈字重 330-400——如果看起来很重降低字重霓虹绿#36F4A4是珍贵的——只为焦点和强调色节俭使用深色表面层次黑色 → 深青绿 → 深森林绿 → 森林绿创造细微深度阴影是多层的——单个box-shadow值无法捕捉 Shopify 卡片的感觉ss03OpenType 特性必须在所有文字上启用以保持排版一致性11. 在 OpenDesign 工作流中的落地方式这套 Shopify 设计系统在 open-design 中不是孤立文档而是可被运行时消费的完整包。依据 design-systems/README.md 与 manifest.json提示词组合在 Design System 界面或受支持的建项目流程中选中该包后其设计上下文USAGE.md、tokens.css、组件信息、导入模式、craft 绑定会被组合进 Agent 提示词。派生文件为缓存而非竞争性事实来源components.manifest.json由components.html与tokens.css派生design-tokens.json由 Token 契约报告派生且必须与tokens.css一致tailwind-v4.css由tokens.css派生。修改时以tokens.css为唯一事实来源。Tailwind v4 使用方式tailwind-v4.css 通过import ./tokens.css引入 Token并在theme块中将语义 Token 映射为 Tailwind 工具类如--color-bg: var(--bg)、--radius-sm: var(--radius-sm)、--shadow-raised: var(--elev-raised)、--spacing-section-desktop: var(--section-y-desktop)使组件可以直接使用bg-bg、text-muted、rounded-sm、shadow-raised等类名。契约校验source/token-contract.report.json将每个 TOKEN_SCHEMA 绑定映射回tokens.css的声明行design-tokens.json的派生报告给出 56 个 Token、全部有源码背书、评分 100 的审计结论可作为包质量验证的依据。12. 结语Shopify 设计系统包是 open-design 中深色优先 超细展示排版 单点霓虹绿强调这一设计语言的完整实现从 DESIGN-zh-tw.md 的视觉意图与反模式到 tokens.css 的 56 个语义 Token、components.html 的可运行组件 fixture、tailwind-v4.css 的框架映射再到 preview/ 目录的预览页colors/typography/spacing。无论是人工复刻这套电商视觉语言还是通过 Agent 提示词批量生成深色电影感界面都可以以本包为基准先继承规范中的数值与约束再通过 Token 层保证跨品牌切换的可靠性USAGE.md 明确要求保留 schema Token 名称以保证跨品牌切换稳定最终产出与品牌身份一致的高保真界面。赞分享AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载相关推荐OpenDesign 仓库 Shopify 设计系统实战指南黑暗优先的电商视觉语言、令牌化实现与 Agent 提示词规范OpenDesign 仓库 Shopify 设计系统实战指南黑暗优先的电商视觉语言、令牌化实现与 Agent 提示词规范 本文基于 OpenDesign 仓库AI 应用人工智能AI 技能设计系统媒体生成用 OpenDesign 复刻 Discord 设计语言Blurple 暗色优先设计系统的 Tokens、排版与组件实战用 OpenDesign 复刻 Discord 设计语言Blurple 暗色优先设计系统的 Tokens、排版与组件实战 导读 本篇技术指南以 OpenDesAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中的 Shopify 设计系统实战暗色优先的影院式电商界面设计指南OpenDesign 中的 Shopify 设计系统实战暗色优先的影院式电商界面设计指南 本文以 OpenDesign 仓库中 design systems/AI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 OpenDesign Shopify 设计系统实战指南：深色优先电商视觉语言的 Tokens、排版与 Agent 提示规范
AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载导读本文围绕 open-design 仓库中内置的Shopify 品牌设计系统包design-systems/shopify/展开完整讲解这套以深色优先的电影感电商视觉语言为核心的设计规范从深青绿底色分层、超细字重展示排版、霓虹绿强调色到全圆角胶囊按钮、多层阴影与 8px 间距系统并延伸至 Tokens 落地实现tokens.css、参考组件components.html、Tailwind v4 映射tailwind-v4.css以及面向 AI Agent 的提示指南。读完本文你将掌握如何在 OpenDesign 的 Design System 工作流中理解、引用并落地这套 Shopify 风格的设计系统包括完整的色彩十六进制值、排版字号/字重表、组件样式参数与可直接复制的示例提示词。说明本文描述的视觉语言以仓库内置设计规范文档 design-systems/shopify/DESIGN-zh-tw.md 为骨架其源码佐证来自同一包内的 tokens.css 与 components.html。根据 source/evidence.md 的声明该包源自 OpenDesign 策展的内置 fixturebundled fixture并非对上游品牌官网的实时抓取因此本文所有数值均以仓库内规范与代码为准。1. 设计系统包的整体结构在深入了解视觉语言之前先了解这套设计系统在 open-design 仓库中的组织方式。根据 design-systems/README.mddesign-systems/下每个子目录都是一个可移植的设计系统包其最小机器可读结构为design-systems/slug/ ├── manifest.json ├── DESIGN.md └── tokens.cssShopify 包是包含更丰富文件Design System 2.0 形态的完整示例实际文件清单为见 manifest.jsondesign-systems/shopify/ ├── manifest.json # 发现元数据、来源声明、文件路径 ├── DESIGN.md # 面向 Agent 的权威设计散文本主题正体中文版为 DESIGN-zh-tw.md ├── DESIGN-zh-tw.md # 本指南对应的正体中文设计规范 ├── USAGE.md # Agent 阅读顺序与使用约定 ├── tokens.css # 编译后的语义 Token 样式表唯一事实来源 ├── design-tokens.json # 派生出的 Design Tokens JSON ├── tailwind-v4.css # 派生出的 Tailwind v4 映射 ├── components.html # 独立组件 fixture英雄区/卡片/统计/表单等 ├── components.manifest.json # 派生的组件与 Token 索引 ├── source/ │ ├── evidence.md # 来源证据声明 │ ├── tokens.source.json # 来源 Token │ └── token-contract.report.json # Token 契约报告 └── preview/ ├── colors.html # 色彩预览页 ├── typography.html # 排版预览页 └── spacing.html # 间距预览页依据 USAGE.md 的约定使用该包的正确顺序是先读USAGE.md理解包契约再读DESIGN.md即本指南对应的设计散文理解视觉意图与反模式随后把tokens.css粘贴到第一个 artifact 的style块中再编写组件 CSS组件层参考components.manifest.json与components.html视觉核对可打开preview/页面。此外 manifest.json 还声明了craft建议color与accessibility-baseline表示该包建议配合仓库中的 craft/color.md 与 craft/accessibility-baseline.md 校验规范使用。2. 视觉主题与氛围根据 DESIGN-zh-tw.md 的界定这套 Shopify 设计语言的核心是深色优先的数位剧场整个体验在近黑色表面上展开表面带有深邃森林绿的最微弱低语#02090A、#061A1C、#102620营造出夜间科技发布会式氛围。这种黑暗并非冷酷的企业感而是像坐在黑暗礼堂前排的温暖包覆感。Key Characteristics关键特征深色优先设计带有深邃森林青绿色底调非纯黑色超细展示排版字重 330以纪念碑式尺寸96px创造飘逸存在感霓虹绿#36F4A4作为黑暗中单一的高能强调色完整圆角按钮9999px 圆角半径作为主要互动形状分层的多级盒阴影创造摄影般的深度感产品截图嵌入深色 UI 环境中与周围黑暗融为一体基于锌色的中性色阶处理文字层次——在冷暖之间取得平衡这一视觉意图在 tokens.css 头部注释中被总结为三句话黑暗即剧场深青绿表面分层、NeueHaasGrotesk 可变字体在 96px 纪念碑尺度上的不可能轻盈、以及霓虹绿是唯一的高能强调色仅用于焦点环与强调高亮。这三句注释与 components.html 的meta description完全一致说明视觉规范与代码实现是相互印证的。3. 色彩面板与用途3.1 主色Shopify 白#FFFFFF深色表面上的主要文字、按鈕填充、高对比度元素Shopify 黑#000000页面主背景、白色按钮上的文字、最大对比度基础--color-shade-1003.2 辅助色与强调色霓虹绿#36F4A4标志性强调色——焦点环、互动高亮、启用状态指示器电子感与生物发光感芦荟绿#C1FBD4装饰性背景、氛围卡片的柔和绿色渲染--color-aloe-10开心果绿#D4F9E0细微表面差异化的最浅绿色调--color-pistachio-103.3 表面与背景色名称色值用途虚空黑#000000根页面背景——真正的黑色以获得最大深度深青绿#02090A卡片表面、内容容器——带有绿色底调的近黑色深森林绿#061A1C具有明显绿色特征的区块背景森林绿#102620提升的深色表面、页首背景——最温暖的深色调深色卡片边框#1E2C31深色表面上的卡片边框细微的边界定义3.4 中性色与文字色锌色阶名称色值用途Shade-30#D4D4D8最浅中性色深色上几乎不可见的边框--color-shade-30静默文字#A1A1AA次级文字、元数据、描述——安静的声音Shade-50#71717A三级文字、时间戳、最不重要的信息--color-shade-50Shade-60#52525B停用文字、装饰性中性色--color-shade-60Shade-70#3F3F46细微分隔线几乎不可见的 UI 边界--color-shade-70浅色边框#E4E4E7浅色表面上的边框罕用——仅出现在浅色模态框中3.5 语义色与链接色Link Muted#9797A2带下划线装饰的静默链接文字Link Sage#9DABAD青绿色调的静默链接Link Lavender#BDBDCA较浅的链接变体Link Mint#99B3AD主题区块的绿色调链接变体3.6 渐变系统深青绿渲染从#102620中心到#02090A边缘的径向渐变——用于产品展示区后方绿色氛围英雄区块后方细微的绿色调环境渐变在不使用纯色的情况下创造深度聚光灯亮度集中区域逐渐消退至黑色——创造发布会风格的演示照明效果3.7 Token 落地从设计语言到 CSS 变量上述色彩体系在 tokens.css 中被精确绑定为语义 Token。以下是实现中的关键映射对应:root块:root { /* Surface 表面 */ --bg: #000000; /* void — 真正黑色根背景 */ --surface: #02090a; /* deep teal — 卡片表面 */ --surface-warm: #061a1c; /* dark forest — 区块背景 */ /* Foreground 前景 */ --fg: #ffffff; /* 深色画布上唯一的文字颜色 */ --fg-2: #ffffff; /* 与 fg 相同深色画布不分二级墨色 */ --muted: #a1a1aa; /* 静默灰 — 次级文字 */ --meta: #71717a; /* shade-50 — 时间戳、三级信息 */ /* Border 边框 */ --border: #1e2c31; /* 深色卡片边框 */ --border-soft: #3f3f46; /* shade-70 — 细微分隔线 */ /* Accent 强调色 */ --accent: #36f4a4; /* 霓虹绿 — 仅用于焦点环与强调高亮 */ --accent-on: #000000; /* 霓虹绿上的黑色文字 */ --accent-hover: #2de097; /* 悬停时稍深的霓虹绿 */ --accent-active: color-mix(in oklab, var(--accent), black 14%); /* Semantic 语义色 */ --success: #36f4a4; --warn: #eab308; --danger: #dc2626; }注意两个实现细节--fg-2与--fg相同这是因为深色画布上只有白色一种墨色--accent-hover与--accent-active提供了强调色的交互状态其中 active 状态使用了 CSScolor-mix(in oklab, ...)计算在 components.manifest.json 的 56 个已声明 Token 中被完整登记。由 design-tokens.json 的派生报告可知该包共声明 56 个 Token全部有源码背书sourceBackedTokens56其中 26 个为 A1 身份层、18 个为 A1 结构层、8 个为 A1 身份层--bg、--surface等、4 个为 B-slot 槽位层契约评分为 100、等级为 excellent。每个 Token 均标注了其来源行号例如--bg的来源为tokens.css:36、--surface为tokens.css:37——这意味着 Token 契约与样式表声明一一对应可在审计时逐条回溯。4. 排版规则4.1 字体族展示字体NeueHaasGrotesk精致的 Helvetica 后裔可变字体备用字体Helvetica、Arial、sans-serifOpenType 特性ss03风格集 3——独特的字形替代方案可用字重330、360、400、500、750可变用于所有标题、英雄文字和大型展示元素内文字体Inter-Variable备用字体Helvetica、Arial、sans-serifOpenType 特性ss03可用字重400、420、450、500、550可变用于内文文字、链接、按钮、UI 元素等宽字体ui-monospace备用字体SFMono-Regular、Menlo、Monaco、Consolas、Liberation Mono、Courier New用于代码片段、数据标签、技术内容在 tokens.css 中三个字体族被绑定为--font-display: NeueHaasGrotesk, Helvetica Neue, Helvetica, Arial, sans-serif; --font-body: Inter Variable, Inter, Helvetica Neue, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;4.2 层级结构完整字号表角色大小字重行高字距备注Display XL96px4001.00—NeueHaasGrotesk英雄标题ss03Display XL Bold90.74px7501.004.54pxNeueHaasGrotesk强调展示Display XL Tracked96px4001.002.4pxNeueHaasGrotesk间距展示Display Light96px3300.96—NeueHaasGrotesk飘逸展示Heading 170px3301.00—NeueHaasGrotesk区块标题Heading 255px3301.16—NeueHaasGrotesk子区块Heading 348px3301.14—NeueHaasGrotesk功能标题Heading 432px3601.140.32pxNeueHaasGrotesk卡片标题Heading 528px5001.280.42pxNeueHaasGrotesk小标题Heading 624px4001.140.36pxNeueHaasGrotesk次要标题Body Large20px5001.400.3pxNeueHaasGrotesk / Inter引言段落Body18px4001.56—Inter-Variable标准内文Body Medium18px5501.56—Inter-Variable强调内文Body Small16px4001.50—Inter / NeueHaasGrotesk紧凑内文Body Small Medium16px4201.50—Inter-Variable轻微强调Button16px4001.50—NeueHaasGroteskCTA 文字Nav Link18px5001.250.72pxNeueHaasGrotesk导航项目Caption14px5001.490.28pxNeueHaasGrotesk / Inter元数据Caption Medium14px5501.490.28pxInter-Variable强调说明文字Overline15.36px4001.501.54pxNeueHaasGrotesk宽字距标签Micro13px5001.50-0.13pxInter紧字距小文字Label12px4001.200.72pxInter大写标签Code16px4001.50—ui-monospace大写代码区块Code Small12px4001.33—ui-monospace大写行内代码在 Token 层字号尺度被收敛为--text-xs12px到--text-4xl96px共 9 档12pxlabel、14pxcaption、18pxbody、20pxbody large、32pxheading 4、48pxheading 3、70pxheading 1、96pxdisplay XL。行高方面--leading-tight: 1.00对应 96px Display XL--leading-body: 1.56对应内文--tracking-display: 0em表示 NeueHaasGrotesk 在展示尺度下字距中性而 0.32px2.4px 的正向字距存在于较小的 NeueHaas 尺寸上由 components.html 内联设置。4.3 排版原则Shopify 的排版是可变字体精准度的大师级示范。展示层几乎完全使用 330-400 的字重——羽毛般轻盈的文字看起来像投影光一样悬浮于深色背景之上。这与大多数 SaaS 网站采取的粗重方式截然相反别人大声呼喊Shopify 却在巨大尺度上低语。96px 标题配以 330 字重创造出巨大尺寸与纤细笔画的悖论既有纪念碑感又有脆弱感。ss03OpenType 特性启用了一个风格集赋予特定字符可能是 a、g 和某些数字更精致的外观使 Shopify 的排版有别于标准 Helvetica Neue 的用法。Inter Variable 以外科手术般的精准处理内文层使用 420 和 550 等存在于传统档位之间的字重——每段文字都拥有其所需的准确视觉重量。在实现层面ss03是通过font-feature-settings: ss03全局启用的。components.html 的body规则中明确写入该声明并注释 ss03 on all text per brand spech1/h2/h3、.btn、.stat-number等规则也分别重复声明确保所有文本节点一致启用。5. 元件样式5.1 按钮主要按钮白色填充背景白色#FFFFFF文字黑色#000000边框2px 透明实线圆角半径完整圆角9999px内边距12px 26px 12px 16px不对称——右侧更多内边距以获得视觉平衡悬停轻微透明度降低或背景偏移焦点2px#36F4A4霓虹绿外框过渡all 200ms ease次要按钮幽灵/轮廓背景透明文字白色#FFFFFF边框2px 白色实线#FFFFFF圆角半径完整圆角9999px内边距12px 26px 12px 16px悬停填充为白色背景配黑色文字焦点2px#36F4A4外框徽章/标签中性填充背景rgba(255, 255, 255, 0.2)雾面玻璃文字白色#FFFFFF边框无圆角半径轻微圆角4px内边距12px 16px字体16px 常规在 components.html 中按钮的实现如下与规范一一对应.btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 12px 26px 12px 16px; /* 不对称内边距 */ border-radius: var(--radius-sm); /* 9999px 全圆角胶囊 */ font-family: var(--font-display); font-size: var(--text-base); font-weight: 400; font-feature-settings: ss03; line-height: 1.5; cursor: pointer; border: 2px solid transparent; transition: all var(--motion-base) var(--ease-standard); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* 霓虹绿焦点环 */ .btn-primary { background: var(--fg); color: var(--bg); } .btn-primary:hover { opacity: 0.9; } .btn-ghost { background: transparent; color: var(--fg); border-color: var(--fg); } .btn-ghost:hover { background: var(--fg); color: var(--bg); }值得注意的是焦点环不是border或outline而是通过box-shadow: var(--focus-ring)即0 0 0 2px #36f4a4实现的 2px 霓虹绿外框——这与设计规范中的焦点2px#36F4A4外框精确吻合。5.2 卡片与容器背景深色页面上的深青绿#02090A边框1px 实线#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 8pxrgba(255,255,255,0.03) 0px 1px 0px inset内嵌白色高亮创造细微的顶部边缘发光效果悬停阴影扩展卡片可能略微变亮过渡box-shadow 300ms easetransform 200ms ease在 tokens.css 中这套多层级阴影被封装为--elev-raised--elev-raised: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, /* 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; /* 内嵌顶部发光 */5.3 输入框与表单背景透明或深森林绿#061A1C文字白色#FFFFFF边框1px 实线#3F3F46Shade-70圆角半径8px内边距12px 16px焦点2px 实线#36F4A4霓虹绿焦点环占位符Shade-50#71717A过渡border-color 200ms easecomponents.html 中.field input的焦点实现同时切换border-color: var(--accent)与box-shadow: var(--focus-ring)即2px 实线霓虹绿 霓虹绿焦点环的双重反馈。5.4 导航列背景透明叠加在深色英雄区上滚动时变为森林绿#102620高度约 64px左侧Shopify 文字标志SVG深色背景上的白色中/右18px/500 NeueHaasGrotesk 导航链接白色字距 0.72pxCTA白色圆角按钮「Start for free」右侧次要 CTA带白色边框的幽灵按钮悬停链接变为静默文字#A1A1AA或出现下划线移动端汉堡菜单全屏深色遮罩层过渡滚动时背景 300ms ease5.5 图片处理产品截图嵌入深色 UI 环境中与周围黑暗融为一体管理界面预览展示在带细微卡片边框的深色背景上长宽比多样——英雄图片较宽约 16:9功能截图较灵活所有图片在深色容器内平铺——无亮色边框或外框延迟加载配以深色占位表面5.6 信任指标突出展示统计数据「15」年、「150M」买家数字以 NeueHaasGrotesk 展示级别显示合作伙伴/开发者生态系统专区深色主题的评价评论融入页面流程中统计数字在 components.html 中通过.stat-number实现font-family: var(--font-display)、font-size: var(--text-3xl)70px、font-weight: 750、line-height: 1.00并在特性区块中以 96px 展示尺度的#36F4A4霓虹绿数字展示品牌强调色与圆角值96px、#36F4A4、9999px。6. 版面配置原则6.1 间距系统基础单位8px标记值用途space-14px紧凑行内间距space-28px基础单位图标间距space-312px卡片内边距紧凑外边距space-416px标准元素内边距space-524px卡片间距区块内边距space-628px中等区块间距space-732px区块分隔space-836px大内边距space-940px主要区块内边距space-1064px英雄区块内边距大间距Token 层收敛为--space-14px到--space-1264px共 8 档4/8/12/16/24/28/36/64px并以--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px三个变量管理区块纵向节奏对应下方留白哲学的戏剧性区块间距。6.2 网格与容器最大容器宽度约 1280px居中英雄区全宽边到边的深色背景配置中文字功能区带文字和产品截图的双栏版面统计区块配大数字的水平版面水平内边距桌面 64px平板 32px移动端 16px网格间距主要内容块之间 24-32px对应 Token--container-max: 1280px--container-gutter-desktop: 64px、--container-gutter-tablet: 32px、--container-gutter-phone: 16px。components.html 中.container以max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop)实现并在 1023px 与 639px 断点降级。6.3 留白哲学Shopify 的留白策略是戏剧性的。区块之间以大片深色空间分隔——80px 到 120px 的纯黑呼吸空间——创造出简报的节奏而不是网页的节奏。每个内容块都是主题演讲式滚动中独立的投影片。在区块内部间距更紧凑也更有意图在广阔的虚空中创造焦点密度。宏观层面的空旷与微观层面的精准之间的对比赋予网站其电影般的韵律。6.4 圆角半径尺度值应用场景4px标签、徽章、微型元素8px标准卡片、输入框、影片容器12px特色卡片、图片容器、按钮非圆角胶囊20px顶部圆角卡片20px 20px 0 0模态框页首340px大型圆角装饰元素9999px圆角胶囊按钮、圆角胶囊徽章、导航元素Token 映射为--radius-sm: 9999px全圆角胶囊——所有 CTA 按钮、--radius-md: 8px标准卡片与输入框、--radius-lg: 12px特色卡片、--radius-pill: 9999px。其中注释明确写道所有主要 CTA 使用全圆角胶囊——不可妥协的品牌身份。7. 深度与层级层级处理方式用途基础无阴影深色表面默认页面背景细微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)。在深色背景上阴影从已经很深的表面继续加深因此阴影更像环境遮蔽而不是传统的高度——卡片看起来略微下沉入表面而不是漂浮在其上。在 Token 层--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised多层级叠加、--focus-ring: 0 0 0 2px #36f4a4构成了完整的层级体系。装饰性深度深青绿渐变英雄区块和产品展示区后方的环境径向渲染聚光灯效果从中心亮区消退至黑色的区域营造发布会式戏剧照明边缘发光通过内嵌盒阴影在深色卡片上形成细微的亮色边缘绿色氛围光晕背景渐变中的微弱绿色调呼应品牌强调色8. 该做与不该做该做使用深青绿-黑色表面层次虚空黑 → 深青绿 → 深森林绿 → 森林绿来营造深度保持展示排版在 330-400 字重——飘逸的轻盈感是设计的标志将霓虹绿#36F4A4专门用于焦点状态和关键强调高亮为所有主要 CTA 按钮套用 9999px 圆角半径——完整圆角胶囊不可妥协为卡片高度使用多层阴影系统——单一阴影看起来平淡在所有文字中保持ss03OpenType 特性——这是排版身份的一部分内文使用 Inter Variable标题使用 NeueHaasGrotesk——不要混淆它们的角色在区块之间创造戏剧性间距80px以获得电影般的节奏不该做不要在深色背景上将纯黑色#000000用于文字——只用白色#FFFFFF不要引入暖色橙色、红色、黄色——色盘严格限于冷色绿色、青绿色、中性色不要为 NeueHaasGrotesk 内文使用高于 500 的字重——重字重会破坏飘逸感不要将绿色强调色套用于大面积区域——霓虹绿只用于小而精准的高亮不要在互动元素上使用尖角0px 圆角——所有元素都应有圆角不要添加亮色背景——深色主题是根本不是可选的不要使用单层盒阴影——叠加方式是整个系统不要将内文的行高设定在 1.56 以上——Shopify 的文字相对紧凑不要在同等大小/角色下混用 NeueHaasGrotesk 和 Inter——它们的字重尺度不同不要为标题设定低于 0 的字距——Shopify 标题的字距为中性或正值这些约束在 USAGE.md 中也有对应强调避免在复制的:rootToken 块之外使用原始十六进制值避免独立于tokens.css重新定义 Tailwind 或 design-token 值。9. 响应式行为9.1 断点名称宽度主要变化移动端640px单栏汉堡导航展示文字缩至 48px16px 内边距平板640-1024px双栏网格开始展示文字 70px32px 内边距桌面1024-1440px完整版面展开导航96px 展示文字64px 内边距大桌面1440px最大宽度容器居中增加区块间距在 components.html 中容器与区块内边距的响应式降级与上述断点一致1023px以下.container使用--container-gutter-tablet32px、section使用--section-y-tablet64px639px以下使用--container-gutter-phone16px与--section-y-phone40px。hero-grid在 1023px 以下折叠为单栏stats-grid在 639px 以下折叠为垂直堆叠。9.2 触控目标最小触控目标44x44pxWCAG AAA圆角胶囊按钮最低 48px 高度配慷慨的水平内边距导航链接44px 触控区域卡片表面链接时整张卡片可点击9.3 折叠策略导航列水平全链接 → 1024px 以下变汉堡菜单Logo 和 CTA 按钮保持可见英雄区块96px 展示文字 → 平板 70px → 移动端 48px保持单栏居中对齐功能区文字图片双栏 → 768px 以下叠加为单栏统计水平列 → 移动端叠加为垂直区块内边距随视口缩小从 64px → 40px → 24px → 16px卡片网格 → 叠加移动端保持全宽9.4 图片行为产品截图在深色容器内响应式显示保持长宽比英雄图片所有断点全宽延迟加载配深色占位符管理 UI 预览按比例缩放移动端可能裁切所有图片使用 CDNcdn.shopify.com配响应式 srcset10. 智能代理提示指南10.1 快速颜色参考用途取值主要 CTAShopify 白#FFFFFF页面背景虚空黑#000000卡片表面深青绿#02090A区块背景深森林绿#061A1C提升背景森林绿#102620强调色霓虹绿#36F4A4内文文字白色#FFFFFF静默文字静默灰#A1A1AA深色边框深色卡片边框#1E2C3110.2 示例组件提示以下提示词直接来自设计规范可在调用 Agent 生成界面时使用「在真实黑色#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 Logo18px/500 白色导航链接配 0.72px 字距右侧白色圆角胶囊按钮「Start for free」」「设计一个带 rgba(255,255,255,0.2) 雾面玻璃背景、4px 圆角、12px 16px 内边距、16px 白色文字的标签/徽章——漂浮在深色卡片表面上」10.3 迭代指南使用此设计系统完善已生成的界面时每次专注于一个元件引用本文件中的具体颜色名称和十六进制代码记住这是深色优先设计——浅色表面是例外不是规则展示文字应始终感觉羽毛轻盈字重 330-400——如果看起来很重降低字重霓虹绿#36F4A4是珍贵的——只为焦点和强调色节俭使用深色表面层次黑色 → 深青绿 → 深森林绿 → 森林绿创造细微深度阴影是多层的——单个box-shadow值无法捕捉 Shopify 卡片的感觉ss03OpenType 特性必须在所有文字上启用以保持排版一致性11. 在 OpenDesign 工作流中的落地方式这套 Shopify 设计系统在 open-design 中不是孤立文档而是可被运行时消费的完整包。依据 design-systems/README.md 与 manifest.json提示词组合在 Design System 界面或受支持的建项目流程中选中该包后其设计上下文USAGE.md、tokens.css、组件信息、导入模式、craft 绑定会被组合进 Agent 提示词。派生文件为缓存而非竞争性事实来源components.manifest.json由components.html与tokens.css派生design-tokens.json由 Token 契约报告派生且必须与tokens.css一致tailwind-v4.css由tokens.css派生。修改时以tokens.css为唯一事实来源。Tailwind v4 使用方式tailwind-v4.css 通过import ./tokens.css引入 Token并在theme块中将语义 Token 映射为 Tailwind 工具类如--color-bg: var(--bg)、--radius-sm: var(--radius-sm)、--shadow-raised: var(--elev-raised)、--spacing-section-desktop: var(--section-y-desktop)使组件可以直接使用bg-bg、text-muted、rounded-sm、shadow-raised等类名。契约校验source/token-contract.report.json将每个 TOKEN_SCHEMA 绑定映射回tokens.css的声明行design-tokens.json的派生报告给出 56 个 Token、全部有源码背书、评分 100 的审计结论可作为包质量验证的依据。12. 结语Shopify 设计系统包是 open-design 中深色优先 超细展示排版 单点霓虹绿强调这一设计语言的完整实现从 DESIGN-zh-tw.md 的视觉意图与反模式到 tokens.css 的 56 个语义 Token、components.html 的可运行组件 fixture、tailwind-v4.css 的框架映射再到 preview/ 目录的预览页colors/typography/spacing。无论是人工复刻这套电商视觉语言还是通过 Agent 提示词批量生成深色电影感界面都可以以本包为基准先继承规范中的数值与约束再通过 Token 层保证跨品牌切换的可靠性USAGE.md 明确要求保留 schema Token 名称以保证跨品牌切换稳定最终产出与品牌身份一致的高保真界面。赞分享AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载相关推荐OpenDesign 仓库 Shopify 设计系统实战指南黑暗优先的电商视觉语言、令牌化实现与 Agent 提示词规范OpenDesign 仓库 Shopify 设计系统实战指南黑暗优先的电商视觉语言、令牌化实现与 Agent 提示词规范 本文基于 OpenDesign 仓库AI 应用人工智能AI 技能设计系统媒体生成用 OpenDesign 复刻 Discord 设计语言Blurple 暗色优先设计系统的 Tokens、排版与组件实战用 OpenDesign 复刻 Discord 设计语言Blurple 暗色优先设计系统的 Tokens、排版与组件实战 导读 本篇技术指南以 OpenDesAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中的 Shopify 设计系统实战暗色优先的影院式电商界面设计指南OpenDesign 中的 Shopify 设计系统实战暗色优先的影院式电商界面设计指南 本文以 OpenDesign 仓库中 design systems/AI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考