#创建网站

Manus 支持通过自然语言描述构建完整的网站。不同于仅生成静态页面的工具，Manus 可创建集前端、后端、数据库及用户登录功能于一体的全栈 Web 应用，适用于品牌官网、活动着陆页、作品集、预约系统、会员网站、数据仪表盘及小型网店等多种场景。

在输入框中输入 /，选择 创建网站，即可进入建站模式。用户描述需求后，可按需审阅构建计划进行构建与预览，并根据实际需要修改完善，最终发布上线。预览、修改、发布与托管均可在同一任务中完成，整个建站过程无需编写代码。

#编写建站需求

清晰、具体的需求描述有助于准确确定网站的页面结构、视觉风格和功能实现，使首版结果更符合预期。建议在首次提问中集中说明网站用途、目标访客、页面构成、核心功能、视觉风格及可用素材，并明确区分已确认与待确认的信息。对于暂未确定的价格、地址、联系方式等内容，应要求以占位形式标注，不得为补全页面而自行编造。

通用模板

以下模板中，{} 内的内容为可替换变量，使用时根据实际需求填写。

请帮我构建一个{网站类型}，用于{网站用途}，希望访客{期望访客完成的动作}。

目标访客：{访客身份、需求及使用场景}。
页面构成：{需要的页面或板块，以及排列顺序}。
核心功能：{如表单提交、在线预约、会员登录、在线支付、数据看板等}。
视觉风格：{整体风格、配色、字体倾向及可参考的网站}。
可用素材：{已上传的 Logo、图片、文案，无则填写“无”}。
内容边界：{不得编造的信息，如价格、地址、资质、客户评价}；暂缺内容请用明显的占位文字标出。
设备适配：{优先保证手机端／电脑端的浏览体验}。
语言版本：{中文／英文／中英双语}。

开始构建前，如有影响结果的关键信息缺失，请先向我提问。

陶艺工作室官网示例

以虚构的陶艺工作室为例，展示如何在需求中说明页面结构、预约功能及数据管理要求。使用时，可将 {} 内的内容替换为实际需求。

请帮我构建一个陶艺工作室的品牌官网，用于介绍体验课程并接受线上预约，希望访客浏览课程后直接提交预约。

目标访客：{想利用周末体验手作的上班族和亲子家庭}。

页面构成：
- 首页：{工作室简介、主视觉图和“立即预约”按钮}；
- 课程介绍：{拉坯体验、手捏亲子、釉下彩绘三类课程，每类说明时长、适合人群和成品取件方式}；
- 作品展示：{学员作品图片墙，暂用占位图}；
- 在线预约：{表单包含姓名、手机号、课程类型、日期、时段和人数}；
- 联系方式：{地址、营业时间和地图位置，暂用占位文字}。

核心功能：
- 预约提交后保存到数据库，并向我发送新预约通知；
- 同一时段预约人数达到{8人}后，该时段在表单中显示为“已约满”；
- 提供仅管理员可见的预约管理页面，可按日期查看和导出预约记录。

视觉风格：{温暖、质朴的手作氛围，以陶土色和米白色为主，避免花哨的动效}。
内容边界：{不编造课程价格、学员评价和获奖经历，相关位置统一用“〔待补充〕”标出}。
设备适配：{访客多通过手机访问，优先保证手机端排版和表单填写体验}。

开始构建前，请先列出页面结构和数据表设计，待我确认后再开始。

需求较多时，可先说明网站的整体框架和核心功能，再在后续对话中逐项补充细节，避免一次性提出过多要求导致部分需求被遗漏。

#从设计稿导入

已有 Figma 设计稿时，可直接将其作为网站构建依据，无需逐项描述页面样式。Manus 会读取画框（Frame）中的布局、组件、字体和颜色，生成对应的前端页面（HTML、CSS 和 JavaScript），并按需补充后端功能。

复制画框链接

在 Figma 中选中需要构建的画框，右键点击并选择 Copy/Paste as（复制/粘贴为）> Copy link to selection（复制所选项链接），即可获得指向该画框的链接。

复制的链接通常带有 node-id 参数，用于定位具体画框。若链接中不含该参数，说明复制的是整个文件，建议重新选中画框后复制，使构建范围更加明确。

描述构建要求

连接完成后，通过 从 Figma 导入 添加画框链接，或直接将链接粘贴至输入框，并说明构建要求。提供多个画框时，应说明它们之间的关系，例如页面跳转顺序、交互方式或组件状态（如鼠标悬停效果），便于 Manus 准确生成多页面或可交互的效果。可参照以下模板：

通用模板

以下模板中，{} 内的内容为可替换变量，使用时根据实际需求填写。

请根据附上的 Figma 画框构建{网站类型}，用于{使用场景及目标用户}。

画框说明：
- 画框 1：{页面名称及用途}
- 画框 2：{页面名称及用途}

页面关系：{页面之间的跳转顺序及触发方式}。
交互状态：{需要实现的悬停、点击、展开等状态，以及所参照的画框}。
功能要求：{需要实现的表单提交、数据保存、账号登录等功能}。
还原要求：{布局、字体和颜色需与设计稿保持一致；允许调整的部分请单独说明}。

设计稿中未体现、但会影响功能实现的内容，请先列出并向我确认，不要自行补充。

课程预约网站示例

以瑜伽馆课程预约网站为例，展示如何在提问中说明各画框的用途、页面跳转关系及交互状态。

附上的三个 Figma 画框分别是{首页、课程详情页和预约成功页}，请据此构建一个{瑜伽馆课程预约网站}。

页面关系：点击首页的{课程卡片}进入对应的课程详情页；在详情页填写{姓名、手机号和上课时间}并提交预约后，跳转至预约成功页。
交互状态：所有按钮的悬停效果参照{第二个画框}中的按钮样式。
功能要求：保存提交的预约信息，{同一手机号不能重复预约同一节课}。
还原要求：布局、字体和配色与设计稿保持一致，页面需适配{手机浏览}。

导入注意事项

为提高设计稿的还原效果，建议注意以下几点：

• 按画框导入：优先复制具体画框的链接，而非整个文件的链接，避免构建范围过大或不明确。
• 规范命名：在 Figma 中为画框和关键图层设置清晰的名称，便于在构建要求中准确引用。
• 状态单独绘制：悬停、选中、展开等交互状态，建议在设计稿中单独绘制，并在要求中说明其对应的画框或组件。
• 补充设计外信息：表单校验规则、数据保存方式、跳转条件等设计稿无法体现的内容，需要在文字要求中单独说明。
• 逐页核对：生成完成后，对照设计稿逐页检查，在同一对话中指明需要修改的页面和元素，避免整体重新生成。
• 确认访问权限：导入失败时，可先确认所连接的 Figma 账号能否正常打开该设计文件。

#添加网站参考

没有设计稿，但已有希望借鉴的网站时，可使用 添加网站参考 功能。输入网址后，Manus 会参照该网站重新创建设计，适合用于获取设计灵感，或以现有网站为起点快速搭建初版。

提问时，应说明具体参考的方面（如整体布局、配色或导航结构），以及需要替换或调整的内容，避免直接照搬原网站。可参照以下模板：

通用模板

以下模板中，{} 内的内容为可替换变量，使用时根据实际需求填写。

请参照附上的网站，构建{网站类型}，用于{使用场景及目标用户}。

参考范围：参照其{整体布局、配色、版式风格、导航结构等}。
内容替换：将{品牌名称、Logo、文案和图片}替换为{我提供的内容／占位内容}。
差异调整：{与参考网站不同的页面、模块或功能}。

不要直接沿用参考网站的文字、图片和 Logo；无法确定的内容，请先向我确认。

烘焙工作室官网示例

以社区烘焙工作室官网为例，展示如何限定参考范围，并说明需要替换和新增的内容。

请参照附上的网站，为{社区烘焙工作室}构建一个品牌官网，用于{向附近居民展示产品，并接受到店自提预订}。

参考范围：仅参照其{首页的分栏布局和留白风格}，配色改为{米白与浅棕色调}。
内容替换：品牌名称为{麦田小屋}，产品图片暂用占位图，文案围绕{面包、蛋糕和季节限定}三个产品类别撰写。
差异调整：不需要参考网站中的{会员积分页面}；新增{自提预订表单，包含姓名、手机号、取货日期和商品数量}。

不要直接沿用参考网站的文字、图片和 Logo。

使用该功能时，建议注意以下几点：

• 输入完整网址：填写包含 https:// 的完整网址，避免因地址不完整导致添加失败。
• 限定参考范围：仅借鉴部分设计时，应说明具体参考的模块或风格要素，避免整站照搬。
• 替换原有素材：文案、图片、Logo 和品牌名称应替换为自有内容或占位内容，不直接沿用原网站素材。
• 确认使用权限：参考内容仅限个人使用和汲取灵感；需要对外发布时，应确认有权使用相关设计和内容。

#预览与修改

构建开始后，Manus 会实时展示搭建过程，并在开发早期即提供可交互的网站预览。首版完成后，可先通过预览检查效果，再以可视化编辑或对话方式进行修改。

可视化编辑

颜色、字体、间距等细节，可直接在预览中修改，无需输入指令。点击页面上的任意元素，即可打开样式面板进行调整：

• 颜色：修改背景、文字及边框颜色
• 字体：调整字体、字号和字重
• 间距：修改内边距、外边距和元素间距
• 边框：调整边框样式、宽度和圆角

选中元素后，可进一步提出优化需求，例如改写标题文案、调整配色方案，或重新排列列表布局，以提升浏览体验。

对话式修改

需调整网站结构、功能或内容，可直接在对话中描述具体需求。系统将据此更新网站，修改结果可在预览中即时查看。若上一项修改尚未完成，仍可继续提交后续要求，Manus 将按提交顺序逐一处理。常见的修改方式如下：

① 调整视觉风格

在保留页面结构的基础上，统一修改配色、字体或整体风格。

请将全站标题字体改为更有手写感的衬线字体，按钮颜色统一改为陶土色，其余样式保持不变。

② 增删页面板块

新增或删除板块时，应说明板块的位置和内容要求。

请在“课程介绍”与“在线预约”之间新增“常见问题”板块，包含{5个}问题，答案暂用占位文字。

③ 批量提交修改

多项相关修改可写在同一条指令中，Manus 会一并处理，减少逐条发送的次数。

请一次完成以下修改：
1. 首页主标题加粗，并适当增大字号；
2. 课程卡片之间的间距调大；
3. 页脚背景改为浅灰色。

④ 新增网站功能

需要登录、数据存储、文件上传等功能时，说明功能入口及使用流程。

请为网站添加会员注册与登录功能，登录按钮放在导航栏右上角。
会员登录后，可在“我的预约”页面查看和取消自己的预约。

⑤ 接入在线支付

需要在线收款时，Manus 可自动配置 Stripe 沙盒环境、商品及结账流程，便于先行测试。

请为三类课程接入在线支付，访客提交预约时需先完成付款。
先在测试环境中配置，待我确认支付流程无误后再切换为正式收款。

⑥ 设置访问权限

内部管理页面、客户专区等内容，可限定为特定角色或用户访问。

请将“/admin”预约管理页面设为仅管理员角色可访问，其他用户访问时自动跳转至首页。

⑦ 限定修改范围

明确需要调整的部分，避免其他已确认的页面被不必要地改动。

请仅修改“课程介绍”页面的课程卡片样式，导航栏、首页及预约表单保持不变。

⑧ 排查功能问题

功能异常时，描述出现问题的操作步骤和实际表现。

在手机视图中提交预约表单后，页面没有出现成功提示。
请检查原因并修复，修复后说明问题出在哪里。

⑨ 核对上线事项

发布前，要求 Manus 对网站进行整体检查，并列出需要补充的信息。

网站即将发布，请逐项检查：
所有导航链接是否可用、表单能否正常提交并保存、手机端是否存在显示错位，以及页面中是否仍有未替换的占位内容。
请列出检查结果和需要我补充的信息。

#发布与上线

发布网站

在预览中完成测试后，点击 发布 即可启动上线流程。云端资源配置、生产环境构建及部署均由系统自动完成，网站将在几分钟内可供访问，并默认采用平台提供的二级域名 名称.manus.space。上线后，可继续通过对话调整结构、功能或内容；按默认设置，修改结果需手动再次发布才会同步至线上。

自动发布功能默认关闭，开启后可在每次构建成功时直接部署新版本，无需逐次手动操作。若构建仍在进行或未能成功，线上网站将继续运行上一个稳定版本。建议在整体方向明确、仅需逐项完善细节时启用；探索或比较不同方案期间，宜保持关闭，以免尚未确认的调整直接对外展示。

绑定自定义域名

发布后，可为网站绑定自有域名，也可直接在 Manus 中搜索并购买新域名：

• 连接已有域名：在对话中告知要使用的域名，Manus 会提供需要添加的 DNS 记录，在域名注册商的管理后台添加或修改相应的 A 记录或 CNAME 记录即可。
• 购买新域名：在构建器中直接搜索并购买域名，Manus 会在后台完成相关设置。

请将此网站发布到我的自定义域名 {www.example.com}。

域名连接成功后，Manus 会自动配置并续期免费的 SSL/TLS 证书，网站即可通过 HTTPS 访问。DNS 记录生效需要一定时间，添加记录后如暂时无法访问，可稍后再检查。

选择托管模式

发布网站时，可根据网站的运行需求选择托管模式，两种模式的区别如下：

托管模式可随时在项目设置中切换。两种模式的默认部署区域均为美国。

#管理与维护

网站发布后，可借助以下功能管理版本、保障数据安全并了解访问情况：

• 版本回退：查看每次修改记录，必要时回滚至此前的版本。
• 创建副本： 将网站复制为独立的新项目，用于改版测试或作为模板复用。
• 代码导出： 复制代码片段或下载完整代码库，以便迁移至其他服务器托管。
• GitHub 同步：将项目导出至私有 GitHub 仓库，并与 Manus 保持双向同步。
• 数据分析： 查看页面浏览量、访客数和访问趋势，了解网站访问情况。
• 实时通知：在用户注册或提交表单时即时收到提醒。
• 搜索引擎优化：自动生成元标签、结构化数据和语义化页面结构，便于搜索引擎收录。
• 隐藏 Manus 标识：点击预览工具栏中的设置图标，在高级选项中开启隐藏“Made with Manus”标识的功能。

为兼顾修改效率与网站稳定，建议注意以下几点：

• 大改先建副本：改版、调整支付流程等较大改动，先在副本中验证，确认可行后再应用到正式网站。
• 改坏及时回退：最新修改效果不佳时，可回滚至此前的版本，无需逐条指令修正。
• 定期导出代码：对于长期运营的网站，建议定期下载代码或同步至 GitHub，作为额外备份。

#费用与用量

Manus 网站采用构建与编辑、托管与运行两套计费方式：构建与编辑按积分计费，积分消耗量取决于任务复杂度；托管与运行则按实际用量单独计费，涵盖网站发布后的云端资源（后端服务、数据库及文件存储）、网站内置的 AI 功能及外部 API 调用。

每个账户每月包含一定的免费额度，用于抵扣网站托管与运行的费用：

免费额度在每个账单周期开始时重置，超出部分按标准费率计费。查看用量或充值，可进入 账户设置中 > 使用情况> 网站使用情况与账单。若账户余额不足且未开启自动充值，网站可能暂时无法访问；对于需要长期稳定运行的网站，建议开启自动充值并定期查看用量。

提示：以上额度与计费规则可能调整，请以官方最新说明为准。

#使用注意事项

• 核实生成内容：发布前应逐项核对价格、地址、营业时间、资质及客户评价等信息，删除或替换无法证实的内容。
• 先测试再收款：接入支付后，先在测试环境中走通下单与付款流程，确认无误后再开启正式收款。
• 保护访客数据：收集手机号、邮箱等个人信息时，应在页面中说明用途，并通过访问权限限制后台数据的查看范围。
• 关注运行费用：网站访问量增大后，托管与 AI 用量会随之增加，应定期查看用量，并设置合适的充值方式。
• 检查多端体验：发布前在电脑、手机等设备上检查页面排版、图片加载及按钮、表单等交互，确保内容显示完整、功能正常可用。
• 确认素材授权：使用图片、字体、音乐等素材前，应确认其授权范围符合网站用途，尤其注意是否允许商业使用，避免使用来源不明或未经授权的素材。