企业官网建设流程全解析

• 人工智能
• AI 技能/插件
• 提示工程

导读

本文基于 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 样机"——把多个 section（hero / strategy / performance / social proof / CTA）从上到下拼到一张超长图里，模拟用户滚动浏览器时看到的完整网页。

典型用途包括：

• SaaS 产品官网首页 mockup
• 营销 case study 长页面（投后报告 / KPI 复盘）
• 增长 / agency 业务介绍页
• Y Combinator 风格 demo day 项目页
• 客户提案稿 / 投资人 deck 的网页化展示

它与仓库中其它 UI 模板的核心区别在于视觉范围：

何时使用 / 何时不用

当用户提到"落地页 / 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 中"询问规则"的基本要求）：

1. 业务类型（SaaS / agency / 课程 / case study / 投后报告）
2. 品牌 / 主标 + 一句话定位
3. 是「营销 case study」（要展示数据 + 客户 logo）还是「产品官网首页」（要展示功能 + 截图）
4. 配色基调（深色 + 霓虹 / 纯白 + 强色 accent / 浅米色商务 / 玻璃拟态）
5. 必须出现的核心数据（GMV / 播放量 / 客户数 / 增长率）
6. 是否要客户 logo 墙 / 推荐语 / CTA 表单
7. 比例（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 个真实存在的品牌名（不要造假名）

四、变体 1：SaaS 产品官网首页（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 引发设计师转发；客户希望做「视觉惊艳」而非「企业稳重」。

七、避免事项（失败模式清单）

八、模板字段设计原理：来自 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 --json

Mode A：Garden 本地生图（端到端）

触发条件：环境变量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、--quality（auto / high / medium / low）、--output-format（png / jpeg / webp）等。

Mode B：Host-Native 委托宿主出图

未启用 Garden，但宿主 Agent 自带图像生成工具或图像 MCP（工具集中出现image_generation/nano_banana/mcp__*image*等）。此时不要调用 generate.js，直接把渲染好的 prompt 传给宿主自带的图像工具即可；可按需把 prompt 副本保存到garden-gpt-image-2/prompt/。

Mode C：Advisor 纯提示词顾问

未启用 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.md

SKILL.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 技能/插件
• 提示工程