跳转到内容
MonstarXMonstarXMonstarX 文档

先设计：构建前先选定外观

要点在“项目”页打开“先设计”，然后点击“开始构建”。一分钟内，你就能看到为你的想法画出的三个完成度很高的首屏，风格各不相同，并且有桌面和手机两种视图。你可以加载更多、查看变体、微调颜色、圆角和字体，或者用文字要求调整，最后选中最喜欢的一个点击“构建”，整个应用都会沿用这个外观。

如果第一次构建只能靠猜来决定外观，那它往往就是大家最常推倒重来的一次。先设计会在构建任何内容之前，由速度很快的 AI 模型同时为你的想法画出几个完成度很高的首屏。你挑一个喜欢的，整个应用就会按这个外观来构建：颜色、字体、圆角，以及照片的呈现方式。

点击“开始构建”会打开“先设计”：界面逐渐绘制出来，第一个完成的会显示在大图区域（加速播放）。

如何使用先设计？

Section titled “如何使用先设计？”

  1. 在项目页的输入框中描述你的应用。

  2. 打开先设计。它会变成橙色，输入框边框和开始构建也会一起变成橙色。输入框下方的提示变为“Enter 设计”。

  3. 点击开始构建。先设计窗口随即打开，此时还没有创建任何内容。

  4. 看着界面一个个出现。第一个完成的会显示在大图区域，其余的会填入下方的缩略图。点击任一缩略图，即可把它放到大图区域。

  5. 看到满意的设计后，点击“构建”加设计名称的按钮（例如构建布鲁克黑文市场地预约门户）。项目会以这个外观创建，并开始第一次构建。

窗口里都显示了什么？

Section titled “窗口里都显示了什么？”
  • 顶部显示你的需求摘要和一个计时器：绘制时显示秒数，完成后显示可以开始构建。
  • 大图区域放大显示一个界面。每个界面都是一个完整的页面，而不是线框图，并且使用的是你自己的文字。“网站”（人们前来了解、预约或购买的地方）会画成落地页；“工具”（打开后用来完成某项工作的东西）会画成主要的工作界面，并填满真实感十足的内容。
  • 缩略图显示每个界面及其产品名称和风格，例如“柔和粉彩”“低调奢雅”或“瑞士极简”，还会显示类似“3 个已就绪 · 0 个仍在绘制”的计数。界面一出现就可以选择，即使它还在绘制中。
  • 桌面 / 手机以电脑宽度或手机边框显示同一个页面。每个界面都会按两种尺寸绘制，保证都能正常显示。

在第一个界面出现之前，大图区域会显示几条简短的说明，告诉你正在发生什么，比如“正在阅读你的需求摘要…”“应用尚未构建，目前仅展示外观。”。如果网站需要照片，MonstarX 会只生成一次，所有界面都使用同一组照片。

可以看到更多选择吗？

Section titled “可以看到更多选择吗？”
  • 再加载 3 个会再展示三个其他风格的设计方向（它们在你浏览前几个时就已经在绘制了）。最多可以看到九个。
  • 查看 5 个变体会把大图区域中的界面换成五种新风格（玻璃、墨色、夜色、杂志和信号），产品、文字和版块都保持不变。这些变体会作为新的一组打开，第一个缩略图是原版；可以用顶部的箭头在各组之间切换。每次会话中最多可以请求三次变体。

如何修改界面？

Section titled “如何修改界面？”

微调：即时生效，不需要 AI。大图区域旁边的面板可以一次性修改整个页面：

  • 主色：九个色块，前几个取自界面本身的颜色，你也可以选择任意颜色。
  • 边角：直角、小圆角或大圆角。
  • 字体：十种字体搭配。

缩略图会同步更新，构建时也会采用你的微调。重置微调可以恢复原样。

调整：用文字描述修改，比如“更温暖”“更深”或“使用我们的绿色 #2F6B4F”，然后点击调整。选中的界面会按你的要求重新绘制，并放在原界面旁边，标注你提出的要求。每次会话中最多可以调整六次。

点击构建后会发生什么？

Section titled “点击构建后会发生什么？”

MonstarX 会以所选界面的名称创建项目，上传你的附件，把这个界面（桌面和手机两种尺寸）保存为项目的设计，然后开始第一次构建。构建助手会以它为准：

  • 外观（颜色、字体、圆角、浅色或深色）会贯穿应用的每一个页面。
  • 示例所展示的页面（网站的首页或工具的主界面）会沿用它的布局和顺序，构建助手在构建过程中也会不断拿示例来对照。
  • 页面和功能仍然来自你的描述。示例只展示了一个页面，而应用会包含你要求的全部内容。
  • 示例中的照片会成为应用自己的图片。

你在聊天中的第一条消息会带有一个先设计标签，显示名称、风格和配色。点击它，可以按桌面和手机宽度查看所选界面的完整尺寸。

可以跳过或关闭吗？

Section titled “可以跳过或关闭吗？”
  • 跳过并立即构建会在不选择外观的情况下开始构建，就像没有打开先设计一样。
  • 关闭窗口（点击 ×、按 Esc 或点击窗口外部）前会先询问你：“关闭‘先设计’？本次会话中的所有设计、变体和调整都将丢失。”你的描述和文件会保留在输入框中。
  • 用相同的描述刷新页面，会再次显示同样的界面，只会继续绘制尚未完成的部分。

键盘操作：← 和 → 或 1–9 可以在界面之间切换，Enter 开始构建。

先设计会消耗我的额度吗？

Section titled “先设计会消耗我的额度吗？”

会。绘制界面属于 AI 工作，会像其他请求一样计入你的套餐。它在用量中显示为“先设计”，归在不属于应用下，并且永远不会占用高级模型额度，因为这些模型不是由你选择的。用尽所有变体的会话，会比只从前三个中挑选的会话消耗更多。如果你的套餐额度已经用完，窗口就无法绘制。

常见问题

Section titled “常见问题”
示例会决定我的应用有哪些页面吗？

不会。示例决定的是外观，以及它所展示的那一个页面的布局。页面和功能来自你的描述，两者不一致时以你的描述为准。

可以添加 Logo 或我喜欢的网站截图吗？

可以。添加到需求中的图片（最多三张）会提供给设计模型，它们会从中提取颜色和风格特点。

为什么找不到“先设计”？

它只出现在登录后项目页的输入框中，首页没有。只有文档、没有任何文字的请求会照常构建，输入一句话就可以据此设计。

构建后还能修改外观吗？

可以。在聊天中提出要求，例如“把按钮改成圆角，绿色再深一点”，或者使用编辑模式。

打开这些界面安全吗？

安全。每个界面在显示前都会经过清理：脚本和外部内容都会被移除，所以界面只能用于展示。

相关内容

Section titled “相关内容”
先规划构建前先回答几个问题。
根据 Figma 构建已经有设计稿了？直接根据它构建。
编辑模式直接点击页面来修改外观。
用量和上限先设计如何计入你的套餐。