复古调色盘落地的完整方案：garden-skills 中 Mid-Century Modern 设计配方实战解析-平芜编程栈

人工智能
AI 技能/插件
提示工程

【免费下载链接】garden-skills

ConardLi's open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.

项目地址：https://gitcode.com/GitHub_Trending/we/garden-skills

本文以 garden-skills 仓库中 web-design-engineer 技能的Mid-Century Modern（Paul Rand / Saul Bass）风格配方为核心，系统拆解 1950–60 年代美国图形现代主义在 Web 界面的落地要点：从色彩、字体、网格、动效到"签名动作"与避坑清单，并给出可直接复制的 AI 提示种子与在 web-design-engineer 技能工作流中的调用时机。读完本文，你将能在 Landing Page、品牌页、出版/文化类项目中，独立产出"爵士乐唱片封面"般自信、克制、可识别的中古现代风格界面。

一、这个配方讲什么：给"复古锚点"一份可执行的设计规范

在 web-design-engineer 的设计体系里，"风格"不是一句形容词，而是一份可粘贴的、有具体数值的设计规范。style-recipes/目录下存放着 25 个以真实品牌/工作室/设计师为锚点（anchor）的配方文件（详见配方目录索引），mid-century-modern.md就是其中之一——它锚定在 Paul Rand（IBM 标志）、Saul Bass（《迷魂记》《解剖谋杀案》海报）、Alvin Lustig 书籍封面，以及 Reid Miles / Blue Note 的中古爵士唱片封套上。

这份配方的定位非常清晰：

School（流派）：Specialty / Genre（特色/类型流派），同时触及信息架构的编排思路；
Vibe（氛围）：1950–60 年代美国图形现代主义——几何图形、考究的手工感、"爵士乐专辑般的自信"；
Best for（最适合）：文化/电影/出版类品牌身份、带有传承主张的高端消费品牌、"有品位的精致感"；
Touchstone（参照物）：Paul Rand 的 IBM 标志、Saul Bass 的《迷魂记》/《解剖谋杀案》海报、Alvin Lustig 的书籍封面、Blue Note 唱片封套。

与同属 Specialty / Genre 流派的 y2k-retrofuturism（Y2K 千禧复古）相比，两者的差异一目了然：Y2K 是亮晶晶的果冻质感与霓虹油彩，而 Mid-Century Modern 是温暖纸面、硬朗几何、扁平色块——"几何，而不是柔软"。

二、色板：三种底色与"3 色上限"的铁律

配方给出的色板极其克制，这是它的 DNA 所在：

角色	取值
Ground（底色）	暖奶油`#EBE3D2`/ 芥末黄`#D9A441`/ 柔和青绿`#3D6E70`
Ink（墨色）	`#1A1A18`
限制	每件作品最多3 种颜色——一个大胆色、两个柔和色

常见的中古配色组合（Common pairings）：

芥末黄 + 砖红 + 奶油
青绿 + 奶油 + 黑
赭红（sienna）+ 墨色 + 骨白

这条"每件作品最多 3 色"的规则，正是配方目录索引中"跨配方反模式"（Cross-Cutting Anti-Patterns）的延伸——不要为了"平衡"引入第 4 种颜色，限制本身就是配方。在工程实现上，这与 SKILL.md 的技术规范一致：颜色一律来自 Step 3 声明的设计系统，绝不引入系统外的"野色（rogue hues）"；如需派生谐调色，用oklch()从品牌色推导，而不是凭空发明新色相。

三、字体与排版：几何无衬线 + 人文衬线的双轨制

Display（展示字体）：一款几何怪诞（geometric grotesque）无衬线——Futura、Avenir、ITC Avant Garde——大字号使用，常用压缩字重（condensed weight）；或选用**粗衬线（slab serif，埃及体/孟菲斯体）**承担编辑性时刻；
Body（正文字体）：人文衬线（Sabon、Garamond），16–17px；
数字：常被当作"图像"来排——一个超大号数字本身就是图形元素（figures-as-image）。

注意一个反模式呼应：INDEX.md 明确警告"不要默认用 Inter / Roboto / Arial / system-ui 当展示字体"——如果你选的配方指定了字体，就用它（或配方中点名的真实替代品）。failure-patterns.md 的"Generic display typography"条目同样强调：Inter 会抹掉配方 30–40% 的字体身份。

四、间距 / 圆角 / 阴影 / 动效：把"几何硬朗"落到设计语言

这份配方对"形状性格"的描述用的是设计语言而非代码，四个维度缺一不可：

Spacing（间距）：结构化网格，取值阶梯为4 / 8 / 16 / 24 / 32 / 48；
Radius（圆角）：全场 0——中古现代是几何的，不是柔软的；
Shadow（阴影）：无——只有扁平色块；
Motion（动效）：极简——形状在单一节拍上滑入位，如同 Saul Bass 片头字幕的编排。

在 SKILL.md 的 Step 3 设计系统声明模板里，这四组值会被原样粘贴进Border-radius strategy: [large / small / sharp]与Shadow hierarchy: [elevation 1–5]等字段——配方的存在就是为了让你不必临场发挥。这与 linear 配方（6/12/16px 圆角、柔和 1–2px 阴影）形成鲜明对照，也和 vignelli-swiss-helvetica 配方（同样 0 圆角、无阴影、静态动效）共享"瑞士式纪律"，但中古现代更强调几何图形的存在感与手工温度。

五、签名动作（Signature Moves）：让作品"一看就是中古现代"

这是配方的"设计 DNA"，也是可复制、可判定的 5 条具体决策：

几何形状构图——单个大圆、三角形、半圆作为主视觉；
手工剪纸感——形状边缘略带不完美（仿佛剪贴而成）；
文字与形状融为一体——标题环绕圆形曲线排布，或"坐进"一个色块里；
单一插图母题重复——一只风格化的鸟、一个抽象人物，贯穿全篇；
低透明度印刷颗粒/纸张纹理——在扁平色块上叠一层淡淡的纸感。

六、避坑清单（Avoid）：什么会瞬间把它变成"AI 味"

配方明确列出四条红线，违反任何一条都会让风格失效：

❌渐变——中古现代是扁平色块；
❌摄影作主导视觉——插画主导，摄影只能辅助；
❌单件作品超过 3 种颜色；
❌圆角/软角 UI。

这与 INDEX.md 的跨配方反模式完全一致："配方说无阴影，就别加一层'微妙阴影'；配方说无渐变，就别加渐变网格；每加一个 AI 默认特征，风格独特度就向均值坍缩一分。"同时，INDEX.md 特别警告：Specialty / Genre 类配方（Y2K、中古现代）必须全情投入（full commitment）——半吊子的中古现代会读作"坏掉的现代网站"，要么全押，要么换配方。

七、AI 提示种子：生成配套插画的现成咒语

配方直接内置了一条为配套图生成调校好的提示种子，可直接复制使用：

Mid-century modern poster composition in the style of Saul Bass, single bold geometric shape (large circle in mustard #D9A441) on warm cream #EBE3D2 paper background, flat color shapes, slight paper texture, hand-cut edges, no gradient, no shadow, 3:4.

注意它遵循了 design-directions.md 中"AI 提示模板"的规范：包含色值 HEX（而非"warm/cool"）、纵横比（3:4）、构图规则，以及明确的反向要求（no gradient, no shadow）——而不是"mid-century style, premium feel"这种没有 DNA 的空话。

八、不适用场景（Don't use when）：配方的边界

⚠️ 产品是功能密集 / 实用主义导向（中古现代是编辑/海报式思维，不是工具式思维）；
⚠️ 品牌没有传承 / 文化 / 工艺主张；
⚠️写实摄影是信息传达的关键。

在设计方向顾问的 6 大学校体系里，Specialty / Genre 流派不通过顾问浮现，用户只能通过直接点名锚点（"我想要 Mid-Century 感觉"）到达——INDEX.md 也据此提供了"按场景选配方"的三张索引表（By School / By Best-for / By Mode），其中"Retro / theme / decade-coded"场景的首选就是 mid-century-modern 与 y2k-retrofuturism。

九、工作流中的调用时机：把配方装进 web-design-engineer 全流程

配方不是孤立文档，它服务于 web-design-engineer 的完整工作流：

Step 1：用户点名锚点（"做一版 Mid-Century 风格"）→ 直接读取references/style-recipes/mid-century-modern.md；
Step 2：按 design-directions.md 的顾问流程，先经 INDEX.md 浏览目录，再读取对应配方文件（只读需要的那一个，不预载全部 25 个）；
Step 3：把配方里的色板/字体/间距/圆角/阴影/动效值原样粘贴进设计系统声明，交给用户确认后开工；
Step 7：交付前用 5 维评审对照配方自查——色数是否 ≤ 4、字体族 ≤ 2、是否偷偷混入了第二个配方（INDEX.md 的反模式："不要把两个配方混在同一页面里"）。

落地提示：配方文件本身不含代码——色值、字体名、间距阶梯是以文字描述的设计令牌（design tokens），Agent 需要在 Step 3+ 依据项目技术栈（React + Babel 内联 JSX、CSS Grid/Flexbox、CSS 自定义属性管理令牌，见 SKILL.md 技术规范）翻译成 CSS/JSX。这一"先声明系统、后写代码"的顺序，正是避免"AI 默认 Inter + #3b82f6 大杂烩"的关键。

配套资源速览