尧图网站建设 
人工智能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 技能的 Headspace 冥想风格设计配方 展开完整讲解这套以 Headspace / Calm 为锚点的 Warm Humanist温暖人文主义设计体系从色板、字体、间距、圆角、阴影、动效六项设计令牌到签名动作、禁忌清单与 AI 出图种子。读完你不仅能照抄一套可直接运行的 CSS 令牌与组件实现还能理解它如何嵌入 SKILL.md 的 Step 3 设计系统声明流程以及为什么这套配方只适合健康、冥想、睡眠、儿童与亲和的专家类产品。一、配方档案它是什么、服务于谁headspace-meditation.md是 style-recipes 目录中 25 个有锚点的命名设计配方之一对应真实品牌/工作室/设计师每个配方独立成文件。它的档案卡片如下字段内容School流派Warm Humanist温暖人文主义Vibe气质柔和粉彩、一切圆润、令人平静的手绘插画Best for最佳场景健康 / 冥想 / 保健类 App睡眠、儿童产品亲和的专家型服务Touchstone参照物headspace.com、Headspace App、Calm.com 锁屏页美学在 INDEX.md 的流派索引中Warm Humanist 流派共有三个配方mailchimp-freddieMailchimp Freddie 时代手绘 温暖黄、stripe-pressStripe Press书籍物件 奶油底衬线和本配方headspace-meditationpeers 链接 原样照抄会失效正确路径见 mailchimp-freddie 与 stripe-press。三者共享由真实人类为真实人类而做的底子但气质差异明显Mailchimp 活泼幽默Stripe Press 真诚克制Headspace 则安静治愈——这也是按Best-for 场景而不是按流派直接照搬的原因。配方文件的设计原则是无代码、纯令牌十六进制色值、字体名、间距阶梯都用设计语言描述由 Agent 在 Step 3 之后用项目的技术栈翻译成 CSS / JSX见 INDEX.md 的文件格式约定。下文给出的 CSS 代码即基于该原则的落地示例。二、色板温暖是底线冷暖对比要克制配方给出的色板按角色Ground / Surface / Ink / Secondary / Pop命名这是为了让你在声明设计系统时知道每种颜色的职责而不是随手抽色角色色值用途Ground基底暖桃色#FFE2C5或#FFEDD5页面主背景营造温暖日光感Surface darker加深表面暖珊瑚#F4A573卡片/模块的次级表面与地面形成柔和分层Ink墨色暖深青#1B3A47正文与标题主墨色——注意它是暖深青而非冷海军蓝Secondary次级文字#5C6B7A说明文字、辅助信息Pop accents点缀色每场景仅其一轮换使用柔薰衣草紫#B0A5D1、鼠尾草绿#9DB67A、鲑鱼粉#F5867B按钮、焦点元素、插画点缀三条硬规则每屏最多 2 种颜色Avoid 清单明确写了 More than 2 colors per scene点缀色一场景一个、轮换使用——不是三色同屏而是不同场景换着用拒绝冷色板即使夜间模式也要用暖深青#1B3A47而不是冷海军蓝。落地为 CSS 设计令牌按 SKILL.md 的 CSS 最佳实践设计令牌用 CSS 自定义属性管理可以这样声明:root { /* Headspace warm-pastel tokens */ --ground: #FFE2C5; /* 暖桃基底 */ --ground-alt: #FFEDD5; /* 更浅的暖基底次选 */ --surface: #F4A573; /* 暖珊瑚表面 */ --ink: #1B3A47; /* 暖深青墨色主文字 */ --ink-secondary: #5C6B7A; /* 次级文字 */ --accent-lavender: #B0A5D1; /* 点缀柔薰衣草紫 */ --accent-sage: #9DB67A; /* 点缀鼠尾草绿 */ --accent-salmon: #F5867B; /* 点缀鲑鱼粉 */ --radius-sm: 16px; /* 小圆角 */ --radius-md: 24px; /* 中圆角 */ --radius-lg: 32px; /* 大圆角 */ --shadow-soft: 0 8px 24px rgba(244, 165, 115, 0.2); /* 温暖柔影 */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px; --space-6: 96px; }需要更多颜色时用 oklch 派生绝不凭空造色配方色板是刻意受限的INDEX 反模式明确警告 Dont import every color in the palette。当确实需要派生变体时SKILL.md 的技术规范给出了正确路径优先品牌色不够时用oklch()派生和谐变体——绝不从零编新色相。仓库中 website/web-design-website 的第 07 章专门解释了原因传统 HSL 感知不均匀同样的亮度值下黄色看起来比蓝色亮一大截而 oklch 是感知均匀的色彩空间保持亮度L与色度C不变、只旋转色相角H派生出的颜色自然和谐。例如从墨色派生更深表面时保持 L/C 只调 H--ink-deep: oklch(from var(--ink) l c calc(h - 8)); --ground-tint: oklch(from var(--ground) calc(l - 0.03) c h);三、字体圆润友好的无衬线 极少量手写脚本层级方案Display展示圆润友好的无衬线Apercu、GT America圆角变体、Söhne Breit字重600Body正文同一家族16–17px字重400Optional script情感点缀可选的单行柔和手写体如 Caveat极少量、用于情感时刻要点解读展示与正文共用同一家族靠字重与字号区分层级而不是引入第二家族——这保持了圆润友好的统一识别度手写体是one single soft handwritten line一整行、单条、克制使用。这与 SKILL.md 的 Emoji Rules 精神一致装饰性元素只在该配方 DNA 允许时出现且密度必须精确匹配品牌配方正文基准 16–17px 也符合 SKILL.md Appropriate Scale 中 Web 正文从 16–18px 起步的规范。四、间距 / 圆角 / 阴影慷慨、圆润、温暖间距阶梯Spacing8 / 16 / 24 / 40 / 64 / 96——按 8pt 网格生长整体慷慨generous。与 Mailchimp 配方4 / 8 / 16 / 24 / 40 / 64相比多了一档 96更空旷、更透气正是冥想产品留白即设计的气质。圆角Radius16小/ 24中/ 32大三档且按钮一律是胶囊pillborder-radius: 高度的一半。.card { border-radius: var(--radius-md); } /* 24px */ .card--hero { border-radius: var(--radius-lg); } /* 32px */ .btn { border-radius: calc(var(--btn-h) / 2); } /* 胶囊按钮 */阴影Shadow柔和且温暖——0 8px 24px rgba(244, 165, 115, 0.2)。注意阴影颜色取自珊瑚色#F4A573244,165,115Often colored to match the ground通常与基底同色系这是与通用灰色阴影最大的不同暖色投影让光本身也是暖的。动效Motion轻柔、缓慢、像呼吸一样时长400–800ms的缓动Hover 上浮要有漂浮感buoyant不是弹簧反弹关键元素上做呼吸动画1.5–4s 一个周期与breathe in… breathe out…的身体文案同步。.card { transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 600ms ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(244,165,115,0.28); } /* 呼吸圆环随文案吸气/呼气缩放 */ keyframes breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.18); opacity: 1; } } .breathe-ring { animation: breathe 3.2s ease-in-out infinite; }禁止生硬动效Avoid 清单明确no bouncy springs——太刺眼只用柔和缓动。这与本仓库中mailchimp-freddie配方bouncy welcomed弹簧物理形成鲜明对照——同流派、完全相反的动效哲学印证了配方必须按场景选不能按流派猜。五、签名动作Signature Moves这套配方的设计 DNA以下 5 条是让设计一眼是 Headspace而非又一个 AI 默认页面的可复制决策中心角色/吉祥物用简单圆形造型绘制Headspace 的橙色圆点角色而非复杂插画呼吸圆环动画与正文文案同步膨胀收缩breathe in… breathe out…——这是冥想产品的标志性交互隐喻暖桃渐变基底缓慢在色相间漂移slowly drift between hues的背景渐变一切皆圆每个容器都是胶囊或柔和圆角矩形安抚性微文案如 Take a moment. Well wait.——文案本身就在传递我们陪你慢慢来。第 5 条尤其重要它和 Mailchimp 的 personality in microcopySend better email 而非 Optimize delivery metrics一样属于 SKILL.md 中用设计语言而非技术语言沟通的落地实践——微文案是这个配方情感输出的最后一公里。六、禁忌清单什么会让它瞬间变成AI 味禁忌原因❌ 冷色板Headspace 活在暖色里夜间模式也是暖深青而非冷海军蓝❌ 任何尖角Rounded everything 是识别度的物理基础❌ 生硬动效弹簧回弹太刺眼与冥想节奏冲突只允许柔和缓动❌ 每屏超过 2 种颜色色板受限本身就是配方加第 5 种颜色平衡会毁掉它这些局部禁忌与 INDEX.md 的全目录横切反模式一脉相承后者的三条对本配方格外致命不要默认 Inter / Roboto / Arial / system-ui 作展示字体——配方的字体身份通常占识别度的 30–40%换掉就抹平了它不要把色板全搬进来——受限色板就是配方本体不要用 CSS 假装摄影/插画风格——本配方依赖简单的圆形角色插画这一特定美术风格如果拿不到/生成不了真实插画要明确告诉用户而不是用 CSS 形状顶替。INDEX 的原文标准是一张 60% 质量的真实英雄插画好过 0% 识别度的 CSS 替代品。七、AI 出图种子Prompt Seed生成配图时保持在 DNA 内配方自带一段可直接使用的出图提示词特点是用具体色值与造型约束取代空泛形容词这也正是 design-directions.md 中 AI-Prompt 模板的推荐写法[哲学DNA] [内容] [技术参数]必带色值 HEX、宽高比、构图规则、明确禁止项Simple flat illustration in warm peach #FFE2C5 background, single round mascot character in coral with friendly face, soft pastel shapes around it (sage, lavender), no harsh edges anywhere, gentle hand-drawn imperfection, 4:5.可读出的关键参数暖桃#FFE2C5基底、单个珊瑚色圆形角色、友好面部、鼠尾草薰衣草柔和形状、全图无硬边、柔和手绘不完美感、4:5 竖构图。对照 gpt-image-2 技能的出图工作流这段种子即可直接作为视觉素材生成的起点。八、什么时候不要用这套配方配方在末尾明确划出三条边界避免温柔变成幼稚、贴心变成傲慢产品需要锋利/高级感时——Headspace 配方读起来是柔软/关怀不是精炼/锐利品牌没有健康/关怀定位时——套上去会显得低龄化infantilizing语气需要权威/专家主导时——本配方是温柔引导不是命令式口吻。对照 INDEX 的 Best-for 表Approachable B2C / community / health场景下首选是mailchimp-freddie与headspace-meditation而 B2B 开发者工具、数据产品、编辑出版分别该去linear/vercel-mesh、bloomberg-terminal/tufte-dataink、nyt-the-daily/stripe-press。先定场景再选配方绝不反过来。九、在 web-design-engineer 工作流中的正确使用姿势本配方不是孤立文档而是 SKILL.md 全流程的一个环节触发条件Step 2用户点名锚点make it Headspace-style→只读这一个文件不要整目录加载25 个配方共约 1400 行单个约 50 行整包加载正是 INDEX 明令禁止的反模式Step 2b 校准用 design-calibration.md 的五个刻度Visual Variance / Motion Intensity / Information Density / Asset Dependence / Brand Fidelity定位本配方——例如冥想 App 的典型预设是 Motion 5–7呼吸序列化动效、Density 1–3画廊式、每屏一个核心想法、Asset Dependence 7没有真实插画配方会失效Step 3 声明把配方的色板/字体/间距/圆角/阴影/动效值原样粘贴进 Design Decisions 块先让用户确认再写代码——这正是 SKILL.md 要求的设计系统声明模板Handoff 路径若用户先经 Design Direction Advisor 选中了 Warm Humanist 流派则按 design-directions.md 的指引读取本流派 2–3 个配方文件mailchimp-freddie/stripe-press/headspace-meditation给用户具体选择。一个诚实的实现提醒本配方对插画素材依赖极高Asset Dependence 7 档且 INDEX 明确不要假装——手绘风格插画必须来自真实插画师或高质量生成无法获取时应当向用户如实说明素材待定而不是用圆角矩形顶替角色插画。十、落地自查清单Step 6 前逐项核对把本配方翻译成真实页面后对照 SKILL.md 的 Pre-delivery Checklist 做最终自检所有颜色来自本配方令牌无外来的冷色或第 5 种平衡色展示字体用了配方指定字体或配方内明示的替代未退回 Inter/Roboto每个容器都有 ≥16px 圆角按钮是胶囊全页面无尖角阴影为暖色系rgba(244,165,115,…)非中性灰动效全部 400–800ms 柔和缓动无弹簧回弹呼吸动画周期 1.5–4s关键插画元素为真实圆形角色素材无 CSS 形状顶替微文案走安抚/陪伴路线未出现命令式口吻prefers-reduced-motion已处理——对降低动效偏好用户关闭呼吸/漂移动画SKILL.md 技术规范明确要求利用该媒体查询。至此从headspace-meditation.md的六项设计令牌、五大签名动作、禁忌清单与 AI 种子到其在 garden-skills 工作流中的接入方式与落地自查这套 Warm Humanist 治愈系配方已具备完整的可读 → 可选 → 可写 → 可验收闭环。下一次遇到帮我做一个冥想 App / 睡前故事 / 儿童健康产品的需求直接打开本配方就能在几分钟内给出一个真正能认出、能落地、不 AI 味的设计系统。赞分享人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载相关推荐OfficeCLI 暖调有机风格实战指南warm--playful-organic 设计样式的完整解析与 Morph 落地OfficeCLI 暖调有机风格实战指南warm playful organic 设计样式的完整解析与 Morph 落地 本篇围绕 OfficeCLI MorCLIAI 应用MCP 服务基于 OpenDesign 的 Webflow 风格设计系统从设计语言到 Tokens 的完整落地指南基于 OpenDesign 的 Webflow 风格设计系统从设计语言到 Tokens 的完整落地指南 本文基于 design systems/webflowAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 设计系统实战Duolingo 风格化设计系统完整拆解与落地指南OpenDesign 设计系统实战Duolingo 风格化设计系统完整拆解与落地指南 本文基于 OpenDesign 仓库中 design systems/dAI 应用人工智能AI 技能设计系统媒体生成上一篇破解教育系统定制化难题3个MeEdu Hook系统实战解决方案下一篇TestDisk开源数据恢复完整解决方案快速找回丢失分区与宝贵数据创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 garden-skills 中的 Headspace 冥想风格配方：Warm Humanist 治愈系设计的完整落地指南
人工智能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 技能的 Headspace 冥想风格设计配方 展开完整讲解这套以 Headspace / Calm 为锚点的 Warm Humanist温暖人文主义设计体系从色板、字体、间距、圆角、阴影、动效六项设计令牌到签名动作、禁忌清单与 AI 出图种子。读完你不仅能照抄一套可直接运行的 CSS 令牌与组件实现还能理解它如何嵌入 SKILL.md 的 Step 3 设计系统声明流程以及为什么这套配方只适合健康、冥想、睡眠、儿童与亲和的专家类产品。一、配方档案它是什么、服务于谁headspace-meditation.md是 style-recipes 目录中 25 个有锚点的命名设计配方之一对应真实品牌/工作室/设计师每个配方独立成文件。它的档案卡片如下字段内容School流派Warm Humanist温暖人文主义Vibe气质柔和粉彩、一切圆润、令人平静的手绘插画Best for最佳场景健康 / 冥想 / 保健类 App睡眠、儿童产品亲和的专家型服务Touchstone参照物headspace.com、Headspace App、Calm.com 锁屏页美学在 INDEX.md 的流派索引中Warm Humanist 流派共有三个配方mailchimp-freddieMailchimp Freddie 时代手绘 温暖黄、stripe-pressStripe Press书籍物件 奶油底衬线和本配方headspace-meditationpeers 链接 原样照抄会失效正确路径见 mailchimp-freddie 与 stripe-press。三者共享由真实人类为真实人类而做的底子但气质差异明显Mailchimp 活泼幽默Stripe Press 真诚克制Headspace 则安静治愈——这也是按Best-for 场景而不是按流派直接照搬的原因。配方文件的设计原则是无代码、纯令牌十六进制色值、字体名、间距阶梯都用设计语言描述由 Agent 在 Step 3 之后用项目的技术栈翻译成 CSS / JSX见 INDEX.md 的文件格式约定。下文给出的 CSS 代码即基于该原则的落地示例。二、色板温暖是底线冷暖对比要克制配方给出的色板按角色Ground / Surface / Ink / Secondary / Pop命名这是为了让你在声明设计系统时知道每种颜色的职责而不是随手抽色角色色值用途Ground基底暖桃色#FFE2C5或#FFEDD5页面主背景营造温暖日光感Surface darker加深表面暖珊瑚#F4A573卡片/模块的次级表面与地面形成柔和分层Ink墨色暖深青#1B3A47正文与标题主墨色——注意它是暖深青而非冷海军蓝Secondary次级文字#5C6B7A说明文字、辅助信息Pop accents点缀色每场景仅其一轮换使用柔薰衣草紫#B0A5D1、鼠尾草绿#9DB67A、鲑鱼粉#F5867B按钮、焦点元素、插画点缀三条硬规则每屏最多 2 种颜色Avoid 清单明确写了 More than 2 colors per scene点缀色一场景一个、轮换使用——不是三色同屏而是不同场景换着用拒绝冷色板即使夜间模式也要用暖深青#1B3A47而不是冷海军蓝。落地为 CSS 设计令牌按 SKILL.md 的 CSS 最佳实践设计令牌用 CSS 自定义属性管理可以这样声明:root { /* Headspace warm-pastel tokens */ --ground: #FFE2C5; /* 暖桃基底 */ --ground-alt: #FFEDD5; /* 更浅的暖基底次选 */ --surface: #F4A573; /* 暖珊瑚表面 */ --ink: #1B3A47; /* 暖深青墨色主文字 */ --ink-secondary: #5C6B7A; /* 次级文字 */ --accent-lavender: #B0A5D1; /* 点缀柔薰衣草紫 */ --accent-sage: #9DB67A; /* 点缀鼠尾草绿 */ --accent-salmon: #F5867B; /* 点缀鲑鱼粉 */ --radius-sm: 16px; /* 小圆角 */ --radius-md: 24px; /* 中圆角 */ --radius-lg: 32px; /* 大圆角 */ --shadow-soft: 0 8px 24px rgba(244, 165, 115, 0.2); /* 温暖柔影 */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px; --space-6: 96px; }需要更多颜色时用 oklch 派生绝不凭空造色配方色板是刻意受限的INDEX 反模式明确警告 Dont import every color in the palette。当确实需要派生变体时SKILL.md 的技术规范给出了正确路径优先品牌色不够时用oklch()派生和谐变体——绝不从零编新色相。仓库中 website/web-design-website 的第 07 章专门解释了原因传统 HSL 感知不均匀同样的亮度值下黄色看起来比蓝色亮一大截而 oklch 是感知均匀的色彩空间保持亮度L与色度C不变、只旋转色相角H派生出的颜色自然和谐。例如从墨色派生更深表面时保持 L/C 只调 H--ink-deep: oklch(from var(--ink) l c calc(h - 8)); --ground-tint: oklch(from var(--ground) calc(l - 0.03) c h);三、字体圆润友好的无衬线 极少量手写脚本层级方案Display展示圆润友好的无衬线Apercu、GT America圆角变体、Söhne Breit字重600Body正文同一家族16–17px字重400Optional script情感点缀可选的单行柔和手写体如 Caveat极少量、用于情感时刻要点解读展示与正文共用同一家族靠字重与字号区分层级而不是引入第二家族——这保持了圆润友好的统一识别度手写体是one single soft handwritten line一整行、单条、克制使用。这与 SKILL.md 的 Emoji Rules 精神一致装饰性元素只在该配方 DNA 允许时出现且密度必须精确匹配品牌配方正文基准 16–17px 也符合 SKILL.md Appropriate Scale 中 Web 正文从 16–18px 起步的规范。四、间距 / 圆角 / 阴影慷慨、圆润、温暖间距阶梯Spacing8 / 16 / 24 / 40 / 64 / 96——按 8pt 网格生长整体慷慨generous。与 Mailchimp 配方4 / 8 / 16 / 24 / 40 / 64相比多了一档 96更空旷、更透气正是冥想产品留白即设计的气质。圆角Radius16小/ 24中/ 32大三档且按钮一律是胶囊pillborder-radius: 高度的一半。.card { border-radius: var(--radius-md); } /* 24px */ .card--hero { border-radius: var(--radius-lg); } /* 32px */ .btn { border-radius: calc(var(--btn-h) / 2); } /* 胶囊按钮 */阴影Shadow柔和且温暖——0 8px 24px rgba(244, 165, 115, 0.2)。注意阴影颜色取自珊瑚色#F4A573244,165,115Often colored to match the ground通常与基底同色系这是与通用灰色阴影最大的不同暖色投影让光本身也是暖的。动效Motion轻柔、缓慢、像呼吸一样时长400–800ms的缓动Hover 上浮要有漂浮感buoyant不是弹簧反弹关键元素上做呼吸动画1.5–4s 一个周期与breathe in… breathe out…的身体文案同步。.card { transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 600ms ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(244,165,115,0.28); } /* 呼吸圆环随文案吸气/呼气缩放 */ keyframes breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.18); opacity: 1; } } .breathe-ring { animation: breathe 3.2s ease-in-out infinite; }禁止生硬动效Avoid 清单明确no bouncy springs——太刺眼只用柔和缓动。这与本仓库中mailchimp-freddie配方bouncy welcomed弹簧物理形成鲜明对照——同流派、完全相反的动效哲学印证了配方必须按场景选不能按流派猜。五、签名动作Signature Moves这套配方的设计 DNA以下 5 条是让设计一眼是 Headspace而非又一个 AI 默认页面的可复制决策中心角色/吉祥物用简单圆形造型绘制Headspace 的橙色圆点角色而非复杂插画呼吸圆环动画与正文文案同步膨胀收缩breathe in… breathe out…——这是冥想产品的标志性交互隐喻暖桃渐变基底缓慢在色相间漂移slowly drift between hues的背景渐变一切皆圆每个容器都是胶囊或柔和圆角矩形安抚性微文案如 Take a moment. Well wait.——文案本身就在传递我们陪你慢慢来。第 5 条尤其重要它和 Mailchimp 的 personality in microcopySend better email 而非 Optimize delivery metrics一样属于 SKILL.md 中用设计语言而非技术语言沟通的落地实践——微文案是这个配方情感输出的最后一公里。六、禁忌清单什么会让它瞬间变成AI 味禁忌原因❌ 冷色板Headspace 活在暖色里夜间模式也是暖深青而非冷海军蓝❌ 任何尖角Rounded everything 是识别度的物理基础❌ 生硬动效弹簧回弹太刺眼与冥想节奏冲突只允许柔和缓动❌ 每屏超过 2 种颜色色板受限本身就是配方加第 5 种颜色平衡会毁掉它这些局部禁忌与 INDEX.md 的全目录横切反模式一脉相承后者的三条对本配方格外致命不要默认 Inter / Roboto / Arial / system-ui 作展示字体——配方的字体身份通常占识别度的 30–40%换掉就抹平了它不要把色板全搬进来——受限色板就是配方本体不要用 CSS 假装摄影/插画风格——本配方依赖简单的圆形角色插画这一特定美术风格如果拿不到/生成不了真实插画要明确告诉用户而不是用 CSS 形状顶替。INDEX 的原文标准是一张 60% 质量的真实英雄插画好过 0% 识别度的 CSS 替代品。七、AI 出图种子Prompt Seed生成配图时保持在 DNA 内配方自带一段可直接使用的出图提示词特点是用具体色值与造型约束取代空泛形容词这也正是 design-directions.md 中 AI-Prompt 模板的推荐写法[哲学DNA] [内容] [技术参数]必带色值 HEX、宽高比、构图规则、明确禁止项Simple flat illustration in warm peach #FFE2C5 background, single round mascot character in coral with friendly face, soft pastel shapes around it (sage, lavender), no harsh edges anywhere, gentle hand-drawn imperfection, 4:5.可读出的关键参数暖桃#FFE2C5基底、单个珊瑚色圆形角色、友好面部、鼠尾草薰衣草柔和形状、全图无硬边、柔和手绘不完美感、4:5 竖构图。对照 gpt-image-2 技能的出图工作流这段种子即可直接作为视觉素材生成的起点。八、什么时候不要用这套配方配方在末尾明确划出三条边界避免温柔变成幼稚、贴心变成傲慢产品需要锋利/高级感时——Headspace 配方读起来是柔软/关怀不是精炼/锐利品牌没有健康/关怀定位时——套上去会显得低龄化infantilizing语气需要权威/专家主导时——本配方是温柔引导不是命令式口吻。对照 INDEX 的 Best-for 表Approachable B2C / community / health场景下首选是mailchimp-freddie与headspace-meditation而 B2B 开发者工具、数据产品、编辑出版分别该去linear/vercel-mesh、bloomberg-terminal/tufte-dataink、nyt-the-daily/stripe-press。先定场景再选配方绝不反过来。九、在 web-design-engineer 工作流中的正确使用姿势本配方不是孤立文档而是 SKILL.md 全流程的一个环节触发条件Step 2用户点名锚点make it Headspace-style→只读这一个文件不要整目录加载25 个配方共约 1400 行单个约 50 行整包加载正是 INDEX 明令禁止的反模式Step 2b 校准用 design-calibration.md 的五个刻度Visual Variance / Motion Intensity / Information Density / Asset Dependence / Brand Fidelity定位本配方——例如冥想 App 的典型预设是 Motion 5–7呼吸序列化动效、Density 1–3画廊式、每屏一个核心想法、Asset Dependence 7没有真实插画配方会失效Step 3 声明把配方的色板/字体/间距/圆角/阴影/动效值原样粘贴进 Design Decisions 块先让用户确认再写代码——这正是 SKILL.md 要求的设计系统声明模板Handoff 路径若用户先经 Design Direction Advisor 选中了 Warm Humanist 流派则按 design-directions.md 的指引读取本流派 2–3 个配方文件mailchimp-freddie/stripe-press/headspace-meditation给用户具体选择。一个诚实的实现提醒本配方对插画素材依赖极高Asset Dependence 7 档且 INDEX 明确不要假装——手绘风格插画必须来自真实插画师或高质量生成无法获取时应当向用户如实说明素材待定而不是用圆角矩形顶替角色插画。十、落地自查清单Step 6 前逐项核对把本配方翻译成真实页面后对照 SKILL.md 的 Pre-delivery Checklist 做最终自检所有颜色来自本配方令牌无外来的冷色或第 5 种平衡色展示字体用了配方指定字体或配方内明示的替代未退回 Inter/Roboto每个容器都有 ≥16px 圆角按钮是胶囊全页面无尖角阴影为暖色系rgba(244,165,115,…)非中性灰动效全部 400–800ms 柔和缓动无弹簧回弹呼吸动画周期 1.5–4s关键插画元素为真实圆形角色素材无 CSS 形状顶替微文案走安抚/陪伴路线未出现命令式口吻prefers-reduced-motion已处理——对降低动效偏好用户关闭呼吸/漂移动画SKILL.md 技术规范明确要求利用该媒体查询。至此从headspace-meditation.md的六项设计令牌、五大签名动作、禁忌清单与 AI 种子到其在 garden-skills 工作流中的接入方式与落地自查这套 Warm Humanist 治愈系配方已具备完整的可读 → 可选 → 可写 → 可验收闭环。下一次遇到帮我做一个冥想 App / 睡前故事 / 儿童健康产品的需求直接打开本配方就能在几分钟内给出一个真正能认出、能落地、不 AI 味的设计系统。赞分享人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载相关推荐OfficeCLI 暖调有机风格实战指南warm--playful-organic 设计样式的完整解析与 Morph 落地OfficeCLI 暖调有机风格实战指南warm playful organic 设计样式的完整解析与 Morph 落地 本篇围绕 OfficeCLI MorCLIAI 应用MCP 服务基于 OpenDesign 的 Webflow 风格设计系统从设计语言到 Tokens 的完整落地指南基于 OpenDesign 的 Webflow 风格设计系统从设计语言到 Tokens 的完整落地指南 本文基于 design systems/webflowAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 设计系统实战Duolingo 风格化设计系统完整拆解与落地指南OpenDesign 设计系统实战Duolingo 风格化设计系统完整拆解与落地指南 本文基于 OpenDesign 仓库中 design systems/dAI 应用人工智能AI 技能设计系统媒体生成上一篇破解教育系统定制化难题3个MeEdu Hook系统实战解决方案下一篇TestDisk开源数据恢复完整解决方案快速找回丢失分区与宝贵数据创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考