Autopost.ai. 用 AI 生成并发布文章的界面

这是一款用 AI 为 WordPress 网站生成文章的网页应用，界面设计涵盖仪表盘、初始设置、文章编辑器，以及浅色和深色模式。

简而言之

来自原始 Figma 设计文件和 Dribbble 的页面，使用示例数据。

Autopost.ai 是一款英文界面的网页应用，用 AI 生成文章，并为 WordPress 网站准备好这些文章。我在这个项目里做的是界面设计，从最初的设置，到审阅和定时发布文章的页面。

Dribbble 上那个名为 AI Content and SEO Generator 的作品展示的是同一个产品，所以它的页面也并入这个案例。使用量数字、姓名和文章标题均为示例数据。

设计稿页面的串联演示，并非录屏：新手引导、仪表盘及其深色主题。

仪表盘从用户来这里要做的两件事开始：一次创建多篇文章，或只创建一篇。两者都在第一栏顶部，按钮都是同一个 Generate with AI，第二栏顶部则横排着文章、主题和字数的计数器。

再往下是各模型的使用成本、订阅详情，以及按模型划分的 token 图表，回答了每个付费 AI 工具都会带来的那个问题：到目前为止用了多少。Manage subscription 与订阅方案放在一起，查看之后可以在同一个页面里直接采取行动。

设置界面浮在模糊的仪表盘之上，表单背后已经能看到产品。Setup your APIs 这一步需要分别填入 Midjourney 和 GPT-3 的密钥。每个输入框下面只有一行字，说明去哪里登录，并附上通向密钥的链接，Back 和 Next 让这一步成为连续流程中的一环。

文章编辑器分为三栏。左栏放主题和生成设置，比如字数、文章类型和语气。中间是生成的文章和配图。右栏决定接下来做什么：发布、存为草稿、定时发布或自动排期，还可以选择作者、社交账号，并有一个重新生成的按钮。

回到文章列表，Tab 和状态标签把已发布、定时发布、草稿和生成中的文章区分开，仍在生成的文章会在卡片上显示进度。

页面分浅色和深色两个版本。布局保持不变，强调的重点有所转移：深色模式下按钮变白，标题变成淡紫色，图表的柱子变浅，于是浅色版里的靛蓝不必独自承担对比度。