文字和布局都能改
SVG 源文件中的文字、形状和排版可编辑。建议复制后再改，将原包保留为页面与样式参考。
AI 绘画网站设计 · SVG 场景包
生图 UI 素材，把工作台和订阅流程一起设计
生图 UI 素材适合正在搭建 AI 绘画网站的独立开发者和产品团队。除了提示词与生成参数，还能对照作品管理、套餐积分和账户页面梳理流程。用可编辑 SVG 起稿，再通过免费的 AI UI Designer Skill，在 Codex 或 Claude Code 中按业务需求改稿。
有效付费订阅内含此资源包，下载不扣积分。
静态 SVG 设计稿 · 包内中文示例 · 不含可运行代码
- 桌面页面
- 6
- 配色主题
- 2
- 移动端参考
- 2
- 可编辑源文件
- SVG
先看页面衔接，再决定是否下载
一套生图产品需要让用户知道在哪生成、去哪找作品、积分不足时怎么办。这里可以逐页查看，每个桌面页面均配有灰度线框、浅色稿和深色稿，方便比较信息层级与配色。
产品首页
安排产品说明、作品示例和生图入口，让用户先理解工具用途。
登录与注册
查看登录表单，并对照状态板规划注册字段和错误提示。
生成工作台
检查提示词、模型、画幅、张数、积分消耗与结果的呈现位置。
作品历史
参考搜索、详情、复用生成参数及删除确认的页面安排。
套餐与积分
对照余额、示例套餐和购买结果设计，梳理付费入口。
账户设置
规划资料字段、保存反馈和退出登录入口。
下方是包内原始预览：中文示例文案、虚构产品数据，按钮与表单不执行实际操作。
生图 UI 素材还包含哪些设计参考？
生图 UI 素材的 ZIP 除页面 SVG 外，还包含组件、关键状态与场景说明，改工作台时也能对照其他页面，检查布局和提示是否一致。
先看结构，再选明暗主题
提供 2 份配色主题 JSON；用灰度线框检查重点内容，再结合浅色稿或深色稿调整视觉样式。
把异常与空状态一起考虑
组件板涵盖按钮、输入框、选择器、卡片和弹窗；状态板包含生成中、作品为空、积分不足、登录错误及支付失败的设计。
移动端参考范围清楚
生成工作台和作品历史各有 390px 宽设计。其余页面仅在场景说明中描述移动端行为，不另附移动端设计稿。
下载素材后，怎么用 Skill 修改？
生图 UI 素材可导入免费 Skill；导入辅助脚本要求 Python 3.9 或更高版本。
- 1
登录并下载 ZIP
网站下载需要有效付费订阅，场景包包含在订阅权益中，不消耗生图积分。
- 2
把本地路径交给助手
在 Codex 或 Claude Code 安装 AI UI Designer Skill，提供 ZIP 文件路径，让助手导入场景包。
- 3
按业务需求改稿
指定主题、要修改的字段和布局，检查输出 SVG 后继续迭代。修改工作副本，保留原始资源。
示例：把生图工作台改为商品海报工具
使用图片生成场景包的深色主题，把生成工作台改成商品海报设计页面。将提示词区域调整为商品名称和核心卖点输入区，并提供海报尺寸选择。保留积分消耗说明和生成结果卡片，输出可编辑 SVG 供我检查。
免费 Skill 能做什么，订阅又包含什么？
从零描述需求、导入场景包和应用主题都可使用免费 Skill；有效付费订阅用于从网站下载生图 UI 素材。
- 按自己的需求设计
- 免费 Skill · 免费使用
- 导入场景包、应用主题
- 免费 Skill · 免费使用
- 下载这套页面素材
- 场景包 · 有效付费订阅
- 继续使用已下载资源
- 场景包 · 订阅结束后仍可本地使用
FAQ
开发前，先分清素材与应用
设计稿内容、文字编辑和下载权益，集中说明。
先看设计是否适合，再开始你的生图产品
用生图 UI 素材对照生成、作品和订阅流程，选择明暗主题，再通过免费 Skill 调整 SVG。查看整套预览，确认适用后登录有效付费订阅账户下载。
下载 SVG 场景包有效付费订阅内含此资源包，下载不扣积分。