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 设计系统规格文档 为骨架结合 tokens.css、components.html 与 manifest.json 等落地文件完整拆解这套暗色优先、超轻排版、霓虹绿点缀的电商设计语言。读者将掌握Shopify 风格设计系统的完整色彩/排版/组件/层级 token 体系、暗色表面的多层级阴影原理、响应式断点策略以及如何在 Agent 提示词中精确复用这套规范生成原型、落地页与仪表盘等产物。1. 视觉主题与氛围暗色即剧场Shopify 风格设计系统分类为电商与零售见 manifest.json的核心气质是dark-first暗色优先整个体验像一场数字剧场——用近乎黑色的深邃表面#02090A、#061A1C、#102620承载电商平台的展示观感更接近科技发布会上的产品揭幕而非普通 SaaS 营销页。关键认知是这套暗色不是冷峻或企业化的黑而是带有深林绿调deep forest-teal的暖黑——如同坐在黑暗放映厅前排的沉浸感。其核心特征可归纳为暗色优先但非纯黑表面全部带深林-teal 底色营造层次而非死黑96px 级超轻展示字体字重 330以纪念碑式的尺度搭配羽毛般的重量制造像光刻而非墨印的漂浮感霓虹绿#36F4A4作为暗色中唯一的高能强调色如同生物发光信号只出现在焦点环与强调点上**全 pill 胶囊按钮9999px 圆角**作为主要交互形状多阶段叠加 box-shadow制造照片级景深产品截图被沉入与周围暗色相融合的暗色 UI 容器中。在仓库落地文件中这套气质被压缩为三句话写入 tokens.css 的头部注释深林绿表面体系#000000根部、#02090A卡片、#061A1C区块、#102620抬升面、NeueHaasGrotesk 变量字体在 96px 尺度上的 330–400 超轻字重与ss03OpenType 特性、以及白色是暗色上唯一文本色的铁律。2. 色彩系统克制的生物发光美学2.1 一级色PrimaryToken色值用途Shopify White#FFFFFF暗色表面上的一级文本、按钮填充、高对比元素Shopify Black#000000页面根部背景void、白底上的按钮文字最大对比基底对应--color-shade-1002.2 二级色与强调色Secondary AccentToken色值用途Neon Green#36F4A4签名强调色——焦点环、交互点、激活态指示电光感、生物发光Aloe#C1FBD4装饰背景与氛围卡片的柔和绿色水洗对应--color-aloe-10Pistachio#D4F9E0最浅绿调用于细微表面差异化对应--color-pistachio-102.3 表面与背景Surface BackgroundToken色值用途Void#000000根页面背景——追求最大深度的真黑Deep Teal#02090A卡片表面、内容容器——带绿调的近黑Dark Forest#061A1C有明显绿色性格的区块背景Forest#102620抬升的暗色表面、页头背景——最暖的暗色Dark Card Border#1E2C31暗色表面上的卡片描边细微边界定义在 tokens.css 中这组表面被映射为 schema 语义变量--bg: #000000void、--surface: #02090adeep teal 卡片、--surface-warm: #061a1cdark forest 区块。2.4 中性色与文本锌色阶Token色值用途Shade-30#D4D4D8最浅中性色暗色中近乎不可见的边界--color-shade-30Muted Text#A1A1AA二级文本、元数据、说明——安静的声音Shade-50#71717A三级文本、时间戳、最次要信息--color-shade-50Shade-60#52525B禁用文本、装饰性中性色--color-shade-60Shade-70#3F3F46细微分隔线、近乎不可见的 UI 边界--color-shade-70Light Border#E4E4E7浅色表面边界罕见——仅浅色模式弹窗使用2.5 语义链接色Link Muted#9797A2带下划线的弱化链接文字Link Sage#9DABAD带 teal 调的弱化链接Link Lavender#BDBDCA更亮的链接变体Link Mint#99B3AD主题区块使用的绿调链接变体。2.6 渐变系统Dark Teal Wash从#102620中心到#02090A边缘的径向渐变——用于产品陈列背后Green Atmospherichero 区块背后的微绿氛围渐变不用纯色也能制造深度Spotlight向黑色渐隐的聚焦亮区营造 keynote 式舞台追光。从源码验证角度看components.manifest.json 记录了 59 个声明 token 与 40 个被引用 token--accent、--bg、--focus-ring等均被组件直接引用且没有任何未声明的引用undeclaredReferenced 为空——说明设计契约被严格执行。3. 排版系统超轻字重的精密手术3.1 字体家族展示字体DisplayNeueHaasGrotesk——精炼的 Helvetica 后裔变量字体。回退栈为 Helvetica, Arial, sans-serif启用ss03OpenType 特性样式集 3提供独特的字形替代推测作用于a、g与部分数字可用字重 330、360、400、500、750。用于所有标题、hero 文本与大型展示元素。正文BodyInter-Variable——回退 Helvetica, Arial, sans-serif同样启用ss03可用字重 400、420、450、500、550。用于正文、链接、按钮、UI 元素。等宽Monoui-monospace——回退 SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New用于代码片段、数据标签、技术内容。在 tokens.css 中对应为--font-display、--font-body、--font-mono三个家族变量并在 components.html 的body、h1/h2/h3、.btn、.stat-number上通过font-feature-settings: ss03全局启用与规格文档一致。3.2 完整层级表H1–H6 与正文/辅助角色角色字号字重行高字距备注Display XL96px4001.00—NeueHaasGroteskhero 标题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大写行内代码3.3 设计原理这套排版的精髓在于用 330–400 的极轻字重统治展示层——96px 的超大标题配超细笔画形成既纪念碑式又纤细易碎的矛盾美感与大多数 SaaS 用粗重字重喊叫的策略截然相反当别人在嘶吼时Shopify 在尺度上低语。ss03赋予字形更精致的处理让这套字体区别于普通的 Helvetica Neue 用法。Inter Variable 则在传统字重档位之间取 420、550 等非常规值让每一段文本都获得恰好的视觉重量——这是细节被精心经营的公司才会有的克制。从源码看components.html 将这条原则落到了 CSSh1 { font-size: var(--text-4xl) }96px、h2 { font-size: var(--text-3xl) }70px、h3单独覆写为 32px/360/1.14 行高/0.32px 正字距.stat-number使用 750 字重的 NeueHaasGrotesk 展示数据。4. 组件样式规范4.1 按钮一级按钮白色填充背景白#FFFFFF文本黑#000000边框2px solid transparent圆角全 pill9999px内边距12px 26px 12px 16px不对称——右侧更大以实现视觉平衡Hover轻微降透明度源码实现为opacity: 0.9或背景偏移焦点2px#36F4A4霓虹绿轮廓环box-shadow: var(--focus-ring)过渡all 200ms ease对应--motion-base: 200ms与--ease-standard: ease。二级按钮Ghost/描边背景透明文本白边框2px solid 白圆角9999px内边距12px 26px 12px 16pxHover填充为白色背景、文字变黑焦点2px#36F4A4轮廓。Badge/Tag中性填充背景rgba(255,255,255,0.2)磨砂玻璃文本白无边框圆角4px内边距12px 16px字号 16px 常规。4.2 卡片与容器背景暗色页面上的 Deep Teal#02090A边框1px solid#1E2C31Dark Card Border——近乎不可见圆角标准卡 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内嵌白色高光制造细腻的顶部边缘光泽Hover阴影扩展、卡片微微点亮过渡box-shadow 300ms ease、transform 200ms ease。在 tokens.css 中即--elev-raised的完整声明而 components.html 的.card直接引用var(--elev-raised)验证了所有可见值都来自 tokens.css的契约该文件头部meta namedescription也明确声明了这一点。4.3 输入框与表单背景透明或 Dark Forest#061A1C源码.field input使用var(--surface-warm)文本白边框1px solid#3F3F46Shade-70圆角8px内边距12px 16px焦点2px solid#36F4A4霓虹绿焦点环含box-shadow: var(--focus-ring)占位符Shade-50#71717A对应--meta过渡border-color 200ms ease源码为--motion-fast 150ms--ease-standard。4.4 导航背景透明暗色 hero 上滚动后变为 Forest#102620高度约 64px左侧Shopify wordmark 图标SVG暗色上白色中/右18px/500 NeueHaasGrotesk 导航链接白色字距 0.72pxCTA白色 pill 按钮 Start for free右侧二级 CTA白色描边 Ghost 按钮Hover链接过渡到 Muted Text#A1A1AA或获得下划线移动端汉堡菜单 全屏暗色遮罩过渡滚动时background 300ms ease。4.5 图像处理产品截图置于与周围暗色融合的暗色 UI 容器中管理后台预览带细卡边框展示于暗色背景宽高比灵活——hero 图偏宽近 16:9功能图弹性所有图像在暗色容器中平滑融入无亮边或相框通过暗色占位表面实现延迟加载。4.6 信任指标突出统计数据15年、150M买家数字以 NeueHaasGrotesk 展示级呈现含合作伙伴/开发者生态号召区页面上嵌入暗色主题的客户评价。以上数据为设计规格中演示用占位数值仅为规范示意。5. 布局原则剧场化的留白节奏5.1 间距系统8px 基础单位Token值用途space-14px紧凑行内间距space-28px基础单位、图标间距space-312px卡片内边距、窄边距space-416px标准元素内边距space-524px卡片间隙、区块内边距space-628px中等区块间距space-732px区块之间space-836px大内边距space-940px主要区块内边距space-1064pxhero 区块内边距、大间距components.html 中的.stack-3/4/6margin-block-start分别为--space-3/4/6与.hero-actionsgap: var(--space-4)正是这套间距 token 的组件级落地。5.2 网格与容器最大容器宽度约 1280px居中Hero全宽、通栏暗色背景 居中文本功能区块文本与产品截图的两列布局统计区块大数字横向排布水平内边距桌面 64px、平板 32px、移动 16px网格间距主要内容块之间 24–32px。5.3 留白哲学区块之间用 80px–120px 的纯黑呼吸区分隔让每个内容块在 keynote 式滚动中成为独立的幻灯片。区块内间距更紧凑克制形成宏尺度空旷 vs 微尺度精密的对比——这正是整站电影感节奏的来源。对应 token 即 tokens.css 中的--section-y-desktop: 96px / --section-y-tablet: 64px / --section-y-phone: 40px且section section用 1px--border分隔。5.4 圆角刻度值语境4px标签、徽章、微元素8px标准卡片、输入框、视频容器12px突出卡片、图像容器、非 pill 按钮20px顶部圆角卡20px 20px 0 0、弹窗头部340px大型圆形装饰元素9999pxpill 按钮、pill 徽章、导航项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键盘焦点环霓虹绿阴影系统异常考究不用单值阴影而是 1px 环边界定义 2px/4px/8px 递进模糊自然光衰减 精确的内嵌白光rgba(255,255,255,0.03)模拟顶光照射的玻璃表面。在暗色背景上阴影比表面更暗因此它承担的不是传统抬升而是环境光遮蔽ambient occlusion——卡片不是悬浮于表面而是轻微沉入表面。装饰性深度暗色 teal 渐变hero 与产品陈列后的氛围径向水洗Spotlight 效果向黑渐隐的亮区制造 keynote 舞台光边缘辉光通过内嵌 box-shadow 在暗色卡片上形成细亮边绿色氛围光晕背景渐变中微弱的绿调呼应品牌强调色。7. 该做的与不该做的Do Dont该做的用暗色表面层级制造深度Void → Deep Teal → Dark Forest → Forest展示排版保持在 330–400 字重——空灵的轻盈是设计签名霓虹绿#36F4A4只用于焦点态与关键强调点所有一级 CTA 用 9999px 圆角——全 pill 不可妥协卡片高度用多层级阴影系统——单层阴影会显平所有文本保持ss03OpenType 特性——这是排版身份的一部分正文用 Inter Variable、标题用 NeueHaasGrotesk——两者角色绝不混用区块之间营造剧场化留白80px以获得电影节奏。不该做的暗色背景上文本禁用纯黑#000000——只用白色不引入暖色橙、红、黄——调色板严格冷感绿、teal、中性色正文NeueHaasGrotesk 或 Inter字重不超过 500——粗重会破坏空灵感大表面不上绿色——霓虹绿只属于小而精的点位交互元素不用尖锐直角0px 圆角——一切皆圆润不添加亮色背景——暗色主题是根基而非选项不用单层 box-shadow——堆叠方式才是系统正文行高不超过 1.56——文本相对紧凑不在同一尺寸/角色混用 NeueHaasGrotesk 与 Inter——两者字重刻度不同标题字距不为负值——标题字距中性或正向。8. 响应式行为断点名称宽度主要变化移动端640px单列、汉堡导航、展示文本缩至 48px、16px 内边距平板640–1024px两列网格开始、展示文本 70px、32px 内边距桌面1024–1440px完整布局、展开导航、96px 展示、64px 内边距大桌面1440px居中最大宽度容器、区块间距增大components.html 用两条媒体查询落地media (max-width: 1023px)切换.container到 tablet 水槽、section到 tablet 纵向间距、.hero-grid坍缩为单列media (max-width: 639px)切到 phone 水槽与手机纵向间距、.stats-grid坍缩为单列。触摸目标最小触摸目标 44×44pxWCAG AAApill 按钮横向内边距宽裕最小高度 48px导航链接44px 触摸区卡片表面可链接时整卡可点。折叠策略导航完整横向链接 → 1024px 以下汉堡菜单logo 与 CTA 按钮保持可见Hero96px 展示 → 平板 70px → 移动 48px保持单列居中功能区块两列文本图 → 768px 以下堆叠单列统计横向行 → 移动端竖排堆叠区块内边距视口收窄时 64px → 40px → 24px → 16px卡片网格 → 堆叠移动端保持全宽。图像行为产品截图在暗色容器中保持宽高比响应式hero 图全断点全宽用暗色占位延迟加载管理后台 UI 预览按比例缩放、移动端可裁剪全部图像通过 CDN 的响应式 srcset 提供。9. Agent Prompt 指南把规范交给编码智能体快速色彩参考语义值一级 CTAShopify White#FFFFFF页面背景Void Black#000000卡片表面Deep Teal#02090A区块背景Dark Forest#061A1C抬升背景Forest#102620强调色Neon Green#36F4A4正文White#FFFFFF弱化文本Muted#A1A1AA暗色边界Dark Card Border#1E2C31示例组件 Prompt可直接用于生成代码Hero 区在真黑#000000背景上创建 hero白色 96px/330 NeueHaasGrotesk 标题、#A1A1AA 的 20px/500 副标题以及两个 pill 按钮——白色填充9999px 圆角与 2px 白色描边 ghost。功能卡设计 Deep Teal#02090A上的功能卡片1px #1E2C31 边框、12px 圆角、多层级阴影1px 环 10% 黑的 2px/4px/8px 模糊、32px/360 白色标题与 18px/400 #A1A1AA 正文。统计区在 Dark Forest#061A1C上创建统计区块NeueHaasGrotesk 96px/750 白色数字、16px/400 #A1A1AA 描述标签统计块之间用充裕的 64px 间距。导航创建透明背景滚动变 #102620的吸顶导航左侧白色 Shopify logo、0.72px 字距的 18px/500 白色链接、右侧白色 pill Start for free 按钮。徽章创建 rgba(255,255,255,0.2) 磨砂玻璃背景、4px 圆角、12px 16px 内边距、白色 16px 文本的标签/徽章——悬浮于暗色卡片表面之上。迭代指南一次只专注一个组件引用本文档中的具体色彩名与 hex 码记住这是dark-first设计——浅色表面是例外而非规则展示文本永远要羽毛般轻330–400——显得重了就降字重霓虹绿#36F4A4是稀缺资源——只在焦点与强调处节制使用暗色表面层级黑 → deep teal → dark forest → forest制造细腻深度阴影是多层的——单个box-shadow值无法复刻 Shopify 卡片手感ss03特性应在所有文本中启用以保持排版一致性。10. 仓库落地token 契约、组件清单与审计证据这套设计系统在 OpenDesign 中并非孤立的文档而是一个完整的 Design System 2.0 包见 manifest.jsonschema 版本od-design-system-project/v1类别E-Commerce Retail。按 USAGE.md 的使用顺序约定使用者应先读 USAGE.md 理解包契约再读 DESIGN.md 理解视觉意图、约束与反模式在首个 artifact 的style块中先粘贴 tokens.css 再写组件 CSS用 components.manifest.json 获得紧凑组件清单需要精确选择器或状态时打开 components.html需要视觉核对时查看preview/页面colors.html、typography.html、spacing.html。几个值得注意的工程细节组件清单契约components.manifest.json 显示该 fixture 含 1 个 style 块、35 个选择器、15 个类、22 个元素覆盖 buttons、inputs、cards、links、icons、typography、layout 共 7 个组件组badges 与 keyboard 组未出现例如 buttons 组引用--bg、--radius-sm、--font-display、--motion-base等 token印证了每个可见值都来自 tokens.css。token 契约审计source/目录作为审计证据存在——tokens.source.json 将每个 schema 绑定映射回tokens.css的声明行号如--accent→tokens.css:53、--elev-raised→tokens.css:120source/evidence.md与source/token-contract.report.json则说明 design-tokens.json 与 tailwind-v4.css 是从报告与 token 样式表派生的输出不应手工编辑。使用约束USAGE.md精确保留 schema token 名称以保证跨品牌切换可靠用--accent表示一级操作、链接、焦点态与唯一焦点元素复用组件组而非发明新控件source/文件只作审计证据避免在:roottoken 块之外使用裸 hex 值避免独立于tokens.css重定义 Tailwind 或设计 token不要声称来自原始上游站点证据——本包基于精选捆绑 fixture。结语从 DESIGN-tr.md 的视觉叙事到 tokens.css 的 schema 绑定再到 components.html 的可运行组件与 components.manifest.json 的契约校验这套 Shopify 风格设计系统展示了一条完整的设计规格 → 设计 token → 组件实现 → 自动审计链路。对开发者与 Agent 而言掌握这套规范意味着拿到任意暗色优先 超轻排版 霓虹绿点缀的电商风格需求时都能用精确的 token 名与 hex 值一次性生成视觉正确、层级严谨、可响应式收缩的页面产物。赞分享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 技能设计系统媒体生成Shopify 深色电影化设计系统OpenDesign 中的黑暗优先电商设计规范与实践指南Shopify 深色电影化设计系统OpenDesign 中的黑暗优先电商设计规范与实践指南 导读 本文以 OpenDesign 仓库中 design systAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中的 Shopify 设计系统实战暗色优先的影院式电商界面设计指南OpenDesign 中的 Shopify 设计系统实战暗色优先的影院式电商界面设计指南 本文以 OpenDesign 仓库中 design systems/AI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考