OpenDesign 仓库中的 Framer 风格设计系统：从纯黑画布、压缩排版到设计令牌的完整落地指南

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 仓库design-systems/framer/目录下的 DESIGN.md 为核心骨架系统拆解「Framer 启发式设计系统」的视觉语言绝对纯黑画布、GT Walsheim 极端负字距、唯一的强调色 Framer Blue以及贯穿组件与卡片的蓝色环状阴影。文章同时结合 tokens.css、components.html、components.manifest.json 等仓库实现文件讲解这套设计系统如何以「设计令牌 组件夹具 Agent 提示指南」的形式落地让 Agent 与设计者能够直接复刻 Framer 的视觉气质生成页面。Framer 的官网被广泛认为是「工具即营销」的教科书级案例整个网站是一片纯黑画布把产品界面截图当作主角艺术品嵌入叙事流。OpenDesign 将其提炼为一份可供 Agent 和设计系统使用者直接消费的完整规范包——既包含设计师视角的视觉规范DESIGN.md也包含工程视角的令牌绑定tokens.css、参考组件components.html与使用契约USAGE.md。读完本文你将掌握这套设计系统从「气质描述」到「可执行 CSS 令牌」再到「组件级落地」的完整链路并能在生成页面时直接复用其 Agent Prompt 指南。1. 设计系统概览一套「夜店式」的深色产品向设计语言design-systems/framer/在 OpenDesign 中登记为Design Creative类别见 manifest.json其包描述为「Website builder. Bold black and blue, motion-first, design-forward.」——即面向建站工具类产品的、以黑色与蓝色为主、动效优先、设计前卫的视觉体系。这套系统的核心气质来自 DESIGN.md §1绝对纯黑#000000画布不是温暖的炭灰色charcoal也不是舒适的深灰——而是纯粹的虚空。任何元素、截图、字体装饰都仿佛漂浮在深空中。GT Walsheim 显示字体 极端负字距在 110px 显示字号上字距被压到 -5.5px标题呈现出「被压缩、蓄势待发、随时可能弹开」的动感。Framer Blue#0099ff作为唯一强调色仅用于链接、边框、聚焦环等交互元素形成一条冷峻、电光般的贯穿线索。胶囊形按钮40px–100px 圆角交互元素一律不允许锐角。产品截图即英雄视觉工具本身就是营销网站即产品能力的证明。磨砂玻璃按钮变体使用rgba(255, 255, 255, 0.1)在半透明深色表面上实现。Inter 字体上大量 OpenType 特性cv01、cv05、cv09、cv11、ss03、ss07等让正文小字也有定制感。在设计系统包的实际工程形态上design-systems/framer/遵循 OpenDesign 设计系统 2.0 的「源证据 派生产物」结构DESIGN.md、tokens.css、components.html是打包的源夹具design-tokens.json与tailwind-v4.css是由其派生的输出source/evidence.md 明确说明这些派生文件应通过工具重新生成而非手工编辑。2. 色彩体系一个强调色的纪律2.1 主色Primary角色色值用途Pure Black#000000主背景定义深色优先身份的虚空画布Pure White#ffffff深色表面上的主文本色强调色背景上的按钮文字Framer Blue#0099ff主强调色——链接、边框、环状阴影、交互高亮2.2 次级与强调色Secondary Accent角色色值用途Muted Silver#a6a6a6次级文本、弱化标签、深色表面上的暗淡描述Near Black#090909抬升的深色表面、营造细微深度分离的阴影环色2.3 表面与背景Surface Background角色色值用途Void Black#000000页面背景、主画布Frosted Whitergba(255, 255, 255, 0.1)半透明按钮背景、深色上的玻璃效果表面Subtle Whitergba(255, 255, 255, 0.5)悬停状态时略不透明的磨砂元素2.4 中性色与文本Neutrals Text角色色值用途Pure White#ffffff标题文本、高强调正文Muted Silver#a6a6a6正文、描述、次要信息Ghost Whitergba(255, 255, 255, 0.6)三级文本、深色表面上的占位符2.5 语义与强调Semantic Accent角色色值用途Framer Blue#0099ff链接、交互边框、聚焦环Blue Glowrgba(0, 153, 255, 0.15)聚焦环阴影、交互元素周围的细微蓝色光晕Default Link Blue#0000ee标准浏览器链接色内容区域中少量使用2.6 渐变体系几乎没有显著的渐变——Framer 依靠纯扁平黑表面辅以偶尔的蓝色光晕营造深度。产品截图后方会使用极低不透明度的 Framer Blue 径向微光。在 components.html 中这一效果被实现为.hero-glow::beforeradial-gradient(50% 60% at 50% 0%, rgba(0, 153, 255, 0.15), transparent 70%)。配色纪律与 tokens.css 的对应Framer 是「单强调色系统」。在令牌层面--accent: #0099ff被严格保留给链接、环状边框、聚焦环等「有颜色的时刻」而主 CTA 按钮是纯白实心胶囊background: #ffffff并非蓝色——这一点在 tokens.css 的注释中专门强调「Primary CTAs in Framer are SOLID WHITE, not blue」。3. 字体排版体系压缩即个性3.1 字体族Font Family角色字体说明DisplayGT Walsheim Framer Medium/GT Walsheim Medium定制几何无衬线字重 500回退到 Placeholder、系统 sans-serifBody/UIInter Variable/Inter可变无衬线带丰富 OpenType 特性回退到-apple-system、system-uiAccentMona SansGitHub 开源字体用于特定元素超细字重100MonospaceAzeret Mono代码与技术标签的配套等宽字体RoundedOpen Runde微标签用的小型圆润配套字体在令牌实现中tokens.css字体栈均以定制字体打头、回退到系统字体保证即使未加载 Framer 授权字体artifact 依然可读——GT Walsheim / Inter / Azeret Mono 本身不随包分发需要宿主外部加载。3.2 层级表HierarchyDESIGN.md §3 给出了从 110px 显示英雄到 7px 微大写的完整层级角色字体字号字重行高字距备注Display HeroGT Walsheim Framer Medium110px5000.85-5.5px极端负字距压缩冲击感Section DisplayGT Walsheim Medium85px5000.95-4.25pxOpenType: ss02, tnumSection HeadingGT Walsheim Medium62px5001.00-3.1pxOpenType: ss02Feature HeadingGT Walsheim Medium32px5001.13-1px较小标题中最紧Accent DisplayMona Sans61.5px1001.00-3.1px超细字重空灵Card TitleInter Variable24px4001.30-0.01pxOpenType: cv01, cv05, cv09, cv11, ss03, ss07Feature TitleInter22px7001.20-0.8pxOpenType: cv05Sub-headingInter20px6001.20-0.8pxOpenType: cv01, cv09Body LargeInter Variable18px4001.30-0.01pxOpenType: cv01, cv05, cv09, cv11, ss03, ss07BodyInter Variable15px4001.30-0.01pxOpenType: cv11Nav/UIInter Variable15px4001.00-0.15pxOpenType: cv06, cv11, dlig, ss03Body ReadableInter Framer Regular14px4001.60normal长文正文CaptionInter Variable14px4001.40normalOpenType: cv01, cv06, cv09, cv11, ss03, ss07LabelInter13px5001.60normalOpenType: cv06, cv11, ss03Small CaptionInter Variable12px4001.40normalOpenType: cv01, cv06, cv09, cv11, ss03, ss07Micro CodeAzeret Mono10.4px4001.60normalOpenType: cv06, cv11, ss03BadgeOpen Runde9px6001.11normalOpenType: cv01, cv09Micro UppercaseInter Variable7px4001.000.21pxuppercase 变换3.3 排版原则压缩即个性GT Walsheim 极端负字距110px 处 -5.5px是标志性姿态——标题像被上紧的发条急促、紧迫。OpenType 最大化Inter 同时启用 6 个 OpenType 特性cv01、cv05、cv09、cv11、ss03、ss07即使在正文字号也有微妙定制感。显示字重克制所有 GT Walsheim 只用 500 中粗——从不加粗、从不常规形成自信而不具攻击性的显示基调。超紧行高显示文本 0.85 行高意味着字母几乎垂直重叠——这种刻意的密度让文字适合一臂之遥阅读。令牌映射tokens.css 将字号阶梯绑定为--text-xs: 12px→--text-4xl: 110px共 8 级--leading-tight: 0.95对应 Section Display 层级而最极端的 0.85 行高保留给 display hero h1 内联使用--tracking-display: -0.05em是「110px 处 -5.5px」的 em 相对形式随字号等比缩放tokens.css。4. 组件样式规范4.1 按钮Buttons变体背景文字形状说明Frosted Pill磨砂胶囊rgba(255, 255, 255, 0.1)#000000黑字40px 圆角胶囊深色表面上的玻璃效果按钮半透明、环境感、含蓄Solid White Pill纯白胶囊rgb(255, 255, 255)#000000黑字100px 全胶囊padding10px 15px主 CTA——干净、深色上高对比、醒目Ghost幽灵无可见背景白字仅靠文字样式悬停时浮现细微磨砂背景过渡动画———基于缩放的变换matrix 0.85 缩放因子、透明度过渡实现揭示效果在 components.html 中.btn基类使用border-radius: var(--radius-pill)9999px 全胶囊、padding: 10px 18px、transition覆盖背景/颜色/缩放.btn:active { transform: scale(0.97) }落实缩放动效.btn-secondary额外使用backdrop-filter: blur(8px)增强玻璃质感悬停时背景升到rgba(255, 255, 255, 0.18)。4.2 卡片与容器Cards Containers深色表面卡片黑或近黑#090909背景 rgba(0, 153, 255, 0.15) 0px 0px 0px 1px蓝色环状阴影边框 圆角10px–15px。抬升卡片多层阴影——rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px顶部微高光rgba(0, 0, 0, 0.25) 0px 10px 30px深沉环境阴影。产品截图深色容器内全宽或带内边距嵌入软件 UI 预览使用 8px–12px 圆角。悬停Framer Blue 环状阴影微增辉光或磨砂表面亮度偏移。组件夹具中的.card实现components.html默认box-shadow: var(--elev-ring)即0 0 0 1px var(--border)的签名蓝色发丝线悬停时升级为0 0 0 1px rgba(0, 153, 255, 0.28)var(--elev-raised)双层堆叠。4.3 输入与表单Inputs Forms)营销站点表单元素极少输入框遵循深色主题深色背景、细微边框、白色文字。聚焦态Framer Blue#0099ff环状边框1px solid #0099ff。占位符文本rgba(255, 255, 255, 0.4)。夹具实现components.html.field input使用background: var(--surface)、border: 1px solid var(--border-soft)、border-radius: var(--radius-sm)悬停时边框切换为var(--border)蓝色调:focus-visible时border-color: var(--accent)并叠加var(--focus-ring)0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)的 3px 蓝色光晕——「光晕而非硬边让虚空在输入时依然神圣」。4.4 导航Navigation深色浮动导航栏黑色背景 磨砂玻璃效果白色文字链接。导航链接Inter 15px、字重 400、白色文字、悬停时透明度微变。CTA 按钮胶囊形、白色或磨砂位于导航右端。移动端折叠为汉堡菜单保持深色主题。粘性行为导航滚动时固定在顶部。4.5 图片处理Image Treatment产品截图即英雄艺术全宽嵌入式 UI 截图圆角 8px–12px。深上深构图截图置于黑背景上用细微阴影做深度分离。16:9 及自定义宽高比产品演示填满容器。无装饰性图片所有图像都是功能性的——展示工具、输出或工作流。4.6 信任与社交证明Trust Social Proof客户 Logo 与证言在深色表面上以灰色muted呈现。极简装饰——产品截图本身就是信任信号。5. 布局原则5.1 间距系统Spacing System基准单位8px刻度1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 35px区块内边距大垂直间距区块间 80px–120px卡片内边距15px–30px组件间隙8px–20px令牌层将 4/8 网格抽象为--space-1: 4px至--space-12: 48px共 9 级而 DESIGN.md 中更细的 1/2/3/5/6/10/15/20/30/35px 子级增量按组件内联处理tokens.css。5.2 网格与容器Grid Container)最大宽度约 1200px 居中容器。列模式全宽英雄区、双列特性区、单列产品展示区。非对称布局特性区常以文本40%配截图60%。容器与区块节奏在夹具中落地为components.html.container使用max-width: var(--container-max)加padding-inline: var(--container-gutter-desktop)section的padding-block在桌面/平板/手机断点分别切换--section-y-desktop(120px) / --section-y-tablet(80px) / --section-y-phone(60px)相邻区块用border-top: 1px solid var(--border-soft)分隔。5.3 留白哲学Whitespace Philosophy)借黑暗呼吸区块间慷慨的垂直间距——黑色背景下留白以虚空void的形式呈现制造内容块之间戏剧性的停顿。内部紧凑、外部疏朗组件内部紧密编排紧行高、压缩文字却漂浮在慷慨的外部空间中。产品优先密度截图区域允许密集、信息丰富与稀疏的营销文字形成对比。5.4 圆角刻度Border Radius Scale)圆角用途1px微元素、近乎方正的精确边缘5px–7px小型 UI 元素、图片缩略图——轻微软化8px标准组件圆角——代码块、按钮、交互元素10px–12px卡片、产品截图——舒适圆润15px–20px大容器、特性卡片——慷慨圆润30px–40px导航胶囊、分页——明显圆润100px全胶囊——主 CTA、标签元素令牌将四档 schema 圆角绑定为--radius-sm: 8px按钮/输入/代码块、--radius-md: 12px卡片/截图、--radius-lg: 20px大容器、--radius-pill: 9999px全胶囊40px–100px 的胶囊范围是按钮专属通过本地覆盖实现tokens.css。6. 深度与层级Depth Elevation层级处理方式用途Level 0 (Flat)无阴影纯黑表面页面背景、空白区域Level 1 (Ring)rgba(0, 153, 255, 0.15) 0px 0px 0px 1px卡片边框、交互元素轮廓——Framer Blue 辉光环Level 2 (Contained)rgb(9, 9, 9) 0px 0px 0px 2px近黑环深色表面上做细微收纳Level 3 (Floating)rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px抬升卡片、浮动元素——顶部白色微高光 深沉环境阴影阴影哲学Framer 的层级系统与浅色主题设计相反——不用深色阴影而是蓝色调环状阴影0.15 极低不透明度做收纳——标志性动作让每个带边框元素都微带品牌色。白色顶部边缘高光0.5px——模拟光线打在顶面。深沉环境阴影支撑真正的浮动元素——rgba(0, 0, 0, 0.25)配大扩散30px。装饰性深度蓝色辉光晕关键交互区域后方用细微 Framer Blue 径向渐变。无背景模糊/玻璃拟态尽管有磨砂按钮效果但没有重度玻璃模糊——半透明仅通过简单 rgba 透明度实现。令牌对应--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised逐字复刻 Level 3 双层堆叠tokens.css。值得注意的设计决策是--border本身被绑定为rgba(0, 153, 255, 0.15)——即 Framer Blue 环状阴影的透明度值——这样--elev-ring默认就能复刻出 Framer 的蓝色发丝线。7. 响应式行为7.1 断点Breakpoints)名称宽度关键变化Mobile809px单列、特性区堆叠、英雄文本缩减62px→40px、汉堡导航Tablet809px–1199px双列特性开始、导航链接部分可见、截图缩放Desktop1199px完整布局、导航全链接 CTA、110px 显示英雄、并排特性夹具中标题的缩放曲线components.htmlh1 在 1199px 断点降到 85px809px 断点降到 56px 且字距放松为-0.04emh2 对应 48px / 36px。7.2 触控目标Touch Targets胶囊按钮最小高度 40px 10px 垂直内边距——超过 WCAG 44px 最小标准。导航链接15px 文字配慷慨内边距保证触控可达。移动端 CTA 按钮全宽胶囊拇指易达。7.3 折叠策略Collapsing Strategy)导航全横向导航在移动断点折叠为汉堡菜单。英雄文本110px → 85px → 62px → 约 40px 跨断点递减同时按比例保持极端负字距。特性区并排文本 截图在移动端改为垂直堆叠。产品截图在容器内响应式缩放保持宽高比。区块间距等比缩减——桌面 120px → 移动 60px。7.4 图片行为Image Behavior)产品截图响应式在容器边界内缩放。无艺术指导切换——各断点使用相同裁剪。深色背景保证截图任意尺寸下都保持视觉冲击。截图滚动进入视口时懒加载。8. 设计系统包中的工程落地tokens.css 令牌体系design-systems/framer/tokens.css是这套系统的工程心脏它把 DESIGN.md 的视觉规范绑定为 56 个标准 CSS 自定义属性design-tokens.json 显示总计 56 个令牌、全部由源背书、契约评分 100 分 / excellent 级。令牌按 OpenDesign 的 TOKEN_SCHEMA 分层A1-identity8 个--bg、--surface、--fg、--muted、--border、--accent、--font-display、--font-body等品牌身份层。A1-structure18 个--text-*字号阶梯、--leading-*、--tracking-display、--section-y-*、--container-*等结构层。B-slot4 个--surface-warm、--fg-2、--meta、--border-soft等槽位层。A226 个--accent-hover/active、--success/warn/danger、--space-*、--radius-*、--elev-*、--motion-*、--focus-ring等回退/衍生层。tokens.css 中的每个决策都在文件头注释里写明了对 DESIGN.md 的引用依据例如--bg: #000000Void Black——DESIGN.md §1 明言「绝对虚空非暖色或灰调」任何近黑色调都会读作普通深色主题。--border绑定蓝色透明度——DESIGN.md §6 Level 1 的「Framer Blue 辉光环」。--elev-raised逐字复刻 DESIGN.md §6 Level 3 双层阴影注释明确「覆盖时永不丢弃任何一层两层都是『浮起而非贴上去』质感所必需的」。语义色--success/warn/danger继承 schema 默认值——Framer 营销面极少渲染状态品牌只声明了 Framer Blue 一种颜色。令牌的源契约tokens.css 头部注释声明指向 design-systems/_schema/tokens.schema.ts标准令牌名、design-systems/_schema/defaults.cssA2 回退一致性以及apps/daemon/src/lint-artifact.tslint 强制并在 source/token-contract.report.json 中逐条映射到 tokens.css 的声明行。9. Tailwind v4 适配层tailwind-v4.css 是 tokens.css 的派生输出文件头明确「Derived from tokens.css. Keep tokens.css as the source of truth.」。它通过 Tailwind v4 的theme指令将令牌桥接为 Tailwind 工具类--color-bg、--color-surface、--color-accent等 19 个颜色令牌 →bg-bg、bg-surface、text-accent等工具类--font-display、--font-body、--font-mono→ 字体工具类--font-sans桥接到 body--text-xs…--text-4xl→ 字号工具类--spacing-1…--spacing-12以及--spacing-section-*、--spacing-container-*→ 间距工具类--radius-*、--shadow-flat/ring/raised/focus-ring、--duration-*、--ease-standard、--container-max→ 圆角/阴影/动效/容器工具类。这意味着同一条视觉规范可以同时以「原生 CSS 变量」与「Tailwind 工具类」两种方式消费且派生文件建议由工具从 tokens.css 重新生成而非手工维护。10. 参考组件夹具components.html 与组件清单components.html 是打包的参考组件夹具一个可直接打开预览的完整页面含 hero 区、特性卡片网格、表单区。components.manifest.json 对其做了结构化盘点fixture 规模1 个 style 块、58 个选择器、32 个类、24 个元素9 个组件组buttons按钮与 CTA、inputs表单字段、cards卡片与面板、badges徽章/芯片/状态标签、links链接与行内动作、keyboard键盘提示 kbd、icons图标槽位、typography排版刻度与文本工具类、layout布局原语container / row-between / stack-* / section令牌引用审计declared56 个、referenced约 45 个、undeclaredReferenced为空——即夹具中引用的每个令牌都有声明令牌契约闭合未使用声明如--accent-active、--success、--elev-flat、--text-2xl等被如实列出作为后续裁剪与复用的参考。组件组与令牌的对应关系节选buttons 组引用--fginputs 组引用--border/--border-soft/--ease-standard/--fg/--font-body/--motion-fast/--muted/--radius-sm/--space-2/--surface/--text-base/--text-xscards 组引用--elev-raisedlinks 组引用--accentkeyboard 组引用--border/--fg-2/--font-mono/--radius-sm/--surface/--text-xs。11. 给 Agent 的提示指南快速色彩参考与示例提示DESIGN.md 的最后一部分专门面向 Agent是生成页面时的「开箱即用」提示手册快速色彩参考Primary Background: Void Black#000000Primary Text: Pure White#ffffffAccent/CTA: Framer Blue#0099ffSecondary Text: Muted Silver#a6a6a6Frosted Surface: Translucent Whitergba(255, 255, 255, 0.1)Elevation Ring: Blue Glowrgba(0, 153, 255, 0.15)示例组件提示英雄区「在纯黑背景上创建英雄区110px GT Walsheim 白色标题字距 -5.5px、行高 0.85配一个纯白胶囊 CTA 按钮100px 圆角黑字。」特性卡片「在黑背景上设计特性卡片1px Framer Blue 环状阴影边框rgba(0,153,255,0.15)12px 圆角白色 Inter 22px weight 700 标题灰银a6a6a6正文。」导航栏「构建黑色背景导航栏白色 Inter 15px 文字链接磨砂胶囊按钮rgba(255,255,255,0.1) 背景、40px 圆角作为 CTA。」产品展示区「创建产品展示区全宽截图嵌入黑色10px 圆角微妙多层阴影白色 0.5px 顶部高光 rgba(0,0,0,0.25) 30px 环境阴影。」定价卡片「用纯黑表面设计定价卡片Framer Blue#0099ff作为选中方案边框强调色白色文字层级24px Inter 粗体标题、14px 常规正文纯白胶囊 CTA 按钮。」迭代指南对既有页面进行精细化迭代时DESIGN.md §9 建议一次只打磨一个组件——深色画布让每个元素都显得珍贵始终校验 GT Walsheim 标题的字距——极端负字距是不可妥协的检查 Framer Blue 只出现在交互元素上——绝不作装饰性背景或非链接文字色确保所有按钮都是胶囊形——任何方角都立即破坏 Framer 美学测试磨砂玻璃表面必须恰好是rgba(255, 255, 255, 0.1)——太不透明像 bug太透明则消失。12. 包结构、使用契约与预览design-systems/framer/是一个自洽的设计系统包其消费路径由 USAGE.md 规定推荐阅读顺序先读 USAGE.md 理解包契约读 DESIGN.md 理解视觉意图、约束与反模式将 tokens.css 粘贴进第一个 artifact 的style块再写组件 CSS用 components.manifest.json 做紧凑组件清单需要精确选择器或状态时打开 components.html需要视觉检查时查看preview/页面colors.html、typography.html、spacing.html由 manifest.json 登记。使用约定Do精确保留 schema 令牌名保证跨品牌切换可靠用--accent表达主操作、链接、聚焦态与一个明确的焦点元素复用 components.manifest.json 中的组件组而非自创控件将source/文件视为打包夹具回填的审计证据。使用禁忌Avoid避免在拷贝的:root令牌块之外使用原始 hex 值避免脱离 tokens.css 独立重定义 Tailwind 或设计令牌值不得声称原创上游源证据——本包基于精选打包夹具source/evidence.md不添加 components.html 或 DESIGN.md 中未体现的新组件配方。该包还提供system/目录kit.html、kit.dark.html、index.html、tokens.default.json作为系统级套件产物供需要查看完整 kit 形态的场景使用。结语Framer 风格设计系统在 OpenDesign 中的落地方式颇具参考价值它不是一份孤立的视觉文档而是一套「规范 → 令牌 → 组件夹具 → Agent 提示」四层联动的可执行资产。DESIGN.md 定义了气质与纪律纯黑画布、压缩排版、单强调色、胶囊交互、环状阴影tokens.css 将纪律固化为 56 个有据可查的 CSS 变量components.html 与组件清单验证了令牌在真实组件上的闭合引用而 Agent Prompt Guide 让这套视觉语言可以被任何生成式 Agent 直接消费。无论你是要复刻 Framer 气质的建站工具页面还是研究「设计系统如何为 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 的 Airtable 风格设计系统从设计令牌到组件落地的完整实现指南OpenDesign 的 Airtable 风格设计系统从设计令牌到组件落地的完整实现指南 导读 本文以 OpenDesign 仓库内置的 AirtableAI 应用人工智能AI 技能设计系统媒体生成从 Airtable 设计系统到可执行的设计令牌OpenDesign 中 Airtable 风格设计包的完整解析从 Airtable 设计系统到可执行的设计令牌OpenDesign 中 Airtable 风格设计包的完整解析 导读 本文以 OpenDesign 仓库中AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 仓库 Apple 风格设计系统全解析从设计语言到可落地 Token 规范OpenDesign 仓库 Apple 风格设计系统全解析从设计语言到可落地 Token 规范 本文基于 design systems/apple/DESIGAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考