人工智能AI Agent大模型AI 应用媒体生成【免费下载链接】xiaobei为OPC/中小微企业量身打造的自媒体获客智能体项目地址https://gitcode.com/gh_mirrors/wi/xiaobei点击查看免费下载导读本文讲解小贝xiaobei开源仓库中content-producer创作团队所内置的Stripe 设计系统规范crews/content-producer/skills/design-full/design-systems/stripe.md。这套规范是design-full平面设计全案技能内置的 14 套品牌设计系统之一专用于 SaaS 产品页、支付与金融科技落地页的视觉设计。读完本文你将完整掌握 Stripe 风格的色彩 Token、排版层级、组件样式、间距网格、阴影体系与响应式折叠策略并了解如何在design-full的七步工作流中通过design-full pick选取并落地这套设计系统直接产出风格一致的 HTML/CSS 页面。1. 这套规范在仓库中的定位design-full 的内置设计系统库design-full是content-producer专业内容制作者团队的核心技能之一负责完整网页/落地页、APP/产品界面、品牌视觉体系三类平面设计任务。技能工作流见 SKILL.md包含七个强制步骤design-full init 任务名建工作区落design_assets/YYYY-MM-DD-任务名/含brief.md模板、source/、output/Brief 确认强制闸门确认前不得动手design-full pick 风格描述从内置库匹配设计系统强制步骤不得凭印象直接写 CSS素材获取pexels/pixabay 优先、siliconflow-img-gen 备选HTML CSS 编写CSS Custom Properties 定义设计 token严格遵循所选 DESIGN.md视觉 Review强制闸门对照 brief DESIGN.md 逐项检查最多 3 轮交付归档输出到output/并更新index.md设计系统库由 14 套知名品牌规范组成索引文件为 design-systems/index.json。Stripe 在其中的注册条目为{ id: stripe, name: Stripe, category: fintech, keywords: [紫色, 渐变, 优雅, 金融科技, 轻盈], description: 紫色渐变 weight-300 优雅排版 信任感金融风格, colorPrimary: #635BFF, darkMode: true, bestFor: SaaS 产品页、支付/金融科技落地页, file: stripe.md }匹配逻辑由 scripts/pick.sh 实现把用户输入的风格描述与每条目的keywords、name、category、description做加权计分——关键词命中 3、类别命中 2、名称命中 5、通用词命中 1——按分数降序输出标记匹配度星数并给出首选推荐同时支持darkMode与colorPrimary概要展示。这意味着当你用design-full pick 紫色渐变金融科技落地页这类描述时Stripe 会被高分命中并推荐为首选选定后即把本规范写入任务的DESIGN.md后续所有 HTML/CSS 产出的色彩、字体、间距、组件样式都以此为准。2. Visual Theme Atmosphere工程化的优雅Stripe 的视觉身份建立在engineered elegance工程化的优雅之上干净的白色画布点缀标志性紫色渐变weight-300 的正文字重带来轻盈自信的观感整体是一种信任优先的金融美学——精确但不觉冰冷。系统在亮白表面与深海军蓝区块之间交替紫色是镀铬表面上的唯一彩色强调。每一处表面都经过考量、承重而不过度装饰。整体观感可以概括为以瑞士海报的克制呈现值得信任的基础设施标题使用干净的无衬线几何字体、light300字重加宽字距营造通透的权威感代码与数据表面置于深色井中与白色画布形成强烈对比紫色渐变流过 hero 横幅与 CTA在近乎中性的色板中注入系统特有的温度。关键特征白色画布#FFFFFF为默认页面背景#F6F9FC用于内嵌色带标志性紫色渐变#635BFF→#7A73FF仅用于 CTA、hero 横幅与强调表面深海军蓝#0A2540用于深色区块与代码井——从不使用纯黑Weight-300 正文字重为默认构成系统标志性的轻盈感慷慨留白96px 区块节奏 紧凑卡片内边距16-24px柔和的分层阴影把卡片轻轻托起无硬边圆角卡片与容器 6-8px输入框与小元素 4px3. Color Palette Roles完整色彩系统3.1 Brand Accent品牌与强调色名称Hex角色purple-600#635BFF主品牌色。CTA、链接、激活态、hero 渐变起点。purple-500#7A73FF主 hover 色、渐变终点、更浅的强调表面。purple-400#8B83FF焦点环、微妙紫色边框、禁用态紫色。purple-100#E8E5FF高亮/选中项背景的柔和紫色调。purple-50#F4F2FF最淡的紫色洗染——行内代码背景、微妙行 hover。gradient-herolinear-gradient(135deg, #635BFF 0%, #7A73FF 100%)hero 横幅背景、主 CTA 填充、特性强调色带。3.2 Surface表面色名称Hex角色white#FFFFFF默认页面画布、卡片背景、输入框填充。gray-50#F6F9FC内嵌色带、交替区块背景、表格行条纹。gray-100#E8ECF1分隔线、浅色表面的发丝边框、微妙分隔符。gray-200#C1C9D2禁用边框、占位符下划线、次级分隔线。navy-900#0A2540深色区块背景、代码井、页脚画布。navy-800#1A2E4A抬高的深色表面、深色卡片背景。navy-700#2D3E54次级深色表面、井内面板背景。3.3 Text文本色名称Hex角色ink#1A1F36亮色表面上的主正文文本。带温度的近黑。body#425466长文正文ink 过重时使用。charcoal#5A6980说明文字、元数据、次级内容。mute#697386占位符文本、辅助文案、非激活标签。ash#8792A2禁用文本、三级标签、最低强调工具。stone#A3ACB9禁用前景、中性图标轮廓。on-dark#FFFFFF海军蓝/深色表面上的主文本。on-dark-mutergba(255,255,255,0.72)深色表面上的次级文本。3.4 Semantic语义色名称Hex角色success#30B566成功态、确认、正向指示。success-soft#E6F9EF成功背景色晕染。warning#E5A54B警告态、谨慎指示。warning-soft#FFF6E9警告背景色晕染。error#D84040错误态、破坏性操作、校验失败。error-soft#FDE8E8错误背景色晕染。info#00B4D8信息徽标、中性高亮。info-soft#E3F6FC信息背景色晕染。3.5 Dark Mode Override暗色模式覆盖名称Hex角色dm-canvas#0A2540默认页面背景。dm-surface#1A2E4A卡片与抬高面板背景。dm-surface-elevated#2D3E54暗色按钮填充、暗色输入框填充。dm-hairlinergba(255,255,255,0.08)深色表面上的卡片边框。dm-hairline-strongrgba(255,255,255,0.16)深色表面上更强的分隔线。配色角色定位小结紫色是唯一的彩色强调色只做签名不做墙纸语义色绿/琥珀/红/青是功能性的不参与装饰。这一点与 SKILL.md 中的品牌规范应用原则一致——若MEMORY.md中有品牌色/字体记录则强制指定无记录则第一次设计后询问用户认可再记入核心品牌色/Logo 不得随意替换其余 token 才可根据设计系统适配。4. Typography Rules排版规则4.1 字体族角色字体族回退说明Display UIInter-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif主字体。加载时使用font-display: swap。CodeJetBrains MonoSFMono-Regular, Consolas, Liberation Mono, Menlo, monospaceAPI 示例、行内代码、终端区块。Inter 是主字体。Stripe 标志性的轻盈感来自以 weight 300 作为默认正文字重——这是不可妥协的。标题与展示级文字用 weight 500 或 600 做结构对比绝不用 700。结果是通透的层级——字重对比承担了字号单独无法完成的层次工作。4.2 层级 Token 表Token字号字重行高字距用途display-2xl72px6001.05-1.5pxHero 大标题。每页一个。display-xl56px6001.1-1px区块开场、落地页大标题。display-lg44px5001.15-0.5px子区块展示、定价档位名。display-md32px5001.25-0.3px特性卡片标题、区块内标题。heading-lg24px5001.35-0.2px卡片标题、面板标题。heading-md20px5001.40卡片内小节标题、侧边栏标题。heading-sm16px5001.50小标题、表单组标签。body-lg18px3001.650导语段落、hero 副标题。body-md16px3001.60默认正文、表单标签、描述。body-sm14px3001.60卡片描述、元数据、次级文案。caption12px4001.50.2px时间戳、页脚链接、小工具文本。link-md16px5001.60行内正文链接——500 字重区别于正文 300。button-lg16px5001.00.2px大号 CTA 按钮标签。button-md14px5001.00.2px默认按钮标签。code-md14px4001.70代码块、行内代码、API 路径。code-sm12px4001.60标签页标签、小代码 token。4.3 排版原则Weight-300 是默认值。正文用 300 字重造就 Stripe 标志性的轻盈。绝不要为了强调把正文升到 400——强调应靠标题用 500或切换为JetBrains Mono做技术性强调。展示级字号的负字距负字距把大号文字收拢为整体。负值随字号等比缩放72px 时 -1.5px递减到 16px 时为 0。行高在正文尺寸处打开1.6-1.65以维持轻盈字重的可读性展示级收紧到 1.05-1.25。全系统无衬线UI 全部无衬线、代码全部等宽。实践提示design-full的 CSS Token 规范SKILL.md要求用 CSS Custom Properties 承载字体层级例如--text-display: clamp(3rem, 1rem 7vw, 8rem)、--text-body: clamp(1rem, 0.9rem 0.5vw, 1.125rem)。Stripe 的display-2xl72px 在移动端按 8.2 节缩放策略等比降级正好适合用clamp()表达。5. Component Stylings组件样式规范5.1 Buttons按钮button-primary紫色渐变主 CTA背景gradient-herolinear-gradient(135deg, #635BFF, #7A73FF)文本#FFFFFF排版button-md14px / 500圆角6px内边距10px 20px高度40px边框noneHover背景转为纯#635BFF亮度轻微提升Active/pressed背景#5850E6深一档Focus3px 焦点环purple-400偏移 2px过渡background-color 150ms easebutton-primary-lg大号 hero CTA与button-primary相同但排版为button-lg16px / 500、内边距 14px 28px、高度 48px、圆角 8pxbutton-secondary描边按钮背景#FFFFFF文本ink#1A1F36排版button-md边框1px solidgray-100#E8ECF1圆角 6px内边距 9px 19px高度 40pxHover背景gray-50边框加深为gray-200Active背景gray-100边框charcoalFocus3px 焦点环purple-400button-ghost行内文本按钮背景透明文本purple-600排版button-md无边框内边距 4px 8px高度 autoHover文本purple-500、淡purple-50背景Active文本purple-600、背景purple-100button-dark深色表面上的 CTA背景#FFFFFF文本navy-900排版button-md圆角 6px内边距 10px 20px高度 40pxHover背景gray-50Active背景gray-100button-disabled背景gray-50文本ash边框 1px solidgray-100光标not-allowed无 hover/active 态5.2 Cards卡片card-default标准内容卡背景#FFFFFF边框 1px solidgray-100圆角 8px内边距 24px阴影0 2px 4px rgba(10,37,64,0.04), 0 4px 16px rgba(10,37,64,0.06)Hover阴影加深为0 4px 8px rgba(10,37,64,0.06), 0 8px 24px rgba(10,37,64,0.08)轻微translateY(-1px)过渡box-shadow 与 transform 200ms easecard-elevated突出/高亮卡背景#FFFFFF边框 1px solidgray-100圆角 8px内边距 32px阴影0 4px 8px rgba(10,37,64,0.06), 0 8px 24px rgba(10,37,64,0.08)用于定价推荐档、主特性展示card-dark深色表面上的卡片背景navy-800边框 1px soliddm-hairlinergba(255,255,255,0.08)圆角 8px内边距 24px阴影0 4px 16px rgba(0,0,0,0.2)文本on-darkcard-pricing定价档位卡背景#FFFFFF边框 1px solidgray-100圆角 12px内边距 32px阴影0 2px 4px rgba(10,37,64,0.04), 0 4px 16px rgba(10,37,64,0.06)card-pricing-featured推荐定价档同card-pricing但边框 2px solidpurple-600阴影升级为紫色辉光0 4px 16px rgba(99,91,255,0.12), 0 8px 32px rgba(99,91,255,0.08)5.3 Inputs输入框input-default标准文本输入背景#FFFFFF文本ink占位符mute排版body-md16px / 300边框 1px solidgray-100圆角 6px内边距 10px 12px高度 40pxHover边框gray-200Focus边框purple-600、3px 焦点环purple-100Error边框error、焦点环error-softDisabled背景gray-50、文本ash、光标 not-allowed过渡border-color 与 box-shadow 150ms easeinput-dark深色表面上的输入框背景navy-800文本on-dark占位符on-dark-mute边框 1px soliddm-hairlineFocus边框purple-500、焦点环rgba(123,115,255,0.2)search-bar搜索框同input-default但高度 44px、圆角 8px、内边距12px 16px 12px 40px左侧留出放大镜图标5.4 Navigation导航nav-primary顶部导航栏背景#FFFFFF 1px 底部边框gray-100高度 64px布局左侧 Logo、中间导航链接、右侧 CTA 次级链接链接文本body-sm14px / 300、色charcoalHover色ink 淡gray-50背景胶囊Active色purple-600、字重 500滚动时 sticky出现0 2px 8px rgba(10,37,64,0.06)阴影nav-primary-dark深色区块顶部导航背景navy-900 1px 底部边框dm-hairline链接文本on-dark-muteHover色on-darkdm-surface淡背景Active色purple-500nav-mobile移动端导航左侧汉堡图标、中间 Logo、右侧 CTA抽屉从右侧滑入背景navy-900链接纵向堆叠body-lg18px / 300、色on-dark链接组间dm-hairline分隔线5.5 Other Components其他组件badge行内状态徽标背景purple-50文本purple-600排版caption12px / 400圆角 9999px全胶囊内边距 3px 10px变体badge-success绿、badge-warning琥珀、badge-error红、badge-info青——各自使用对应 semantic-soft 背景与语义文本色code-block代码井背景navy-900文本on-dark排版code-md14px / JetBrains Mono圆角 8px内边距 20px 24px顶部标签条code-sm12px未激活标签on-dark-mute激活标签on-dark 2pxpurple-600底部边框divider区块分隔线亮色表面1px solidgray-100深色表面1px soliddm-hairlinetooltip悬浮提示背景navy-900文本on-dark排版body-sm圆角 6px内边距 8px 12px阴影0 4px 16px rgba(0,0,0,0.2)箭头为 6px CSS 三角形navy-9006. Layout Principles布局原则6.1 间距刻度Token值用途xxs4px行内紧凑间隙、图标到标签间距xs8px小内部间隙、徽标内边距sm12px输入框内边距、卡片内元素间距md16px默认卡片内边距小卡片、槽距lg24px标准卡片内边距、区块次级间距xl32px定价卡片内边距、特性行间距xxl48px大特性区块垂直内边距xxxl64px主要区块垂直内边距section96px桌面端完整区块节奏band128pxHero 横幅垂直内边距6.2 网格最大内容宽度1200px 居中两侧 24px 内边距超宽屏增至 48pxHero 横幅全出血内容区最大 1440px卡片网格桌面 3 列每卡 400px→ 平板 2 列 → 移动 1 列特性行桌面 2 分左侧文案 45%、右侧视觉 55%平板折叠为堆叠页脚桌面 4 列链接网格 → 平板 2 列 → 移动 1 列6.3 留白哲学留白是系统首要的结构工具。桌面端区块以 96px 呼吸无装饰性分隔线——白色画布从 hero 一路延伸到页脚节奏靠white与gray-50交替色带建立。卡片内部收紧到 16-24px让内容读起来紧凑而精准。白色画布从不显得空洞因为慷慨的间距与轻盈的排版制造的是有意的呼吸空间而非空白。7. Depth Elevation深度与层级7.1 阴影系统层级阴影用途0 — flatnone画布、行内文本、页脚1 — rest0 2px 4px rgba(10,37,64,0.04), 0 4px 16px rgba(10,37,64,0.06)静止状态的默认卡片2 — hover0 4px 8px rgba(10,37,64,0.06), 0 8px 24px rgba(10,37,64,0.08)卡片 hover 态、抬高面板3 — floating0 8px 16px rgba(10,37,64,0.08), 0 16px 48px rgba(10,37,64,0.12)模态框、下拉、弹出层4 — purple glow0 4px 16px rgba(99,91,255,0.12), 0 8px 32px rgba(99,91,255,0.08)推荐定价卡、紫色强调的抬高表面7.2 表面层级层级表面用途0white#FFFFFF页面画布、卡片背景1gray-50#F6F9FC内嵌色带、交替区块、表格行条纹2gray-100#E8ECF1分隔线、边框、微妙内嵌背景3navy-900#0A2540深色区块、代码井、页脚4navy-800#1A2E4A深色上的卡片、抬高的深色表面5navy-700#2D3E54井内面板、深色输入框填充核心原理亮色表面上的纵深来自带rgba(10,37,64,...)色调的分层阴影——绝不使用纯黑阴影那在暖白画布上会显得过于生硬。深色表面上的纵深则由海军蓝表面阶梯surface ladder构建而非阴影。这条规则与 stripe.md 中 Dos and Donts 的护栏完全一致所有非紫色辉光阴影都带蓝色调深色表面不加投影。8. Dos and Donts设计护栏8.1 Do应做以 weight 300 作为默认正文字重——这是全系统最重要的排版决策把purple-600#635BFF与 hero 渐变保留给 CTA、链接和强调表面——紫色应像签名而非墙纸深色区块用navy-900#0A2540而非纯黑#000000——海军蓝带温暖与品牌一致性应用分层阴影系统rgba(10,37,64,...)而非纯黑阴影——轻微蓝调与海军蓝色板呼应用white与gray-50交替色带制造区块节奏无需可见分隔线展示级字号使用与字号成比例的负字距大号更紧正文为 0所有代码表面用JetBrains MonoAPI 示例、终端块、行内代码——绝不用无衬线字体写代码卡片 hover 时轻微translateY(-1px)强化阴影托起——动效应像卡片向上呼吸而非弹跳桌面端维持 96px 区块节奏——留白是结构性的不是装饰性的8.2 Dont禁做正文禁止使用 400 或 500 字重——300 才是 Stripe 的声音加重会破坏系统标志性的轻盈不要在大面积背景或 hero 之外的整幅区块使用紫色渐变——紫色是强调色不是画布不要使用纯黑#000000做文本、阴影或背景——ink与navy-900更暖、更贴合品牌不要给区块加可见分隔线——节奏来自表面颜色交替与慷慨间距卡片圆角不要超过 12px——系统大多元素维持在 6-8px胶囊形卡片会破坏精确的美感不要使用彩色阴影除突出元素的紫色辉光外——其余阴影一律用rgba(10,37,64,...)色调不要把紫色与第二个品牌色搭配——紫色是唯一强调色语义色绿/琥珀/红是功能性的不参与装饰不要用无衬线字体写代码行内代码也不例外——代码永远用JetBrains Mono不要在深色表面上加投影——暗色下的纵深由表面颜色阶梯构建9. Responsive Behavior响应式行为9.1 断点名称宽度关键变化ultrawide1920px内容最大宽度保持 1200px外侧槽距增至 48-80pxdesktop1280px默认——3 列卡片网格、2 分特性行、完整导航desktop-small1024px卡片网格 2 列特性行仍并排但更窄tablet768px卡片网格 1 列特性行堆叠导航折叠为汉堡菜单mobile480px全单列herodisplay-2xl从 72px 缩至 36pxmobile-narrow320px区块内边距收紧至 48px卡片内边距降至 16px9.2 触控目标所有按钮最低 40px 高度满足 WCAG AAbutton-primary-lg为 48pxAAAinput-default40px 高search-bar44pxAAA行内链接与 ghost 按钮额外增加内边距最低 8px以扩展点按区域而不改变视觉移动端导航链接最低 44px 点按高度全宽点按目标9.3 折叠策略主导航桌面横向簇在 768px 折叠为汉堡菜单Logo 与主 CTA 在所有断点始终可见Hero 标题display-2xl随断点 72px → 56px → 44px → 36px 缩放字距按比例缩减特性行桌面并排 → 平板堆叠视觉块位于文案下方卡片网格3 列 → desktop-small 2 列 → 平板 1 列定价档网格3 列 → 平板堆叠推荐档保持在首位页脚4 列 → 平板 2 列 → 移动 1 列区块内边距桌面 96px → 平板 64px → 移动 48px代码块移动端横向滚动而非重排——代码格式必须保留9.4 动效指南卡片 hoverbox-shadow 与 transform 200ms ease轻微 1px 托起 阴影加深按钮 hoverbackground-color 与 border-color 150ms ease无 transform导航滚动阴影200ms ease 淡入出现在滚动偏移处页面转场opacity 300ms ease-out页面级元素不做滑动或缩放转场减少动效prefers-reduced-motion所有过渡折叠为 0mshover 态瞬时生效不带动画10. 实战落地把 Stripe 规范接入 design-full 工作流把以上规范真正用到一次落地页设计完整路径是# Step 1建工作区强制起点 design-full init saas-pricing-landing # Step 3选取设计系统强制闸门禁止跳过 design-full pick 紫色渐变金融科技落地页pick.sh会在 14 套系统库中加权匹配并输出匹配度排行Stripefintech类别大概率高分命中确认选定后把 stripe.md 规范写入任务DESIGN.md。随后在 Step 5 编写 HTML/CSS 时把第 3 节的色彩表、第 4 节的层级表、第 6 节的间距刻度映射为 CSS Custom Properties--color-primary、--space-*、--text-display等范式见 SKILL.md 的 CSS 设计 Token 规范组件直接复用第 5 节的按钮/卡片/输入框样式断点与折叠策略照第 9 节执行。Step 6 视觉 Review 对照 brief DESIGN.md 检查风格一致性、组件规范遵循度、响应式表现、交互状态完整性最多 3 轮后交付归档。应用范围再向外推一层本规范属于content-producer团队的能力储备而该团队在 xiaobei 整体架构中负责内容生产线重活见 README.md 的 Crew 职责表。也就是说当你通过小贝main agent下达做一个 SaaS 产品落地页这类平面设计需求时任务会路由到 content-producer 走design-full工作流Stripe 设计系统正是这套流程为金融科技/支付类页面准备的开箱即用视觉底座。结语Stripe 设计系统的精髓可以浓缩为三句话weight-300 排版是灵魂紫色渐变是签名海军蓝替代纯黑是温度。在 xiaobei 的design-full技能里它是一份可直接被design-full pick检索、被DESIGN.md引用、被 HTML/CSS token 落地的完整规范——从色彩表、字体层级到组件状态、响应式折叠每一层都有明确的 token 值与使用边界。掌握本规范后你既可以照章复刻一款Stripe 式的支付/SaaS 落地页也可以据此理解content-producer内置 14 套设计系统详见 design-systems/index.json的统一组织方式进而举一反三地使用 Vercel、Linear、Supabase 等其余系统。赞分享人工智能AI Agent大模型AI 应用媒体生成【免费下载链接】xiaobei为OPC/中小微企业量身打造的自媒体获客智能体项目地址https://gitcode.com/gh_mirrors/wi/xiaobei点击查看免费下载相关推荐OpenDesign 中的 Stripe 设计系统规范金融科技紫色渐变、300 字重与蓝调阴影的完整实现指南OpenDesign 中的 Stripe 设计系统规范金融科技紫色渐变、300 字重与蓝调阴影的完整实现指南 导读 本文档是 OpenDesign 仓库中 SAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 设计系统实战Stripe 金融科技风格视觉规范全解析与 Agent 落地指南OpenDesign 设计系统实战Stripe 金融科技风格视觉规范全解析与 Agent 落地指南 本文基于 OpenDesign 仓库内建的 designAI 应用人工智能AI 技能设计系统媒体生成open-design Stripe 风格设计系统实战指南金融科技「轻量级奢华」设计语言的完整落地open design Stripe 风格设计系统实战指南金融科技「轻量级奢华」设计语言的完整落地 Stripe 风格设计系统 design systemsAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考