用 Fronty 从设计稿或一句话描述生成可编辑网页

Fronty 是一个把设计稿或文字描述转成网页的工具：上传一张页面设计图，或者用一句话说明想要什么页面，它先生成页面结构，再让你在无代码编辑器里逐块调整。它适合没有前端开发经验、但需要快速做出一个落地页或展示页的人，也适合有设计稿却不想从零写 HTML/CSS 的设计师。本文按实际操作顺序，把从进入控制台到预览成品的流程讲清楚，并列出素材中提到的格式与体积限制。如果你还想对照站内其他生成类工具的做法，可以先看 Fronty 的工具页说明。

准备工作

开始之前，需要确认几件事，否则会在上传或生成环节卡住。

一个 Fronty 账号：所有操作都在登录状态下进行，控制台、编辑器和预览功能都依附于账号下的项目。
想清楚网站的三个基本信息：网站标题、网站描述、网站 URL。这三项在控制台创建项目时就要填写，它们决定项目在账号里的标识，也影响后续生成页面的基础信息。
准备好设计稿（如果走上传路线）：格式必须是 JPG 或 PNG，单个文件最大 5MB。超过这个体积或使用其他格式的文件无法上传，需要先自行压缩或转换。
明确页面目标：如果走文字描述路线，描述越具体，生成结果越接近预期。至少要说清页面类型（例如落地页、产品介绍页）、主要区块和希望突出的内容。

关于套餐、免费额度、模板数量等会随时间变化的信息，请以官网当前页面显示为准，本文不给出具体数字。

操作步骤

第一步：在控制台创建项目

登录后进入控制台（Dashboard）。这里是所有项目的入口，也是新建网站的起点。创建项目时需要填写三项信息：

网站标题：给这个站点起一个名字，便于在项目列表里识别。
网站描述：用一两句话说明网站是做什么的，这段描述会作为生成页面的背景信息。
网站 URL：为项目指定一个地址标识。

三项填完后即可进入下一步。控制台同时是后续回到已有项目继续编辑的入口，所以项目命名尽量清晰，避免多个项目混在一起分不清。

第二步：上传设计稿或描述页面

项目建立后，有两条生成路径。

路径一：上传已有设计稿。把准备好的 JPG 或 PNG 文件上传，注意单文件不超过 5MB。上传完成后，Fronty 的 AI 会依据这张设计图生成一个落地页，页面上的各个元素随后都可以单独编辑。这条路径适合已经有视觉稿、希望尽量还原设计的情况。

路径二：用文字描述生成。不提供图片，直接用一句话或一段话描述想要的页面。这条路径适合还没有设计稿、只想先得到一个可用初稿的情况。

两条路径的共同点是：生成结果只是起点，不是终稿。生成之后的所有调整都在编辑器里完成。

第三步：从模板起步（可选）

Fronty 提供了一批模板，可以从中挑选与目标视觉接近的一个作为基础，再按需修改。相比从空白开始，模板能省掉搭建页面骨架的时间，也更容易保证区块排布合理。素材中提到模板功能会逐步向所有用户开放，因此你账号里能看到多少模板，取决于当前开放情况，以实际界面为准。

第四步：打开 AI 无代码编辑器

进入编辑器的操作路径是：登录账号，在项目列表里选中要修改的项目，点击编辑按钮，打开 AI 驱动的无代码编辑器。编辑器是后续所有工作的主界面，主要能力有三块。

拖拽调整页面结构。用拖拽方式添加、移动或删除页面上的元素。点击任意元素会打开它的设置面板，在面板里调整外观和行为。也就是说，布局靠拖，细节靠设置面板，两者配合使用。

设置全局样式。在编辑器里找到全局样式（Global Styles）区域，这里集中管理影响整站的样式，而不是单个元素。素材中明确提到的可配置项包括：

明暗模式：通过对应的开关切换，为站点配置浅色与深色两种显示模式的支持。
亮度设置：调整整体明暗程度，用于改善页面的视觉观感。
主色调：用取色器选择品牌主色，让整站配色与品牌一致。

先定全局样式、再调单个元素，通常比反过来更省事：全局改动会一次性影响所有相关元素，避免逐个返工。

保存与预览。修改完成后点击保存按钮存储改动，再点击预览按钮查看效果。预览会实时呈现网站在不同设备和屏幕尺寸下的样子，这是发布前必须走的一步。

第五步：跨浏览器与跨设备测试

发布之前，用预览功能把站点完整过一遍：检查页面在不同浏览器、不同设备上的显示与功能是否正常。重点看布局有没有错位、元素有没有被遮挡、交互是否按预期响应。测试的目的是在站点上线前发现问题并修掉，而不是上线后再补。

一个完整示例

下面把上面的步骤串成一个最小可跑通的流程，目标是用一张设计稿做出一个可预览的落地页。

准备素材。导出一张落地页设计图，格式为 PNG，确认文件大小在 5MB 以内。如果超出，先压缩图片再继续。
登录并创建项目。进入控制台，填写网站标题（例如产品名）、网站描述（一句话说明产品做什么）、网站 URL，提交创建。
上传设计稿。在项目里上传刚才的 PNG 文件，等待 AI 依据设计图生成落地页。
进入编辑器。在项目列表里选中该项目，点击编辑按钮打开无代码编辑器。
调整结构。用拖拽方式把首屏的主标题和行动按钮移到更靠上的位置，删除生成结果里不需要的区块。点击需要改文案的元素，在设置面板里替换文字。
统一视觉。打开全局样式区域，用取色器把主色调设为品牌色；按需要打开明暗模式开关；微调亮度，让页面层次更清楚。
保存并预览。点击保存，再点击预览，分别在桌面和移动尺寸下检查排版。
修正问题。如果移动端出现文字溢出或按钮过小，回到编辑器调整对应元素的设置，再次保存并预览，直到各尺寸下都正常。

这个流程里没有写死的参数或配置项，因为 Fronty 的操作以界面交互为主，不需要手写代码或命令行。真正需要严格守住的只有上传环节的两个硬性条件：JPG/PNG 格式、单文件不超过 5MB。

注意事项

上传格式与体积是硬限制。设计稿只接受 JPG 和 PNG，最大 5MB。其他格式或更大的文件无法进入生成流程，需要提前处理。
生成结果是初稿。无论上传设计稿还是用文字描述，AI 产出的页面都需要人工在编辑器里逐项调整，不要期待一次生成即可直接发布。
先全局后局部。全局样式（明暗模式、亮度、主色）会影响整站，建议在细调单个元素之前先定下来，减少重复修改。
发布前必须预览。预览功能用于检查不同设备与屏幕尺寸下的表现，跨浏览器测试也应在这一步完成，确认无误后再上线。
模板可用范围可能变化。模板库处于逐步开放的状态，账号里实际可选的模板数量以界面显示为准。
易变信息以官网为准。套餐内容、免费额度、功能开放范围等都可能调整，做决策前请查看官网当前信息。