跳至内容
WebViewGold 从 Vibe Coding 到 App Store
中文
获取 WebViewGold

ChatGPT & Codex

用 ChatGPT 生成应用图标和启动画面:提示词、商店规则和 WebViewGold 中的文件位置

借助 ChatGPT 的图像生成功能,一个晚上就能给 Vibe Coding 应用做出一个真正的图标。不过商店对文件要求很严格:iOS 需要一张不透明的 1024 px 正方形图片,Android 需要 512 px 的商店图标和自适应图层,而且不能借用任何他人的品牌。下面是提示词、规则,以及一个能把一张图片转换成 WebViewGold 所需全部文件的脚本。

每个平台一次性 $109 起,或由我们的团队全程代劳,$698 起。

  • 审核通过保证 – 否则 14 天内退款
  • 无需编程
  • 一次性付费,免费更新
  • 7×24 小时人工支持
  • 2014 年起德国出品 · ISO 27001

ChatGPT 擅长什么,哪些需要您自己收尾

ChatGPT 的图像生成能很好地完成创意部分:它能把一句话的需求变成扁平、醒目的符号,遵循颜色要求,还能让您用日常语言反复调整(“线条再粗一点、细节少一点、往上挪一点”)。您也可以上传现有的标志,让它做一个图标版本。

它不可靠的是文件层面:精确的像素尺寸、需要时真正的 alpha 通道(有时它画的是一个棋盘格而不是透明背景)、清晰的小字,以及两次生成之间完全相同的符号。所以请把 ChatGPT 给您的东西当作美术原稿:选定一个结果,保存下来,然后用图像编辑器、下面的脚本或 Cloud Builder,从这一个文件生成所有商店所需的文件。完整的规格表见应用图标和启动画面指南;本页只讲 AI 生成的图片需要注意的事项。

您的文件必须满足的规则

素材规则在 WebViewGold 中的位置
iOS 应用图标1024 × 1024 px PNG,不透明(没有 alpha 通道),直角(iOS 会自动加遮罩),sRGB。带 alpha 通道的图标在上传时会因 ITMS-90717 被拒Xcode:WebViewGold → General → App Icons and Launch Screen → App Icon Source(AppIcon 集);参见 iOS 图标文档
Google Play 商店图标512 × 512 px,32 位 PNG,sRGB,不超过 1024 KB,完整的正方形,不带圆角或投影(Play 会自动添加这两者)。不得包含暗示排名、优惠或 Play 计划的文字或徽章Play Console → 商店页面(不在项目中)
Android 启动器图标每个 mipmap-* 密度文件夹中的 ic_launcher.png、ic_launcher_round.png 和 ic_launcher_foreground.pngAndroid Studio 项目;参见 Android 图标文档
自适应图标前景层108 dp 画布;启动器会把它裁切成圆形、圆角方形或正方形,所以要把符号放在中央 66 dp 的圆形范围内,周围保持透明每个 mipmap 文件夹中的 ic_launcher_foreground.png
启动画面图片一张正方形 GIF(例如 512 或 1024 px),静态或动态均可;背景色单独设置iOS:Xcode 项目主文件夹中的 splash.gif,颜色通过 Config.swift 中的 splashscreencolor 设置。Android:项目自带的 splash.gif 文件,颜色在 colors.xml 中设置(Android 启动画面文档)

提示词 1:先用文字确定创意

每次生成图片都要花时间,而且细节都会变化。先用文字敲定概念,再生成。

粘贴到 ChatGPT(只用文字,先不生成图片)
我需要为 [应用名称] 设计一个应用图标,这是一款面向 [目标用户] 的 [一句话描述]。品牌色:[#HEX, #HEX]。

请提出五个图标概念。每个概念都要给出:
- 唯一的符号(一个物体或形状;不要字母,除非是一个醒目的首字母),
- 背景色,
- 为什么它在 60 x 60 像素下依然容易辨认,
- 一个风险(与知名品牌太像、细节太多、太普通)。

不要提出商店徽章、设备边框、标语,或任何类似 Apple、Google、OpenAI 或其他公司标志或吉祥物的设计。最后用两句话推荐一个概念。

只要有一个优化良好的Web应用版本,几分钟内您就能拥有一个出色的移动应用。除此之外,客户服务非常友好且乐于助人!我只能说:推荐WebViewGold :-)

朱利安·科赫(Julian Koch) · 联合创始人 Dueldonkey · CodeCanyon

提示词 2:主图标

要求生成正方形图片。生成两三个变体,选定一个后立即下载;下一次生成的结果不会完全相同。

粘贴到 ChatGPT 生成图片
请根据概念 [N]:[符号],为 [应用名称] 创建一张正方形(1:1)的应用图标图片。

风格:扁平矢量,醒目简洁的形状,两到三种颜色,高对比度。不要照片级写实,不要光泽感的 3D 效果。
构图:一个符号,居中,占画布的 55% 到 60% 左右,四周留出均匀的边距。
背景:纯色 [#HEX],一直铺到四条边缘。不要边框、不要外框、不要圆角、不要投影、不要暗角。
不要包含:文字、字母、数字、水印、设备样机、商店徽章,或任何现有公司的标志或吉祥物。
符号在 60 x 60 像素下必须依然容易辨认。

提示词 3:单独的符号,用于自适应图标和启动画面

Android 的自适应图标和 WebViewGold 的启动画面最适合使用单独的符号。请在同一个对话中提出要求,让 ChatGPT 复用同样的形状,并检查结果是真正的透明背景,还是画出来的棋盘格。

在同一个对话中,选定主图标之后
请使用与我选定的图标完全相同的符号(相同的形状、比例和颜色),创建一张正方形图片,只显示这个符号,居中放置在透明背景上。

如果您无法生成真正的透明背景,请改用纯洋红色(#FF00FF)的平涂背景,这种颜色不能出现在符号的任何地方,也不要有阴影或光晕。不要文字、不要边框、不要外框。

从创意到成品文件

  1. 需求与概念

    用您真实的品牌色和目标用户运行提示词 1。选择一个简单到凭记忆就能画出来的概念。

  2. 生成并选定一张主图

    运行提示词 2,在缩略图尺寸下对比各个变体(把屏幕缩小来看),然后把胜出的那张下载为 PNG。

  3. 检查文件

    是正方形吗?至少 1024 px 吗?纯色背景是否铺满每一条边?在 Mac 上,sips -g pixelWidth -g pixelHeight -g hasAlpha master.png 可以一次回答这三个问题;任何图像编辑器也都可以。

  4. 制作只有符号的版本

    运行提示词 3。如果返回的是洋红色背景,就在编辑器中去掉背景(“预览”的即时 Alpha、Photoshop、Figma、Canva),并导出带透明度的 PNG。

  5. 生成各种尺寸

    运行下面的脚本、使用图标生成器,或者只把 1024 px 的主图上传到 Cloud Builder,它会为您生成所有 iOS 和 Android 尺寸。

  6. 放置文件

    iOS:替换 AppIcon 集中的图片。Android:逐个替换每个 mipmap 文件夹中的三个 PNG,保持文件名和文件夹不变。然后是启动画面:替换 splash.gif,设置启动画面颜色;在 iOS 上,还要把 LaunchScreen storyboard 的背景设为同一种颜色,这样启动时就不会闪白。

  7. 在真机上检查

    iOS 上检查主屏幕、Spotlight 和设置(在 iOS 18 及更高版本上还要检查深色和着色模式),Android 上用一个圆形图标的启动器检查。如果符号在小尺寸下看不清,要修改的是美术原稿,而不是文件。

一张图片进,所有文件出

这个 Python 3 脚本(需要 Pillow)读取主图,以及可选的只含符号的 PNG。它会输出一个不透明的 1024 px iOS 图标、512 px 的 Play 图标、每个 Android 密度对应的三个启动器 PNG(符号位于自适应图标的安全区域内),以及一个正方形的 splash.gif。可以在本地运行;如果您的套餐支持代码执行,也可以把脚本和图片上传到 ChatGPT,让它来运行。

python
#!/usr/bin/env python3
"""Turn one AI-generated master icon into the files a WebViewGold project needs.

Usage:
  python3 make_store_icons.py master.png --bg "#0F766E"
  python3 make_store_icons.py master.png --fg symbol.png --bg "#0F766E"

master.png  square artwork with a solid, full-bleed background
--fg        optional: the symbol alone on a transparent background (better adaptive icon)
--bg        the background color of your icon; reuse it as the splash screen color
Requires Pillow: pip install Pillow
"""
import argparse
import math
from pathlib import Path
from PIL import Image, ImageDraw

DENSITIES = {"mdpi": 1, "hdpi": 1.5, "xhdpi": 2, "xxhdpi": 3, "xxxhdpi": 4}
OUT = Path("store-icons")


def flatten(img, bg):
    """Composite on a solid color and drop the alpha channel (App Store requirement)."""
    img = img.convert("RGBA")
    base = Image.new("RGBA", img.size, bg)
    base.alpha_composite(img)
    return base.convert("RGB")


def square(img):
    w, h = img.size
    if w != h:
        print(f"warning: master is {w}x{h}, cropping to a centered square")
        s = min(w, h)
        img = img.crop(((w - s) // 2, (h - s) // 2, (w + s) // 2, (h + s) // 2))
    return img


def save(img, path):
    path.parent.mkdir(parents=True, exist_ok=True)
    img.save(path)
    print("wrote", path, img.size, img.mode)


def adaptive_foreground(symbol, px):
    """108 dp canvas; the bounding box of the symbol must fit the 66 dp safe circle."""
    canvas = Image.new("RGBA", (px, px), (0, 0, 0, 0))
    sym = symbol.convert("RGBA")
    sym = sym.crop(sym.getbbox() or (0, 0, sym.width, sym.height))
    scale = (px * 66 / 108) / math.hypot(sym.width, sym.height)
    sym = sym.resize((max(1, round(sym.width * scale)), max(1, round(sym.height * scale))), Image.LANCZOS)
    canvas.alpha_composite(sym, ((px - sym.width) // 2, (px - sym.height) // 2))
    return canvas


def main():
    ap = argparse.ArgumentParser()
    ap.add_argument("master")
    ap.add_argument("--fg", help="symbol on a transparent background")
    ap.add_argument("--bg", default="#FFFFFF")
    a = ap.parse_args()

    master = flatten(square(Image.open(a.master)), a.bg)
    if master.width < 1024:
        print(f"warning: master is only {master.width}px; the App Store needs 1024x1024")

    # iOS: one opaque 1024 px PNG for the AppIcon set
    save(master.resize((1024, 1024), Image.LANCZOS), OUT / "ios" / "AppIcon-1024.png")
    # Google Play listing icon: uploaded in the Play Console, not in the project
    save(master.resize((512, 512), Image.LANCZOS), OUT / "play" / "play-icon-512.png")

    symbol = Image.open(a.fg) if a.fg else None
    for name, f in DENSITIES.items():
        folder = OUT / "android" / f"mipmap-{name}"
        legacy = round(48 * f)
        icon = master.resize((legacy, legacy), Image.LANCZOS)
        save(icon, folder / "ic_launcher.png")
        mask = Image.new("L", (legacy, legacy), 0)
        ImageDraw.Draw(mask).ellipse((0, 0, legacy - 1, legacy - 1), fill=255)
        rnd = icon.convert("RGBA")
        rnd.putalpha(mask)
        save(rnd, folder / "ic_launcher_round.png")
        fg_px = round(108 * f)
        fg = adaptive_foreground(symbol, fg_px) if symbol else master.resize((fg_px, fg_px), Image.LANCZOS)
        save(fg, folder / "ic_launcher_foreground.png")

    # Splash: square GIF with the symbol on your splash background color
    if symbol:
        splash = Image.new("RGB", (1024, 1024), a.bg)
        s = adaptive_foreground(symbol, 1024)
        splash.paste(s, (0, 0), s)
    else:
        splash = master.resize((1024, 1024), Image.LANCZOS)
    save(splash.convert("P", palette=Image.ADAPTIVE), OUT / "splash" / "splash.gif")


if __name__ == "__main__":
    main()

会让您白传一次或多审一轮的错误

  • 画出来的棋盘格而不是真正的透明背景。它在聊天中看起来是透明的,到了主屏幕上却变成一张灰色网格。
  • 图片中自带圆角或投影。iOS 和 Google Play 会自己添加,结果就是双重边缘。
  • 会被淡化掉的精细细节和渐变。图标的显示尺寸大约只有 60 px;扁平的形状更胜一筹。
  • 符号碰到了 Android 前景层的边缘。圆形启动器会把它裁掉;请把它保持在安全区域内。
  • 商店里和设备上的图标不一样。只生成一次,并从同一张主图派生出所有文件。
  • 启动画面不是正方形,或者动态 GIF 比启动画面的显示时间还长,导致用户看到它被截断。
  • 因为漏掉了一个替换,WebViewGold 的占位图标还留在某个密度文件夹中。

常见问题

用 ChatGPT 做的图标可以用在商业应用中吗?

OpenAI 的使用条款将您创建的图片的权利授予您,所以允许商业使用。但这并不能保证设计中不含第三方商标,所以请进行上面所说的相似性检查。

Apple 或 Google 会拒绝 AI 生成的图标吗?

没有任何规则禁止 AI 生成的美术作品。适用的规则与任何图标都一样:格式正确、没有误导性或侵权内容,并且图标与应用相符。

图片必须正好是 1024 x 1024 像素吗?

iOS 图标文件必须是。如果 ChatGPT 返回的是其他尺寸,请调整您选定的那张图片的尺寸(脚本会自动完成),而不是重新生成、得到一个不同的设计。

iOS 需要深色、着色或 Liquid Glass 版本吗?

这些都是可选的。WebViewGold 使用标准的 AppIcon 集,当前的 iOS 版本会基于该图标工作。如果您想要更多控制,可以用 Apple 的 Icon Composer 制作带有额外外观的分层图标。

启动画面可以是动态的吗?

可以。只要图片是正方形,WebViewGold 就接受静态或动态 GIF。让动画保持简短,并让背景色与您 Web 应用的第一个页面相匹配。

ChatGPT 也能帮我做商店截图吗?

请使用已构建应用的真实截图;生成的功能图片会歪曲应用的实际情况,有因准则 2.3 被拒的风险。ChatGPT 适合用来撰写说明文字,以及制作真实截图周围的背景图。

让您的应用上架商店的三种方式

结果相同,只是您需要投入的工作量不同。三种方式都附带审核通过保证和 7×24 小时人工支持。

自己动手

$109 每个平台,一次性付费

WebViewGold 许可证:一个现成的 Xcode 或 Android Studio 项目。粘贴您的 URL,设置名称和图标,开启所需功能,构建并提交。永久免费更新。

在主页查看方案

Cloud Builder

$349 每个许可证,一次性附加购买

无需 Mac、Xcode 或 Android Studio:在浏览器中完成配置,我们在云端构建两个应用,并将其交付到 App Store Connect 和 Play Console。

Cloud Builder 如何运作 试用免费演示

Full Service

$698 每个平台 $798

把您的 URL 和图标发给我们。我们的团队在 72 小时内完成配置、构建并交付您的应用,白标,附源码项目。两个平台共 $1,158。

Full Service 详情 服务提供方: WeSetupYourWebViewApp

冬季特惠价格有效期至 2026年12月31日。

准备好发布您的应用了吗?

App Store & Google Play 审核通过保证 – 否则 14 天内退款

想直接交给我们?Full Service:我们在 72 小时内完成配置、构建并交付,每个平台 $698 起。有疑问?通过 7×24 小时在线聊天联系我们。

退款依据我们 FAQ 中列出的条件:应用因非内容原因被 Apple 和/或 Google 拒审,并在购买后 14 天内提出申请。