人工智能AI 应用桌面应用【免费下载链接】open-codesignOpen-source Claude Design alternative. One-click import your Claude Code / Codex API key. Prompt → prototype / slides / PDF. Multi-model (Claude, GPT, Gemini, Kimi, GLM, Ollama). BYOK, local-first, MIT.项目地址https://gitcode.com/gh_mirrors/op/open-codesign点击查看免费下载本篇技术指南以 Open CoDesign 内置的品牌参考文档apps/desktop/resources/templates/brand-refs/spotify/DESIGN.md为蓝本完整讲解 Google design.md 格式的品牌设计令牌design tokens如何定义一套Spotify 风格从近黑背景、品牌绿 CTA 到 900 字重的大字号排版。读完本文你将掌握如何解读这份品牌参考的结构、它在 Open CoDesign 的 Agent 中被校验与注入上下文的底层机制以及如何通过skill(brand:spotify)让生成的设计严格对齐该风格。一份 DESIGN.md 的两层结构YAML 令牌 Markdown 规范Spotify 品牌参考采用 Google design.md 规范Alpha 版整份文件由两层组成YAML frontmatter---分隔声明式令牌包括colors、typography、rounded、spacing、components供程序化解析与校验Markdown 正文以##小节的叙事体描述设计原则、布局、组件尺寸与行为供 LLM 理解设计意图。packages/shared/src/design-md.ts中的parseDesignMd会先把 frontmatter 与正文分离再把正文按##标题切分成bodySections而validateDesignMd则逐项校验顶层字段是否属于白名单version、name、description、colors、typography、rounded、spacing、components颜色必须是#rgb/#rrggbb十六进制尺寸必须带px|em|rem单位组件属性则限定为backgroundColor、textColor、typography、rounded、padding、size、height、width等可移植字段。这份文档头部声明的version: alpha即对应此 Alpha 规范。令牌清单Spotify 品牌的最小静态调色板frontmatter 中的colors定义了 9 个静态令牌正文明确指出专辑封面艺术负责提供其余色彩静态调色板刻意保持极小令牌值用途primary#1DB954品牌绿品牌字标与强调色secondary#1ED760更亮的绿用于主 CTA 与 hover 状态background#121212近黑画布所有产品界面底色surface#181818侧边栏与卡片背景仅略高于底色surfaceRaised#282828卡片 hover 状态、弹窗text#FFFFFF主文本muted#B3B3B3次级文本、元数据border#2A2A2A边框accent#1ED760强调色与 secondary 一致black#000000纯黑规范中提示不要用作背景正文特别强调不要使用纯黑#000——Spotify 实际使用#121212也不要引入额外品牌色让封面艺术供给色彩。字体、圆角与间距层次感来自对比typography令牌定义了 display / body / mono 三档displaySpotify Circular, Circular, Inter, system-ui, sans-serif字重900行高1.05字距-0.025embody同一字体栈字重 400行高1.5monoui-monospace, SFMono-Regular, monospace用于数字/表格场景正文还提到曲目列表中数字采用表格数字 tabular numerals。正文补充了实际字号层次hero 头条96–128 px / 900 字重→ 章节标题24–32 px / 700→ 正文14–16 px / 400→ 说明文字12 px / 400 且用muted。display 字重从 400 直接跳到 700/900品牌热爱重字重展示字。rounded与spacing是完整刻度圆角none: 0px、sm: 4px、md: 8px、lg: 16px、full: 9999px胶囊形间距以unit: 4为基准的 4px 网格从xs: 4px到5xl: 96px。components则把组件令牌化并支持{colors.primary}这类令牌引用button-primary使用primary绿背景、background色文字、rounded.full与spacing.md内边距card使用surface背景、rounded.md、spacing.md。packages/shared/src/design-md.ts中的validateTokenReferenceOrString正是为这种字符串或令牌引用两种写法服务的。布局、纵深与组件三栏结构 封面取色渐变正文的Layout章节描述了 Spotify 的经典三栏布局240px 左侧边栏、弹性主区域、可选的右侧 now playing 轨道栏主视图是垂直滚动的横向轮播堆叠歌手、专辑、歌单歌单页以全幅 hero从封面提取的渐变开场下接曲目列表表格。Elevation Depth强调暗色且基本扁平但大量使用渐变覆盖层卡片之间的高度差极微妙surface→surfaceRaised仅相差约 16 级亮度阴影暗而柔和弹窗用lg底部 now playing 栏以柔和的上边缘阴影悬浮于内容之上。Components给出可直接复用的尺寸约定播放按钮主 CTAsecondary绿胶囊或圆形约 56px无边框hover 放大按钮胶囊形rounded-full高 32–48px主按钮绿色、次级白色描边、三级纯文本muted卡片8px 圆角、surface背景、hover 升到surfaceRaised曲目行56px 高hover 背景surfaceRaised含图片 标题/歌手 时长列侧边栏项40px 高图标 标签激活态为白色文本加细竖条标签/芯片胶囊形、surface背景、12px 文本。行为守则与响应式Dos DontsDo做默认暗色模式——品牌没有真正的浅色主题在歌单 hero 上使用 900 字重展示字主播放 CTA 做成secondary绿的胶囊形从封面艺术提取主色用于 hero 渐变浏览视图堆叠横向可滚动轮播。Dont不做不使用纯黑背景#000要用#121212不引入额外品牌色色彩交给封面艺术播放按钮永远保持圆形或胶囊不方角化曲目行不加播放/红心/菜单之外的图标装饰内联卡片不用戏剧化阴影——纵深来自背景色调差。Responsive Behavior低于约 960px 时右侧 now playing 轨栏折叠低于约 768px 时左侧边栏折叠为底部标签栏移动端模式hero 标题从约 128px 缩到约 40px横向轮播保持横向滚动而非重排为纵向堆叠底部播放栏在移动端变为全屏 sheet。Agent Prompt Guide让生成器直接执行风格正文末尾专门给出给 Agent 的 5 步指令这也是该文档在 Open CoDesign 中最直接的使用场景构建暗色#121212背景、#FFFFFF文本、近扁平 surface 堆叠hero 用从封面图片提取的全幅渐变打头配 96–128px 的 900 字重展示标题主操作做成 Spotify 绿胶囊或圆形播放按钮#1ED760浏览类内容堆叠横向可滚动轮播保持 chrome 极简——让专辑艺术与粗体排版说话。在 Open CoDesign 中的加载链路从 manifest 到上下文注入这份品牌参考并非孤立的静态文件而是被资源清单系统索引、按需加载、并最终注入模型上下文的索引apps/desktop/resources/templates/brand-refs/manifest.jsonschemaVersion: 1将 Spotify 登记为{ slug: spotify, name: Spotify, category: Media, path: spotify/DESIGN.md }与其余 25 个品牌Vercel、Linear、Stripe、Figma、Notion、Apple、Airbnb 等并列。暴露为 skill 资源packages/core/src/resource-manifest.ts的loadBrandEntries读取 manifest将其映射为名为brand:spotify的资源条目类别brand-reflicense: reference-only别名Spotify并在资源清单提示中注明用户显式要求 Spotify 或 brand:spotify 时使用。校验apps/desktop/src/main/brand-refs-design-md.test.ts遍历apps/desktop/resources/templates/brand-refs下所有品牌的DESIGN.md用validateDesignMd断言其与 Google design.md 兼容、无校验错误——确保内置参考始终可被下游消费。注入上下文packages/core/src/agent.ts的projectContextSections会调用validateDesignMd校验 workspace 中的DESIGN.md校验失败则抛出CONFIG_SCHEMA_INVALID错误并要求用done(path)前修复校验通过则经formatDesignMdForPrompt排版后作为项目设计系统上下文注入。formatDesignMdForPrompt还会把正文小节按已知顺序Overview → Colors → Typography → Layout → Elevation Depth → Shapes → Components → Dos and Donts重排并在超过 2000 字符时截断。实战如何复刻一套 Spotify 风格设计结合packages/core/src/prompts/sections/brand-acquisition.md的规则在 Open CoDesign 中使用该品牌参考的正确姿势是显式请求品牌对 Agent 说以 Spotify 风格设计此时资源清单会指向brand:spotify加载 spotify/DESIGN.md 作为参考数据reference-only不可修改优先 workspace 覆盖若你的项目工作区已有DESIGN.md它以权威设计系统身份优先于内置参考除非用户显式覆盖采纳品牌参考后应把项目专属决策记录进 workspace 的DESIGN.md而不改动内置参考文件无法获取权威资料时如实声明按brand-acquisition.md的要求品牌价值观是数据而非记忆禁止凭空编造品牌色或字体若获取失败要披露结果是品牌灵感而非品牌精确。按照本文档的令牌与行为守则你可以直接把#121212背景、#1ED760胶囊播放按钮、900 字重 96–128px hero 与横向轮播堆叠落实到目标原型中生成一眼 Spotify的界面——这正是 Open CoDesign 以数据驱动品牌设计而非记忆驱动的基本原理。本文内容基于仓库内置参考 apps/desktop/resources/templates/brand-refs/spotify/DESIGN.md其令牌源自公开的品牌资料与品牌所有者无关联结构参考 Google Labs 的 design.md 规范MIT。赞分享人工智能AI 应用桌面应用【免费下载链接】open-codesignOpen-source Claude Design alternative. One-click import your Claude Code / Codex API key. Prompt → prototype / slides / PDF. Multi-model (Claude, GPT, Gemini, Kimi, GLM, Ollama). BYOK, local-first, MIT.项目地址https://gitcode.com/gh_mirrors/op/open-codesign点击查看免费下载相关推荐open-codesign 内置品牌参考解析Raycast DESIGN.md 设计令牌与 Agent 风格指南open codesign 内置品牌参考解析Raycast DESIGN.md 设计令牌与 Agent 风格指南 本指南以开源项目 open codesign人工智能AI 应用桌面应用Open CoDesign Framer 品牌参考DESIGN.md解析从设计 Token 到 Agent 风格化生成Open CoDesign Framer 品牌参考DESIGN.md解析从设计 Token 到 Agent 风格化生成 导读 本篇文章以 apps/des人工智能AI 应用桌面应用解析 Open CoDesign 内置 Apple 品牌设计参考从 DESIGN.md 令牌到「Apple 风格」生成解析 Open CoDesign 内置 Apple 品牌设计参考从 DESIGN.md 令牌到「Apple 风格」生成 导读 本文围绕 Open CoDesi人工智能AI 应用桌面应用上一篇数学动画制作全流程指南从零基础到专业创作下一篇TinyGS开源地面站网络革命性分布式卫星通信系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
Longhorn 官方 Helm Chart 部署指南：Kubernetes 分布式块存储的安装、配置与卸载 云原生存储高可用容器编排 【免费下载链接】longhorn Cloud-Native distributed storage built on and for Kubernetes 项目地址： https://gitcode.com/gh_mirrors/lo/longhorn 点击查看 免费下载 导读
本文以 Longhorn 项目仓库中的 chart/app-readme.md 与 char… · 2026/9/28 3:06:00
手腕骨折检测：YOLOv8引入注意力机制的完整实战指南 简介：面向医学影像分析与计算机视觉开发者，这是一套基于Pytorch与YOLOv8、融合注意力机制的手腕骨折检测实战项目。在传统YOLOv8基础上引入注意力模块，使模型能聚焦腕部关键区域，提升骨折特征识别精度与效率，适用于辅助… · 2026/9/28 3:05:54
深度强化学习股票交易策略：从MDP设计到回测避坑指南 简介：一套基于深度强化学习的自动化股票交易策略设计源码，面向量化研究者、金融分析师和具备Python基础的开发者，解决人工交易受情绪影响、难以适应市场动态变化的问题。项目用PPO、A2C、DDPG三种Actor-Critic算法训练交易代理，覆… · 2026/9/28 3:05:54
Spingboot启动预热的实现 启动预热的适用场景启动预热适合以下情况：数据主要来自第三方接口，无法直接从本地数据库读取。第三方接口响应较慢，首次访问容易超时。一个页面需要调用多个第三方接口或逐项查询。数据读取频繁，但变化不频繁。希望服务启动后&… · 2026/9/28 3:40:12
学Java别走弯路，这5个方向最吃香 学Java的人很多，但学明白的人不多。有人学了半年还在写控制台程序，有人一年就能独当一面。差别不在天赋，而在方向。Java生态太庞大了，什么都学等于什么都没学。选对方向，事半功倍。今天盘点当前最吃香的5个Java方向&am… · 2026/9/28 3:32:15
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
制作网页比较方便的软件怎么选?一文搞懂避坑指南 制作网页比较方便的软件怎么选?一文搞懂避坑指南 很多老板一上来就问：做个网站多少钱？但我反问他：你的域名买了吗？服务器租了吗？他一脸懵。这就是典型的“域名服务器搞不懂”。别急，今天咱们不聊虚的，直接 一文搞懂 那些让你头秃的技术名词。… · 2026/9/28 0:00:06
婚恋网站实战案例：避开3个高价坑，省钱50%还能跑赢流量 婚恋网站实战案例：避开3个高价坑，省钱50%还能跑赢流量 找婚恋网站建站公司，最怕的就是被坑高价。很多同行跟我吐槽，报价单上写得模棱两可，功能栏里全是“高级定制”、“专属UI”，结果落地全是套壳。今天不聊虚的，直接甩几个我经手的 实战案例… · 2026/9/28 0:00:19
济南做网站多少钱：3个案例拆解，防黑源码下载全攻略 济南做网站多少钱：3个案例拆解，防黑源码下载全攻略 上周济南一个做建材的老板找我，脸都绿了。他的官网首页弹出了赌博广告，后台被植入了挖矿脚本。他慌得问我：“网站被黑挂马不知道怎么办？能不能直接找之前的外包公司要源码下载，看看哪里被动了手脚？… · 2026/9/28 0:00:25
