人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载导读本文基于 landing-page-case-study.md 模板文档讲解如何在garden-skills仓库的gpt-image-2技能中使用结构化 JSON 提示词生成一整页 SaaS / 营销 / case study 落地页 UI 样机——把 Hero、Strategy、Performance、Social Proof、CTA 等 section 从上到下纵向拼接进一张超长图片。读完本文你将掌握长页面 UI 样机与单屏 UI 模板的选型区别、主模板与 4 个变体SaaS 官网、投资人 deck、玻璃拟态、自动补全的完整 JSON 写法、参数策略与自动补全策略以及如何在本仓库三种运行模式下把渲染好的 prompt 真正出图。一、这是什么一整页落地页样机而不是单屏截图该模板的核心产出是完整的一整页 SaaS / 营销 / case study 落地页 UI 样机——把多个 sectionhero / strategy / performance / social proof / CTA从上到下拼到一张超长图里模拟用户滚动浏览器时看到的完整网页。典型用途包括SaaS 产品官网首页 mockup营销 case study 长页面投后报告 / KPI 复盘增长 / agency 业务介绍页Y Combinator 风格 demo day 项目页客户提案稿 / 投资人 deck 的网页化展示它与仓库中其它 UI 模板的核心区别在于视觉范围模板视觉范围适用场景chat-interface-scene.md单屏聊天界面iMessage / 微信 / 群聊social-interface-mockup.md单屏社交动态详情Twitter / 小红书 / 微博live-commerce-ui.md单屏直播 UI 叠加抖音 / 淘宝直播product-card-overlay.md单屏 hero / 详情主图电商详情页主图landing-page-case-study.md本模板完整长页面5-7 个 section 纵向拼接SaaS / 营销长页面 / case study何时使用 / 何时不用当用户提到落地页 / landing page / case study / 一整页 / 长页面 / 网站 mockup或希望出从上到下完整 section 结构而不是单屏截图或客户需要看到「hero → 数据 → 时间线 → 社交证明 → CTA」完整营销叙事时优先选用本模板。以下场景不要使用本模板单屏 UI 截图 → 改用chat-interface-scene.md/social-interface-mockup.md/live-commerce-ui.md仅 hero section → 改用poster-and-campaigns/banner-hero.md真实可交互的 HTML 网页 → 应当生成 HTML 代码而非图片本技能只产出位图样机二、缺失信息优先提问顺序当用户只说做一个落地页样机时按以下顺序提问能合并的问题一次问完这是 SKILL.md 中询问规则的基本要求业务类型SaaS / agency / 课程 / case study / 投后报告品牌 / 主标 一句话定位是「营销 case study」要展示数据 客户 logo还是「产品官网首页」要展示功能 截图配色基调深色 霓虹 / 纯白 强色 accent / 浅米色商务 / 玻璃拟态必须出现的核心数据GMV / 播放量 / 客户数 / 增长率是否要客户 logo 墙 / 推荐语 / CTA 表单比例3:4 / 9:16 长截图 / 整张 desktop 截图提问要精准、少量、只围绕模板关键字段不要泛泛而问你想做成什么感觉——这与方法论总文档 prompt-writing.md 中缺失信息提问策略的总原则一致。三、主模板营销 case study 长页面 mockup完整 JSON描述一张超长截图从上到下 6-7 个独立 section整体用统一深色 霓虹 accent每个 section 都长得像真实落地页里会出现的模块。{ type: UI/UX landing page mockup, goal: 生成一张高仿真的营销 case study 长页面截图可以作为提案稿、投后报告或作品集封面, theme: {argument name\theme\ default\dark mode, sleek modern aesthetic, glassmorphism, neon purple and blue glowing accents\}, viewport: { width: {argument name\viewport width\ default\desktop 1440px width\}, scroll_capture: {argument name\capture style\ default\full-page screenshot, vertical scroll captured into one tall image\}, aspect_ratio: {argument name\aspect ratio\ default\3:4 portrait long page\} }, header: { logo: {argument name\brand name\ default\goViralX\}, nav_items: [Home, Case Studies, Pricing, Contact], top_right_cta: {argument name\top cta\ default\Login\}, top_right_tag: {argument name\top right tag\ default\VIRAL CAMPAIGN CASE STUDY\} }, layout: { section_count: 6, section_separation: subtle horizontal divider, 80-120px vertical breathing room, sections: [ { name: Hero, position: top, headline: {argument name\hero headline\ default\How We Created 10M Viral Impact\}, subheadline: {argument name\hero subhead\ default\3 天引爆全网, 助力品牌实现指数级增长\}, stats_row: { count: 4, labels: [{argument name\stat label 1\ default\总播放量\}, {argument name\stat label 2\ default\互动率\}, {argument name\stat label 3\ default\转化咨询\}, {argument name\stat label 4\ default\执行周期\}], values: [{argument name\stat value 1\ default\10,240,000\}, {argument name\stat value 2\ default\18.7%\}, {argument name\stat value 3\ default\3,200\}, {argument name\stat value 4\ default\72小时\}] }, visual: {argument name\hero visual\ default\cinematic shot of a person in a hoodie looking at glowing digital screens and graphs, large play button overlay\} }, { name: Strategy, title: {argument name\strategy title\ default\Our 3-Day Execution Strategy\}, layout_type: vertical timeline, steps_count: 3, elements_per_step: [timeline node circle, step title, 3 bullet points, video thumbnail with play button, description box], step_titles: [Day 1: Asset Production, Day 2: Multi-Platform Launch, Day 3: Amplification PR] }, { name: Performance, title: {argument name\perf title\ default\Data-Driven Performance\}, left_column: { stat_cards_count: 4, values: [10M, 43%, 28,000, 3,200], labels: [Total Views, Engagement, New Followers, Leads] }, right_column: { charts_count: 2, chart_1: line graph showing 7-day growth peaking at Day 3, x-axis days 1-7, y-axis views, glowing line, chart_2: horizontal segmented bar chart showing platform distribution (TikTok 52%, Instagram 24%, X 15%, YouTube 9%) } }, { name: Keys to Success, title: {argument name\keys title\ default\The 3 Keys to Viral Success\}, cards_count: 3, card_elements: [glowing icon (fire / target / antenna), card title, 2-line description, VIEW DETAIL link with arrow] }, { name: Social Proof, title: {argument name\sp title\ default\TRUSTED BY CREATORS BRANDS\}, left_column: { logos_count: 8, grid: 2x4, brands: [{argument name\logo 1\ default\SHEIN\}, SHOPLINE, Blueglass, instacart, lemon8, mi, CIDER, bellroy] }, right_column: { testimonial_cards_count: 2, elements: [large quotation mark, italic quote text, author avatar circle, author name title (e.g. SaaS Founder, Growth Manager)] } }, { name: Call to Action, title: {argument name\cta title\ default\READY TO GO VIRAL?\}, interactive_elements: [ text input field with placeholder {argument name\input placeholder\ default\Your work email\}, glowing button with text {argument name\call to action text\ default\获取专属增长方案 -\} ], visual: {argument name\cta visual\ default\3D render of a rocket ship taking off with purple and blue flames\} } ] }, footer: { logo: {argument name\brand name\ default\goViralX\}, columns: [Product, Company, Resources, Legal], social_icons: [X, LinkedIn, YouTube, Instagram], copyright: © 2026 {argument name\brand name\ default\goViralX\}. All rights reserved. }, global_style: { rendering: production-quality web UI mockup, sharp pixel-perfect typography, realistic component spacing, modern web design, typography: modern sans-serif (Inter / Space Grotesk feel), strong size hierarchy across sections, color_tone: {argument name\color tone\ default\dark navy / charcoal background, neon purple electric blue accents, white-90% body text\}, components: rounded corners 12-16px, soft glassmorphism cards, subtle shadows, accent gradient buttons, browser_chrome: {argument name\chrome\ default\none, just the page itself\} }, constraints: { must_keep: [ 6 个 section 从上到下顺序清晰、可独立识别, 每个 section 的内部组件都符合常规网页设计卡片 / 网格 / 时间线 / chart, 数据可读、字体清晰、对比度足够, 整体看起来像真实可滚动的网页截图而不是 PPT 拼贴 ], avoid: [ section 之间没有视觉分隔容易混在一起, 把 chart 画成示意图而非真实数据可视化, logo 墙的品牌名变得不可读, CTA 按钮颜色与全页配色冲突, Hero 占据 80% 高度导致下面 section 被压扁 ] } }参数策略必问brand name 业务定位、core data values、配色基调可默认nav items、footer columns、stat labels按业务类型推荐可随机客户 logo 墙的具体品牌按行业匹配真实存在的品牌名、推荐语 quote 内容自动补全策略用户只说营销 case study 落地页→ 默认深色 霓虹方案 6 section 标准结构用户给了核心数据如「3 天 1000 万播放」→ 自动反推 stat label / chart / strategy timeline用户没说客户 logo → 按行业生成 8 个真实存在的品牌名不要造假名四、变体 1SaaS 产品官网首页feature-driven{ type: SaaS product homepage mockup, section_count: 7, sections: [ Hero (headline subhead CTA dashboard screenshot), Logo Strip (8 customer logos), Feature Grid (3x2 6 features with icon title description), How It Works (3-step process), Product Screenshot Showcase (1 large dashboard image), Pricing (3 tiers comparison table), Testimonials CTA ], theme: {argument name\theme\ default\clean white accent blue, modern startup\}, must_have: 1 prominent product UI screenshot embedded in Hero, 1 dashboard image in showcase section }何时选这个变体用户做的是 SaaS 产品官网而非 case study需要展示「产品长什么样」截图嵌套截图需要 pricing table。五、变体 2投资人 / 客户 deck 网页化版{ type: investor / client pitch deck rendered as one long landing page, section_count: 8, sections: [ Hero (problem statement), Solution Overview, Market Size (chart), Product Demo (screenshots), Traction (key metrics growth chart), Team (4 avatars roles), Roadmap (4 phases timeline), Ask Contact ], theme: professional, premium, slightly editorial, soft shadow light grid background, tone: credible, ambitious,>{ type: glassmorphism landing page, theme_override: { background: deep purple-to-pink gradient with floating blur orbs, cards: frosted glass effect (backdrop-blur 20px), 1px white border at 20% opacity, accents: neon green and hot pink glow, typography: ultra-bold sans-serif headlines, very thin weight body }, section_count: 5, sections: [Hero, Feature Cards 3x, Stats, Testimonials, CTA], vibe: Y2K x Apple Vision Pro x Linear.app }何时选这个变体设计驱动型品牌 / AI 工具 / 创意产品需要在 SNS 引发设计师转发客户希望做「视觉惊艳」而非「企业稳重」。七、避免事项失败模式清单失败点正确做法section 之间分隔不清必须有 80-120px 留白 颜色 / 背景微差把图表画成纯装饰必须看起来像真实数据曲线logo 墙强行造假品牌名用真实知名品牌或明确标注「示例」CTA 按钮颜色和品牌色冲突使用品牌色的 accent 版本Hero 区域过大压扁后续 sectionhero ≤ 35% 总高度全页只用一种字号必须有 ≥ 4 级 hierarchyH1 / H2 / Body / Caption把模板里的占位文字如 VIEW DETAIL原样保留应根据业务替换成真实文案输出比例选错如 1:1 会装不下完整长页面建议 3:4 / 9:16八、模板字段设计原理来自 prompt-writing 方法论本模板严格遵守 prompt-writing.md 定义的 JSON 模板总规范。可以对照看出几个关键设计通用骨架type模板类型→goal图像用途→layout区域组织方式→style风格 / 渲染 / 色彩→constraints必须出现 / 必须避免。本模板正是这套骨架在 UI Mockups 场景下的落地。场景特有字段prompt-writing 对 UI Mockups 建议额外使用ui_overlay结构长页面模板则把header / layout.sections / footer / global_style扩展为完整落地页的三段式结构把每个 section 内的卡片、时间线、chart、logo 墙都显式声明。参数三分类模板中每个{argument name... default...}都遵循变量统一格式规范——name简洁明确、default给出可直接工作的默认值再按核心参数必问/ 可默认 / 可随机标注归属。约束驱动must_keep与avoid成对出现确保最终结果像真实可滚动的网页截图而不是 PPT 拼贴。从源码结构看SKILL.md 还规定模板文件中的 JSON 是提示词结构模板不是 API 请求体模板——最终交给图像模型的都是渲染后的 prompt 字符串可以是拍平的 JSON也可以是结构化自然语言段落按模板原样使用即可。九、如何在三种运行模式下真正出图长页面模板渲染完成后具体怎么出图取决于本技能的运行模式先运行探测脚本确定模式node skills/gpt-image-2/scripts/check-mode.js # 想拿结构化结果给上层程序用 node skills/gpt-image-2/scripts/check-mode.js --jsonMode AGarden 本地生图端到端触发条件环境变量ENABLE_GARDEN_IMAGEGEN为真1/true/yes/on且存在OPENAI_API_KEY。此时用 generate.js 直接出图node skills/gpt-image-2/scripts/generate.js \ --promptfile garden-gpt-image-2/prompt/landing-page-case-study-20261002-023134.md \ --size 1024x1536 \ --quality high底层实现上shared.js 负责把 prompt 落盘到garden-gpt-image-2/prompt/slug-timestamp.md、图片落盘到garden-gpt-image-2/image/slug-timestamp.png请求走POST {OPENAI_BASE_URL}/images/generations按data[0].b64_json兼容data[0].url解析图片字节并保存。环境变量读取顺序为CLI 参数 →process.env→cwd/.env→cwd/.gateway.env→~/.gateway.env。常用参数包括--model默认gpt-image-2可换成网关支持的型号、--size、--qualityauto / high / medium / low、--output-formatpng / jpeg / webp等。Mode BHost-Native 委托宿主出图未启用 Garden但宿主 Agent 自带图像生成工具或图像 MCP工具集中出现image_generation/nano_banana/mcp__*image*等。此时不要调用 generate.js直接把渲染好的 prompt 传给宿主自带的图像工具即可可按需把 prompt 副本保存到garden-gpt-image-2/prompt/。Mode CAdvisor 纯提示词顾问未启用 Garden 且宿主也没有任何图像工具。此时把最终 prompt 保存到garden-gpt-image-2/prompt/task-slug-timestamp.md并直接打印给用户附一句如何使用建议如丢进 ChatGPT / Midjourney / DALL·E / 第三方 GPT Image 2 网关不要假装出图成功。无论哪种模式渲染长页面样机的通用流程都是跑check-mode.js→ 判断任务是生图还是改图 → 识别属于references/ui-mockups/分类 → 只读取landing-page-case-study.md模板 → 把用户输入映射到{argument ...}参数 → 关键信息不足时按提问顺序精确澄清 → 按模式分叉出图。十、与其他 UI 模板的协同选型本模板在 SKILL.md 的模板索引中被归类为references/ui-mockups/下深色 SaaS / 营销 case study长页面UI mockup多 section 滚动叙事 数据卡 CTA。选型时建议需要完整页面级叙事hero → 数据 → 时间线 → 社交证明 → CTA→ 本模板只需要单屏社交动态Twitter / 小红书 / 微博→social-interface-mockup.md只需要直播带货界面聊天区 礼物区 商品卡→live-commerce-ui.md只需要落地页 hero / 电商详情主图人物 商品卡 卖点→product-card-overlay.md只需要横向 hero banner→poster-and-campaigns/banner-hero.mdSKILL.md还提醒按任务类型只读取最贴近的具体模板文件不要一次性全读整个references/——这样既能保证 prompt 结构纯净也能让模板互不污染、便于扩展。小结通过landing-page-case-study.md模板gpt-image-2技能可以把复杂的营销叙事hero、策略时间线、数据表现、成功要素、社交证明、CTA压缩进一张可复用的结构化 JSON 提示词中一键渲染出高仿真的 SaaS / case study 长页面样机。掌握主模板 3 个变体 参数策略 避免事项再结合本仓库的三种运行模式A / B / C与generate.js脚本即可把它直接用于提案稿、投后报告、作品集封面或投资人 deck 的网页化展示。赞分享人工智能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 实战用 GPT Image 2 结构化模板生成品牌识别系统板Brand Identity Boardgarden skills 实战用 GPT Image 2 结构化模板生成品牌识别系统板Brand Identity Board 品牌识别系统板Bran人工智能AI 技能/插件提示工程garden-skills 实战用 gpt-image-2 技能生成 Kawaii 3D / Minecraft / 拟物 3D 主题图标头像garden skills 实战用 gpt image 2 技能生成 Kawaii 3D / Minecraft / 拟物 3D 主题图标头像 本篇技术指南聚人工智能AI 技能/插件提示工程gpt-image-2 Skill 实战用结构化 JSON 模板生成拟物 / Y2K / 像素成套图标gpt image 2 Skill 实战用结构化 JSON 模板生成拟物 / Y2K / 像素成套图标 本文围绕 garden skills 仓库中 gpt人工智能AI 技能/插件提示工程上一篇AssetRipper从Unity游戏文件里提取模型、贴图与脚本的完整指南下一篇99.7%准确率FlashAI Convert-Lite本地化文档转换架构深度解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考