爱意满满的作品展示区。
VulcanEon

GPT IMAGE 2 in practice:用完整提示词生成 App 与 Web 界面稿:移动屏、仪表盘和落地页

  •  
  •   VulcanEon · 15h 4m ago · 463 views

    Today 应用的移动界面、SaaS 仪表盘和落地页视觉方向教学封面。

    Codex 生成的教学封面,不是 H3Max 实测输出。图中的界面用于讨论视觉方向,不代表已经实现的软件。

    封面的手机采用 1/3 完成和另一演示日期,属于视觉展示变体;下文的 9 月 29 日、0/3 提示词对应独立手机主例。封面与蓝图的小屏、图表和落地页文字并非下方提示词的逐字结果;图中的免费字样仅属虚构 Today 展示,不代表 H3Max 收费规则。

    界面生成最容易出现的错误,不一定是按钮难看,而是状态对不上:列表里三个任务都没完成,进度卡却显示已经完成一个;日期标题写星期二,日期条却选中了另一日。

    本文以虚构任务应用 Today 为例,用一个完整提示词描述一张界面,再分别制作移动屏、SaaS 仪表盘和落地页。这里的“一个提示词”是指每次请求完整描述一个页面,不是一次提交便自动得到三个可用产品。

    交付物是静态概念图。它不是代码、可编辑组件库,也不是能够点击的原型。

    先写状态,再谈布局

    移动主例使用固定演示日期 Tuesday, 29 September,不是当前日期或真实账户记录。

    三个任务都未完成,因此必须同时满足:三个空圆形 checkbox 、0 of 3 complete、0%,以及没有完成色段的浅色进度环。

    任务内容保持英文原文:

    任务 分类与时长
    Read 10 pages Personal · 20 min
    Walk for 20 minutes Health · 20 min
    Plan tomorrow Planning · 10 min

    底部导航是 Today / Projects / Calendar / Profile,选中 Today 。导航选中态不等于任务完成态。

    可结合Today 从移动端延展到网页的完整设计示例理解这套内容如何跨页面复用,但先把本次输入保存成独立文案记录。

    Today 教学蓝图,包含屏幕结构、放大的任务卡片、不同完成状态的对照,以及桌面和落地页布局研究。

    Codex 生成的静态教学板,不是 H3Max 输出或可编辑组件。标注尺寸只是设计建议;其中一项完成的对照状态不属于本文三个任务均未完成的主例。

    阅读顺序设为:标题与日期、进度、日期条、任务列表、Add task 、导航。任务卡的 checkbox 在左,文字居中,类别图标在右;创建任务的主按钮比导航更突出。

    移动屏:提交一个完整规格

    在 H3Max 创建 Today 的静态界面候选,选择 Text to Image 、GPT Image 2 、9:16 、1K。2026 年 10 月 2 日核验的界面可见 1K / 2K / 4K ,输出格式仅见 JPEG 。提交前查看当时显示的 credits ,不推定固定费用、免费或无需登录。

    复制以下完整提示词:

    Create one static mobile UI concept for the fictional task app Today.
    Use a flat 9:16 portrait canvas, without a device frame or surrounding scene.
    
    Use a cream background, charcoal text, white cards, deep-teal accents,
    subtle borders and shadows, readable typography, and generous safe margins.
    
    Header:
    Today
    Tuesday, 29 September
    A small avatar circle containing AL.
    
    Progress card:
    0 of 3 complete
    0%
    A little focus goes a long way.
    Use an empty pale progress ring with no completed green segment.
    
    Date strip:
    Mon 28, Tue 29, Wed 30, Thu 1, Fri 2, Sat 3, Sun 4.
    Highlight Tue 29.
    
    Show exactly three task cards, each with an EMPTY circular checkbox
    on the left, title and metadata in the middle, and a category icon on the right:
    Read 10 pages — Personal · 20 min — book icon
    Walk for 20 minutes — Health · 20 min — walking icon
    Plan tomorrow — Planning · 10 min — calendar icon
    
    Put one prominent deep-teal Add task button below the cards.
    Bottom navigation: Today, Projects, Calendar, Profile.
    Select Today.
    
    Keep every word and all content visible. Align repeated elements.
    Do not add tasks, checked boxes, completed states, or extra navigation.
    Produce one static screen, not a working interface.
    

    Today 移动概念图,显示星期二 29 日、零完成进度、三个空 checkbox 任务、Add task 按钮和四项导航。

    Codex 教学概念,不是 H3Max 测试结果。按钮与导航是图片像素;本文 WebP 插图也不代表工具提供 WebP 或 PNG 导出。

    仪表盘:增加空间,不增加无来源的数据

    桌面改为 16:9。保留任务与零完成状态,但将导航改为侧栏、任务改为表格。下面补齐了示例行及图表值,避免让模型自行填入看似真实的统计。

    Create one static 16:9 desktop SaaS dashboard for fictional Today.
    Use cream surfaces, charcoal text, white panels, and deep-teal accents.
    No device frame.
    
    Sidebar: Overview, Projects, Calendar, Files. Select Overview.
    Main heading: Today. Greeting: Hello, AL.
    Label the workspace Example data.
    Summary cards: Tasks 3 / Complete 0 / Remaining 3.
    
    Main table columns: Task, Project, Status, Due.
    Use exactly these rows:
    Read 10 pages | Personal | Incomplete | Tue 29
    Walk for 20 minutes | Health | Incomplete | Tue 29
    Plan tomorrow | Planning | Incomplete | Tue 29
    
    In a secondary column, include:
    A chart titled Completed tasks, labeled Example data.
    Values: Mon 28=0, Tue 29=0, Wed 30=0, Thu 1=0,
    Fri 2=0, Sat 3=0, Sun 4=0. Do not invent nonzero activity.
    A compact weekly calendar with these seven dates; highlight Tue 29.
    
    Place the greeting and summaries above the workspace.
    Keep labels readable and the table aligned.
    Do not add tasks, analytics, or completed statuses.
    

    这些零值是明确指定的虚构示例,不是运行数据。漂亮的图表不能代替值与汇总的核对。

    落地页:解释用途,不复制整个后台

    仍用 16:9 ,但让价值说明先于操作入口。每个页面单独生成,避免在一张多设备展示图里分摊小字的像素。

    Create one static 16:9 desktop landing-page concept for fictional Today.
    Use warm ivory surfaces, deep-teal accents, charcoal text,
    and restrained readable typography. No device frame.
    
    Headline: Make room for focused work
    Primary CTA: Start planning
    
    Show a product-preview area and exactly three benefit cards:
    Stay organized
    Focus on what matters
    Make real progress
    
    The product preview must use the Today task example:
    three incomplete tasks, empty checkboxes, 0 of 3 complete, and 0%.
    Do not imply completed activity.
    
    Keep the headline and CTA readable at ordinary browser display size.
    Use clear spacing between the hero, product preview, and benefit cards.
    Do not invent customer logos, testimonials, prices, performance statistics,
    or working links. Output one static page.
    

    验收与一次单项修订

    先逐字检查,再数三个任务、三个 checkbox 、四项移动导航和一个 Add task 。然后核对星期二 29 日、零完成文字与空进度环,最后才看对齐、对比度、边距和实际显示大小。

    蓝图里的1 of 3只是另一种状态示范;如果采用它,就必须真的有一个完成任务,不能与本文的三个空框混搭。

    第二项任务文字错误时,切到主入口的 Image to Image ,或把已保存界面带入图像参考修订,上传自己的候选并使用:

    Correct only the second task label to Walk for 20 minutes.
    Preserve the other copy, Health · 20 min metadata, three empty checkboxes,
    0 of 3 complete, 0%, empty progress ring, Tuesday 29 selection,
    layout, colors, four navigation items, and Add task button.
    Do not add completed states or new tasks.
    

    保留指令不是区域锁定。修改后重新核对整张图。仍有错字时,用设计工具重排真实文字;卡片持续增减或边距失控时,回到规格重建布局,不靠升到 4K 解决语义问题。

    最后保存 JPEG 、提示词、状态记录与未解决项。导入设计工具不会自动拆成文字和组件;正式设计需重新建立可编辑元素、真实字体及授权记录,并在实现中测试键盘操作、响应式、对比度与交互。静态图能支持讨论,但不能证明软件已可用或符合无障碍要求。

    No Comments Yet
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   932 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 17:59 · PVG 01:59 · LAX 10:59 · JFK 13:59
    ♥ Do have faith in what you're doing.