跳到主要内容
NAVSMAP

一步步完成你的任务

从想法到独立站上线

教学指南 · 工具实测待完成

先写清卖点，再定版式，发布一个适配电脑和手机、带有效联系入口的产品介绍页。

预计用时
90 分钟
路线费用
免费额度试做，正式域名另计
网络环境
网络待确认
操作难度
新手可尝试，需检查链接与布局

操作步骤

3 个步骤

  1. 第 1 步：把想法变成一页需求说明

    Kimi（在新标签页打开工具详情）
    怎么做
    在 Kimi 中提供目标用户、真实卖点、已有素材和唯一行动目标，整理首屏、服务、案例、FAQ、联系区的顺序、文案与按钮去向。
    完成标志
    页面模块顺序、简短文案、按钮去向与上线验收清单。
    注意事项

    没有依据的客户数量、评价和效果数字不填；首版只做介绍页，先不加入账号、支付和复杂后台。

    把想法变成一页需求说明 · 基础教学示例 · 教学示例
    教学图解：先写清谁来、要完成什么，再安排内容和按钮去向。 不代表关联工具的真实实测产出。

  2. 第 2 步：确定桌面与手机版式

    figma（在新标签页打开工具详情）
    怎么做
    在 Figma 个人草稿中画桌面和手机两个 Frame，放入真实长度的标题与段落，导出关键 Frame 图片供生成阶段参考。
    完成标志
    两张版式图，以及字体、配色、间距和圆角说明。
    注意事项

    设计原型不等于线上网站。Starter 可制作草稿，但不能用 Figma Sites 发布；不要假定一个设计链接能自动还原全部交互。

    确定桌面与手机版式 · 基础教学示例 · 教学示例
    教学图解：把真实长度的标题放进两种宽度，检查能否保持同一个行动重点。 不代表关联工具的真实实测产出。

  3. 第 3 步：生成页面、检查链接并发布

    Lovable（在新标签页打开工具详情）
    怎么做
    把需求说明和版式截图附给 Lovable，生成响应式单页；逐个点击导航和联系入口，检查手机溢出后，用 Publish 发布至 lovable.app。
    完成标志
    可打开的正式地址，以及通过按钮与移动布局检查的介绍页。
    注意事项

    截图是视觉参考，表单仍要实际提交测试。编辑器修改需再次发布才出现在正式地址；先核对可用额度和自定义域名权限。

    生成页面、检查链接并发布 · 基础教学示例 · 教学示例
    教学图解：用可打开的本地页面演练验收，再到建站工具执行正式发布。 不代表关联工具的真实实测产出。

可复制的提示词

我要做一个自由职业设计师的产品介绍页。
目标用户：[用户]
提供的服务：[真实服务]
核心差异：[真实差异]
已有素材：[素材]
唯一主行动：[预约咨询或发送邮件]

输出首屏、服务、作品案例、FAQ、联系区的顺序与简短文案。
每个模块写清用户看完应知道什么，只使用我提供的事实。
首版不做登录、支付或数据库；案例没有素材时保留待补项。
列出桌面与手机验收清单：按钮、链接、表单、文字溢出、图片比例。
生成网站时使用我附的版式截图作参考；联系入口必须指向真实目的地。

最终成品

成品示例：留白笔记介绍页 · 基础教学示例 · 教学示例
教学图解：一份能直接打开、能实际交互的响应式单页源文件。 不代表关联工具的真实实测产出。