尧图网页设计 
人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载导读stripe-press是 garden-skills 仓库中web-design-engineerSkill 的 25 个风格配方Style Recipe之一它把 Stripe Press 的实体出版物美学——奶油色纸面、暖墨色衬线正文、烫金/烫银封面色——抽象为一套可直接粘贴到设计系统声明中的设计 Token 组合。本文将逐项拆解该配方的调色板、字体、间距、动效与签名动作并结合 SKILL.md 的工作流Step 3 设计系统声明、oklch 配色策略和 设计 Token 示例 的源码级实现说明如何把它落成真正可运行的 HTML/CSS 页面。读完你将掌握Stripe Press 风格的精确定义、五个可直接复制的 Token 值、以及一条从配方到 v0 草稿的完整落地路径。一、配方速览锚点、流派与适用场景stripe-press配方在 style-recipes/INDEX.md 中被归类为Warm Humanist暖人文主义流派。它对应的真实锚点Anchor是 press.stripe.com 网站以及 Stripe Press 实体书布面装订、烫印书脊属于只有成功的基础设施公司才负担得起的编辑出版级设计。School流派Warm HumanistVibe气质书是物体本身——奶油色 墨色 暖调摄影书籍与思想类的产品Best for最佳场景编辑 / 出版、长文特稿longform features、书与思想类产品Touchstone试金石press.stripe.com、Stripe Press 实体书布面、烫印在 design-directions.md 的六大学派表中Warm Humanist 的定位是 Approachable, organic, hand-touched, friendly without being childish平易近人、有机、有手工感与 MailchimpFreddie 时代、Headspace 同列。它的推荐话术是Stripe Press / early Mailchimp warmth — humanist serifs, cream palette, illustrations that feel hand-touched语气是恰好懂行的朋友而非给客户上课的专家。关键使用纪律源自 INDEX.md 与 SKILL.md用户点名锚点时只读取这一个配方文件约 50 行不要加载全部 25 个配方合计约 1400 行。用整个目录撑一个配方是这套渐进式披露设计明确要阻止的反模式。二、调色板奶油纸面 暖墨 单色烫印配方的色彩系统严格限定每个颜色都有明确的角色分工绝不是一个 12 级渐变色带角色色值说明Ground纸面底色#F1ECDE暖骨色warm bone整个配方的纸Surface darker深一档表面#E6DCC4用于分层、卡片或次级表面Ink正文墨色#1A1A18极暖的近黑不是纯黑Secondary text次级文本#736D5A带暖调的次级灰Foil-stamp accent烫印点缀色深青#1B4B5A或焦赭#A04A2A仅用于书封场景Hairline发丝线#C8BEA4细分割线三条隐含规则配方 INDEX.md 交叉印证暖是必需品灰不能冷配方 Avoid 清单明确禁止冷中性灰cold neutral gray——这里每一个灰都带暖色偏。#C8BEA4是发丝线、#736D5A是次级文本它们的共同点是奶油纸面上叠出来的灰。烫印色一次只用一个每个章节 / 每本书只允许一种 foil-stamp 色金、深青、焦赭三选一绝不混用。这是书封设计的物理逻辑——实体书一册一个封面。纯白是被禁止的纯白地面不在配方里暖奶油#F1ECEC才是配方的身份的一部分。用#FFFFFF会立刻破坏纸感。落地时如何派生和谐色oklch 策略配方给出的是 HEX而 SKILL.md 的技术规范要求优先品牌色不够时用oklch()派生同谱系色绝不凭空造新色相。仓库里有一个非常直接的实现证据——tokens.css 将暖纸色、暖墨色全部表达为固定色相角下的 OKLCH 值--paper: oklch(0.965 0.018 78); /* 奶油纸面 */ --paper-deep: oklch(0.928 0.024 78); /* 深一档纸面 */ --ink: oklch(0.180 0.014 60); /* 暖墨近黑但暖 */ --ink-soft: oklch(0.300 0.014 60); --ink-mute: oklch(0.520 0.012 60); /* 暖调次级文本 */ --ember: oklch(0.700 0.170 42); /* 暖橘点缀 */ --line-1: oklch(0.180 0.014 60 / 0.10); /* 发丝线墨色透明派生 */其中oklch(0.965 0.018 78)与配方 Ground#F1ECDE是同谱系的暖纸色oklch(0.180 0.014 60)与 Ink#1A1A18同谱系的暖近黑。要点在于保持 L亮度与 C色度不变只旋转 h色相角自动得到和谐衍生色。这背后的原理在 07-oklch 章节 中有可视化演示HSL 色彩空间感知不均匀同样 60% 亮度下黄色看起来被打了灯而 OKLCH 是感知均匀空间L/C 固定后转 h 得到的颜色亮度天然一致。这正是奶油 墨 点缀这类受限调色板在 Web 端保持高级感的技术底座。三、字体系统编辑衬线是签名Stripe Press 配方的字体结构是双层衬线 界面无衬线且明确给出真实字体名不是 Inter/Roboto 兜底Display展示字体精致过度的过渡期衬线或现代衬线——GT Sectra、Domaine Display、Italian Old Style。斜体无处不在Italic everywhere。Body正文旧式衬线18–19px行高 1.65——Source Serif、Lyon Text、ITC Galliard。Sans无衬线仅 UI人文主义无衬线仅用于导航与说明文字的小字号——Söhne 或 GT America。配对惯例常用宽字重展示衬线 细字身正文衬线的组合。SKILL.md 与 INDEX.md 对字体纪律有两条硬约束不要默认 Inter / Roboto / Arial / system-ui 当展示字体——配方指定了什么字体就用什么或使用配方中点名的真实替代品。默认 Inter 会抹掉配方的字型身份而字型通常占签名感的 30–40%。仓库的字体栈实现tokens.css也印证了衬线优先、无衬线兜底的结构--f-serif: Instrument Serif, Songti SC, Noto Serif SC, Georgia, serif;而--f-sans只承担 UI 层。落地建议若正文采用 18–19px / line-height 1.65展示层用 1.5–2× 的宽距斜体做强调见下文签名动作。用clamp()做流式字号是 SKILL.md 推荐的 Web 端做法。四、间距、圆角、阴影与动效全部为书的质感服务维度配方值设计语义Spacing间距4 / 8 / 16 / 24 / 32 / 48 / 96编辑级呼吸感。仓库 tokens.css 的 8px 基准阶梯含--s-7: 96px与之同构Radius圆角全局0书没有圆角任何圆角都是非 Stripe PressShadow阴影书物阴影0 24px 48px rgba(0, 0, 0, 0.18)只出现在书这个物体上让书在页面上有三维感其他元素不落阴影Motion动效慢、慢、慢交叉淡入 1–2 秒书在 hover 时 3D 轻旋约 15° 封顶主视觉照片 Ken Burns 缓推约 20 秒这条动效参数的潜台词Stripe Press 的动效不负责炫只负责让书翻起来、让纸面活过来。对应 SKILL.md 中Motion Intensity 刻度见 design-calibration.md它属于中低区间——仅 hover、焦点、短入场转场加克制的滚动态响应任何超过简单状态反馈的动效都应当遵循prefers-reduced-motion。五、签名动作Signature Moves配方的设计 DNA这 5 条是让 Stripe Press 风格一眼可辨的具体决策每条都可直接照抄书封摄影当主视觉——真实实体书放在奶油纸上暖调侧光raking light 诚实的阴影。这是唯一正确的 hero 素材形式。宽距衬线斜体做强调——设置为正文字号的 1.5–2×用于章节重点。作者 / 章节引言用超大号斜体衬线悬挂在宽边距上hung against a wide margin。布纹纹理做章节分隔背景——低透明度、细微的织物纹理图案只在章节切分处出现。每个章节一个烫印色——金、深青、焦赭三选一绝不混用。INDEX.md 的跨配方反模式再次强调不要把配方要求的摄影风格用 CSS 伪造。Aesop、Stripe Press、MUJI、Apple HIG 这类配方依赖特定摄影/插画风格如果拿不到或生成不出这类影像要向用户明说而不是用 CSS 形状替代——60% 品质的真实主视觉照片也好过 0% 识别度的 CSS 替身。六、避坑清单Avoid让配方不至于塌成 AI 默认值配方自带的 Avoid 与 INDEX.md 的跨配方反模式合起来构成完整的防塌方清单❌纯白地面——暖奶油#F1ECDE是配方的一部分#FFFFFF不可替换❌无衬线正文——编辑衬线是签名正文只用衬线❌书的卡片网格card grids of books——Stripe Press 把每本书当作一个 feature 来排不是平铺的 tile❌冷中性灰——这里每一个灰都带暖色偏跨配方通用INDEX.md所有 25 个配方适用不要在一页里混两个配方Linear 加 Aesop 点缀通常读作混乱而非原创不要给受限调色板擅自加第 5 个颜色平衡一下——限制本身就是配方不要加让它 pop 一下的 AI 默认小动作——配方说无阴影就不要加微阴影说无渐变就不要加渐变网格不要静默发明新配方——跑出 25 个配方之外时要告诉用户七、AI 提示词种子为配方生成配套影像配方自带一段可直接投入生图的 prompt seed用于生成支撑性影像时保持 DNA 一致Hardcover book photographed on warm cream paper #F1ECDE, raking afternoon window light, deep soft shadow, single book object, cloth-bound spine visible, foil-stamped title in burnt sienna, 4:5, editorial product photography.精装书拍摄于暖奶油纸 #F1ECDE 上午后斜窗光深软阴影单一书物可见布面书脊焦赭色烫印书名4:5编辑出版级产品摄影。设计方向参考design-directions.md对生图提示词给出三条硬要求必须带 HEX 色值而不是warm/cool、必须带宽高比与构图规则、必须写明要避免什么如no purple gradient, no emoji, no rounded cards。配方 seed 恰好全部满足——它直接给了#F1ECDE、4:5、单物构图和布面/烫印的细节约束。八、什么时候不要用Dont use when配方明确划出了适用边界三条命中任何一条就换配方交付物没有编辑 / 出版 / 书刊类内容品牌语气轻快或俏皮Stripe Press 是真诚、深思熟虑的受众坐不住读长文——这个配方奖励阅读recipe rewards reading如果确实需要换方向INDEX.md 提供了顺序化的备选路径重新读用户需求 → 有意识地混两个配方需明确说出为什么协调→ 交回 design-directions 让用户挑流派 → 明确新配方。在按 INDEX.md 的 Best-for 索引兜底时编辑 / 出版 / 长文场景的并列候选还包括nyt-the-daily、monocle-magazine与mailchimp-freddie。九、从配方到 v0接入 SKILL.md 的 Step 3 工作流配方文件本身不包含代码——它是用文字描述的 design tokenINDEX.md 明示agent 在 Step 3 用项目栈把它翻译成 CSS / JSX。接入 SKILL.md 的 Step 3 时正确姿势是用户点名 Stripe Press 感觉 → 只读stripe-press.md这一个文件把配方中的 palette / typography / spacing / radius / shadow / motion 原值直接粘贴进 Design Decisions 声明块而不是现场发明在 Checkpoint 1 停下向用户确认设计系统后再写第一行代码。一个可直接套用的 Design Decisions 块示例Design Decisions: - Design Read: 编辑出版 landing / 长文页 · 受众为深度读者 · Warm Humanist · greenfield · 五刻度视觉方差 4 · 动效强度 3 · 信息密度 7 · 资产依赖 8 · 品牌保真 8 - Anchor / recipe: stripe-press → skills/web-design-engineer/references/style-recipes/stripe-press.md - Color palette: ground: #F1ECDE 暖骨纸 surface: #E6DCC4 ink: #1A1A18 暖近黑 text-2: #736D5A accent: #1B4B5A / #A04A2A 每章一种不混用 hairline: #C8BEA4 - Typography: display GT Sectra / Domaine Display斜体强调body Source Serif 18-19px lh 1.65UI Söhne - Spacing: 4 / 8 / 16 / 24 / 32 / 48 / 96 - Border-radius: 0 - Shadow: 仅书物 0 24px 48px rgba(0,0,0,0.18) - Motion: 1-2s 交叉淡入书 hover 3D 轻旋 ≤15°hero 照片 Ken Burns ~20s遵循 prefers-reduced-motionv0 阶段建议只搭结构 色彩/字体 Token 关键模块占位符如[image: 书封摄影 4:5]主视觉用真实书封摄影或诚实占位绝不手绘 SVG 书形替代。方向经用户确认后再进入完整构建Step 5交付前跑 SKILL.md 的 Pre-delivery Checklist 做自检。十、同流派与更多配方该配方属于 Warm Humanist 流派与 mailchimp-freddie手绘 暖黄 微文案人格、headspace-meditation柔和粉彩 呼吸感动效同源完整 25 个配方的目录、按流派 / 场景 / 明暗模式的三个索引见 style-recipes/INDEX.md。选好配方后把它写进项目的brand-spec.md后续所有决策都以它为准。一句话总结Stripe Press 配方 暖骨纸#F1ECDE 暖近黑#1A1A18 双层编辑衬线 全局零圆角 仅书物落影的慢动效 单色烫印它只服务编辑 / 出版 / 长文类内容落地时把 Token 直接粘进 Step 3 声明、用 OKLCH 派生同谱系色、用真实书封摄影而非 CSS 伪造就能稳定产出有实体书质感的编辑出版级页面。赞分享人工智能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 的 Aesop 风格配方用暖驼黄、鼠尾草与衬线体打造药剂师气质的静奢网页garden skills 的 Aesop 风格配方用暖驼黄、鼠尾草与衬线体打造药剂师气质的静奢网页 本篇技术指南以 garden skills 仓库 web人工智能AI 技能/插件提示工程使用 web3-eth-personal 管理节点账户web3.js 个人账户模块 API 与实战指南使用 web3 eth personal 管理节点账户web3.js 个人账户模块 API 与实战指南 web3 eth personal 是 web3.js人工智能AI 技能/插件提示工程OpenDesign 中的 Notion 风格设计系统温暖极简主义的设计令牌、排版体系与组件实现指南OpenDesign 中的 Notion 风格设计系统温暖极简主义的设计令牌、排版体系与组件实现指南 本指南以仓库内 design systems/notioAI 应用人工智能AI 技能设计系统媒体生成上一篇网盘直链下载助手免费解锁九大网盘高速下载的终极方案下一篇呆啵宠物DyberPet5分钟打造你的专属桌面数字伙伴 创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Stripe Press 风格配方：用暖人文主义衬线体系打造编辑出版级网页设计
人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载导读stripe-press是 garden-skills 仓库中web-design-engineerSkill 的 25 个风格配方Style Recipe之一它把 Stripe Press 的实体出版物美学——奶油色纸面、暖墨色衬线正文、烫金/烫银封面色——抽象为一套可直接粘贴到设计系统声明中的设计 Token 组合。本文将逐项拆解该配方的调色板、字体、间距、动效与签名动作并结合 SKILL.md 的工作流Step 3 设计系统声明、oklch 配色策略和 设计 Token 示例 的源码级实现说明如何把它落成真正可运行的 HTML/CSS 页面。读完你将掌握Stripe Press 风格的精确定义、五个可直接复制的 Token 值、以及一条从配方到 v0 草稿的完整落地路径。一、配方速览锚点、流派与适用场景stripe-press配方在 style-recipes/INDEX.md 中被归类为Warm Humanist暖人文主义流派。它对应的真实锚点Anchor是 press.stripe.com 网站以及 Stripe Press 实体书布面装订、烫印书脊属于只有成功的基础设施公司才负担得起的编辑出版级设计。School流派Warm HumanistVibe气质书是物体本身——奶油色 墨色 暖调摄影书籍与思想类的产品Best for最佳场景编辑 / 出版、长文特稿longform features、书与思想类产品Touchstone试金石press.stripe.com、Stripe Press 实体书布面、烫印在 design-directions.md 的六大学派表中Warm Humanist 的定位是 Approachable, organic, hand-touched, friendly without being childish平易近人、有机、有手工感与 MailchimpFreddie 时代、Headspace 同列。它的推荐话术是Stripe Press / early Mailchimp warmth — humanist serifs, cream palette, illustrations that feel hand-touched语气是恰好懂行的朋友而非给客户上课的专家。关键使用纪律源自 INDEX.md 与 SKILL.md用户点名锚点时只读取这一个配方文件约 50 行不要加载全部 25 个配方合计约 1400 行。用整个目录撑一个配方是这套渐进式披露设计明确要阻止的反模式。二、调色板奶油纸面 暖墨 单色烫印配方的色彩系统严格限定每个颜色都有明确的角色分工绝不是一个 12 级渐变色带角色色值说明Ground纸面底色#F1ECDE暖骨色warm bone整个配方的纸Surface darker深一档表面#E6DCC4用于分层、卡片或次级表面Ink正文墨色#1A1A18极暖的近黑不是纯黑Secondary text次级文本#736D5A带暖调的次级灰Foil-stamp accent烫印点缀色深青#1B4B5A或焦赭#A04A2A仅用于书封场景Hairline发丝线#C8BEA4细分割线三条隐含规则配方 INDEX.md 交叉印证暖是必需品灰不能冷配方 Avoid 清单明确禁止冷中性灰cold neutral gray——这里每一个灰都带暖色偏。#C8BEA4是发丝线、#736D5A是次级文本它们的共同点是奶油纸面上叠出来的灰。烫印色一次只用一个每个章节 / 每本书只允许一种 foil-stamp 色金、深青、焦赭三选一绝不混用。这是书封设计的物理逻辑——实体书一册一个封面。纯白是被禁止的纯白地面不在配方里暖奶油#F1ECEC才是配方的身份的一部分。用#FFFFFF会立刻破坏纸感。落地时如何派生和谐色oklch 策略配方给出的是 HEX而 SKILL.md 的技术规范要求优先品牌色不够时用oklch()派生同谱系色绝不凭空造新色相。仓库里有一个非常直接的实现证据——tokens.css 将暖纸色、暖墨色全部表达为固定色相角下的 OKLCH 值--paper: oklch(0.965 0.018 78); /* 奶油纸面 */ --paper-deep: oklch(0.928 0.024 78); /* 深一档纸面 */ --ink: oklch(0.180 0.014 60); /* 暖墨近黑但暖 */ --ink-soft: oklch(0.300 0.014 60); --ink-mute: oklch(0.520 0.012 60); /* 暖调次级文本 */ --ember: oklch(0.700 0.170 42); /* 暖橘点缀 */ --line-1: oklch(0.180 0.014 60 / 0.10); /* 发丝线墨色透明派生 */其中oklch(0.965 0.018 78)与配方 Ground#F1ECDE是同谱系的暖纸色oklch(0.180 0.014 60)与 Ink#1A1A18同谱系的暖近黑。要点在于保持 L亮度与 C色度不变只旋转 h色相角自动得到和谐衍生色。这背后的原理在 07-oklch 章节 中有可视化演示HSL 色彩空间感知不均匀同样 60% 亮度下黄色看起来被打了灯而 OKLCH 是感知均匀空间L/C 固定后转 h 得到的颜色亮度天然一致。这正是奶油 墨 点缀这类受限调色板在 Web 端保持高级感的技术底座。三、字体系统编辑衬线是签名Stripe Press 配方的字体结构是双层衬线 界面无衬线且明确给出真实字体名不是 Inter/Roboto 兜底Display展示字体精致过度的过渡期衬线或现代衬线——GT Sectra、Domaine Display、Italian Old Style。斜体无处不在Italic everywhere。Body正文旧式衬线18–19px行高 1.65——Source Serif、Lyon Text、ITC Galliard。Sans无衬线仅 UI人文主义无衬线仅用于导航与说明文字的小字号——Söhne 或 GT America。配对惯例常用宽字重展示衬线 细字身正文衬线的组合。SKILL.md 与 INDEX.md 对字体纪律有两条硬约束不要默认 Inter / Roboto / Arial / system-ui 当展示字体——配方指定了什么字体就用什么或使用配方中点名的真实替代品。默认 Inter 会抹掉配方的字型身份而字型通常占签名感的 30–40%。仓库的字体栈实现tokens.css也印证了衬线优先、无衬线兜底的结构--f-serif: Instrument Serif, Songti SC, Noto Serif SC, Georgia, serif;而--f-sans只承担 UI 层。落地建议若正文采用 18–19px / line-height 1.65展示层用 1.5–2× 的宽距斜体做强调见下文签名动作。用clamp()做流式字号是 SKILL.md 推荐的 Web 端做法。四、间距、圆角、阴影与动效全部为书的质感服务维度配方值设计语义Spacing间距4 / 8 / 16 / 24 / 32 / 48 / 96编辑级呼吸感。仓库 tokens.css 的 8px 基准阶梯含--s-7: 96px与之同构Radius圆角全局0书没有圆角任何圆角都是非 Stripe PressShadow阴影书物阴影0 24px 48px rgba(0, 0, 0, 0.18)只出现在书这个物体上让书在页面上有三维感其他元素不落阴影Motion动效慢、慢、慢交叉淡入 1–2 秒书在 hover 时 3D 轻旋约 15° 封顶主视觉照片 Ken Burns 缓推约 20 秒这条动效参数的潜台词Stripe Press 的动效不负责炫只负责让书翻起来、让纸面活过来。对应 SKILL.md 中Motion Intensity 刻度见 design-calibration.md它属于中低区间——仅 hover、焦点、短入场转场加克制的滚动态响应任何超过简单状态反馈的动效都应当遵循prefers-reduced-motion。五、签名动作Signature Moves配方的设计 DNA这 5 条是让 Stripe Press 风格一眼可辨的具体决策每条都可直接照抄书封摄影当主视觉——真实实体书放在奶油纸上暖调侧光raking light 诚实的阴影。这是唯一正确的 hero 素材形式。宽距衬线斜体做强调——设置为正文字号的 1.5–2×用于章节重点。作者 / 章节引言用超大号斜体衬线悬挂在宽边距上hung against a wide margin。布纹纹理做章节分隔背景——低透明度、细微的织物纹理图案只在章节切分处出现。每个章节一个烫印色——金、深青、焦赭三选一绝不混用。INDEX.md 的跨配方反模式再次强调不要把配方要求的摄影风格用 CSS 伪造。Aesop、Stripe Press、MUJI、Apple HIG 这类配方依赖特定摄影/插画风格如果拿不到或生成不出这类影像要向用户明说而不是用 CSS 形状替代——60% 品质的真实主视觉照片也好过 0% 识别度的 CSS 替身。六、避坑清单Avoid让配方不至于塌成 AI 默认值配方自带的 Avoid 与 INDEX.md 的跨配方反模式合起来构成完整的防塌方清单❌纯白地面——暖奶油#F1ECDE是配方的一部分#FFFFFF不可替换❌无衬线正文——编辑衬线是签名正文只用衬线❌书的卡片网格card grids of books——Stripe Press 把每本书当作一个 feature 来排不是平铺的 tile❌冷中性灰——这里每一个灰都带暖色偏跨配方通用INDEX.md所有 25 个配方适用不要在一页里混两个配方Linear 加 Aesop 点缀通常读作混乱而非原创不要给受限调色板擅自加第 5 个颜色平衡一下——限制本身就是配方不要加让它 pop 一下的 AI 默认小动作——配方说无阴影就不要加微阴影说无渐变就不要加渐变网格不要静默发明新配方——跑出 25 个配方之外时要告诉用户七、AI 提示词种子为配方生成配套影像配方自带一段可直接投入生图的 prompt seed用于生成支撑性影像时保持 DNA 一致Hardcover book photographed on warm cream paper #F1ECDE, raking afternoon window light, deep soft shadow, single book object, cloth-bound spine visible, foil-stamped title in burnt sienna, 4:5, editorial product photography.精装书拍摄于暖奶油纸 #F1ECDE 上午后斜窗光深软阴影单一书物可见布面书脊焦赭色烫印书名4:5编辑出版级产品摄影。设计方向参考design-directions.md对生图提示词给出三条硬要求必须带 HEX 色值而不是warm/cool、必须带宽高比与构图规则、必须写明要避免什么如no purple gradient, no emoji, no rounded cards。配方 seed 恰好全部满足——它直接给了#F1ECDE、4:5、单物构图和布面/烫印的细节约束。八、什么时候不要用Dont use when配方明确划出了适用边界三条命中任何一条就换配方交付物没有编辑 / 出版 / 书刊类内容品牌语气轻快或俏皮Stripe Press 是真诚、深思熟虑的受众坐不住读长文——这个配方奖励阅读recipe rewards reading如果确实需要换方向INDEX.md 提供了顺序化的备选路径重新读用户需求 → 有意识地混两个配方需明确说出为什么协调→ 交回 design-directions 让用户挑流派 → 明确新配方。在按 INDEX.md 的 Best-for 索引兜底时编辑 / 出版 / 长文场景的并列候选还包括nyt-the-daily、monocle-magazine与mailchimp-freddie。九、从配方到 v0接入 SKILL.md 的 Step 3 工作流配方文件本身不包含代码——它是用文字描述的 design tokenINDEX.md 明示agent 在 Step 3 用项目栈把它翻译成 CSS / JSX。接入 SKILL.md 的 Step 3 时正确姿势是用户点名 Stripe Press 感觉 → 只读stripe-press.md这一个文件把配方中的 palette / typography / spacing / radius / shadow / motion 原值直接粘贴进 Design Decisions 声明块而不是现场发明在 Checkpoint 1 停下向用户确认设计系统后再写第一行代码。一个可直接套用的 Design Decisions 块示例Design Decisions: - Design Read: 编辑出版 landing / 长文页 · 受众为深度读者 · Warm Humanist · greenfield · 五刻度视觉方差 4 · 动效强度 3 · 信息密度 7 · 资产依赖 8 · 品牌保真 8 - Anchor / recipe: stripe-press → skills/web-design-engineer/references/style-recipes/stripe-press.md - Color palette: ground: #F1ECDE 暖骨纸 surface: #E6DCC4 ink: #1A1A18 暖近黑 text-2: #736D5A accent: #1B4B5A / #A04A2A 每章一种不混用 hairline: #C8BEA4 - Typography: display GT Sectra / Domaine Display斜体强调body Source Serif 18-19px lh 1.65UI Söhne - Spacing: 4 / 8 / 16 / 24 / 32 / 48 / 96 - Border-radius: 0 - Shadow: 仅书物 0 24px 48px rgba(0,0,0,0.18) - Motion: 1-2s 交叉淡入书 hover 3D 轻旋 ≤15°hero 照片 Ken Burns ~20s遵循 prefers-reduced-motionv0 阶段建议只搭结构 色彩/字体 Token 关键模块占位符如[image: 书封摄影 4:5]主视觉用真实书封摄影或诚实占位绝不手绘 SVG 书形替代。方向经用户确认后再进入完整构建Step 5交付前跑 SKILL.md 的 Pre-delivery Checklist 做自检。十、同流派与更多配方该配方属于 Warm Humanist 流派与 mailchimp-freddie手绘 暖黄 微文案人格、headspace-meditation柔和粉彩 呼吸感动效同源完整 25 个配方的目录、按流派 / 场景 / 明暗模式的三个索引见 style-recipes/INDEX.md。选好配方后把它写进项目的brand-spec.md后续所有决策都以它为准。一句话总结Stripe Press 配方 暖骨纸#F1ECDE 暖近黑#1A1A18 双层编辑衬线 全局零圆角 仅书物落影的慢动效 单色烫印它只服务编辑 / 出版 / 长文类内容落地时把 Token 直接粘进 Step 3 声明、用 OKLCH 派生同谱系色、用真实书封摄影而非 CSS 伪造就能稳定产出有实体书质感的编辑出版级页面。赞分享人工智能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 的 Aesop 风格配方用暖驼黄、鼠尾草与衬线体打造药剂师气质的静奢网页garden skills 的 Aesop 风格配方用暖驼黄、鼠尾草与衬线体打造药剂师气质的静奢网页 本篇技术指南以 garden skills 仓库 web人工智能AI 技能/插件提示工程使用 web3-eth-personal 管理节点账户web3.js 个人账户模块 API 与实战指南使用 web3 eth personal 管理节点账户web3.js 个人账户模块 API 与实战指南 web3 eth personal 是 web3.js人工智能AI 技能/插件提示工程OpenDesign 中的 Notion 风格设计系统温暖极简主义的设计令牌、排版体系与组件实现指南OpenDesign 中的 Notion 风格设计系统温暖极简主义的设计令牌、排版体系与组件实现指南 本指南以仓库内 design systems/notioAI 应用人工智能AI 技能设计系统媒体生成上一篇网盘直链下载助手免费解锁九大网盘高速下载的终极方案下一篇呆啵宠物DyberPet5分钟打造你的专属桌面数字伙伴 创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考