人工智能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），仅供参考
