多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

复古调色盘落地的完整方案:garden-skills 中 Mid-Century Modern 设计配方实战解析

复古调色盘落地的完整方案:garden-skills 中 Mid-Century Modern 设计配方实战解析 人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis 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 ModernPaul Rand / Saul Bass风格配方为核心系统拆解 1950–60 年代美国图形现代主义在 Web 界面的落地要点从色彩、字体、网格、动效到签名动作与避坑清单并给出可直接复制的 AI 提示种子与在 web-design-engineer 技能工作流 中的调用时机。读完本文你将能在 Landing Page、品牌页、出版/文化类项目中独立产出爵士乐唱片封面般自信、克制、可识别的中古现代风格界面。一、这个配方讲什么给复古锚点一份可执行的设计规范在 web-design-engineer 的设计体系里风格不是一句形容词而是一份可粘贴的、有具体数值的设计规范。style-recipes/目录下存放着 25 个以真实品牌/工作室/设计师为锚点anchor的配方文件详见 配方目录索引mid-century-modern.md就是其中之一——它锚定在 Paul RandIBM 标志、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-retrofuturismY2K 千禧复古相比两者的差异一目了然Y2K 是亮晶晶的果冻质感与霓虹油彩而 Mid-Century Modern 是温暖纸面、硬朗几何、扁平色块——几何而不是柔软。二、色板三种底色与3 色上限的铁律配方给出的色板极其克制这是它的 DNA 所在角色取值Ground底色暖奶油#EBE3D2/ 芥末黄#D9A441/ 柔和青绿#3D6E70Ink墨色#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、Garamond16–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 / 48Radius圆角全场 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 的空话。八、不适用场景Dont 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.mdStep 2按 design-directions.md 的顾问流程先经 INDEX.md 浏览目录再读取对应配方文件只读需要的那一个不预载全部 25 个Step 3把配方里的色板/字体/间距/圆角/阴影/动效值原样粘贴进设计系统声明交给用户确认后开工Step 7交付前用 5 维评审对照配方自查——色数是否 ≤ 4、字体族 ≤ 2、是否偷偷混入了第二个配方INDEX.md 的反模式不要把两个配方混在同一页面里。落地提示配方文件本身不含代码——色值、字体名、间距阶梯是以文字描述的设计令牌design tokensAgent 需要在 Step 3 依据项目技术栈React Babel 内联 JSX、CSS Grid/Flexbox、CSS 自定义属性管理令牌见 SKILL.md 技术规范翻译成 CSS/JSX。这一先声明系统、后写代码的顺序正是避免AI 默认 Inter #3b82f6 大杂烩的关键。配套资源速览配方目录索引25 个配方 3 张索引表 跨配方反模式同流派配方Y2K / Frutiger Aero 复古未来主义设计方向顾问6 大学校分类法Specialty/Genre 的唯一入口Web Design Engineer 主技能文档完整工作流与设计原则上下文失败模式目录字体、阴影、动效等反模式检测与修复赞分享人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载相关推荐garden-skills 中的 Headspace 冥想风格配方Warm Humanist 治愈系设计的完整落地指南garden skills 中的 Headspace 冥想风格配方Warm Humanist 治愈系设计的完整落地指南 导读 本文围绕 garden skil人工智能AI 技能/插件提示工程如何快速掌握Python桌面应用开发基于python-guide的完整实践指南如何快速掌握Python桌面应用开发基于python guide的完整实践指南 Python作为一门功能强大且易于学习的编程语言在桌面应用开发领域有着广泛的AI 技能人工智能AI 应用garden-skills kb-retriever 实战使用 pandas 完成 Excel 数据分析的完整方法论garden skills kb retriever 实战使用 pandas 完成 Excel 数据分析的完整方法论 Excel 是本地知识库中最常见的结构化人工智能AI 技能/插件提示工程上一篇F´ 构建系统 Targets 机制全解析全局目标、模块目标与自定义目标注册下一篇RomM CHD转换终极指南3步压缩ISO节省50%磁盘空间创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表