拓冰网站定制 
人工智能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 技能的mailchimp-freddie风格配方系统拆解 Mailchimp 吉祥物时代约 2018–2022的设计 DNA——暖黄色品牌时刻、手绘插画、富有性格的微文案。你将掌握可直接落地的配色 token、字体与间距体系、签名式设计动作以及该配方在小型商业工具、创作者产品、教育与社区型 B2C 场景中的正确使用边界。一、配方是什么锚定真实品牌的风格菜谱在 Web Design Engineer 技能中references/style-recipes/目录存放着25 份锚定式风格配方style recipes每一份都绑定一个真实品牌、工作室或设计师并以独立文件存在。mailchimp-freddie就是其中之一对应 style-recipes/mailchimp-freddie.md。它的定位非常明确流派SchoolWarm Humanist温暖人文主义气质Vibe手绘笔触、暖黄色、微文案里的人格化表达最佳适用Best for小型商业工具、创作者产品、社区 / 教育 / 亲和型 B2C触媒Touchstonemailchimp.com 2023 年改版前的历次页面可借 Wayback Machine 查看、Freddie 插画系列从 SKILL.md 的工作流看这套配方库是Step 3「声明设计系统」的加速器当用户说出「做成 Mailchimp 那种感觉」这类锚点请求时Agent 只加载这一份约 50 行的配方文件把其中的色板、字体、间距、圆角、阴影、动效直接粘进设计系统声明块而不是凭空发明 token——因为「临场发挥」正是 AI 默认输出Inter 字体 #3b82f6 蓝色泛滥的根因。注意recipe 文件本身不含代码它用设计语言描述设计 token十六进制色值、字体名、间距阶梯真正的 CSS/JSX 由 Agent 在 Step 3 之后按项目技术栈翻译实现。与同流派配方的差异Warm Humanist 流派共三份配方INDEX.md 中的同流派对照可以帮你在选型时看清差异配方气质最佳适用mailchimp-freddie手绘标记、暖黄、微文案人格化小型商业工具、社区、亲和 B2Cstripe-press书籍即物件、奶油色 墨水、编辑性衬线编辑出版、长文特稿、「书与思想」产品headspace-meditation柔和粉彩、全圆角、舒缓手绘插画健康冥想、睡眠儿童产品、亲和专家服务三者的共同点是「温暖、有机、手工痕迹」但 Mailchimp 配方更强调活力与玩味黄 墨色 单点高亮的撞色逻辑、Spring 物理动效、Memphis 风格的描边药丸按钮都比 Headspace 的「呼吸节奏」更跳脱。二、色板暖色托底、墨色压阵、单点高亮配方给出了严格受限的四层色板核心思想是「暖」——即便是黑也必须是暖近黑角色色值说明Ground地面色#FFE01BMailchimp 黄用于 hero 与品牌高光时刻正文底色用#FFFFFFInk墨色#241C15暖近黑永不使用纯黑Cream surface奶油表面#FBEFE3次级区块的表面色Secondary次要文字#88837C次级信息灰带暖调Accent点缀色#FF4D74热粉或暖珊瑚色极少量使用三条硬性边界缺一不可任何位置都不要出现纯黑——配方写的是 warm-near-black#241C15同一时刻可见颜色不超过 3 种——黄 墨 一个点缀色这是配方保持辨识度的关键约束冷灰是禁区——所有灰色都必须带暖色倾向。这与 INDEX.md 的跨配方反模式完全对齐「配方给出 4 个颜色就别为了『平衡』加第 5 个——限制本身就是配方」。同时技能层的 SKILL.md CSS 最佳实践要求用oklch()在品牌色基础上派生和谐变体而不是凭空发明新色相——所以如果你需要同一暖黄的明暗变体应基于#FFE01B做 oklch 亮度派生。三、字体体系友好 grotesque 为主手绘笔触为辅配方对字体的要求高度具体直接替换掉 AI 默认的 Inter/Roboto/system-ui 展示字体Display展示字体友好的 grotesque 无衬线——Helvetica Now Display、Söhne、Inter Tight字重700–800Body正文同族字体17–18px字重 400行高1.6Decorative装饰偶尔出现的手写体或「手工排版感」文字承担情绪点睛。要点在于「同族、大反差」展示与正文共用字体家族但字重跨度大700–800 对 400配合正文 1.6 的行高建立阅读节奏。手写装饰只在极少数情绪时刻出现不能铺满页面。这与 INDEX.md 的反模式「不要默认用 Inter/Roboto/Arial/system-ui 当展示字体」互为印证——配方指定的字体或配方内点名的真实替身通常构成该配方 30–40% 的视觉签名换成 Inter 就等于抹掉身份。四、间距、圆角、阴影与动效一组可直接复制的 token配方给出的其余 token 全部可以直接转译成 CSS 变量维度配方值落地提示Spacing4 / 8 / 16 / 24 / 40 / 64慷慨但不成空旷可以映射为--space-1..6Radius8小/ 16中/ 24大药丸按钮是药丸形radius height / 2Shadow0 4px 12px rgba(36, 28, 21, 0.08)柔和且带暖意阴影色直接用墨色#241C15的低透明度Motion欢迎弹跳bouncyhover 抬升用 spring 物理友好缓动对应技能中 CSS transitions spring easing 的微交互层值得注意的是阴影色值直接取自墨色 tokenrgba(36, 28, 21, …)这与 headspace-meditation 的「阴影颜色跟随地面色」是同一种设计语言阴影不是灰色而是带品牌暖调的投影。在动效层面SKILL.md 给出了一条实现捷径80% 的微交互按钮按压、卡片 hover、淡入入场用 CSS transitions/animations 就够不必上来就引库只有时间轴级场景才需要自定义useTime Easing interpolate或兜底的 Popmotion。Mailchimp 配方的「弹跳欢迎」完全可以落在第一层。五、签名式动作让页面一眼可辨的 5 个设计决策配方把最具辨识度的部分提炼为「Signature moves」这是整个配方的设计 DNA缺一个都会向 AI 默认输出坍缩Freddie 式手绘插画——眨眼吉祥物、带性格的线条角色。绝不能用 AI 生成必须委托真人插画师或固定一位插画师的手笔保证笔触一致黄色 flood-fill 区块——用整块黄色背景色打断页面节奏作为品牌时刻药丸形按钮 2–3px 黑色描边——Memphis 风格孟菲斯设计运动几何形、粗描边、撞色的经典动作微文案里的人格化——写「Send better email」而不是「Optimize delivery metrics」写人话不写运营指标腔不对称「倾斜」插画排布——插画刻意倾斜放置绝不居中在网格上。其中第 4 条「微文案人格化」是该配方区别于同流派的关键Headspace 写的是「Take a moment. Well wait.」式的安抚而 Mailchimp 写的是「教你发更好的邮件」式的鼓励——同样是温暖前者是疗愈后者是啦啦队。用 AI 生成配图时的种子提示词配方内置了与自身 DNA 对齐的AI prompt seed用于生成支持性插画素材Hand-drawn illustration, single line-drawn character with warm color washes (yellow, coral), winking expression, on warm cream #FBEFE3 background, friendly approachable line style, deliberate imperfection, 4:5.注意两个矛盾点要辩证看签名动作第 1 条说「Freddie 风格插画绝不能用 AI 生成」而 prompt seed 又是给 AI 用的——它的正确用途是生成非身份关键性的辅助插画如次级装饰主角插画仍应来自真人插画师同时 failure-patterns.md 的「CSS as counterfeit asset」反模式提醒我们不要用 CSS 形状伪装品牌资产配图缺口应诚实暴露占位符而不是硬画。六、禁区清单哪些动作会瞬间毁掉配方配方的Avoid段与 INDEX.md 的跨配方反模式是配套的逐条对齐如下配方禁区底层逻辑来自仓库文档任何地方出现纯黑配方是暖近黑纯黑是冷色信号库存插画stock illustrations手绘风格就是差异化本身INDEX.md 同样警告「不要用 CSS 伪造摄影/插画风格」同时可见超过 3 种颜色颜色限制就是配方加色等于稀释冷冰冰的企业微文案人格化文案是签名动作第 4 条写「运营指标腔」等于放弃身份插画居中在网格上不对称倾斜排布是签名动作第 5 条此外跨配方反模式还特别点名了 Mailchimp 这类依赖插画风格的配方「60% 质量的真 hero 插画也比 0% 识别度的 CSS 替代品更落地」——如果你无法从真实插画师处获得素材必须向用户明说而不是用几何形状硬凑。七、适用边界什么时候不要用这个配方配方的Dont use when给出了三条清晰的边界与「Best for」互为镜像品牌需要高端 / 奢华感——Mailchimp 的温暖读作「可亲近 / 大众市场」跟奢侈品定位冲突插画无法从真人插画师处获得——拿不到真手绘配方直接损失约 50% 的影响力受众是纯企业端enterprise-only且对「友好」持怀疑态度——企业决策者可能把温暖误读为不够严肃。这也呼应了 design-directions.md 中 Warm Humanist 流派的定位它的价值在于传达「这是真人做给真人的」对抗「机器人写的落地页」的感知而如果任务本质是「信息架构」「权威感」「工具质感」应转向 Information Architecture 或 Modern Tool 流派而不是硬套温暖配方。八、在 Web Design Engineer 工作流中的落地路径最后把这份配方放回技能的完整工作流SKILL.md 的 Step 0–7它的正确使用方式是这样的Step 0 事实核查如果任务点名 Mailchimp 品牌本身先联网核实事实绝不凭记忆断言版本、时间线Step 2 锚点确认用户说「Mailchimp 感觉」→ 只读 mailchimp-freddie.md 这一份文件不要加载全部 25 份整库约 1400 行单份约 50 行渐进式加载正是这套拆分的反模式设计Step 3 声明设计系统把本配方第 2–5 节的色板、字体、间距、圆角、阴影、动效值直接粘进 Design Decisions 块让用户确认后再动代码Step 4 v0 草案占位符 关键布局 已声明的 token尽早让用户纠偏方向Step 5 全量构建签名动作逐个落实——黄 flood-fill、药丸按钮描边、不对称插画、人格化微文案Step 6 验证轻量交付前自检浏览器验收只在用户明确要求时运行Step 7 评审若用户要求打分用 5 维评审核对「哲学一致性」——每个细节是否都能回溯到配方还是漂移成了通用混搭。判断选型时可对照 INDEX.md 的「By Best-for」表Approachable B2C / community / health场景的首选就是 mailchimp-freddie 与 headspace-meditationEditorial / publishing / longform场景也会出现它的身影——这反过来印证了配方「社区教育型 B2C 轻度编辑性内容」的双栖能力。延伸阅读本配方所属 Warm Humanist 流派的完整对照见 design-directions.md流派第 5 节全部 25 份配方的目录、三套交叉索引与跨配方反模式见 INDEX.md技能主文件 SKILL.md 承载了完整的工作流与 CSS/React 技术规范。赞分享人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载相关推荐Freddie 暖黄友善主题实战指南在 beautiful-article 中写出 Mailchimp 式技术文章Freddie 暖黄友善主题实战指南在 beautiful article 中写出 Mailchimp 式技术文章 本篇指南围绕 skills/beautif人工智能AI 技能/插件提示工程wired-mat-icon 使用指南用 Web Component 打造手绘风格的 Material Design 图标wired mat icon 使用指南用 Web Component 打造手绘风格的 Material Design 图标 wired mat icon 是UI组件前端10分钟掌握 GEOS 安装与配置Windows、Linux、macOS 全平台教程10分钟掌握 GEOS 安装与配置Windows、Linux、macOS 全平台教程 GEOSGeometry Engine, Open Source是一后端上一篇qqbot HTTP API使用教程轻松实现群通知与消息推送下一篇探索未来MIT-Han Lab 的 BEVFusion —— 实时三维感知的新里程碑创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Web Design Engineer 的 Mailchimp Freddie 风格配方：用手绘插画与暖黄色彩打造亲和型 B2C 界面
人工智能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 技能的mailchimp-freddie风格配方系统拆解 Mailchimp 吉祥物时代约 2018–2022的设计 DNA——暖黄色品牌时刻、手绘插画、富有性格的微文案。你将掌握可直接落地的配色 token、字体与间距体系、签名式设计动作以及该配方在小型商业工具、创作者产品、教育与社区型 B2C 场景中的正确使用边界。一、配方是什么锚定真实品牌的风格菜谱在 Web Design Engineer 技能中references/style-recipes/目录存放着25 份锚定式风格配方style recipes每一份都绑定一个真实品牌、工作室或设计师并以独立文件存在。mailchimp-freddie就是其中之一对应 style-recipes/mailchimp-freddie.md。它的定位非常明确流派SchoolWarm Humanist温暖人文主义气质Vibe手绘笔触、暖黄色、微文案里的人格化表达最佳适用Best for小型商业工具、创作者产品、社区 / 教育 / 亲和型 B2C触媒Touchstonemailchimp.com 2023 年改版前的历次页面可借 Wayback Machine 查看、Freddie 插画系列从 SKILL.md 的工作流看这套配方库是Step 3「声明设计系统」的加速器当用户说出「做成 Mailchimp 那种感觉」这类锚点请求时Agent 只加载这一份约 50 行的配方文件把其中的色板、字体、间距、圆角、阴影、动效直接粘进设计系统声明块而不是凭空发明 token——因为「临场发挥」正是 AI 默认输出Inter 字体 #3b82f6 蓝色泛滥的根因。注意recipe 文件本身不含代码它用设计语言描述设计 token十六进制色值、字体名、间距阶梯真正的 CSS/JSX 由 Agent 在 Step 3 之后按项目技术栈翻译实现。与同流派配方的差异Warm Humanist 流派共三份配方INDEX.md 中的同流派对照可以帮你在选型时看清差异配方气质最佳适用mailchimp-freddie手绘标记、暖黄、微文案人格化小型商业工具、社区、亲和 B2Cstripe-press书籍即物件、奶油色 墨水、编辑性衬线编辑出版、长文特稿、「书与思想」产品headspace-meditation柔和粉彩、全圆角、舒缓手绘插画健康冥想、睡眠儿童产品、亲和专家服务三者的共同点是「温暖、有机、手工痕迹」但 Mailchimp 配方更强调活力与玩味黄 墨色 单点高亮的撞色逻辑、Spring 物理动效、Memphis 风格的描边药丸按钮都比 Headspace 的「呼吸节奏」更跳脱。二、色板暖色托底、墨色压阵、单点高亮配方给出了严格受限的四层色板核心思想是「暖」——即便是黑也必须是暖近黑角色色值说明Ground地面色#FFE01BMailchimp 黄用于 hero 与品牌高光时刻正文底色用#FFFFFFInk墨色#241C15暖近黑永不使用纯黑Cream surface奶油表面#FBEFE3次级区块的表面色Secondary次要文字#88837C次级信息灰带暖调Accent点缀色#FF4D74热粉或暖珊瑚色极少量使用三条硬性边界缺一不可任何位置都不要出现纯黑——配方写的是 warm-near-black#241C15同一时刻可见颜色不超过 3 种——黄 墨 一个点缀色这是配方保持辨识度的关键约束冷灰是禁区——所有灰色都必须带暖色倾向。这与 INDEX.md 的跨配方反模式完全对齐「配方给出 4 个颜色就别为了『平衡』加第 5 个——限制本身就是配方」。同时技能层的 SKILL.md CSS 最佳实践要求用oklch()在品牌色基础上派生和谐变体而不是凭空发明新色相——所以如果你需要同一暖黄的明暗变体应基于#FFE01B做 oklch 亮度派生。三、字体体系友好 grotesque 为主手绘笔触为辅配方对字体的要求高度具体直接替换掉 AI 默认的 Inter/Roboto/system-ui 展示字体Display展示字体友好的 grotesque 无衬线——Helvetica Now Display、Söhne、Inter Tight字重700–800Body正文同族字体17–18px字重 400行高1.6Decorative装饰偶尔出现的手写体或「手工排版感」文字承担情绪点睛。要点在于「同族、大反差」展示与正文共用字体家族但字重跨度大700–800 对 400配合正文 1.6 的行高建立阅读节奏。手写装饰只在极少数情绪时刻出现不能铺满页面。这与 INDEX.md 的反模式「不要默认用 Inter/Roboto/Arial/system-ui 当展示字体」互为印证——配方指定的字体或配方内点名的真实替身通常构成该配方 30–40% 的视觉签名换成 Inter 就等于抹掉身份。四、间距、圆角、阴影与动效一组可直接复制的 token配方给出的其余 token 全部可以直接转译成 CSS 变量维度配方值落地提示Spacing4 / 8 / 16 / 24 / 40 / 64慷慨但不成空旷可以映射为--space-1..6Radius8小/ 16中/ 24大药丸按钮是药丸形radius height / 2Shadow0 4px 12px rgba(36, 28, 21, 0.08)柔和且带暖意阴影色直接用墨色#241C15的低透明度Motion欢迎弹跳bouncyhover 抬升用 spring 物理友好缓动对应技能中 CSS transitions spring easing 的微交互层值得注意的是阴影色值直接取自墨色 tokenrgba(36, 28, 21, …)这与 headspace-meditation 的「阴影颜色跟随地面色」是同一种设计语言阴影不是灰色而是带品牌暖调的投影。在动效层面SKILL.md 给出了一条实现捷径80% 的微交互按钮按压、卡片 hover、淡入入场用 CSS transitions/animations 就够不必上来就引库只有时间轴级场景才需要自定义useTime Easing interpolate或兜底的 Popmotion。Mailchimp 配方的「弹跳欢迎」完全可以落在第一层。五、签名式动作让页面一眼可辨的 5 个设计决策配方把最具辨识度的部分提炼为「Signature moves」这是整个配方的设计 DNA缺一个都会向 AI 默认输出坍缩Freddie 式手绘插画——眨眼吉祥物、带性格的线条角色。绝不能用 AI 生成必须委托真人插画师或固定一位插画师的手笔保证笔触一致黄色 flood-fill 区块——用整块黄色背景色打断页面节奏作为品牌时刻药丸形按钮 2–3px 黑色描边——Memphis 风格孟菲斯设计运动几何形、粗描边、撞色的经典动作微文案里的人格化——写「Send better email」而不是「Optimize delivery metrics」写人话不写运营指标腔不对称「倾斜」插画排布——插画刻意倾斜放置绝不居中在网格上。其中第 4 条「微文案人格化」是该配方区别于同流派的关键Headspace 写的是「Take a moment. Well wait.」式的安抚而 Mailchimp 写的是「教你发更好的邮件」式的鼓励——同样是温暖前者是疗愈后者是啦啦队。用 AI 生成配图时的种子提示词配方内置了与自身 DNA 对齐的AI prompt seed用于生成支持性插画素材Hand-drawn illustration, single line-drawn character with warm color washes (yellow, coral), winking expression, on warm cream #FBEFE3 background, friendly approachable line style, deliberate imperfection, 4:5.注意两个矛盾点要辩证看签名动作第 1 条说「Freddie 风格插画绝不能用 AI 生成」而 prompt seed 又是给 AI 用的——它的正确用途是生成非身份关键性的辅助插画如次级装饰主角插画仍应来自真人插画师同时 failure-patterns.md 的「CSS as counterfeit asset」反模式提醒我们不要用 CSS 形状伪装品牌资产配图缺口应诚实暴露占位符而不是硬画。六、禁区清单哪些动作会瞬间毁掉配方配方的Avoid段与 INDEX.md 的跨配方反模式是配套的逐条对齐如下配方禁区底层逻辑来自仓库文档任何地方出现纯黑配方是暖近黑纯黑是冷色信号库存插画stock illustrations手绘风格就是差异化本身INDEX.md 同样警告「不要用 CSS 伪造摄影/插画风格」同时可见超过 3 种颜色颜色限制就是配方加色等于稀释冷冰冰的企业微文案人格化文案是签名动作第 4 条写「运营指标腔」等于放弃身份插画居中在网格上不对称倾斜排布是签名动作第 5 条此外跨配方反模式还特别点名了 Mailchimp 这类依赖插画风格的配方「60% 质量的真 hero 插画也比 0% 识别度的 CSS 替代品更落地」——如果你无法从真实插画师处获得素材必须向用户明说而不是用几何形状硬凑。七、适用边界什么时候不要用这个配方配方的Dont use when给出了三条清晰的边界与「Best for」互为镜像品牌需要高端 / 奢华感——Mailchimp 的温暖读作「可亲近 / 大众市场」跟奢侈品定位冲突插画无法从真人插画师处获得——拿不到真手绘配方直接损失约 50% 的影响力受众是纯企业端enterprise-only且对「友好」持怀疑态度——企业决策者可能把温暖误读为不够严肃。这也呼应了 design-directions.md 中 Warm Humanist 流派的定位它的价值在于传达「这是真人做给真人的」对抗「机器人写的落地页」的感知而如果任务本质是「信息架构」「权威感」「工具质感」应转向 Information Architecture 或 Modern Tool 流派而不是硬套温暖配方。八、在 Web Design Engineer 工作流中的落地路径最后把这份配方放回技能的完整工作流SKILL.md 的 Step 0–7它的正确使用方式是这样的Step 0 事实核查如果任务点名 Mailchimp 品牌本身先联网核实事实绝不凭记忆断言版本、时间线Step 2 锚点确认用户说「Mailchimp 感觉」→ 只读 mailchimp-freddie.md 这一份文件不要加载全部 25 份整库约 1400 行单份约 50 行渐进式加载正是这套拆分的反模式设计Step 3 声明设计系统把本配方第 2–5 节的色板、字体、间距、圆角、阴影、动效值直接粘进 Design Decisions 块让用户确认后再动代码Step 4 v0 草案占位符 关键布局 已声明的 token尽早让用户纠偏方向Step 5 全量构建签名动作逐个落实——黄 flood-fill、药丸按钮描边、不对称插画、人格化微文案Step 6 验证轻量交付前自检浏览器验收只在用户明确要求时运行Step 7 评审若用户要求打分用 5 维评审核对「哲学一致性」——每个细节是否都能回溯到配方还是漂移成了通用混搭。判断选型时可对照 INDEX.md 的「By Best-for」表Approachable B2C / community / health场景的首选就是 mailchimp-freddie 与 headspace-meditationEditorial / publishing / longform场景也会出现它的身影——这反过来印证了配方「社区教育型 B2C 轻度编辑性内容」的双栖能力。延伸阅读本配方所属 Warm Humanist 流派的完整对照见 design-directions.md流派第 5 节全部 25 份配方的目录、三套交叉索引与跨配方反模式见 INDEX.md技能主文件 SKILL.md 承载了完整的工作流与 CSS/React 技术规范。赞分享人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载相关推荐Freddie 暖黄友善主题实战指南在 beautiful-article 中写出 Mailchimp 式技术文章Freddie 暖黄友善主题实战指南在 beautiful article 中写出 Mailchimp 式技术文章 本篇指南围绕 skills/beautif人工智能AI 技能/插件提示工程wired-mat-icon 使用指南用 Web Component 打造手绘风格的 Material Design 图标wired mat icon 使用指南用 Web Component 打造手绘风格的 Material Design 图标 wired mat icon 是UI组件前端10分钟掌握 GEOS 安装与配置Windows、Linux、macOS 全平台教程10分钟掌握 GEOS 安装与配置Windows、Linux、macOS 全平台教程 GEOSGeometry Engine, Open Source是一后端上一篇qqbot HTTP API使用教程轻松实现群通知与消息推送下一篇探索未来MIT-Han Lab 的 BEVFusion —— 实时三维感知的新里程碑创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考