人工智能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技能Skill的pentagram风格配方文档系统讲解这一源自 Pentagram 工作室与 Paula Scher 海报传统的信息架构式设计语言如何用超大号 Grotesque 字体充当主视觉、双色高对比配色、12 栏网格构建具有机构级权威感的网页。读完本文你将掌握该配方的全部设计令牌配色、字体、栅格、动效、5 个标志性手法、3 条禁用边界以及如何将配方令牌落地为 CSS/JSX 并在 AI 生图时保持其 DNA。配方文档位于 skills/web-design-engineer/references/style-recipes/pentagram.md是web-design-engineer技能 25 个锚定风格配方style recipes之一属于信息架构Information Architecture流派。配方在技能体系中的位置何时读取、如何使用在 SKILL.md 定义的工作流中配方文件不是开场就要全部加载的资料而是按需渐进式加载的锚定库Step 2 收集设计上下文当用户直接点名锚点做成 Pentagram 风格、需要机构级气质时只读取对应的单个配方文件references/style-recipes/anchor.md不要整库加载——整个目录约 1400 行而单个配方约 50 行一次只读一个文件是这套拆分机制的核心设计意图Step 3 声明设计系统把配方里的具体 palette / typography / spacing / radius / shadow / motion 值直接粘贴进设计系统声明块避免现场编造令牌这是 AI 默认输出Inter #3b82f6的根源Design Direction Advisor 兜底当用户需求模糊、由 design-directions.md 选中信息架构流派后从 INDEX.md 的流派索引中挑出pentagram等 2–3 个配方供用户选择。每个配方文件都遵循统一解剖结构锚点与流派、Vibe 与适用场景、Touchstone 参考作品、Palette、Typography、Spacing、Radius/Shadow/Motion、Signature moves、Avoid、AI prompt seed、Dont use when见 INDEX.md 的文件格式约定。pentagram配方正是这一解剖结构的完整实例。流派身份信息架构而非装饰配方的第一组元信息定义了它的性格边界维度取值SchoolInformation Architecture信息架构Vibe粗体字体即图像字体完成全部视觉工作其余一切退居其后Best forB2B 品牌识别、文化机构、我们是认真的we mean business时刻Touchstonepentagram.com、Paula Scher 的 Public Theater 海报、MIT Media Lab 视觉识别在 design-directions.md 的流派表中信息架构流派被概括为理性、数据驱动、克制、层级主导其推荐话术是你的页面变成一套字体关系系统而非一个 UI标题承担全部视觉重量其余元素退后。pentagram配方正是这一流派中字体最激进的一端——它是信息架构流派里最适合传达权威感与存在感的选项但在同一流派的五个配方中风格差异显著Helvetica 式克制的vignelli-swiss-helvetica、高密度终端的bloomberg-terminal、数据墨水的tufte-dataink、大报编辑的nyt-the-daily。设计令牌详解把配方值落成可复制的参数1. 配色双色高对比第三色是例外而非默认配方把颜色划分为墨色ink 底色ground二元结构常见组合仅三种角色组合 1组合 2组合 3Ink墨黑#000000钴蓝#1E3FFF砖红#B83A1FGround底白#FFFFFF奶油#F4F1E7骨白#EFE9DC只有在项目确实需要第三色时才允许引入唯一一个辅助强调色并且必须极其克制地使用。INDEX.md 的跨配方反模式对此有一致约束配方给了 4 个颜色就别为了平衡再加第 5 个——限制本身就是配方。落到实现上应与 SKILL.md 的 CSS 最佳实践一致用 CSS 自定义属性管理令牌配色全部来自配方禁止引入游离的第六种颜色Pre-delivery Checklist 中明确要求所有颜色来自 Step 3 声明的设计系统无 rogue hues。2. 字体单一 Grotesque 家族的巨型化展示字体只用一种 Grotesque无衬线怪诞体以超大字号呈现——Helvetica Now字重 700–900、Söhne Breit 或 Druk。标题经常设置得比所在栏位还大有意越出页边距break the margin正文同一家族的正文字重16–17px行高 1.45–1.55数字同一家族的等宽数字tabular figures保证表格列对齐。注意配方没有给出Inter / Roboto 兜底——INDEX.md 的跨配方反模式明确警告默认使用 Inter 会抹掉配方的字体身份而字体身份通常占配方辨识度的 30–40%。SKILL.md 的技术规范也建议用clamp()做流体字号用text-wrap: pretty改善断行——这些与标题大到溢出栏位的配方要求天然配合。3. 栅格与间距严格 12 栏 宽松 gutter严格 12 栏网格栏间 gutter 取宽松区间24–32px每个文本元素都对齐基线网格baseline grid留白是结构的一部分栏间距本身就是锚见下方 Signature moves 第 4 条图注与元数据就钉在 gutter 里。4. 圆角与阴影双零Radius0Shadow无。这两个零与 INDEX.md 的反模式配方说 no shadow 就不要加 subtle shadow配方说 no gradient 就不要加 gradient mesh完全同构——每补一个 AI 默认细节配方辨识度就被稀释一分。5. 动效只允许字体动作配方把动效严格限定为排印式动作typographic moves字母移入、标题沿基线滑动。禁止 3D、禁止弹跳bouncy、禁止视差parallax。这与 design-calibration.md 的五档校准Five Dials中的 Motion Intensity 档位对应该配方应落在 1–4 档静态或仅 hover/focus/短进入转场。当动效超过简单状态反馈时应遵循prefers-reduced-motion媒体查询降级这也是 SKILL.md 明确要求的 CSS 实践。五个标志性手法Signature moves这就是配方的 DNA配方文档给出了可复制的五个标志性设计决策是实现可被一眼认出的核心标题大到触到甚至明显冲破栏位边缘——把01、PROJECT这类标题设置到超出所在网格列越界本身就是设计字体即图像Type as image——一个单词或短语以 hero 级字号成为页面唯一的图形元素替代摄影与插画色块分节——用一块平涂的强调色矩形作为章节分隔通常配一个巨大的数字如02压在色块上图注与元数据钉在网格上——用极小、极精确的字号放在栏间 gutter 中形成网格钉住文字的秩序感整页 1px 细线——偶尔在页面全宽画一条 1px 规则线作为锚定全局的水平基准。这 5 条在实现层面的含义是栅格是可见的脚手架、色彩是墨底双元、数字与图注是被网格定位的信息装置——与vignelli-swiss-helvetica配方一个超大数字放在每个信息块左上角的相邻手法呼应见 vignelli-swiss-helvetica.md但pentagram的版本更强调标题冲破栏位的张力。Avoid 清单四条红线守住配方不被 AI 默认值污染禁止以摄影作为视觉主角字体领衔而非照片唯一例外是 hero 照片时照片只能位于/垫在超大字号之下禁止多种字体家族混用——单一 Grotesque 是铁律禁止渐变、阴影、任何装饰性元素禁止内容卡片网格——Pentagram 以跨页spreads而非卡片思考版面。对照 INDEX.md 的跨配方反模式别中途把两个配方混搭如Pentagram 加个 Y2K hero通常是混乱而非原创、别为了让它更出彩加自己的 AI 默认细节——这两条直接约束着 Avoid 清单的执行。从配方到代码令牌映射与实现建议INDEX.md 明确说明配方文件不含代码hex、字体名、间距阶梯是用文字描述的设计令牌由 Agent 在 Step 3 用项目的技术栈翻译成 CSS/JSX。基于配方值与 SKILL.md 的 CSS 最佳实践可作如下映射以下为按配方令牌推导的实现示意非仓库既有代码/* 令牌墨 底 双元结构用 CSS 自定义属性承载 */ :root { --ink: #000000; /* 或 #1E3FFF钴蓝 / #B83A1F砖红 */ --ground: #FFFFFF; /* 或 #F4F1E7奶油 / #EFE9DC骨白 */ --gutter: 28px; /* 24–32px 区间内的一个取值 */ --display: Helvetica Now, Druk, sans-serif; } /* 标志性手法 12标题比所在栏位还大主动冲破列边界 */ .hero-title { font-family: var(--display); font-weight: 900; font-size: clamp(6rem, 18vw, 20rem); /* 流体放大支撑“溢出”行为 */ margin-inline: calc(var(--gutter) * -1); /* 负 margin 让文字越出栏位 */ text-wrap: pretty; line-height: 0.95; } /* 标志性手法 3平涂色块 巨大章节数字 */ .section-rule { background: var(--ink); color: var(--ground); font-size: clamp(8rem, 16vw, 16rem); font-variant-numeric: tabular-nums; /* 等宽数字 */ }配套约束border-radius: 0、无box-shadow、无background-image渐变动效只保留标题沿基线滑入/字母位移这类排印动作所有颜色取自--ink/--ground可辅以唯一强调色不新增色相。若需按 SKILL.md 的 oklch 规范派生更多色调也应从这两个令牌出发派生同色系变体而不是凭空造新色。仓库中 demo/web-design-demo/demo2/demo2-with-skill.html 展示了技能开启后同类克制双色、编号分节、杂志编辑式结构的实际产物纸暖色#f2efe8 墨黑#161513双色、编号章节、非对称栅格可作为该技能在排印驱动、双色克制方向上的仓库内参照。AI prompt seed让生图工具保持配方 DNA配方文档附带一段预置的 AI 生图提示词用于生成配套视觉素材时保持 DNA配合本仓库gpt-image-2技能使用更佳Editorial poster composition, single phrase set in massive black Helvetica weight 900, characters bleeding past the layout margins, behind it a flat field of cobalt #1E3FFF, no photography, no illustration, 3:4.它的结构符合 design-directions.md 的提示词模板规范[philosophy DNA] [content description] [technical params]包含了具体色值#1E3FFF、字号与字重massive / weight 900、构图规则字符越出边距、禁止项no photography, no illustration与比例3:4。反例是minimalist style, premium feel这类只有形容词、没有 DNA 的提示词。每个配方文件都自带一段这样的 prompt seeddesign-directions.md 建议从正在使用的配方自带的 seed 出发而不是从零写提示词。边界什么时候不要用这个配方配方文档明确列出三种会翻车的场景标题无法做得又粗又短配方需要 3–6 个词的强文案——Pentagram 需要强有力的文案支撑长句软标题会失去全部张力必须传达多层级的特性密度——这是机构之声institutional voice不是特性目录feature catalog多层级信息应改投bloomberg-terminal数据终端密度或tufte-dataink数据墨水品牌希望保持安静——Pentagram 与安静截然相反它是有攻击性的存在感。判定方法与 INDEX.md 的When None of the 25 Fits流程一致先重读需求再考虑同流派相邻配方数据主导用tufte-dataink/bloomberg-terminal都不合适时回退到 Design Direction Advisor 或明确向用户提议新配方——不允许默默漂移出配方库。同流派导航与进一步阅读pentagram属于信息架构流派同流派配方每个配方文件底部都带此导航vignelli-swiss-helvetica.md——严格 Helvetica、8px 基线网格、六色系统bloomberg-terminal.md——琥珀色终端密度、等宽数据tufte-dataink.md——最大数据墨水比、页边注、小多幅nyt-the-daily.md——大报三层标题层级。全部 25 个配方按流派/适用场景/明暗模式三套索引汇总于 style-recipes/INDEX.md。将配方投入实际交付时可结合 design-calibration.md 的五档校准Motion Intensity 取低档、Visual Variance 靠非对称与越界实现与 SKILL.md 的 v0 草案、检查点Checkpoint 1–3与 Pre-delivery Checklist 流程执行确保配方从令牌到成品全程不被稀释。赞分享人工智能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 六大学派分类体系与锚点式风格推荐机制garden skills 设计方向顾问实战指南Web Design Engineer 六大学派分类体系与锚点式风格推荐机制 导读 当用户说出 make s人工智能AI 技能/插件提示工程Dieter Rams / Braun 设计配方实战用 garden-skills 的 web-design-engineer 打造工业级硬件产品页Dieter Rams / Braun 设计配方实战用 garden skills 的 web design engineer 打造工业级硬件产品页 本指南以人工智能AI 技能/插件提示工程Apple HIG 风格配方实战用 garden-skills 的 web-design-engineer 打造给产品一个舞台的高级硬件产品页Apple HIG 风格配方实战用 garden skills 的 web design engineer 打造给产品一个舞台的高级硬件产品页 苹果式的页人工智能AI 技能/插件提示工程上一篇Grafana Tempo 中 franz-go 消费者路径并发正确性审计指南不变量、竞态分类与修复方法论下一篇ESP32 触摸滑动传感器touch_slider_sensor组件指南配置、手势识别与源码原理解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考