文章总结： 本文介绍如何结合Codex与GPTImage-2模型重构扫描器字典管理UI，通过分析原有界面缺陷、生成设计提示词、利用AI生成高保真设计稿，并经过多次迭代优化最终实现更适合大规模字典管理的表格化界面，提升信息密度与操作效率。 综合评分： 76 文章分类： 安全工具,解决方案,安全建设,技术标准,其他

如何利用 Codex 与 GPT Image-2 重构扫描器字典管理 UI

原创

洋洋 洋洋

塔罗安全学苑

2026年5月7日 20:47 江西

在小说阅读器读本章

去阅读

在 GPT Image-2 模型之前，设计一套合理的 UI 就像抽奖——随机生成多个 HTML 原型，挑一个相对顺眼的，再反复修改。这个模型的出现，把整个工作流简化了许多。以下是我如何结合两个模型来重构扫描器字典管理 UI 的过程。

原本的 UI

这个页面来自之前的星环项目。在我看来，它明显更适合”字典很少”的场景，差不多是一个轻量 MVP。

它的主要问题在于：左侧只是文件列表，信息维度很少；没有排序、筛选、分类、标签、分页、批量操作；右侧大面积空白，依赖用户先点选。几个字典还能应付，一旦变成几十个上百个，用户会很难找、很难比较、也很难维护。

第一步：用 Codex 分析现状

重构之前，先用 Codex 读取页面截图和对应的源码，让它了解当前页面的情况——有多少按钮、显示了什么字段。之后再让它给出重构提示词：

比如我给这张截图给 AI，再给个提示词让它设计新的设计图，你给我提示词。

以下是它给出的提示词：

基于我提供的截图，重新设计「月狐 LunaFox」后台中的「字典管理」页面，输出一张高保真的产品 UI 设计图。  设计目标： 把当前"左侧小列表 + 右侧详情空白很多"的布局，改成更适合字典数量变多时使用的 MVP 管理界面。不要做复杂大版本，只做一个轻量、真实可落地的管理页。  必须保留： - 左侧导航栏整体结构、品牌、当前选中的「工具 / 字典管理」 - 顶部应用栏和右上角图标区域 - 页面标题「字典管理」 - 搜索字典输入框 - 「上传字典」主按钮 - 现有字段：字典名称、描述、行数、文件大小、ID、更新时间、Hash - 操作：编辑内容、删除  推荐新布局： - 主内容区改为表格优先，而不是左侧列表优先 - 表格列包括：名称、描述、行数、大小、更新时间、操作 - 名称列作为主列，文件名加粗，描述作为次级文本 - 行数和大小要便于快速扫描 - 操作列使用图标按钮或轻量文字按钮：编辑、删除 - 点击某一行后，可以在右侧轻量详情面板或表格下方详情区展示 ID、Hash、更新时间等信息 - 页面整体适合 20 到 100 个字典的管理场景  视觉风格： - 保持当前产品的黑白灰、极简、工具型后台风格 - 信息密度比现在更高，但不要拥挤 - 使用清晰边框、浅灰分隔线、紧凑表格行 - 不要大面积空白 - 不要卡片堆叠，不要营销风，不要渐变背景，不要玻璃拟态 - 整体像成熟的安全工具 / 运维后台 / 资源管理控制台  画面要求： - 桌面端 16:9 宽屏截图 - 中文界面 - 高保真 UI mockup - 看起来像真实产品截图，而不是概念海报 - 不要新增后端暂时没有的字段，比如分类、标签、状态、使用次数、来源

第二步：用 GPT Image-2 生成设计稿

把提示词和原始截图扔给 GPT 的图片模型，让它出设计稿：

可以看到，页面层级比原版强了不少。这就是 GPT 图片模型当下的优势——它投喂了大量优秀 SaaS 系统的设计。如果绕过图片模型，直接让 GPT 5.4 或 5.5 设计，效果会差很多。

第三步：根据实际需求迭代

设计中我发现，很多字典并不只属于一个类型。比如某个字典既可以用于 API 路径，也可以用于子域名 fuzz；某个敏感路径字典，可能同时服务目录扫描和指纹识别。不容易归类为单一类型。

于是我让 AI 重组了提示词，重新喂给 GPT 图片模型：

这个版本明显好很多，但细节处理仍有不少问题——这也是当前 AI 的局限。需要根据这张图片让 AI 做整体设计对齐，再通过 Codex 桌面端的能力进行调整。

第四步：让 GPT 5.4 对齐实现

以下是让 GPT 5.4 根据图片进行对齐的提示词：

根据我提供的截图，对字典管理页面进行重构对齐，直到 UI 设计完全一样，一次性完成。

发送过去后，半小时再回来看，页面已经完成了 UI 重构：

可以看到重构后的页面与设计图差别仍然很大，问题不少。这时候就需要利用 Codex 桌面版进行手动调整：

经过几个小时的反复微调，最终完成重构：

免责声明：

本文所载程序、技术方法仅面向合法合规的安全研究与教学场景，旨在提升网络安全防护能力，具有明确的技术研究属性。

任何单位或个人未经授权，将本文内容用于攻击、破坏等非法用途的，由此引发的全部法律责任、民事赔偿及连带责任，均由行为人独立承担，本站不承担任何连带责任。

本站内容均为技术交流与知识分享目的发布，若存在版权侵权或其他异议，请通过邮件联系处理，具体联系方式可点击页面上方的联系我。

本文转载自：塔罗安全学苑 洋洋 洋洋《如何利用 Codex 与 GPT Image-2 重构扫描器字典管理 UI》