尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

guizang-ppt-skill 截图美化语义规则:CleanShot X 式程序化适配与内置背景资产实战指南

guizang-ppt-skill 截图美化语义规则:CleanShot X 式程序化适配与内置背景资产实战指南 AI 技能【免费下载链接】guizang-ppt-skillAI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts, social covers, and a WebGL/low-power presentation runtime.项目地址https://gitcode.com/gh_mirrors/gu/guizang-ppt-skill点击查看免费下载导读本文围绕 guizang-ppt-skill 的截图处理规范references/screenshot-framing.md展开讲解如何把用户提供的产品截图、网页截图、代码截图、设计稿截图处理成符合模板槽位比例、又保持内容保真的图片资产。读完你会掌握「优先级判定 → 7 个语义参数 → 双风格映射 → 内置背景资产复用 → 截图类型决策 → 背景生成提示词」的完整实操链路并理解它与模板、版式、校验器之间的协作关系。为什么需要一套截图美化语义规则guizang-ppt-skill 生成的是单文件 HTML 横向翻页 PPT模板预设了大量图片槽位21:9 顶图、16:10 主图、4:3 侧图、1:1 方图、多图网格等。当用户提供的原始截图比例不可控时直接硬塞进槽位会出现三种典型问题比例错位2592×1798 之类的原图比例在固定槽位里撑出奇怪的空白或溢出这正是 references/layouts.md 反复强调「永远用标准比例」的原因内容被裁关键 UI 文字、数据、标题栏被cover裁掉失去证据价值风格漂移截图自带品牌色、花哨背景和当前 deck 的电子杂志风或瑞士国际主义风完全不搭。为此仓库定义了 references/screenshot-framing.md 这套「截图美化语义规则」。它的目标类似 CleanShot X 的「截图居中 背景填充 统一比例」但不默认让图像模型重画截图——保真优先程序化处理优先。处理优先级程序化适配 GPT-M 2.0 重构文档把截图处理方式按优先级划分为三层这是整条链路的决策总纲程序化适配优先截图内容、文字、UI 细节需要保真时不要重画。做法是创建目标比例画布把原截图等比缩放后放入画布GPT-M 2.0 只做重构只有原图过长、过窄、信息太乱或者需要UI 情景化 / 概念化表达时才使用「截图再设计 / UI 情景图」模板槽位先行先确定 slide 版式和图片槽位比例再决定截图适配参数——即「先让内容适配模板再处理图片比例」。这条优先级与 SKILL.md 中的截图需求约定完全一致截图需要保真时先读screenshot-framing.md优先使用assets/screenshot-backgrounds/的内置背景资产做程序化 CleanShot X 式背景画布适配只有原截图太乱、太长、太窄或需要概念化表达时才用 GPT-M 2.0 做截图再设计。开始前询问5 个必须澄清的问题在主流程 Step 1需求澄清中只要用户可能提供截图就必须先问清楚这 5 件事截图位置截图在哪个文件夹是否包含网页、App、代码、dashboard、设计稿或旧 PPT处理目的这批截图要保真展示、统一美化、重新设计成 UI 情景图还是混合处理落位槽位最终要放进哪些槽位——21:9 顶图、16:10 主图、4:3 侧图、1:1 方图还是多图网格内容约束是否必须保留所有文字和数据是否需要隐藏账号、头像、项目名等敏感信息构图偏好希望居中、左上、右下还是根据页面内容自动判断运行环境差异也要注意在 Claude Code 中用 Ask Question /ask_question做这些澄清在 Codex 中用普通对话询问不要调用 Ask Question 机制。处理链路版式 → 处理方式 → 背景 → 合成文档给出了四步处理链路每一步都是顺序依赖关系先匹配版式根据内容选择模板 layout确定截图槽位尺寸和比例再选处理方式要保真 → 程序化适配不重画截图要统一视觉但不改内容 → 程序化适配 主题背景原图不可用或需要解释概念 → 走 GPT-M 2.0 截图再设计再选择背景优先使用内置背景资产不应该每张截图临时生成一种风格最后合成截图创建目标比例画布背景cover铺满截图等比缩放后按padding和alignment放入。一条硬规则贯穿始终默认不要裁掉截图内容。只有截图已经按目标槽位重新生成或者用户明确允许裁切时才使用cover裁切。7 个语义参数每次处理前必须确定每次处理截图前先确定这 7 个参数。这是本规则的核心操作面参数可选值判断方式ratio21:9/16:10/16:9/4:3/1:1跟随模板图片槽位不要跟随原截图比例backgroundplain/gradient/wallpaper/blurred/grid/paper跟随当前 PPT 风格和主题paddingcompact/standard/spacious普通截图standard文字密集或高截图spacious小图组compactinsetnone/subtle/balanced截图需要从背景中浮出来时用balanced瑞士风多用none/subtleshadownone/soft/editorialStyle A 可soft/editorialStyle B 默认nonecornerssquare/small/mediumStyle BsquareStyle Asmall/mediumalignmentcenter/top-left/top-right/bottom-left/bottom-right跟随页面构图不是永远居中参数在模板侧的实际落位这些参数不是抽象概念它们在 HTML 模板里有对应的容器与类名。例如 references/layouts.md 中左文右图主图用.frame-img.r-16x10/.frame-img.r-4x3对应ratio图片网格用.frame-img.h-22/.frame-img.h-26固定高度对应统一高度与compact密度信息图 / 截图再设计用.frame-img.r-16x9.fit-contain对应fit-contain保真策略避免文字被裁切瑞士风单张大图用 S22 的.frame-img.r-21x9铺满references/layouts-swiss.md。也就是说ratio最终会翻译成具体的比例类或data-image-slot声明如s22-hero-21x9/s15-grid-21x9/s16-brief-21x9这是 scripts/validate-swiss-deck.mjs 静态校验会拦截的硬约束。风格映射Style A 电子杂志风 vs Style B 瑞士国际主义Style A · 电子杂志风背景paper/blurred/ 低饱和gradient质感纸张、墨水、胶片颗粒、暖白、低对比截图可用小圆角和轻微阴影但不要像 SaaS 营销卡片背景资产优先使用assets/screenshot-backgrounds/style-a/下对应主题的 16:9 crop-safe WebP截图合成时按槽位裁切推荐语义ratio:16:10, background:paper, padding:standard, inset:balanced, shadow:editorial, corners:small, alignment:centerStyle B · 瑞士国际主义背景plain/grid/dot-matrix色彩只允许当前锚点色作为极低占比强调不要大面积亮色块截图直角、无阴影、无圆角、少量 hairline 或顶部 accent 线背景资产优先使用assets/screenshot-backgrounds/style-b/下对应主题色的 16:9 crop-safe WebP只用当前 accent不要混色推荐语义ratio:21:9, background:grid, padding:standard, inset:subtle, shadow:none, corners:square, alignment:center注意两套风格对截图处理的约束与模板本身的审美规则严格对齐Style A 允许轻微圆角与柔和阴影references/themes.md 的纸感审美Style B 则必须直角、无阴影、无渐变、单一锚点色references/themes-swiss.md 的「不要用渐变 / 阴影 / 圆角」「不允许混搭多个高亮色」硬规则。背景强度规则背景是托底不是主视觉截图背景的定位是「托底」永远不能抢截图本身的风头如果alignment不确定背景中心和四角都必须安静不要放显眼色块如果截图要放在右下角右下角不能有强色块其他位置同理瑞士风锚点色只做5%–8% 视觉占比的淡线、点阵或极浅几何场不要生成高亮蓝条、大色块、霓虹渐变背景不能有文字、logo、图标、人物、设备、边框、明显主体或方向性构图背景必须crop-safe裁成21:9、16:10、4:3、1:1都不能暴露「被裁掉」的痕迹。这一规则与 references/checklist.md 的 P0-D 条目互相印证截图外侧背景应该是安静托底不能比截图本身更抢眼Swiss 风截图不得出现圆角和投影。内置主题背景资产9 套 WebP 优先复用本 Skill 已经内置一组 GPT-M 2.0 预生成背景。处理截图时优先使用这些资产不要实时调用 GPT-M 2.0 重新生成背景。只有用户明确要求新风格、现有主题缺失、或背景与内容明显不匹配时才生成新的背景。背景图之后由程序复用到每张截图中。不要把背景当作单张 slide 来画——背景图内部不能有标题、页脚、边框、logo、人物或明显主体。Style A · 5 套主题背景主题内置资产背景语义墨水经典assets/screenshot-backgrounds/style-a/monocle-classic.webp黑白灰纸张纹理、柔和阴影、细颗粒靛蓝瓷assets/screenshot-backgrounds/style-a/indigo-porcelain.webp靛蓝低饱和墨色、纸感渐变、轻微噪点森林墨assets/screenshot-backgrounds/style-a/forest-ink.webp模糊植物阴影、低饱和绿色、纸张颗粒牛皮纸assets/screenshot-backgrounds/style-a/kraft-paper.webp暖纸色、淡墨阴影、复古印刷颗粒沙丘assets/screenshot-backgrounds/style-a/dune.webp沙色/灰调柔和渐变、低对比、留白安静Style B · 4 套主题背景主题色内置资产背景语义IKB 蓝assets/screenshot-backgrounds/style-b/ikb-dot-gradient.webp点阵 低对比蓝色渐变避免亮蓝大色块柠檬黄assets/screenshot-backgrounds/style-b/lemon-grid.webp纯网格 稀疏点阵黄色只做低透明细线/点柠檬绿assets/screenshot-backgrounds/style-b/lemon-green-dot-shadow.webp点阵 阴影场绿色只做轻微光感安全橙assets/screenshot-backgrounds/style-b/safety-orange-halftone.webp模块化半调点阵 暗部阴影橙色低占比所有内置背景都是1920×1080 级别的 16:9 WebP。程序化合成时先把背景cover到目标画布再裁成21:9/16:10/4:3/1:1等截图槽位。背景必须四角安静因为截图可能居中、左上、右下或被裁成不同尺寸。截图类型决策原始素材 → 推荐处理方式原始素材推荐处理普通网页 / App / 桌面截图程序化适配到目标比例产品 UI 细节很重要程序化适配使用fit-contain不重画长网页截图截关键区域或拆成 2-3 张同尺寸面板极窄 / 极高截图先尝试spacious side alignment仍太小时再重构代码截图Style A 用纸感背景Style B 用浅网格背景文字必须可读概念解释用的 UI 情景图可以 GPT-M 2.0 重新设计与图文混排决策树的衔接在 SKILL.md 的图文混排决策树中截图角色判断与此表完全联动证据截图 / UI / 代码 / dashboard保真优先关键文字和数据不能被裁掉需要统一比例时优先程序化背景画布 .fit-contain不要为了铺满而裁掉 UI 内容。多图组则必须统一比例、高度、容器处理和 caption 密度——不要一张contain、另一张cover。生成背景图提示词仅在需要新增背景资产时使用常规截图美化不要实时生成背景直接使用上方内置资产。只有需要扩充背景库时才用本节提示词。Style A 背景16:9 crop-safe screenshot background for an editorial magazine / e-ink PPT system. Warm off-white paper texture, subtle ink wash, fine film grain, low contrast, quiet center and quiet corners, no text, no logo, no objects, no border, no focal subject. Suitable for cropping to 21:9, 16:10, 4:3, or 1:1.Style B 背景16:9 crop-safe screenshot background for a Swiss International Style PPT system. Pure off-white base, ultra-subtle 16-column grid and sparse dot matrix, one accent color only: [theme color], used at very low opacity as thin lines or tiny dots, no large bright color blocks. Quiet center and quiet corners, no text, no logo, no objects, no border, no focal subject. Suitable for cropping to 21:9, 16:10, 4:3, or 1:1.注意两份提示词都反复出现的「quiet center and quiet corners / no text / no logo / no objects / no border / no focal subject」以及「Suitable for cropping to 21:9, 16:10, 4:3, or 1:1」——这正是「背景强度规则」与「crop-safe」约束在生成环节的显式编码。Style B 提示词还要求one accent color only与 references/themes-swiss.md 的「单一锚点色」原则一致。实战工作流把截图处理接入 PPT 生成主流程把上面的规则落进 guizang-ppt-skill 的完整工作流一次截图处理的执行顺序是Step 1 澄清按「开始前询问」清单确认截图位置、目的、槽位、内容约束、构图偏好在 Codex 中用普通对话在 Claude Code 中用 Ask Question确定风格与版式根据风格 A/B 选模板assets/template.html或 assets/template-swiss.html再按 references/layouts.md风格 A 10 种布局或 references/layouts-swiss.md风格 B S01–S22 锁定版式确定图片槽位比例确定 7 个语义参数ratio跟随槽位background跟随主题其余按截图类型和风格映射选择选择内置背景从assets/screenshot-backgrounds/style-a/或style-b/中按主题选一张示例见上表程序化cover到目标画布合成截图截图等比缩放后按padding/alignment放入画布默认不裁内容落位 HTML按 references/image-prompts.md 与 SKILL.md 的规范将结果放入对应.frame-img风格 A或 S22 / S15 / S16 图片槽位风格 B需要时写data-image-slot校验与自检风格 B 运行node scripts/validate-swiss-deck.mjs path/to/index.html再对照 references/checklist.md 的图片类检查项直角无阴影、同组同比例、不裁关键文字、背景不抢镜逐项确认。关键结论保真优先截图内容、文字、UI 细节需要保真时一律程序化适配GPT-M 2.0 重构只是「长、窄、乱、需概念化」场景的兜底手段槽位先行ratio等 7 个语义参数全部跟随模板槽位而不是原图比例资产复用9 套内置 16:9 crop-safe WebP 背景Style A 5 套 Style B 4 套应优先复用背景是安静的托底绝不当主视觉可验证crop-safe 与背景强度由背景生成提示词显式约束截图落位由 scripts/validate-swiss-deck.mjs 与 references/checklist.md 在生成后进行校验形成「规则 → 生成 → 校验」的闭环。赞分享AI 技能【免费下载链接】guizang-ppt-skillAI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts, social covers, and a WebGL/low-power presentation runtime.项目地址https://gitcode.com/gh_mirrors/gu/guizang-ppt-skill点击查看免费下载相关推荐10分钟快速入门RVC语音克隆零基础打造专属AI声音的完整指南10分钟快速入门RVC语音克隆零基础打造专属AI声音的完整指南 你是否曾梦想拥有自己的AI语音助手或者为虚拟主播打造独特的声音现在只需10分钟语音数据AI 技能Guizang PPT Skill 实战指南用 Agent 生成电子杂志风与瑞士国际主义风的单文件 HTML 网页 PPTGuizang PPT Skill 实战指南用 Agent 生成电子杂志风与瑞士国际主义风的单文件 HTML 网页 PPT 本指南围绕 guizang pptAI 技能终极终端美化指南iTerm2背景图片与dotfiles配置完全教程终极终端美化指南iTerm2背景图片与dotfiles配置完全教程 想让你的终端界面焕然一新吗通过简单的配置你就能拥有一个既美观又实用的工作环境。本文将详开发工具上一篇5分钟搞定OpenCore EFI配置OpCore-Simplify让黑苹果配置变得如此简单下一篇MusicFree 插件化音乐播放器完整上手装 1 个音源无广告免费听歌创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表