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 仓库内置的设计系统包design-systems/shopify/中的规范文档DESIGN.md及其波兰语版本DESIGN-pl.md为核心完整拆解这套暗色优先、影院式、霓虹绿点缀、超轻字重的电商设计语言从视觉氛围、色彩令牌、可变字体排版到组件样式、布局间距、阴影层级、响应式策略再到面向 Agent 的提示词工程指南。读完你不仅能照单复刻一个 Shopify 风格电商界面还能掌握该包在 Open Design 中的文件组织方式tokens.css、components.html、manifest.json等以及如何把它作为设计上下文注入你的编码 Agent。在 Open Design 仓库的design-systems/目录下每个子目录都是一个可移植的设计系统包Design System 2.0。选择某个包后其设计上下文会被组合进 Agent 提示词驱动 Claude Code、Codex、Cursor、DeepSeek Harness、OpenCode 等 20 CLI 生成符合品牌约束的页面。Shopify 包 是其中E-Commerce Retail品类的代表一套把电商平台包装成科技发布会现场级的暗色影院风格。仓库中的 DESIGN-pl.md 是该规范的多语言版本之一另有 DESIGN.md 英文原版及德、法、日、中、俄等二十余种语言版本内容与英文版一一对应。1. 视觉主题与氛围暗色数字剧场Shopify.com 的核心气质被定义为dark-first digital theatre暗色优先的数字剧场——页面不是典型的 SaaS 营销页而是一场在技术发布会上进行的独家产品揭幕。整个体验铺陈在近黑色的表面上表面携带着极淡的深森林绿气息#02090A、#061A1C、#102620营造出夜间的氛围。这套暗色并非冰冷的企业黑而是带有温度感的奢华暗色如同坐在灯光熄灭的影院第一排。仓库中 tokens.css 的开头注释用三句话概括了这一品牌内核黑暗即剧场—— 深森林青色表面非纯黑#000000根背景、#02090A卡片、#061A1C区块、#102620抬升表面构成夜场 keynote 氛围排版即明星—— NeueHaasGrotesk 可变字体以 96px 巨幅与 330–400 超轻字重出现配合 OpenTypess03Inter Variable 以 420/450/550 等非常规字重处理正文整体如光刻般精致霓虹绿即唯一高能——#36F4A4只用于焦点环与强调高亮暗色画布上白色是唯一有意义的文字颜色。关键特征清单规范原文继承深色优先设计带深森林青底色非纯黑超轻 display 排版字重 330配纪念碑式尺度96px营造空灵存在感霓虹绿#36F4A4是暗色背景上唯一的高能量强调色全胶囊按钮9999px 圆角作为主要交互形状多层、多级 box-shadow 营造照片级景深产品截图嵌入与之匹配的暗色 UI 上下文中基于锌zinc的中性色阶承载文本层级冷暖平衡2. 色彩调色板与角色克制的冷色体系颜色被以极度克制的方式使用。规范将颜色分为五组每一组在 tokens.css 中都有对应的 CSS 变量绑定下文括号内标注。2.1 基础色Primary名称色值角色TokenShopify 白#FFFFFF暗色表面上的主文本、按钮填充、高对比元素--fg/--fg-2Shopify 黑#000000页面主背景、白底按钮上的文字、最大对比基准--bg2.2 次级与强调色Secondary Accent名称色值角色Token霓虹绿 Neon Green#36F4A4标志性强调——焦点环、交互高亮、激活状态指示电光感、生物荧光感--accent芦荟绿 Aloe#C1FBD4装饰性背景上的柔和绿色 wash氛围卡片--color-aloe-10规范引用名开心果绿 Pistachio#D4F9E0最浅的绿色调用于微妙的表面区分--color-pistachio-10规范引用名在 tokens.css 中霓虹绿被明确标记为珍贵资源--accent只用于焦点环和关键强调高亮绝不填充大表面配套定义了--accent-on: #000000霓虹绿上的黑色文字保证对比度、--accent-hover: #2de097悬停时略深的霓虹绿以及--accent-active: color-mix(in oklab, var(--accent), black 14%)激活态用 OKLab 色彩空间混合 14% 黑色。2.3 表面与背景Surface Background名称色值角色TokenVoid 虚空#000000页面根背景——追求最大深度的纯黑--bg深青色 Deep Teal#02090A卡片表面、内容容器——近黑带绿色底调--surface暗森林 Dark Forest#061A1C区块背景带明显绿色性格--surface-warm森林 Forest#102620抬升的暗色表面、页头背景——最暖的暗色调内联引用暗卡片边框 Dark Card Border#1E2C31暗色表面上的卡片边框微妙边界定义--border这套由 Void → Deep Teal → Dark Forest → Forest 构成的暗色表面层级是整个设计系统建立深度感知的基石也是第 7 节Dos中反复强调的第一条规则。2.4 中性色与文本Zinc 锌色阶名称色值角色TokenShade-30#D4D4D8最浅中性色暗色上几乎不可见的边框--color-shade-30规范引用名弱化文本 Muted#A1A1AA次级文本、元数据、描述——安静的声音--mutedShade-50#71717A三级文本、时间戳、最不重要信息--metaShade-60#52525B禁用文本、装饰性中性色--color-shade-60规范引用名Shade-70#3F3F46微妙分隔线、几乎不可见的 UI 边界--border-soft浅色边框 Light Border#E4E4E7浅色表面上的边框罕见——仅用于浅色模式弹窗内联引用2.5 语义与链接色弱化链接 Link Muted#9797A2带下划线装饰的弱化链接文本鼠尾草链接 Link Sage#9DABAD带青色调的弱化链接薰衣草链接 Link Lavender#BDBDCA更亮的链接变体薄荷链接 Link Mint#99B3AD带绿色调、用于主题化区块的链接变体此外 tokens.css 还声明了语义状态色--success: #36f4a4成功即霓虹绿、--warn: #eab308、--danger: #dc2626。2.6 渐变系统深青色 wash从中心#102620到边缘#02090A的径向渐变——用于产品展示后方绿色氛围hero 区块后方的淡绿色环境渐变无需纯色即可制造深度聚光灯聚焦的亮区渐隐至黑色——营造 keynote 式舞台灯光3. 排版规则可变字体精度大师课规范直言排版是无可争议的明星。这套字体的独特性在于在传统字重挡位之间的空隙中取值。3.1 字体家族层级字体回退栈OpenType可用字重DisplayNeueHaasGroteskHelvetica 的精致后裔可变字体Helvetica, Arial, sans-serifss03330, 360, 400, 500, 750正文Inter VariableHelvetica, Arial, sans-serifss03400, 420, 450, 500, 550等宽ui-monospaceSFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New——tokens.css 中对应的字体令牌为--font-display、--font-body、--font-mono回退栈与规范完全一致。ss03是所有文本的硬性要求——它在body、h1-h3、.btn、.stat-number等选择器上都通过font-feature-settings: ss03显式激活见 components.html因为它是排版身份的一部分。3.2 完整字号层级表规范原文完整继承角色字号字重行高字距说明Display XL96px4001.00—NeueHaasGroteskhero 标题ss03Display XL Bold90.74px7501.004.54pxNeueHaasGrotesk强调 displayDisplay XL Tracked96px4001.002.4pxNeueHaasGrotesk加宽 displayDisplay Light96px3300.96—NeueHaasGrotesk空灵 displayHeading 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大写行内代码tokens.css 将这一层级的主干映射为结构令牌--text-xs: 12px→--text-4xl: 96px共 9 档配合--leading-body: 1.56、--leading-tight: 1.00、--tracking-display: 0em。值得注意的实现细节在 components.html 中h196px与h270px使用共享的--leading-tight: 1.00而h332px Heading 4单独覆盖为line-height: 1.14; letter-spacing: 0.32px; font-weight: 360——印证了更小的 display 字号需要正向字距与更宽行高的规则。3.3 原则Display 层几乎只活在 330–400 字重区间——羽毛般轻盈的文本像投射的光线悬浮在暗色背景之上与大多数 SaaS 网站的粗重风格截然相反别人在喊叫Shopify 在轻声细语地放大规模。96px 字重 330 构成了巨大尺寸 × 纤细笔画的悖论既纪念碑式又脆弱易碎。ss03激活的样式集赋予特定字符很可能是 a、g 及部分数字更精致的形态将 Shopify 排版与通用 Helvetica Neue 区分开来。Inter Variable 用 420、550 这类传统挡位之间的字重处理正文——每段文字都获得恰好所需的视觉重量。4. 组件样式胶囊、磨砂与暗容器4.1 按钮主按钮白色填充背景白#FFFFFF文本黑#000000边框2px solid transparent圆角全胶囊9999px内边距12px 26px 12px 16px不对称——右侧更多空间用于视觉平衡Hover轻微降低不透明度或背景微变Focus2px#36F4A4霓虹绿轮廓环过渡all 200ms ease次按钮ghost / 描边背景transparent文本白#FFFFFF边框2px solid 白圆角全胶囊9999px内边距12px 26px 12px 16pxHover填充为白色背景 黑色文字Focus2px#36F4A4轮廓Badge / Tag中性填充背景rgba(255, 255, 255, 0.2)磨砂玻璃文本白边框无圆角4px 微圆角内边距12px 16px字体16px 常规components.html 中的实现完全对应.btn使用padding: 12px 26px 12px 16px; border-radius: var(--radius-sm)--radius-sm即 9999px 全胶囊.btn:focus-visible通过box-shadow: var(--focus-ring)呈现霓虹绿焦点环.btn-primary:hover { opacity: 0.9 }.btn-ghost:hover翻转为白底黑字。按钮类引用的令牌组合据 components.manifest.json 的 buttons 组包括--bg、--fg、--font-display、--radius-sm、--motion-base、--ease-standard等。4.2 卡片与容器背景深青色#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 8pxrgba(255,255,255,0.03) 0px 1px 0px inset内嵌白色高光制造顶部边缘微光Hover阴影扩展卡片可轻微提亮过渡box-shadow 300ms ease, transform 200ms easetokens.css 将整套阴影封装为--elev-raised并在注释中强调阴影在暗色表面上是环境光遮蔽ambient occlusion而非传统抬升。.card选择器即消费--surface背景、--border边框、--radius-md8px 圆角、--elev-raised阴影与--space-6内边距。4.3 输入框与表单背景transparent 或暗森林#061A1C--surface-warm文本白边框1px solid#3F3F46Shade-70 /--border-soft圆角8px内边距12px 16pxFocus2px solid#36F4A4霓虹绿焦点环PlaceholderShade-50#71717A/--meta过渡border-color 200ms ease实现中为--motion-fast150ms box-shadow4.4 导航背景transparent覆盖在暗色 hero 上滚动后变为森林#102620高度约 64px左侧Shopify 字标 logoSVG暗底白色中/右侧18px/500 NeueHaasGrotesk 白色导航链接字距 0.72pxCTA右侧白色胶囊按钮Start for free次级 CTA白边 ghost 按钮Hover链接变为弱化文本#A1A1AA或加下划线移动端汉堡菜单 全屏暗色遮罩过渡滚动时background 300ms ease4.5 图片处理产品截图嵌入与周围黑暗匹配的暗色 UI 上下文后台界面预览展示在暗色背景上带微妙卡片边框宽高比多变——hero 图宽幅约 16:9功能图灵活所有图片在暗色容器内齐平放置——无亮边框或相框懒加载配暗色占位表面4.6 信任指标醒目展示统计数字15年、150M买家数字以 NeueHaasGrotesk display 尺度呈现合作伙伴/开发者生态专区暗色主题的客户证言融入页面流在 components.html 的参考 fixture 中hero 区域正是这样落地的span classstat-number150M/span与15使用--font-display、font-size: var(--text-3xl)70px、font-weight: 750、line-height: 1.00。5. 布局原则剧院式留白5.1 间距系统基础单位8px。规范给出 10 档令牌tokens.css 映射了其中 8 档--space-1至--space-12Token值用途space-14px紧凑行内间隙space-28px基础单位、图标间隙space-312px卡片内边距、紧凑外边距space-416px标准元素内边距space-524px卡片间隙、区块内边距space-628px中等区块间距space-732px区块分隔space-836px大内边距space-940px主要区块内边距space-1064pxhero 区块内边距、大间隙tokens.css 中对应--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 28px; --space-8: 36px; --space-12: 64px并额外提供--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px三档区块纵向节奏。5.2 网格与容器容器最大宽度约 1280px居中——--container-max: 1280pxHero全宽、无边距的暗色背景 居中文本功能区块文本 产品截图的 2 列布局统计区块大数字横向排列水平内边距桌面 64px、平板 32px、移动端 16px即--container-gutter-*三档网格间隙主要内容块之间 24–32px5.3 留白哲学Shopify 的留白策略是戏剧化的。区块之间由 80px 到 120px 的纯黑呼吸空间分隔营造出演示文稿而非网页的节奏——每个内容块都是 keynote 式滚动中的独立幻灯片。区块内部间距更紧凑、更有目的性在广袤虚空的映衬下形成焦点密度。宏观层面的空旷与微观层面的精确之间的反差正是页面电影感节奏的来源。5.4 圆角比例尺值语境4px标签、徽章、微元素8px标准卡片、输入框、视频容器12px特色卡片、图片容器、按钮非胶囊20px顶部圆角卡20px 20px 0 0、弹窗头部340px大型圆角装饰元素9999px胶囊按钮、胶囊徽章、导航元素6. 深度与抬升环境光遮蔽式阴影层级处理用途Base 基础无阴影暗色表面默认页面背景Subtle 微妙rgba(0,0,0,0.1) 0px 0px 0px 1px 内嵌白光静止卡片Medium 中等多层1px 环 2px 4px 8px 阴影堆叠抬升卡片、特色区块High 高rgba(0,0,0,0.25) 0px 25px 50px -12px弹窗、下拉、遮罩Focus 焦点0px 0px 0px 2px #36F4A4键盘焦点环霓虹绿规范对此有精辟的说明在暗色背景上阴影是从本已很暗的表面继续变暗因此阴影更多扮演环境光遮蔽而非传统抬升——卡片看起来是微微沉入表面而不是悬浮其上。对应实现上--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised五层堆叠、--focus-ring: 0 0 0 2px #36f4a4全部在 tokens.css 中声明。装饰性深度深青色渐变hero 区块与产品展示后方的环境径向 wash聚光灯效果居中亮区渐隐至黑制造 keynote 式舞台照明边缘光晕通过内嵌 box-shadow 在暗色卡片上制造微亮边缘绿色氛围光晕背景渐变中极淡的绿色调呼应品牌强调色7. 应与不应Dos and Donts生成合规界面的铁律应Do使用暗青黑表面层级Void → 深青色 → 暗森林 → 森林制造深度display 排版保持字重 330–400——空灵轻盈是设计的签名霓虹绿#36F4A4只用于焦点状态与关键强调高亮所有主 CTA 按钮应用 9999px 圆角——全胶囊不可妥协卡片抬升使用多层阴影系统——单层阴影会显得扁平所有文本保持ss03OpenType 特性——它是排版身份的一部分正文用 Inter Variable、标题用 NeueHaasGrotesk——永不混用角色区块间制造戏剧化间距80px以获得电影节奏不应Dont暗色背景上不要用纯黑#000000文字——只用白色#FFFFFF不要引入暖色橙、红、黄——调色板严格偏冷绿、青、中性NeueHaasGrotesk 正文字重不要超过 500——重字重破坏空灵感不要把绿色强调用于大表面——霓虹绿只用于小而精准的高亮交互元素不要用尖角0px 圆角——一切都要圆润不要添加亮色背景——暗色主题是根本不是可选项不要用单层 box-shadow——堆叠方式才是体系正文行高不要超过 1.56——Shopify 文本相对紧凑不要在相同字号/角色混用 NeueHaasGrotesk 与 Inter——两者字重刻度不同标题的 letter-spacing 不要低于 0——Shopify 标题是中性或正向跟踪8. 响应式行为从 96px 到 48px 的折叠策略8.1 断点名称宽度关键变化移动端640px单列、汉堡导航、display 文本缩至 48px、内边距 16px平板640–1024px开始 2 列网格、display 文本 70px、内边距 32px桌面1024–1440px完整布局、展开导航、96px display、内边距 64px大桌面1440px居中 max-width 容器、增加区块间距在 components.html 中可以看到断点实现的直接证据media (max-width: 1023px)时.container改用--container-gutter-tablet、.hero-grid塌缩为单列media (max-width: 639px)时改用--container-gutter-phone、.stats-grid塌缩为单列。8.2 触控目标最小触控区域44×44pxWCAG AAA胶囊按钮最小高度 48px配宽裕的水平内边距导航链接44px 触控区域卡片表面可点击链接的整卡均可点按8.3 折叠策略导航1024px 以下完整水平链接 → 汉堡菜单logo 与 CTA 按钮保持可见Hero 区块96px display → 平板 70px → 移动端 48px保持单列居中功能区块768px 以下 2 列文本图片 → 堆叠为单列统计横向行 → 移动端纵向堆叠区块内边距64px → 40px → 24px → 16px 随视口收窄卡片网格 → 堆叠移动端保持全宽8.4 图片行为产品截图暗色容器内响应式缩放保持宽高比Hero 图所有断点全宽懒加载配暗色占位后台 UI 预览按比例缩放移动端可能裁剪所有图片使用 CDNcdn.shopify.com配响应式 srcset9. Agent 提示词指南让编码 Agent 复刻这套风格这是该包在 Open Design 中价值最直接的章节——规范本身就是写给 Agent 看的。9.1 快速颜色速查表用途值主 CTAShopify 白#FFFFFF页面背景Void 黑#000000卡片表面深青色#02090A区块背景暗森林#061A1C抬升背景森林#102620强调色霓虹绿#36F4A4正文白#FFFFFF弱化文本#A1A1AA暗色边框#1E2C319.2 示例组件提示词可直接复用Create a hero section on true black (#000000) background with a 96px/330 NeueHaasGrotesk headline in white, a 20px/500 subtitle in #A1A1AA, and two pill buttons: white filled (9999px radius) and ghost with 2px white borderDesign a feature card on Deep Teal (#02090A) with 1px #1E2C31 border, 12px radius, multi-layer shadow (1px ring 2px/4px/8px blur at 10% black), containing a 32px/360 white heading and 18px/400 #A1A1AA body textBuild a stats section on Dark Forest (#061A1C) with 96px/750 white numbers (NeueHaasGrotesk), 16px/400 #A1A1AA descriptive labels, and generous 64px spacing between stat blocksCreate a sticky nav with transparent background (becomes #102620 on scroll), white Shopify logo left, 18px/500 white nav links with 0.72px letter-spacing, and a white pill Start for free button rightDesign a tag/badge with rgba(255,255,255,0.2) frosted glass background, 4px radius, 12px 16px padding, white 16px text — floating over a dark card surface9.3 迭代指南精修既有画面时一次只聚焦 ONE 个组件引用本文档中具体的颜色名称与十六进制码记住这是 DARK-FIRST 设计——亮色表面是例外而非规则display 文本应始终感觉羽毛般轻盈字重 330–400——若显厚重就降低字重霓虹绿#36F4A4很珍贵——只用于焦点与强调暗色表面层级黑 → 深青色 → 暗森林 → 森林制造微妙深度阴影是多层的——单一box-shadow值无法传达 Shopify 卡片质感所有文本必须激活ss03OpenType 特性以保证排版一致性10. 仓库落地从规范到可运行的设计系统包以上规范在 Open Design 仓库中并非孤立文档而是一个完整的、机器可校验的设计系统包遵循 design-systems/README.md 描述的 Design System 2.0 结构design-systems/shopify/ ├── manifest.json # 包元数据与发现信息schemaVersion: od-design-system-project/v1 ├── DESIGN.md # Agent 使用的规范正文含 20 语言版本 DESIGN-*.md ├── USAGE.md # Agent 阅读顺序与使用指南 ├── tokens.css # 编译后的语义令牌样式表事实源 ├── components.html # 独立组件参考 fixture35 个选择器、15 个类 ├── components.manifest.json # 派生的组件/令牌索引 ├── design-tokens.json # 派生的 Design Tokens JSON56 个令牌评分 100/优秀 ├── tailwind-v4.css # 派生的 Tailwind v4 映射 ├── preview/ # colors / typography / spacing 预览页 └── source/ # 导入证据与令牌契约报告10.1 包契约与元数据manifest.json 声明了id: shopify、category: E-Commerce Retail、importMode: normalized并将craft.suggested指向color与accessibility-baseline两项 craft 约束对应仓库 craft/color.md 与 craft/accessibility-baseline.md。依据 design-systems/README.md包目录 slug 必须与manifest.id一致DESIGN.md需至少包含七个实质性的 H2 小节本包恰好九个且设计决策须与tokens.css保持同步。目录级守卫脚本pnpm guard会校验路径安全、派生文件一致性、令牌契约与组件 fixture 完整性。10.2 令牌契约56 个令牌评分 100design-tokens.json 记录了令牌契约审计结果56 个令牌全部声明、全部有源文件支撑得分 100评级 excellent。分层如下A1-identity品牌身份8 个含--bg、--surface、--fg、--accent、字体家族、A1-structure结构18 个含字号/行高/间距/容器、B-slot槽位4 个、A226 个。source/evidence.md 明确说明该包源自 Open Design 精选的 bundled fixtureDESIGN.md、tokens.css、components.html并未声称对上游品牌官网进行了实时抓取——这一基于 curated fixture 而非原创上游素材的定位也在 USAGE.md 中被强调为使用边界。10.3 三种消费方式Agent 提示词组合在 Design System 界面选择该包或在受支持的建项目流程中选择其设计上下文USAGE.mdtokens.css 组件信息 craft 绑定会被组合进 Agent 提示词。参考组件直接读取打开 components.html 即可看到完整可运行的 hero、功能、表单区块每个可见值均来自tokens.csscomponents.manifest.json 提供紧凑的组件清单buttons / inputs / cards / typography / layout 等分组。CSS 令牌直接引用将tokens.css的:root块粘贴进产物第一个style块之后全部使用var(--accent)、var(--surface)、var(--elev-raised)、var(--focus-ring)等语义令牌避免任何裸 hex 值——这也是 USAGE.md 给出的标准工作流。若项目使用 Tailwind v4可再引入派生的 tailwind-v4.css它会通过theme把全部令牌映射为--color-*、--text-*、--spacing-*、--shadow-*等 Tailwind 主题变量。10.4 从规范到代码的对照速查规范章节关键值代码落点表面层级#000000/#02090A/#061A1C/#102620tokens.css--bg/--surface/--surface-warm霓虹绿强调#36F4A4仅焦点--accent--focus-ring全胶囊 CTA9999px--radius-sm 9999px.btn使用多层阴影1px 环 2/4/8px 模糊 内嵌白光--elev-raised.card使用ss03排版特性全文本激活font-feature-settings: ss03于 body/标题/按钮间距基础 8pxspace-1..space-12--space-1…--space-12断点640 / 1024 / 1440pxcomponents.html 中max-width: 1023px与max-width: 639px媒体查询结语如何用这套包产出合规界面这套 Shopify 设计系统给生成式编码工作流的最大启示是把克制写成可校验的约束。霓虹绿被限制在焦点环与强调高亮、字重被限定在 330–400 的 display 区间、阴影必须是五层堆叠、ss03必须全局激活——这些规则既存在于人类可读的DESIGN.md/DESIGN-pl.md中也以tokens.css的 CSS 变量和components.html的参考实现双重落地还通过design-tokens.json的契约审计评分 100确保派生产物与事实源一致。当你在 Open Design 中选用该包并让 Agent 生成电商落地页时以上 8 条迭代指南就是逐轮精修的对齐清单一次只改一个组件、引用具体色值与令牌名、保持暗色优先、时刻追问阴影是否多层、ss03 是否激活。将规范文档本身作为提示词的一部分喂给 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点击查看免费下载相关推荐OpenDesign 中的 Shopify 设计系统实战暗色优先的影院式电商界面设计指南OpenDesign 中的 Shopify 设计系统实战暗色优先的影院式电商界面设计指南 本文以 OpenDesign 仓库中 design systems/AI 应用人工智能AI 技能设计系统媒体生成Open Design 的 Shopify 暗色电影感设计系统从色彩令牌、超轻字体到 Agent 提示词的全方位实现指南Open Design 的 Shopify 暗色电影感设计系统从色彩令牌、超轻字体到 Agent 提示词的全方位实现指南 本文以 DESIGN fr.md hAI 应用人工智能AI 技能设计系统媒体生成Open Design 实战Nike 风格单色电商设计系统规范与 Token 落地指南Open Design 实战Nike 风格单色电商设计系统规范与 Token 落地指南 本文以 Open Design 仓库中 design systems/AI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考