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-tr.md及英文原版 DESIGN.md为核心骨架结合 tokens.css、components.html、design-tokens.json 等落地文件系统还原 PlayStation 设计系统的完整规范。它是 OpenDesign 设计系统目录design-systems/中媒体与消费品类的代表性包专为编码 Agent 生成 PlayStation 风格界面提供可复制的设计契约读懂本文后你可以直接按规范生成 hero、按钮、卡片、表单与整页布局并能用仓库中的 token 绑定与组件 fixture 做逐项验证。1. 设计系统全景三面通道与静默权威PlayStation.com 的视觉组织方式在文档中被概括为一个垂直交替的三面通道three-surface channel layout近黑 masthead 与 hero#000000纯黑承托顶栏、hero 背景与产品展示区纸白编辑面板#ffffff的主体内容画布承载大量图片与 3D 产品渲染PS5 主机、游戏封面、DualSense 手柄深钴蓝页脚以 PlayStation 蓝锚定整页体验的收束。三种表面交替出现、从不混融。设计意图是让硬件产品本身承担情感表达而界面 chrome导航、边框、按钮保持克制。文档强调的两个标志性特征静默权威排版quiet authoritySony 定制字体 SST 在 22–54px 的视觉标题区间统一使用weight 300Light让大标题呈现出接近奢侈品腕表广告的低语质感——与 The Verge 的 Manuka 大字号、Wired 的报纸密度形成对照。青色 hover 签名cyan hover-scale每个主按钮的 hover 都是同一套动作——底色切换为电光青#1eaedb、出现 2px 白色边框、背后展开 2px PlayStation 蓝外环、整个按钮放大 1.2×。文档称之为一页内重复数百次的开机微动画。仓库内的落地文件把这两点写成了可执行契约components.html 的 hero 区文案直接称该 fixture 为 a console powering on而 tokens.css 头部注释明确编码了三条品牌决策Console Black 为品牌画布、PlayStation Blue 为不可动摇的锚点、PlayStation Cyan 只存在于--accent-hovercyan 永不在静止状态出现被直接写进 token 层。2. 色彩体系角色划分与 token 映射2.1 主色品牌锚点角色色值用途PlayStation MaviPlayStation Blue#0070cc页脚锚点、行内链接、深色表面主按钮底色、所有官方标识。视为不可更改的品牌色Konsol SiyahıConsole Black#000000masthead、hero 背景、产品展示区——像博物馆用黑色为雕塑衬底2.2 次级与强调色角色色值用途PlayStation Cyan#1eaedb仅用于按钮与链接的 hover / focus / active永不作静止背景或文字色。hover 时需与 2px#ffffff边框 2px#0070cc外环组合Bağlantı Hover MavisiLink Hover Blue#1883fd行内文本链接 hover 的更亮变体——链接色是它按钮色才是 cyanKoyu Bağlantı MavisiDark Link Blue#0068bd浅色表面上的静止链接色品牌蓝的略饱和近亲2.3 表面与背景色角色色值用途Kâğıt BeyazıPaper White#ffffffmasthead 与页脚之间的编辑面板主画布Buz SisiIce Mist#f5f7fa浅色分区渐变的终点把面板从纯白上托起Bölücü TonuDivider Tint#f3f3f3内容行之间的安静水平线Gölge SiyahıShadow Black#121314深色分区渐变的起始锚点Filtre SisiFilter Mistrgba(245, 247, 250, 0.3)粘性筛选栏后的半透明背景——全站唯一的玻璃拟态时刻2.4 中性色与文本色角色色值用途Görsel MürekkepDisplay Ink#000000白底上的主视觉标题Derin KömürDeep Charcoal#1f1f1f正文标题与静止链接色比纯黑略柔Gövde GrisiBody Gray#6b6b6b次级正文与元数据Sessiz GriMute Gray#cccccc三级标签、禁用态Yer Tutucu MürekkepPlaceholder Inkrgba(0, 0, 0, 0.6)表单占位符——60% 黑不是独立灰值Ters BeyazInverse White#ffffff深色与蓝色表面上的主文本Koyu Bağlantı Mavisi#53b1ff黑底上的静止链接色更轻的读感变体2.5 语义与交易色角色色值用途Ticaret TuruncusuCommerce Orange#d53b00仅用于 PS Store 购买态 CTA、价格强调、打折徽章——全站唯一暖色必须节制Commerce Orange Active#aa2f00交易按钮按下态Uyarı KırmızısıWarning Red#c81b3a表单错误与破坏性操作警告Gölge Perdesi 80/16/08/06rgba(0,0,0,.8/.16/.08/.06)从 hero 戏剧性遮罩到最轻阴影的四个层级2.6 渐变系统只有两个浅色分区渐变#ffffff → #f5f7fa几乎不可感知的面板托举深色分区渐变#121314 → #000000给 hero 面板轻微 vignette 而不引入色偏。两个渐变只作为分区背景组件内部一律禁止没有渐变按钮、渐变文字、发光光晕。品牌是蓝——不是蓝紫、不是蓝青。源码佐证在 tokens.css 中上述色值被精确映射为--accent: #0070cc、--accent-hover: #1eaedb、--accent-active: #0068bd、--surface-warm: #f5f7fa、--danger: #c81b3a等 token注释明确写出 PlayStation Cyan lives exclusively in --accent-hover — never as a resting background。此外--success#16a34a与--warn#eab308继承 schema 默认值因为 PlayStation 把暖色预算保留给 Commerce Orange而非语义绿/黄——这与文档禁止引入橙色之外的暖色的规则互相印证。完整的 56 个 token 及其分层A1-identity / A2 / B-slot / A1-structure可在 design-tokens.json 中核对。3. 字体排印SST 300 的层级纪律3.1 字体家族SST / Playstation SSTSony 专有由 Toshi Omagari 与 Akira Kobayashi 设计回退链Arial、Helvetica主页覆盖 300 / 500 / 600 / 700 四个字重SST 压缩变体回退helvetica、arial少数对宽度敏感的 UI 模块Arial个别以系统 sans 渲染的按钮变体的兜底。在 tokens.css 中字体链被绑定为--font-display: SST, Playstation SST, Arial, Helvetica, sans-serif正文与展示共用同一家族--font-body相同确保全站 100% 无衬线。3.2 层级完整表继承自原文档可直接套用角色字体字号字重行高字距备注Hero 展示 XLSST54px / 3.38rem3001.25-0.1px全页最大 SST 时刻Hero 展示 LSST44px / 2.75rem3001.250.1px次级 hero 标题大展示SST35px / 2.20rem3001.25—特性面板标题中展示SST28px / 1.75rem3001.250.1px分区标题紧凑展示SST22px / 1.38rem3001.250.1px模块标题——仍是 300 细体Playstation SST 副题Playstation SST22.5px / 1.41rem4001.30—促销副标题UI 小标题SST18px / 1.13rem6001.00—紧凑 UI 标题按钮 / CTASST18px / 1.13rem5001.250.4px主按钮标签按钮 / 强调SST18px / 1.13rem7001.250.45px高强调 CTA购买、订阅按钮 SerifSST18px / 1.13rem6001.50—次级按钮标签松弛正文SST18px / 1.13rem4001.500.1px标准阅读正文链接正文SST18px / 1.13rem4001.50—行内链接紧凑按钮SST14px / 0.88rem7001.250.324px卡片内迷你 CTA工具说明SST14px / 0.88rem5001.50—图注、标签说明正文SST14px / 0.88rem4001.50—标准元数据Playstation 粗说明Playstation SST14px / 0.88rem7001.40—强调说明Playstation 中说明Playstation SST14px / 0.88rem6001.40—半粗说明Playstation 按钮Playstation SST14.4px / 0.90rem7001.000.144px紧行高 UI 按钮Playstation 标签Playstation SST14px / 0.88rem4001.100.14pxTab / pill 标签Playstation 紧凑说明Playstation SST12.8px / 0.80rem4001.10—最小 UI 说明微说明SST12px / 0.75rem5001.50—页脚微文案、法律文本紧凑粗说明SST12.06px / 0.75rem7001.50—强调微文本3.3 排印原则大字号 300 字重就是声音PlayStation 是唯一用细体展示 hero 标题的主流主机品牌克制本身就是人格UI 层字重跳升18px 以下为可读性切换到 500–700。300展示→ 400正文→ 500说明→ 700按钮就是层级字距几乎不可见多在 0.1–0.45px 之间54px hero 上的-0.1px只够让标题显得被设计过两种 SST 大小写形态SST 与 Playstation SST 功能同族、度量略异小字号更紧可互换使用不用全大写kicker 与标签保持标题式/句子式大小写——又一次静默权威全站无衬线不存在任何印刷声部对照。源码佐证components.html 的.btn采用font-weight: 500; letter-spacing: 0.4px、h1/h2/h3统一font-weight: 300且h1为--text-4xl54px、h2为--text-2xl35px、h3为--text-lg22px与上表完全对齐.eyebrow特意注释 No ALL-CAPS — sentence case eyebrow将禁全大写原则直接写进组件。4. 组件样式规范4.1 按钮五兄弟主按钮——PlayStation 蓝 pill底色#0070cc文字#ffffffSST 18px / 500 / 0.4px 字距静止无边框圆角999px全 pill内边距约12px 24pxHover 签名动作底色切为#1eaedb→ 出现 2px#ffffff边框 →0 0 0 2px #0070cc外环 →transform: scale(1.2)Activeopacity: 0.6Focus同 hover 但外环变为 focus 阴影rgb(0, 114, 206) 0 0 0 2px过渡背景 / transform / 阴影上约180ms ease。次按钮——深底白描边底色#ffffff、文字#0172ce、边框2px outset #000000现代 CSS 中罕见的真outset边框、圆角通常999px或36px、内边距16px 20pxhover/focus 遵循同一签名。交易橙按钮底色#d53b00、文字#ffffffSST 18px / 700 / 0.45px 字距、圆角999px仅限 PS Store / 购买 / 订阅 Plus CTAactive 变#aa2f00hover 同样走青色反色规则不是橙色专属 hover。透明幽灵按钮透明底、文字#1f1f1f、边框1px solid #dedede、内边距0 10pxhover 同样 cyan 填充 白字 2px 白边 scale(1.2)active 文字转#0072ce、opacity 0.6。图标圆形按钮照片上为rgba(0,0,0,0.2)、浅色面为#ffffff、圆角100%用于轮播箭头与分享按钮hover 变#e5e5e5。迷你 CTA卡片内SST 14px / 700 / 0.324px内边距约8px 16px圆角999px用于游戏卡片内立即购买 / 加入购物车。源码佐证components.html 的.btn用border: 2px solid transparent预留给 hover 边框避免触发布局位移.btn-primary:hover恰好实现cyan 填充 白边 box-shadow: 0 0 0 2px var(--accent)transform: scale(1.2)四件套.panel-light .btn-secondary在纸白面板上自动反转为透明底 蓝描边的 outline 形态——对应 DESIGN.md 中白底蓝色描边的另一变体。4.2 卡片与容器容器圆角阴影备注Hero 卡游戏特性24px或19pxrgba(0,0,0,0.8) 0 5px 9px 0戏剧性投影仅当卡片压在 hero 照片上内边距 32–48px游戏封面瓷砖12px/13px图/19px卡框rgba(0,0,0,0.08) 0 5px 9px 0羽毛级hover 卡片 CTA 亮 cyan卡片可 1.02× 缩放200ms ease内容面板白12px–24pxrgba(0,0,0,0.06) 0 5px 9px 0系统最轻常用浅色分区渐变深上深卡6px紧凑/24px特性—hero 视频上的press kit或统计块内嵌4.3 输入与表单默认#ffffff底、1px solid #cccccc边、3px 圆角全系统最紧——输入是 PlayStation 唯一真正紧凑的地方、SST 16px#1f1f1f文字、rgba(0,0,0,0.6)占位符Focusbox-shadow: 0 0 0 2px #0070cc蓝色外环——不改边框色让环说话错误边框与文字转#c81b3a下方同色行内错误文本过渡边框与阴影约 180ms ease。4.4 导航顶栏黑色全出血条带左侧白 logo中部 SST 14–16px / 500 分类链接右侧小号Sign In CTA导航链接 hover#ffffff → #1883fd无下划线激活分区#0070cc的 2px 细下划线移动端收进汉堡抽屉链接 16px 间距纵向堆叠、20px 横向内边距粘性行为滚动时钉在顶部进入浅色区域也不反色——全程黑底。4.5 图片处理宽高比hero 视频/照片 16:9、主机渲染 1:1、游戏封面 3:4、生活方式图 4:3圆角按语境取12px/13px/24px全出血仅限 masthead hero 与页脚促销条带加载策略折叠线以下全部loadinglazymasthead hero 用eager。4.6 游戏商店 pill特色组件白底、黑字SST 14px / 500、内边距14px 18px、圆角9999px——紧贴游戏封面的中性平台标签PS5、PS4、PSVR2深底上白字强对比。5. 布局原则5.1 间距系统基础单位 8px刻度1、2、3、4.5、5、8、9、10、12、14、15、16、18、20、21px分区内边距主面板间 48–96px 纵向hero→内容过渡取大端卡片内边距20–32px特性 hero 卡可到 48px行内间距标题与导语 8–12px导语与 CTA 12–16px微刻度1/2/3/4.5/5/9/10/12 用于 pill 内边距、说明间距与边框偏移——不用于编辑节奏。对应 tokentokens.css 中--space-1(4px) 到--space-12(48px)以及--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 48px——注释点名对应 DESIGN.md 的折叠策略。5.2 网格与容器最大宽度约1920pxdembrandt 扫描检测到最高 2120px 断点容器上限通常1280–1920px12 列响应式网格按层级解析为 3/4/6 列游戏瓷砖行hero 区通常占满 12 列特性瓷砖落在633或444外内边距移动 16px → 平板 48px → 桌面 64–96px沟槽列间 16–24px瓷砖簇内更紧8–12px。落地值见 tokens.css--container-max: 1600px、--container-gutter-desktop: 64px/ tablet 32px / phone 16px。5.3 留白哲学PlayStation 把留白当作奢侈品牌的橱窗灯光——一种高级感信号。模块间纵向呼吸空间明显多于其他大型零售站白色编辑面板往往只容纳一个标题 一张图 一个 CTA形成每个产品拥有独立房间的画廊节奏gallery pace而不是在缩略图网格中互相竞争。5.4 圆角刻度11 个离散值值用途2px饼干横幅按钮、小型管理 UI3px表单输入、Tab 面板刻意比一切更紧暗示功能性 UI6px紧凑按钮、行内图片12px标准游戏封面与内容图13px特定图形包裹器嵌套时比 12px 偏移 1px19px特性卡片20px行内标签 span24pxhero 卡、主特性框36px全 pill 导航、次按钮变体48px大型特性按钮999px / 100%全 pill 主按钮、圆形图标按钮文档特别强调这是目录中任何站点最丰富的圆角系统之一——PlayStation 刻意按层级使用不同圆角utility 用 3px、media 用 12px、feature 用 24px、CTA 用 999px。tokens.css 将这 11 值压缩到 schema 主干上--radius-sm: 6px、--radius-md: 12px、--radius-lg: 24px、--radius-pill: 999px输入框的 3px 在组件层单独覆盖。6. 深度与层级耳语或呐喊层级处理用途0无阴影#ffffff上的默认内容1rgba(0,0,0,0.06) 0 5px 9px 0羽毛级编辑面板托举2rgba(0,0,0,0.08) 0 5px 9px 0标准网格瓷砖3rgba(0,0,0,0.16) 0 5px 9px 0强调卡hover 或 active4rgba(0,0,0,0.8) 0 5px 9px 0hero 覆盖阴影——照片上的戏剧性投影50 0 0 2px #0070ccfocus 环主按钮 focus60 0 0 2px #000000hover 环次按钮 hover 环7分区渐变#121314 → #000000深色 hero 面板的氛围深度深度哲学是分层但克制常规状态阴影不透明度只落在 0.06–0.16hero 直接跳到 0.8——没有 0.2/0.3/0.4 中间地带。页面大部分近乎平面但 hero 卡需要悬浮时真的会浮起来。层级要么耳语、要么呐喊从不嘟囔。装饰性深度仅限两个分区渐变、2px 蓝/青 focus-hover 环除两个渐变外没有任何辉光、模糊或氛围特效。token 层以--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised: rgba(0,0,0,0.08) 0 5px 9px 0、--focus-ring: 0 0 0 2px #0070cc固化这一阶梯。7. 该做与不该做Dos and Donts该做用 PlayStation 蓝#0070cc作为主 CTA 底色与页脚锚点22px 及以上的每个展示标题都用 SST weight 300每个主按钮都施加完整 hover 签名cyan 填充 2px 白边 2px 蓝外环 scale(1.2)主按钮与交易按钮用全 pill999px圆角把 Cyan#1eaedb仅保留给 hover / focus / active——绝不作静止背景把交易橙#d53b00仅用于 PS Store / 购买 CTA 与价格强调深色 hero 面板与白色内容面板交替、以深蓝页脚收尾——三面通道就是页面节奏卡片压在产品照片上时使用戏剧性rgba(0,0,0,0.8)hero 投影顶栏在任何滚动位置都保持黑色不在浅色面板上反色。不该做不要把展示标题加粗——22–54px 的 700 字重会让 PlayStation 读起来像另一家游戏零售商不要用全大写标签或 kicker不要在两个已声明的分区渐变之外使用渐变按钮、文字或背景不要在交易橙之外引入暖色没有红色 CTA、黄色高亮、绿色成功 pill不要在按钮或媒体上用直角——系统有 11 个圆角挑一个但永远不是 0不要省略主按钮的scale(1.2)hover——这是品牌交互签名不要用衬线字体不要让 cyan#1eaedb以静止文字或背景色出现——它只存在于运动中不要设计互相争抢注意力的面板——留白节奏给每个模块自己的画廊房间。8. 响应式行为8.1 断点表名称宽度关键变化小移动端400px单列导航收进汉堡SST hero 缩至 ~28px移动端400–599px单列瓷砖全宽堆叠内边距放开到 16px大移动端600–767px仍单列但部分模块可选 2 列瓷砖平板竖屏768–1023px2 列游戏网格导航仍紧凑平板横屏1024–1279px3–4 列网格完整导航恢复桌面1280–1599px完整编辑网格最大 hero 展示尺寸44–54px大桌面1600–1919px容器封顶 1600px边距扩大4K / 大屏≥1920px容器扩到 1920pxhero 内容为电视观看距离放大超宽≥2120px极端断点——页面锚定外缘边距吸收额外宽度dembrandt 扫描在 320–2120px 间检测到30 个断点——异常宽的响应式范围。PlayStation 特别为1920–2120px 大屏语境调优PS5 用户常通过主机浏览器或手机投屏在电视上浏览。多数零售站 1440px 就停止调优PlayStation 一路调优到 4K。8.2 触控目标主 pill 按钮约 48–56px 高SST 18px 文字 12–16px 垂直内边距宽松满足 WCAG AAA桌面导航链接约 32–40px 高移动抽屉内补足 48px图标圆形按钮 40–48px适合触摸。8.3 折叠策略导航完整 → 紧凑 → 汉堡抽屉logo 钉左、CTA 钉右网格6 列 → 4 → 3 → 2 → 1游戏瓷砖重新流动而不裁切封面间距96px → 64px → 48px → 32px → 24px 随视口收窄字体SST hero 54px → 44px → 35px → 28px → 22px300 细体在所有尺寸保留hero 摄影艺术指导切换——桌面宽幅 16:9移动端用产品居中的 4:3 或 1:1。8.4 图片行为响应式栅格srcset 带艺术指导的picture断点间保持宽高比4K 就绪——1920px 提供高密度图避免电视放大折叠线下全部loadinglazyhero 带预加载提示的eager。9. Agent 提示指南把规范变成生成指令9.1 快速颜色参考主 CTAPlayStation Blue#0070ccHover / Focus 强调PlayStation Cyan#1eaedb背景浅色面Paper White#ffffff背景深色面Console Black#000000白底标题Display Ink#000000白底正文Deep Charcoal#1f1f1f黑底正文Inverse White#ffffff交易 / 购买强调Commerce Orange#d53b00页脚锚点PlayStation Blue#0070cc9.2 示例组件提示原文五条可直接复制给 Agent创建一个主 CTA 按钮#0070ccPlayStation 蓝填充白色文字 SST 18px / 500 / 0.4px 字距999px 圆角12px × 24px 内边距。hover 时背景切为#1eaedbPlayStation Cyan出现 2px#ffffff边框box-shadow展开 2px#0070cc外环整个按钮 1.2× 缩放——全程 180ms ease 过渡。在#000000Console Black 画布上设计 hero 面板54px SST weight 300 标题、#ffffff文字、-0.1px 字距、1.25 行高下方放一个带标准 PlayStation hover 处理的主 CTA。任何地方不要全大写标签。构建游戏封面瓷砖3:4 宽高比、12px 圆角、羽毛级rgba(0,0,0,0.08) 0 5px 9px 0投影下方 14px SST 700 标题、12px SST 500 平台标签以及 PlayStation 蓝的迷你 14px / 700 / 0.324px 主 CTA。为 PlayStation Store 购买创建交易 pill 按钮#d53b00交易橙填充#ffffff文字 SST 18px / 700 / 0.45px 字距999px 圆角12px × 28px 内边距。active 变#aa2f00。hover 遵循标准青色反色 1.2× 缩放。在两个深色 hero 区之间设计白色内容面板#ffffff背景叠加#ffffff → #f5f7fa浅色分区渐变24px 圆角48px 内边距羽毛级rgba(0,0,0,0.06) 0 5px 9px 0提升35px SST 300 标题、18px 正文段落和单个主 CTA。9.3 迭代审查清单审查展示字重22px 以上每个标题应为 SST 300hero 级出现 500/700 即丢失 PlayStation 声音审查 hover 处理每个主按钮必须 1.2× 缩放且四件套齐全cyan 填充 白边 蓝环缺一即破坏交互签名审查圆角每个容器与按钮必须落在 2/3/6/12/13/19/20/24/36/48/999px 或 100%直角破坏声音审查色彩蔓延chrome 中只允许出现蓝#0070cc、Cyan#1eaedb、橙#d53b00及已声明的灰黑白出现其他色相即修正审查表面交替页面应呈深 hero → 白内容 → 深 hero → 白内容 → 蓝页脚相邻同表面面板要插入过渡审查大小写仅句子式/标题式任何全大写标签、按钮、kicker 都要转换审查阴影权重不透明度必须落在 0.06 / 0.08 / 0.16 / 0.8中间值修正到最近声明的档位审查留白两个模块感觉互相竞争时加 48–96px 纵向呼吸空间——画廊节奏不可谈判。10. 仓库落地从规范到可验证的包该设计系统在 OpenDesign 仓库中以标准包结构落地见 design-systems/playstation/manifest.json属 bundled 类型来源为 OpenDesign 精选打包 fixtureUSAGE.md 明确要求不得声称存在原始上游抓取证据。包内文件分工如下规范主体DESIGN.md英文原版与其多语言翻译含本主题的 DESIGN-tr.md 及 DESIGN-zh.md 等承载全部视觉意图、约束与反模式Token 绑定tokens.css 是把规范编码为 CSS 变量的唯一事实源tailwind-v4.css 通过import ./tokens.css派生 Tailwind v4theme映射--color-accent、--text-4xl、--radius-pill、--duration-fast等文件头注明以 tokens.css 为事实源组件 fixturecomponents.html 是完整可渲染的参考实现hero features form 三个 sectioncomponents.manifest.json 给出机器可读的组件清单63 个选择器、28 个类、25 个元素、8 个组件分组buttons / inputs / cards / badges / links / keyboard / icons / typography / layout并核对了 token 引用与未使用声明审计证据design-tokens.json 报告 56 个 token 全部有源、评分 100excellentsource/ 目录存有 evidence.md、tokens.source.json 与 token-contract.report.json 作为 fixture 回填的审计凭据视觉预览preview/colors.html、preview/typography.html、preview/spacing.html 提供颜色、排版、间距的快速目检页面。使用顺序依 USAGE.md先读 USAGE 理解包契约 → 读 DESIGN.md 理解视觉意图与反模式 → 将tokens.css粘贴进第一个产物的style块再写组件 CSS → 用components.manifest.json作紧凑组件清单涉及精确选择器或状态时查components.html→ 需要目检时打开 preview 页面。两条硬约束值得注意保持 schema token 名称原样以保证跨品牌切换可靠避免在复制的:roottoken 块之外使用裸 hex 值。11. 总结PlayStation 设计系统的全部精髓可以压缩为一句话用 SST 300 的细体标题和近乎平坦的表面制造安静再用 1.2× 青色开机 hover 提供唯一的爆发点。三面通道定节奏、11 值圆角分层级、0.06→0.8 的无中间档阴影阶梯定深度、8px 基础单位的画廊式留白定呼吸。无论你是要复刻一版 PlayStation 风格落地页还是训练/审查 Agent 产出符合该品牌的界面都可以把本文各节作为可直接引用的规范条目并在 components.html 与 tokens.css 中找到逐像素的实现证据。赞分享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点击查看免费下载相关推荐External Secrets Operator密钥SDK开发多语言客户端External Secrets Operator密钥SDK开发多语言客户端 引言云原生时代的密钥管理挑战 在云原生应用架构中密钥Secrets管理一AI 应用人工智能AI 技能设计系统媒体生成华硕笔记本性能控制完全教程用 G-Helper 单文件替代 Armoury Crate华硕笔记本性能控制完全教程用 G Helper 单文件替代 Armoury Crate 用过华硕笔记本的人对 Armoury Crate 的痛点大概都有共同AI 应用人工智能AI 技能设计系统媒体生成MAX 中的 DiffusionGemma 分块扩散架构编码器/解码器文本图、配置与块扩散推理流水线深度解析MAX 中的 DiffusionGemma 分块扩散架构编码器/解码器文本图、配置与块扩散推理流水线深度解析 本文以 max.pipelines.architAI 应用人工智能AI 技能设计系统媒体生成上一篇彻底告别CSS冗余UnoCSS后处理系统让你的样式更轻量高效下一篇终极指南解决Vitest中Web Worker覆盖率统计难题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考