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/webflow/DESIGN.md及其多语言版本 DESIGN-pl.md为核心规范结合 tokens.css、components.html、design-tokens.json 与 components.manifest.json 等制品系统拆解这套视觉化网页搭建平台风格设计系统的完整定义。你将掌握Webflow 风格的色彩/字体/阴影/圆角令牌体系如何映射为 CSS 变量5 层级联阴影与 4px 保守圆角如何塑造工具级品牌气质以及这套规范如何作为可直接执行的 Agent 提示词用于生成还原度更高的营销页、落地页与仪表盘原型。1. 设计系统定位与包结构design-systems/webflow/是 Open Design 仓库中按品牌组织的 Design System 2.0 包。从 manifest.json 可以看到它的完整契约schemaVersion为od-design-system-project/v1类别为Design Creative设计与创意描述为视觉化网页搭建平台带蓝色强调的精致营销站美学。该包的典型文件构成如下文件角色DESIGN.md视觉意图、约束与反模式规范本指南主体tokens.css结构化的令牌绑定即插即用的:root变量块design-tokens.json56 个令牌的机器可读清单含层级、置信度、来源行号tailwind-v4.cssTailwind v4 派生输出components.html参考组件夹具Hero、特性卡片、表单components.manifest.json组件清单选择器、类、令牌引用、组件分组USAGE.md包使用指南阅读顺序与 Do/Avoidpreview/colors / typography / spacing 三个可视化预览页source/审计证据evidence.md、tokens.source.json、token-contract.report.json根据 USAGE.md 的阅读顺序使用者应先读包契约再读 DESIGN.md 理解视觉意图随后把tokens.css粘贴到第一个 artifact 的style块中最后以components.manifest.json作为紧凑组件清单。该包基于 Open Design 精选的 bundled fixture 整理而来不声称重新抓取上游品牌官网见 source/evidence.md这一边界是理解整套规范来源的前提。2. 视觉主题与品牌气质Webflow 官网是一个工具优先的视觉富集平台用无代码设计design without code这一信息贯穿始终。其气质通过以下关键特征定义白色画布 近黑文字#080808不是纯黑#000000近黑是 DESIGN.md 明确点名的值避免死黑带来的生硬感Webflow 蓝#146ef5唯一的品牌色与交互色承担 CTA、链接、焦点环的全部职责WF Visual Sans Variable品牌自定义可变字体展示display用 600、正文body用 500 字重丰富的次级色板紫#7a3dff、粉#ed52cb、绿#00d722、橙#ff6b00、黄#ffae13、红#ee1d36保守的 4px–8px 圆角锐利、工具化而非圆润多层阴影堆叠5 层级联阴影是深度签名大写标签10px–15px、字重 500–600、宽字距0.6px–1.5px按钮悬停 translate(6px)微动效。在 tokens.css 的文件头注释中这些品牌决策被逐条编码白色画布不做暖色调迁移章节变化来自边框与 5 层阴影而非着色--accent-hover使用文档指定的#0055d4而非公式化的黑色混合——Webflow 品牌规范直接命名了该悬停值因此被原样保留。3. 色彩令牌主色、次级色、中性色与语义色3.1 主色Primary角色色值令牌用途近黑#080808--fg主要文本Webflow 蓝#146ef5--accent主 CTA、链接、焦点环蓝 400#3b89ff--accent的亮交互变体更亮的交互蓝蓝 300#006acc--accent深色变体更深沉的蓝色变体按钮悬停蓝#0055d4--accent-hover悬停态品牌文档指定值注意DESIGN.md 中列出的 Blue 400 / Blue 300 作为品牌级描述存在而 tokens.css 中实际落地为--accent、--accent-hover、--accent-activecolor-mix(in oklab, var(--accent), black 14%)三个交互态令牌--accent-active是按下态用 oklab 色彩空间混合 14% 黑色得到。3.2 次级强调色Secondary Accents紫#7a3dff--_color---secondary--purple粉#ed52cb--_color---secondary--pink绿#00d722--_color---secondary--green橙#ff6b00--_color---secondary--orange黄#ffae13--_color---secondary--yellow红#ee1d36--_color---secondary--red在令牌层次级色被绑定到语义令牌--success: #00d722、--warn: #ffae13、--danger: #ee1d36见 tokens.css。这一设计的核心意图是让状态色留在品牌色板内部而不是借用 schema 的通用语义色——Webflow 的绿/黄/红足够鲜明能直接读出状态语义而不脱离系统。3.3 中性色Neutral角色色值令牌用途灰 800#222222—深色次级文本灰 700#363636--fg-2中间调文本、正文描述灰 300#ababab--meta弱化文本、占位符中间灰#5a5a5a--muted链接文本、说明文字边框灰#d8d8d8--border边框、分隔线悬停边框#898989—悬停态边框tokens.css 将这四级前景色描述为四层独立绑定的 ramp而非互相 alias因为 Webflow 营销站真实使用全部四层H1 黑、正文灰 700、说明中间灰、占位符/禁用灰 300。另有--border-soft: #ebebeb用于内部行分隔线避免与卡片轮廓视觉竞争。3.4 阴影令牌5 层级联阴影--elev-raised完整定义如下--elev-raised: 0px 84px 24px rgba(0, 0, 0, 0), /* 外层在场感垫层alpha 0 */ 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09); /* 内层 3px 接触阴影 */components.html 中特性卡片对这条规则的注解是五层阴影从 84px 的在场感到 3px 的接触感让卡片像被构建进页面里而不是漂浮在页面上。tokens.css 的注释强调永远不要把这堆叠压平成单个模糊——级联正是 Webflow 卡片物理感的来源。4. 字体排印系统4.1 字体栈品牌字体WF Visual Sans Variable展示 正文后备Arial等宽字体Inconsolata代码块伴生字体设计 代码双身份。design-tokens.json 记录的完整字体栈为--font-display: WF Visual Sans Variable, Inter, Arial, system-ui, sans-serif; --font-body: WF Visual Sans Variable, Inter, Arial, system-ui, sans-serif; --font-mono: Inconsolata, ui-monospace, SF Mono, Menlo, Monaco, Consolas, monospace;当品牌字体未加载时Inter/Arial 保证 artifact 可读。4.2 字号层级表DESIGN.md §3 完整继承角色字号字重行高字距备注Hero 展示80px6001.04-0.8px章节标题56px6001.04normal副标题32px5001.30normal特性标题24px500–6001.30normal正文20px400–5001.40–1.50normal标准正文16px400–5001.60-0.16px按钮16px5001.60-0.16px大写标签15px5001.301.5pxuppercase说明文字14px400–5001.40–1.60normal大写徽章12.8px5501.20normaluppercase微大写10px500–6001.301pxuppercase代码————Inconsolata 等宽该表在令牌层映射为 8 级字号阶梯--text-xs: 12px→--text-sm: 14px→--text-base: 16px→--text-lg: 20px→--text-xl: 24px→--text-2xl: 32px→--text-3xl: 56px→--text-4xl: 80px见 tokens.css。另有--leading-tight: 1.04展示/章节标题行高、--leading-body: 1.6标准正文行高、--tracking-display: -0.01em80px 显示字号的-0.8px字距的 em 相对形式随字号等比缩放。5. 组件样式规范5.1 按钮Buttons透明按钮文字#080808悬停时图标 translateX(6px)白色圆形按钮50% 圆角、白底蓝色徽章按钮#146ef5背景、4px 圆角、字重 550。在 components.html 中按钮实现为三态体系主按钮.btn-primary--accent背景 → 悬停--accent-hover→ 按下--accent-active次按钮.btn-secondary白底、近黑文字、--border描边悬停边框转#898989。签名动效translate(6px)被精确落在.btn:hover .btn-icon { transform: translateX(6px); }上过渡使用--motion-fast: 150ms与--ease-standard: cubic-bezier(0.2, 0, 0, 1)。5.2 卡片Cards1px solid #d8d8d8边框、4px–8px 圆角、--elev-raised5 层级联阴影。卡片悬停时translateY(-2px)微抬升、边框转#898989。卡片内链接使用--accent蓝色。5.3 徽章Badges蓝色调 10% 透明度背景、4px 圆角。实现为color-mix(in oklab, var(--accent), transparent 90%)components.html字重 550 对应大写徽章层级。另有.badge-success用绿色 12% 透明度背景表达Live状态配 6px 圆点指示器。5.4 输入框与表单输入框 4px 圆角、静息态--border边框、悬停转#898989、聚焦时--accent边框 --focus-ring0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)蓝色焦点环占位符用--meta灰。6. 布局系统间距、圆角与断点6.1 间距结构节奏4px 网格基础8 级阶梯--space-1: 4px→--space-12: 48px4/8/12/16/20/24/32/48组件内微间距DESIGN.md §5 的分数尺度1px、2.4px、3.2px、5.6px、6px、7.2px、9.6px作为组件内部内联 padding 使用不单独建令牌章节节奏--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 48px对应 992/768/479 三档断点容器--container-max: 1200pxgutter 桌面 24px / 平板 16px / 手机 12px。6.2 圆角2px、4px、8px、50%pill 9999px四档。--radius-sm: 4px按钮、输入框、chip、--radius-md: 4px卡片、弹窗、--radius-lg: 8px特性容器即软上限、--radius-pill: 9999px徽章、头像。DESIGN.md §7 明确功能元素圆角不得超过 8px。6.3 断点479px手机、768px平板、992px桌面。在 components.html 中断点通过media (max-width: 991px)与media (max-width: 479px)实现容器 gutter 与章节纵向 padding 随档位收缩.features-grid三列 → 两列 → 单列.hero-grid双栏 → 单栏。7. 深度5 层级联阴影系统这是整套设计系统中识别度最高的单点特征。DESIGN.md §6 只给了标题但 tokens.css 给出了完整实现与设计意图--elev-flat: none—— 平面层级--elev-ring: 0 0 0 1px var(--border)—— 仅描边层级--elev-raised—— 5 层级联84px 外层在场感垫层 alpha 0 3px 内层接触阴影 三层中间平滑衰减。层级化3 级 elevation让设计系统能在平面/描边/悬浮之间做受控切换而 raised 层永不简化为单模糊。该令牌同时也是 design-tokens.json 中 confidence 为 high 的 56 个令牌之一来源行号精确指向tokens.css:162。8. 响应式策略三档断点479/768/992px与 DESIGN.md §8 一一对应。要点内容宽度1200px 上限保证行长可读gutter 递减24 → 16 → 12px章节节奏96 → 64 → 48px栅格降级3 列 → 2 列 → 1 列。9. Dos and Donts规范红线Do应做使用 WF Visual Sans Variable字重 500–600CTA 使用 Webflow 蓝#146ef5功能元素用 4px 圆角按钮悬停做 translate(6px) 动效。Dont勿做功能元素圆角超过 8px在主 CTA 上使用次级强调色紫色等只能做点缀。USAGE.md 补充了工程红线保留 schema 令牌名精确不变以保证跨品牌切换可靠使用--accent表达主操作、链接、焦点态与唯一视觉焦点优先复用components.manifest.json中的组件组而非发明新控件避免在:root令牌块之外使用裸 hex 值避免绕过tokens.css独立重定义 Tailwind 或设计令牌值。10. Agent 提示词指南可直接执行DESIGN.md §9 给出的 Agent 提示指南完整如下文本近黑#080808CTAWebflow 蓝#146ef5背景白#ffffff边框#d8d8d8次级强调紫#7a3dff、粉#ed52cb、绿#00d722结合 USAGE.md 的工程约束一个可靠的 Agent 执行流程是通读本规范DESIGN.md理解视觉意图与反模式将 tokens.css 的:root块整体粘贴进 artifact 首个style块用 components.manifest.json 的组件组清单buttons / inputs / cards / badges / links / keyboard / icons / typography / layout挑选现成组件组而非从零发明需要精确选择器或状态时打开 components.html视觉校验可参考 preview/ 的 colors / typography / spacing 三个预览页写组件 CSS 时全部引用--令牌不出现裸色值。11. 令牌契约与审计链路design-tokens.json 展示了这套系统的可审计性56 个令牌全部被tokens.css声明覆盖totalTokens: 56、sourceBackedTokens: 56质量评分 100、等级 excellent。令牌按四层组织A1-identity8 个--bg、--surface、--fg、--muted、--border、--accent、--font-display、--font-body等品牌身份层A1-structure18 个字号阶梯、行高、章节节奏、容器宽度等结构层A226 个交互态、语义色、间距、圆角、阴影、动效等通用层B-slot4 个--surface-warm、--fg-2、--meta、--border-soft等插槽别名层。每个令牌都带sources字段精确指向tokens.css的声明行号如--accent→tokens.css:75、--elev-raised→tokens.css:162。source/token-contract.report.json 将每个 TOKEN_SCHEMA 绑定映射回 tokens.css 的声明行design-tokens.json与tailwind-v4.css被视为派生输出应从 report 与令牌样式表重新生成而非手工编辑见 source/evidence.md。12. 实战用这套系统搭建一个 Webflow 风格营销页结合 components.html 的实际实现一套可复用的骨架如下main classcontainer !-- Hero 区双栏栅格 -- section div classhero-grid div classstack-4 p classeyebrowEyebrow 大写眉题/p h180px Hero 标题/h1 p classlead20px 引导段落fg-2 灰色/p div classhero-actions a href# classbtn btn-primary主 CTA svg classicon btn-icon…/svg/a a href# classbtn btn-secondary次 CTA/a /div /div aside classhero-meta!-- 状态面板badge-success / badge-accent --/aside /div /section !-- 特性区3 列卡片5 层级联阴影 -- section div classfeatures-grid article classcardh3特性标题/h3p classbody-muted body-sm说明/p/article !-- × 3 -- /div /section !-- 表单区输入框 蓝色焦点环 -- section form classform div classfield labelWork email/label input typeemail placeholderyoustudio.com / p classfield-help帮助文字/p /div button classbtn btn-primaryGet started/button /form /section /main关键检查点所有颜色来自令牌不写裸 hex卡片统一--elev-raised按钮图标悬停translateX(6px)焦点态统一蓝色--focus-ring断点处栅格降级。13. 小结Webflow 设计系统包的核心价值在于把品牌气质翻译成可执行、可审计、可跨品牌切换的令牌契约。白色画布 近黑墨色 唯一蓝色强调#146ef5 保守 4px 圆角 5 层级联阴影 WF Visual Sans Variable 的 500–600 字重体系共同构成了工具级、构建感、非漂浮的视觉语言。开发者或 Agent 使用本包时只要遵循先令牌、后组件、再布局的次序并严守不超 8px 圆角、主 CTA 只用蓝色、不写裸色值三条红线就能稳定产出还原度高的 Webflow 风格页面。如需深入可继续阅读 DESIGN.md 全文、tokens.css 的逐行注释或直接打开 components.html 与 preview/ 预览页对照验证。赞分享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 中的 Airtable 设计系统从品牌视觉解析到可落地 Design Token 的完整指南Open Design 中的 Airtable 设计系统从品牌视觉解析到可落地 Design Token 的完整指南 本文以 Open Design 仓库 dAI 应用人工智能AI 技能设计系统媒体生成Open Design 仓库中的 Wise 风格设计系统金融科技绿色品牌的设计令牌与 Agent 落地指南Open Design 仓库中的 Wise 风格设计系统金融科技绿色品牌的设计令牌与 Agent 落地指南 本文以 design systems/wise/DAI 应用人工智能AI 技能设计系统媒体生成Open Design 中的 Webflow 设计系统从视觉意图到可落地 Design Token 的完整实现Open Design 中的 Webflow 设计系统从视觉意图到可落地 Design Token 的完整实现 本文以仓库内 design systems/wAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考