一句提示词，GPT 画出 7 套游戏 UI——从界面到组件库

用一句提示词，让 GPT 按指定游戏风格生成一整套中文游戏 APP UI 界面，再进一步拆成组件库。本文来自微信公众号「萤柳设计」，作者萤柳。

这个玩法很有意思：只用一句提示词，就能让 GPT 按指定游戏风格，生成一整套中文游戏 APP UI 界面。继续往下做，还可以把界面元素拆成组件库，后续延展页面或做灵感参考都方便很多。

一、通用提示词模板

直接套用，替换【】里的内容：

参考【某款游戏】游戏风格，生成【什么类型的游戏】游戏中文APP UI界面，4个主要页面，尺寸：375×812

想让结果更可控，可以把"4 个主要页面"写得更具体，比如首页、任务页、商城页、个人中心。页面描述越细，生成结果通常越稳定。

二、7 组风格案例

1. 星露谷物语风格

参考【星露谷物语】游戏风格，生成【巧克力工厂经营】游戏中文APP UI界面，4个主要页面，尺寸：375×812

2. 王者荣耀风格

参考【王者荣耀】游戏风格，生成【跳舞竞技】游戏中文APP UI界面，4个主要页面，尺寸：375×812

3. 神庙逃亡风格

参考【神庙逃亡】游戏风格，生成【农场经营】游戏中文APP UI界面，4个主要页面，尺寸：375×812

4. 原神风格

参考【原神】游戏风格，生成【竞技打拳】游戏中文APP UI界面，4个主要页面，尺寸：375×812

5. 胡闹厨房风格

参考【胡闹厨房】游戏风格，生成【动物养成】游戏中文APP UI界面，4个主要页面，尺寸：375×812

6. 纪念碑谷风格

参考【纪念碑谷】游戏风格，生成【厨房经营】游戏中文APP UI界面，4个主要页面，尺寸：375×812

7. 马里奥风格

参考【马里奥】游戏风格，生成【旅行游玩】游戏中文APP UI界面，4个主要页面，尺寸：375×812

到这里已经可以快速得到一整套风格明确的 UI 方案了。但更有意思的还在后面。

三、从界面到组件库

拿到满意的界面后，可以继续把视觉元素拆出来，整理成一张组件总览图。以"神庙逃亡风格"为例：

提取图片中的组件，只需要组件，需要分类，并放在一张图中，尺寸:16:9

四、组件提取方法

得到组件库图后，用 Figma 提取单个元素：

1. 把组件图拖到 Figma 画布
2. 点击【Select area】
3. 圈选一个元素，点击【Isolate】

这样就能源源不断地提取出单个图层了。

这套方法把灵感探索流程串成了一条完整的路径：从一句提示词，到成套界面，到组件库，再到设计资产。做游戏化界面、活动页、IP 风格页，或者想快速尝试不同视觉方向，这个方法都值得试试。