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点击查看免费下载本指南以design-systems/shopify/目录下 Open Design 仓库内置的 Shopify 风格设计系统为骨架系统拆解暗色优先 超轻量排版 霓虹绿点缀的视觉语言并结合仓库中的tokens.css、components.html、components.manifest.json等真实实现文件讲解配色 Token、字体层级、组件样式、布局与深度体系以及可直接喂给 AI Agent 的生成提示词。读完本文你将能够用这套规范复刻一个具有影院级质感的电商落地页、Landing Page 或产品功能展示页。1. 视觉主题与氛围暗色优先的数字剧场Shopify.com 的设计本质是一个暗色优先dark-first的数字剧场——整个页面像一场电影首映式把商业平台本身当作产品发布会来呈现。整个体验铺陈在一片近乎黑色的表面之上这些表面带有最微弱的深森林绿气息#02090A、#061A1C、#102620营造出一种夜间氛围它不是冷冰冰的 SaaS 营销页而是一场科技 keynote 上的独家产品揭幕。这种黑暗不是寒冷或企业化的而是奢华体验中温暖包裹的暗——如同坐在暗场音乐厅的前排。在 Open Design 仓库的 tokens.css 中这一氛围被固化为三层表面 Token--bg: #000000; /* void —— 真正的黑色根背景 */ --surface: #02090a; /* 深青绿 —— 卡片表面 */ --surface-warm: #061a1c; /* 暗森林 —— 区块背景 */关键特征一览暗色优先设计带深森林青绿底色而非纯黑超轻量 display 排版字重 330配合纪念碑式大字号96px营造空灵质感霓虹绿#36F4A4作为黑暗中唯一的高能量强调色全药丸按钮9999px 圆角作为主要交互形态多层、多阶段 box-shadow 营造摄影级深度产品截图嵌入暗色 UI 语境与周围黑暗融为一体以锌为基底的中性色阶管理文本层级——冷暖之间取得平衡2. 调色板与角色每一度颜色都有职责2.1 主色Primary色名色值职责Shopify 白#FFFFFF暗色表面的主要文字、按钮填充、高对比元素Shopify 黑#000000页面主体背景、白底按钮上的文字、最大对比度基底2.2 次要与强调色Secondary Accent色名色值职责霓虹绿 Neon Green#36F4A4标志性强调色——焦点环、交互高亮、激活状态指示电光般生物荧光质感芦荟 Aloe#C1FBD4装饰性背景的柔和绿色 wash氛围卡片开心果 Pistachio#D4F9E0最浅的绿色调用于细微的表面差异化在 tokens.css 中霓虹绿被进一步拆成完整的交互状态族--accent: #36f4a4; /* 霓虹绿 */ --accent-on: #000000; /* 霓虹绿上的黑色文字保证对比度 */ --accent-hover: #2de097; /* 悬停时略深的霓虹绿 */ --accent-active: color-mix(in oklab, var(--accent), black 14%); /* 激活态OKLab 混合压暗 14% */color-mix(in oklab, ...)是现代 CSS 颜色混合语法说明这套 Token 允许在 OKLab 感知均匀色彩空间内派生状态色而不是硬编码一个近似值。2.3 表面与背景Surface Background色名色值职责Void虚空#000000页面根背景——真正黑色最大化深度深青绿 Deep Teal#02090A卡片表面、内容容器——带绿色底调的近黑暗森林 Dark Forest#061A1C区块背景可见的绿色性格森林 Forest#102620抬升的暗色表面、页头背景——最暖的暗色调暗卡片边框#1E2C31暗色表面的卡片边框微妙的边界定义这一四层表面层级Void → Deep Teal → Dark Forest → Forest是全站深度叙事的核心对应 tokens.css 中的--bg/--surface/--surface-warm三个变量加文档中描述的 Forest 抬升层。2.4 中性色与文本锌色阶 Zinc Scale色名色值职责Shade-30#D4D4D8最浅中性色暗色上几乎不可见的边框弱化文字 Muted#A1A1AA次要文字、元数据、描述——安静的声线Shade-50#71717A三级文字、时间戳、最不重要的信息Shade-60#52525B禁用文字、装饰性中性色Shade-70#3F3F46细微分隔线、几乎不可见的 UI 边界亮色边框#E4E4E7亮色表面上的边框罕见——仅用于亮色模式弹窗在 tokens.css 中这些语义对应为--muted: #a1a1aa次要文字、--meta: #71717a时间戳/三级信息、--border-soft: #3f3f46细分隔线配合--border: #1e2c31暗卡片边框构成完整的边框体系。2.5 语义链接色Semantic Accent色名色值职责弱化链接 Link Muted#9797A2带下划线装饰的弱化链接文字鼠尾草链接 Link Sage#9DABAD带青绿底调的弱化链接薰衣草链接 Link Lavender#BDBDCA更亮的链接变体薄荷链接 Link Mint#99B3AD用于主题区块的绿色底调链接变体2.6 渐变系统Gradient System暗青绿 Wash从中心#102620到边缘#02090A的径向渐变——用于产品展示区背后绿色氛围渐变hero 区块后方带绿色底调的微妙氛围渐变不借助纯色便制造深度聚光灯Spotlight聚焦的亮区渐隐至黑色——营造 keynote 式的舞台照明3. 排版规则可变字体的精密掌控3.1 字体家族Display 字体NeueHaasGroteskHelvetica 的精炼后裔可变字体回退栈NeueHaasGrotesk, Helvetica Neue, Helvetica, Arial, sans-serifOpenType 特性ss03样式集 3——独特的字形替代可用字重330、360、400、500、750可变用于所有标题、hero 文字和大型 display 元素正文Inter Variable回退栈Inter Variable, Inter, Helvetica Neue, Helvetica, Arial, sans-serifOpenType 特性ss03可用字重400、420、450、500、550可变用于正文、链接、按钮、UI 元素等宽ui-monospace回退栈ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace用于代码片段、数据标签、技术内容这三个字体族在 tokens.css 中被绑定为--font-display、--font-body、--font-mono三个 Token。注意ss03特性在 components.html 中通过font-feature-settings: ss03全局施加在body、所有标题和按钮上见其第 103、129、171 行确保整个界面字形风格统一。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-sm: 14px→--text-base: 18px→--text-lg: 20px→--text-xl: 32px→--text-2xl: 48px→--text-3xl: 70px→--text-4xl: 96px配合--leading-body: 1.56、--leading-tight: 1.00、--tracking-display: 0em。需要特别留意的是tokens.css 注释明确说明--tracking-display: 0em只描述 96px 大字的基准字距而较小 NeueHaasGrotesk 字号上的正字距0.32px–2.4px需要按 DESIGN 文档在组件层内联设置。3.3 排版原则Shopify 的排版是可变字体精密度的教科书。display 层几乎只活在 330–400 字重——羽毛般轻盈的文字像投射的光一样悬浮在暗色背景之上。这与大多数 SaaS 网站采用的粗黑方式截然相反别人在喊叫Shopify 用大尺度低语。96px 字重 330 的标题制造了巨大尺寸 × 纤细笔画的悖论既纪念碑式又脆弱易碎。ss03OpenType 特性激活的样式集给特定字符很可能是 a、g 和某些数字更精致的面貌使 Shopify 的字体区别于标准 Helvetica Neue 用法。Inter Variable 以手术级的精度处理正文层使用 420、550 等存在于传统字重档位之间的可变字重——每段文字恰好拥有它需要的视觉重量。4. 组件样式从按钮到卡片的完整配方4.1 按钮Buttons主按钮白色填充背景白色#FFFFFF文字黑色#000000边框2px solid transparent圆角全药丸9999px内边距12px 26px 12px 16px不对称——右侧更多内边距以求视觉平衡悬停轻微降低不透明度或切换背景焦点2px#36F4A4霓虹绿轮廓环过渡all 200ms ease次按钮Ghost/描边背景透明文字白色#FFFFFF边框2px solid 白色圆角全药丸9999px内边距12px 26px 12px 16px悬停填充为白色背景 黑色文字反色焦点2px#36F4A4轮廓徽章/标签中性填充背景rgba(255, 255, 255, 0.2)磨砂玻璃效果文字白色边框无圆角轻微圆角4px内边距12px 16px字体16px regular在 components.html 中按钮的落地实现与文档完全一致.btn基类使用border-radius: var(--radius-sm)即 9999px 全药丸、padding: 12px 26px 12px 16px、font-feature-settings: ss03.btn-primary:hover { opacity: 0.9; }.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }焦点环即为0 0 0 2px #36f4a4。这里印证了文档中焦点使用霓虹绿 2px 环的描述并且把焦点样式挂在了:focus-visible上保证键盘可达性而不会在鼠标点击时误触发。4.2 卡片与容器Cards Containers背景深青绿#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白色内嵌高光在顶部边缘制造微妙亮边悬停阴影扩展卡片可能轻微提亮过渡box-shadow 300ms ease、transform 200ms easetokens.css 将这套阴影封装为--elev-raised单变量见 tokens.css 第 120-125 行components.html中的.card直接引用box-shadow: var(--elev-raised)。4.3 输入框与表单Inputs Forms背景透明或暗森林#061A1C文字白色边框1px solid#3F3F46Shade-70圆角8px内边距12px 16px焦点2px solid#36F4A4霓虹绿焦点环占位符Shade-50#71717A过渡border-color 200ms ease落地代码中.field input使用background: var(--surface-warm)、border: 1px solid var(--border-soft)、border-radius: var(--radius-md)、padding: 12px 16px::placeholder颜色为var(--meta)#71717a:focus时border-color: var(--accent)并叠加box-shadow: var(--focus-ring)。4.4 导航Navigation背景透明覆盖在暗色 hero 上滚动后变为森林色#102620高度约 64px左侧Shopify wordmark 标志SVG暗底白色中/右侧18px/500 NeueHaasGrotesk 导航链接白色字距 0.72pxCTA白色药丸按钮 Start for free右侧次级 CTA白色描边 ghost 按钮悬停链接变为弱化文字#A1A1AA或获得下划线移动端汉堡菜单全屏暗色遮罩滚动时背景过渡 300ms ease4.5 图片处理Image Treatment产品截图嵌入暗色 UI 语境与周围黑暗融合管理后台界面预览展示在暗色背景上带细微卡片边框宽高比多样——hero 图片宽幅约 16:9功能截图灵活所有图片在暗色容器内齐平嵌入——无亮色边框或框架懒加载并配暗色占位表面4.6 信任指标Trust Indicators统计数据醒目展示15年、150M买家数字以 NeueHaasGrotesk display 尺度呈现合作伙伴/开发者生态 callout 区块暗色主题 testimonials 融入页面流在 components.html 的 hero 示例中可以看到完整落地.stat-number使用font-family: var(--font-display)、font-size: var(--text-3xl)70px、font-weight: 750、line-height: 1.00与文档数字以 display 尺度 750 字重呈现完全对应。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 区块内边距、大间距tokens.css 对应的变量为--space-14px到--space-1264px并额外提供了区块纵向节奏--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px正是文档中区块间 80–120px 纯黑呼吸空间的落地形式。5.2 网格与容器Grid Container最大容器宽度约 1280px居中Hero通栏、边到边暗色背景、文字居中功能区块文字 产品截图的 2 列布局统计区块带大数字的横向布局水平内边距桌面 64px、平板 32px、移动 16px网格间距主要内容块之间 24–32px落地代码中--container-max: 1280px、--container-gutter-desktop: 64px、--container-gutter-tablet: 32px、--container-gutter-phone: 16px一一对应.container采用margin-inline: auto居中并在 1023px、639px 两个断点逐级收窄内边距。5.3 留白哲学Shopify 的留白策略是剧院式的。区块之间由广袤的暗色空间分隔——80px 到 120px 的纯黑呼吸区——创造出演示而非网页的节奏。每个内容块在 keynote 式滚动中是自己的一张幻灯片。区块内部间距更紧凑、更有目的性在广阔虚空之上制造焦点密度。宏观层面的空旷与微观层面的精确之间的对比正是网站电影化节奏的来源。5.4 圆角尺度Border Radius Scale值使用场景4px标签、徽章、微元素8px标准卡片、输入框、视频容器12px重点卡片、图片容器、按钮非药丸20px顶部圆角卡片20px 20px 0 0、弹窗页头340px大型装饰性圆角元素9999px药丸按钮、药丸徽章、导航元素tokens.css 将其收敛为--radius-sm: 9999px全药丸——所有 CTA 按钮、--radius-md: 8px标准卡片/输入框、--radius-lg: 12px重点卡片、--radius-pill: 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键盘焦点环霓虹绿Shopify 的阴影系统异乎寻常地精密。卡片不使用单一值阴影而是采用堆叠多层方案1px 环用于边界定义2px/4px/8px 渐进模糊模拟自然光衰减再加上rgba(255,255,255,0.03)的微妙内嵌白色微光模拟顶部照明的玻璃表面。在暗色背景上阴影从本已很暗的表面继续压暗因此阴影更像环境光遮蔽而非传统抬升——卡片看起来微微沉入表面而不是悬浮其上。tokens.css 将中等等级封装为--elev-raised含完整的 5 层声明--elev-ring: 0 0 0 1px var(--border)对应 Subtle 层--elev-flat: none对应 Base 层--focus-ring: 0 0 0 2px #36f4a4对应焦点层。装饰性深度暗青绿渐变hero 区块和产品展示背后的氛围径向 wash聚光灯效果聚焦亮区渐隐至黑色营造 keynote 式舞台照明边缘微光通过 inset box-shadow 在暗卡片上制造微亮色边缘绿色氛围光晕背景渐变中微弱的绿色底调呼应品牌强调色7. 该做与不该做Dos and Donts应该做Do使用暗青绿-黑表面层级Void → Deep Teal → Dark Forest → Forest营造深度保持 display 排版字重 330–400——空灵轻盈是设计的签名霓虹绿#36F4A4仅用于焦点状态和关键强调高亮所有主 CTA 按钮应用 9999px 圆角——全药丸不可妥协卡片抬升使用多层阴影系统——单层阴影看起来扁平所有文字保持ss03OpenType 特性——它是排版身份的一部分正文用 Inter Variable、标题用 NeueHaasGrotesk——绝不混用角色区块间制造剧院式间距80px以获得电影化节奏不该做Dont暗色背景上不要用纯黑#000000作文字——只用白色#FFFFFF不要引入暖色橙、红、黄——色板严格偏冷绿、青绿、中性色正文 NeueHaasGrotesk 字重不要超过 500——重字重破坏空灵感不要在大面积表面上使用绿色强调——霓虹绿只用于小而精确的高亮交互元素不要用直角0px 圆角——一切都要圆润不要添加亮色背景——暗色主题是根本不是可选项不要使用单层 box-shadow——堆叠方案才是系统正文 line-height 不要超过 1.56——Shopify 文字相对紧凑不要在相同字号/角色下混用 NeueHaasGrotesk 和 Inter——它们的字重尺度不同标题不要用低于 0 的字距——Shopify 标题字距中性或为正8. 响应式行为断点名称宽度关键变化移动640px单列、汉堡导航、display 文字缩放至 48px、16px 内边距平板640–1024px2 列网格开始、display 文字 70px、32px 内边距桌面1024–1440px完整布局、展开导航、96px display、64px 内边距大桌面1440px最大宽度容器居中、区块间距增大落地代码中components.html使用media (max-width: 1023px)将.container内边距切到 64→32px、区块纵向间距切到 96→64px并用media (max-width: 639px)继续切到 16px/40px.hero-grid与.stats-grid分别在 1023px 和 639px 处塌陷为单列。触控目标Touch Targets最小触控目标44×44pxWCAG AAA药丸按钮最小高度 48px水平内边距慷慨导航链接44px 触控区卡片表面整卡在可链接处均可点击塌陷策略Collapsing Strategy导航完整横向链接 → 1024px 以下汉堡菜单logo 与 CTA 按钮保持可见Hero 区块96px display → 平板 70px → 移动 48px保持单列居中功能区块2 列文字图片 → 768px 以下堆叠为单列统计横向行 → 移动端堆叠纵向区块内边距64px → 40px → 24px → 16px 随视口收窄卡片网格 → 堆叠移动端保持通栏图片行为产品截图暗色容器内响应式缩放保持宽高比Hero 图片所有断点通栏懒加载并配暗色占位管理后台 UI 预览按比例缩放移动端可能裁切所有图片使用 CDN 配合响应式 srcset9. Agent 提示词指南让 AI 生成 Shopify 风格界面9.1 快速颜色速查主 CTAShopify 白#FFFFFF页面背景Void 黑#000000卡片表面深青绿#02090A区块背景暗森林#061A1C抬升背景森林#102620强调色霓虹绿#36F4A4正文文字白色#FFFFFF弱化文字Muted#A1A1AA暗色边框暗卡片边框#1E2C319.2 组件提示词示例以下提示词直接来自设计规范可原样复制给 Claude Code、Codex、Cursor 等编码 Agent 使用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 迭代指南对已有页面进行精修时一次只聚焦一个组件引用本文档中具体的颜色名称和十六进制码记住这是暗色优先设计——亮色表面是例外而非规则display 文字必须始终如羽毛般轻盈字重 330–400——若显笨重降低字重霓虹绿#36F4A4珍贵——仅用于焦点与强调节制使用暗色表面层级黑 → 深青绿 → 暗森林 → 森林制造微妙深度阴影必须多层——单一box-shadow值捕捉不到 Shopify 卡片的感觉ss03OpenType 特性必须在所有文字上开启以保证排版一致性10. 在 Open Design 仓库中的使用方式本规范在仓库中是一份完整可用的设计系统包包含设计文档、Token 样式表、组件实现与预览页面。按 USAGE.md 的推荐阅读顺序先读USAGE.md理解包契约再读DESIGN.md了解视觉意图、约束与反模式将tokens.css的:rootToken 块粘贴进第一个 artifact 的style块再编写组件 CSS用components.manifest.json快速浏览组件清单需要精确选择器或状态时打开components.html需要视觉核对时检查preview/目录下的colors.html、typography.html、spacing.html三个预览页需要强调的契约约束来自 USAGE.md保留 schema Token 名称原样保证跨品牌切换可靠用--accent表示主要操作、链接、焦点状态以及一个清晰焦点元素优先复用components.manifest.json中的组件组而不是发明新控件避免在复制的:rootToken 块之外使用裸 hex 值避免独立于tokens.css重定义 Tailwind 或 design-token 值不主张原始上游来源证据——本包基于仓库内置的 curated 打包 fixture不添加components.html或DESIGN.md中未体现的新组件配方在工程实现层面components.manifest.json提供了完整的质量审计它声明了 58 个 Token全部已声明且被引用undeclaredReferenced为空数组35 个选择器、15 个类、22 个元素并标注了 buttons、inputs、cards、links、icons、typography、layout 等组件组及其引用的 Token 列表——例如 buttons 组引用--radius-sm全药丸、--motion-base200ms、--ease-standard等。这份清单证明所有可见值均来自tokens.css实现了单一事实来源的 Token 治理。如果你希望在生成 artifact 时对这套暗色系统做无障碍把关manifest.json 中建议关联的 craft 规范为color与accessibility-baseline仓库根目录 craft/ 目录下可找到对应文档这也与设计中 44×44px 触控目标、白色正文对比度等细节相呼应。结语这套 Shopify 风格设计系统证明了克制的力量四层暗色表面、一个高能量强调色、一套空灵的 330 字重可变字体、一种不可妥协的全药丸按钮。它把电商科技包装成科幻电影的未来感同时通过完整的 Token 体系让任何 Agent 或开发者都能精确复刻。结合 tokens.cssToken 定义、components.html组件实现、DESIGN.md完整规范三件套你可以在任何项目中快速落地这套暗色电影化视觉语言。赞分享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 设计系统实践复刻 Discord 暗色语音社区风格的完整设计 Token 指南Open Design 设计系统实践复刻 Discord 暗色语音社区风格的完整设计 Token 指南 本指南以 Open Design 仓库内置的 DiscAI 应用人工智能AI 技能设计系统媒体生成在 open-design 中复刻 Airbnb 设计语言Rausch 色彩系统、Cereal 字族与 Agent 提示词规范的完整实现指南在 open design 中复刻 Airbnb 设计语言Rausch 色彩系统、Cereal 字族与 Agent 提示词规范的完整实现指南 本篇指南以 opAI 应用人工智能AI 技能设计系统媒体生成Open Design 的 Shopify 暗色电影感设计系统从色彩令牌、超轻字体到 Agent 提示词的全方位实现指南Open Design 的 Shopify 暗色电影感设计系统从色彩令牌、超轻字体到 Agent 提示词的全方位实现指南 本文以 DESIGN fr.md hAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考