framer ai教程

怎么样能够零代码，快速搭建一个真正的网站？这期视频会比较长，但是干货满满，我就在菲特曼里面随便找个 kit 给大家展示一下，就这一套页面举例吧，设计的还挺炫酷， 当然你们做的话，肯定是用自己的页面设计你的页面里面的交互，这些呢，先不用管，都能实现，一步一步来，咱们今天先教大家怎么把页面搭起来，并且怎么进行跳转。 首先我们需要先在飞格玛里面去添加一个插件，这个插件叫做飞格玛 two h t m l 威斯福瑞莫。然后你的电脑也需要先装一个福瑞莫，并且搞一个号自己注册就行。 当然如果你不想装，使用网页版也能用好。那么现在我们回到飞哥版的界面，我们在左侧选择好画板，这一步呢，先跟着来，后面再教大家怎么单独去复制某个图层，不过这些问题都不大，选中画板以后，打开 free mo 插件，他 会自动复制，完成后呢，会有一个弹窗出现，耐心等待就行。好，弹窗出现，我们点击这个按钮，然后打开福瑞莫，新建一个项目文件，把福瑞莫里面的画板尺寸修改为和非格曼里面一样，我这个是幺四四零的，我就直接修改成幺四四零，然后花渣微粘贴一下， 等待粘贴结束。记得右侧这里把 head 修改为 fat 模式，这样呢就会根据页面的高度自动适配。然后我们点击右上角的蓝色按钮，等待页面上线后，我们打开看看， 现在这个页面呢就已经实现了，就目前这样，如果你是纯净态页面，比如说个人网站啊，像是作品集这种，其实呢就已经 ok 了，但是如果你的网站想要一些跳转关系，那么我们再来做一个案例，就以这个 above 举例，比如点击 above 跳转到 above 页面，那么我们呢，需要回到 飞个马，再去把 abut 界面复制一下，然后在 freemo 的配置这里新建一个页面，再粘贴进来，然后我们回到我们的首页，点击 abut 这个按钮， 在右侧呢有一个 link 选项， link to， 这里就可以创建跳转，我们可以选择我们刚刚创建的 bout， 然后 newtype 这里呢就是说你点击以后是否新开一个页面，这个吧，看个人的需求，我就不需要新开标题页，在当前页面跳转呢就可以，那我就直接默认，然后 style 也默认就可以， 然后点击右上角再重新更新一下页面，现在跳转就实现了，那么本期的案例呢，就 ok 了。 如果兄弟们感兴趣的话呢，可以在评论区留言福瑞莫能够实现任何网页的效果，比如动画或者页面中的号啊等等交互都可以实现，甚至通过 cms 呢，也可以进行后台管理，比如博客类的网站都是 ok 的。那么这个系列是否更新下去呢？主要还看大家的反馈，拜拜。

你是否也想拥有一个自己的个人网站呢？不会代码，不会设计，不知从何下手？没关系， ai 来帮你搞定。 friendai 来了一件事，做网站的 ai 平台真有手就行。这个平台是有免费试用版本的，如果你只是想体验一下 ai 的强大，那么免费版已经够用了。 进到个人主页后是这样的，点击 startcai 即可开始。下面的蓝色提示是官方使用视频，我们点击取消就可以了。点击开始后，他会跳出一个输入框，这边你需要输入一个网站大概的内容，我这边想让他生成一个关于露营产品的个人销售网站， 输入完成后，点击 start 就会开始生成，下方有一个操作栏。第二个是拖动预览界面，它会一次性 给我们生成三个模板，分别对应不同设备的分辨率， 生成的内容也是根据你的主题来的，还有相关的配图也是 可以看出他整体的风格和配色都是很协调的，会自动去对应你想要生成的主题。整个过程你完全不需要懂什么程序和设计，只要给到主题的描述就可以了。在下方工具栏选择第一个工具，就可以任意的修改网站的内容或排版， 可以在右侧的工具区进行修改，也可以直接在内容里进行修改，对新手用户来说特别友好。右侧的使用也很方便，字体、颜色、背景等等都是可以修改的， 如果有你不需要的内容，选中后直接删除就可以了。更换内容里的图片，选中就可以更换，并且还可以去调整图片的一些参数，使用起来非常的方便。 下方工具栏第四个工具是改变平台的颜色，一共有黑白两种模式，并不会对生成平台改变。修改成功后，我们可以发布到平台提供的网址进行预览，这边显示发布成功了，我们进入网站即可。 这个就是我用 ai 三分钟做出的一个网站，感觉和某宝提供的服务来比真的不差， 他的内容都是按你的主题来制作的，而且相关的配图也是并不是胡乱的生成，你给到的提示越明确，输出的内容质量也就越高。 网站整体效果确实不错，后续也可以再添加跳转的窗口。目前来说唯一的缺点就是只能付费才可以让运营能够绑定， 但如果自己有想做个人网站的朋友，也可以利用这个网站生成的内容来进行参考，也是一种不错的选择。本期的视频就到这里了，关注我，我会持续带来 ai 方面的内容。

freemore 这款软件的功能呢？之前已经给大家介绍的差不多了，那么咱们今天就讲一讲如何通过 freemore 去自己构建一个小样式导航。首先我们需要在飞格曼里绘制好导航， 然后还是用福瑞莫插件先把设计稿复制，接下来打开福瑞莫，把画板修改为一四四零宽度，这个呢作为我们大屏尺寸来用， 然后点击右侧加号添加 table， 尺寸默认就可以，这个呢作为小屏来用，接下来继续点击加号添加 form， 也就是移动端。那么现在呢，我们三个基本小样式框架就搞定，我们填充内容，回到 dystop 画板去粘贴费格曼里绘制好的内容。然后针对布局，我们需要给编组进行一定的修改。 首先导航是一个整体，一个整体编组是 ok 的，然后我们左侧内容编一个组，右侧按钮已经编组了，就不用调整了。针对总编组呢，也就是导航， 我们需要先把宽度修改为百分之百，这样是为了超出一四四零宽度的情况下呢，也能显示，再把左右两个模块的宽度修改为 out， 就是有多少内容就显示多少，这样方便我们小屏进行增减。 然后总导航添加 liaut， 这个有点类似于前端的逻辑 distribute， 其实就是前端 flax。 布局我们调整成左右对齐，然后我们左右两端添加判定就可以了。现在我们可以看到小杨师布局也会顺延下来，我们刚刚的设置，小屏的部分呢，我们可以调整一下判定， 比如小屏我想要左右键距上二十四，那么我直接修改，接下来是移动端，移动端的逻辑呢，其实就是文字菜单隐藏，那我们直接删掉，然后右侧按钮呢变成一个菜单图标，对吧？我们直接添加矩形，矩形呢在这里可以找到，或者呢用快捷键 f 添加一个尺寸呢，这里大家修改为合 式的尺寸就行，然后这里可以修改，比如旋转啊，圆角都可以。然后我们复制三个创建一个编组，现在呢就可以删掉两个按钮了，然后我们添加一个 lay out， 改为上下布局，高度呢改成自动，现在图标就有了，然后我们调整判定就可以了。现在我们点击预览来看一下 小形式布局呢，就已经 ok 了。后面呢会再给大家去讲解如何创建点击菜单的脚步，拜拜。

弗雷曼的 ai 也是刚更新，我们来测试一下它申请网站的一个效果，直接上手点了这个按钮之后呢，它直接出来这个输入框，然后你确实书写，试一下 他这边生成的你的提示语，还有颜色都可以看，都可以随机再生成几组颜色，比如说你不喜欢这个颜色，跟这边点了之后就可以改，看见没这边就自动的变了这个色彩。然后这个字体，比如说你不喜欢这种字体，你想尝试这种， ok， 他还是非常快乐能响应的，那我们再等一会，等他完全生成。 不得不说它这个网页的生成效果是我玩过的 ai 生成网站的里面最好的就是从设计走过来说， 这种细节都是非常高级有品味的， 但是他这个速度相对于其他的 ai 产品来说是比较慢一点的。 ok， 终于生成好了，生成好了，然后他直接就出来说要不要 publish， 我们 publish 一下，看一下效果， 可以看到这个效果真的是非常不错的一个效果。 同样的他是支持自适应的啊，这是什么效果都是支持的，你只要点进去把链接什么的链接一下就 ok 了，这个效果着实惊艳，大家都可以试一试。链接我会看到评论字，然后更多 ai 工具相关的资讯请关注我。

今天我们聊一下可以制作网站以往模型的 ai 工具。首先我们到这个网址，我们在这里输入自己网站的风格、内容以及用途， 它就会自动生成电脑、平板和手机的意外设计，里面的内容排版都很符合网站用途。 我们还可以一键更改色盘以及字体，在这个基础上进行修改和上传自己的图片，就会节省很多时间。关注加群一起交流开始用呦！

老外又整花活了，只要一句话，十秒钟就能帮你生成一个网站。就是这个叫 freemer 的 ai， 你也可以在他的画布上自由切换网站风格，修改每个元素，添加动画、交互、 cms 等等。同时，他还配备了非常全面的插件库，可以帮我们把网站链接到全世界流行的任意网站或 app 上。除 此之外，他这还有大量漂亮的网站模板，可以一键套用，适合人工智能的、机构的、品牌的、网店的、博客的、个人的、社交的、娱乐的全都有。你也可以生成网站模板在这里卖。有了这种 ai 快速建战工具，以后，网站开发人员恐怕不是在摸鱼就是要下岗了。想要体验这个 ai 一键生成网站的，可以在评论区留言 primer 获取。

设计师真的要失业了！ freemer 是一件生成网页的 ai 工具，简单的描述就可以生成网页，而且是网页端、 pad 端、手机端一同输出，还支持自定义修改和预览，目前有免费版，快去使用吧！关注我，了解更多 ai 工具。

只需要输入文本描述，就可以自动设计排版、生成和上线网站。他就是 freemanai， 他可以让你轻松创建专业、美观和高性能的网站。接下来让我们看看他是如何操作的吧。 首先进入 primer ai 的主页，在输入框中输入你想要的网站的描述，例如一个关于旅游的网站，有图片、视频和博客，风格简洁。 然后点击生成按钮，等待 ai 为你创建网站。在生成的网站上，你可以点击任何元素进行修改， 或者拖拽元素改变位置和大小。你也可以在左侧的工具栏中选择不同的组件，例如按钮、图标、表单等添加到你的网站上。在右侧的属性栏中，你可以调整你的网站的全 设置，例如颜色、字体、背景等。你也可以在这里添加动画交互和 cms。 当你对你的网站满意时，你可以点击右上角的发布按钮，选择一个紫域名，或者使用自己的域名 就可以把你的网站发布到互联网上。并且你可以随时回到 primer ai 的主页，查看和管理你发布的网站。扫码进群获取更多 ai 资讯。

只要输入一句话，这个工具就能生成一个完整的网站，那如果你想呢，还可以立即把它发布上线，生成这个网站，其实我只是告诉了他网站的名字，需要分成主页、社群、合作三个板块，那他咔咔咔的就给生成出来了。 配色呢，可以一键替换。这些配色方案的审美都挺在线的，像字体啊，小组件都可以按照自己喜欢的方式去调，熟练的高手还可以做出这样的交互动效， 甚至是这样的。而且呢，这些网站的功能很完备，还提供了西安男士系统来管理网站的内容。这个是 freemore 的 ai 做网站功能，是我目前体验过的建战工具中 ai 生产网站的效果最好的。 显瘦特别深的有两点。第一个呢，就是快，用他设计一个网站的速度很快，发布上线的速度很快，访问浏览的速度也很快。第二个呢，是专业，他提供了很多专业的设计功能，操作界面跟飞个马有点像，那既支持无代码做网站一些高 的效果呢，也可以写代码来实现。那不懂代码不懂设计的人，可以用它来快速做一个七十分八十分的功能完备，审美在线的网站。懂代码懂设计的专业人士呢，就可以用它更快速的做出一百分超酷炫的网站。福瑞莫上面呢，提供了很多好看的网站模板和学习案例，有很多先进的公司的团队也都在使用他们来做网站。

建站新秀 freeman 正式发布 ai 功能，无需代码，用 ai 轻松构建属于你自己的网页，快速进行站点的编写、设计及构建。 freemanai 就是的智能组件，有两百多个，一百七十多种颜色和五十多种排版样式，六千多个菜园图标快速选择 点击，可实现同时一键上线，不管是做活动，微信 就能直接给你生成网页人群图。做不写代码的程序员，也做不画图的设计师。

我最近呢用 freemore 这个工具呢，做了一个 freemom motion 这个酷的中文在线教程文档。那这个文档的地址呢？是 motion 点 freema， 点 wiki。 这个教程呢，并不是 freemom motion 官方英文文档的一个翻译，而是我根据自己的学习和使用经验 整理出来的一个完全全新的中文教程。那他呢，会比官方这个文档呢，更适合你作为一个上手 freeman motion 的一个学习资料。那目前呢，这个文档教程呢，已经更新了一小部分， 后续的内容呢，我会陆陆续续的逐步的更新 freeman 里面呢，我更新也非常方便，只要我把这个内容做完了，我直接点一下 publish， 那你通过这个文档的网址就能看到最新的一个内容了。

哈喽，大家好，今天我们来讲一下水木型动画呀，上期我们讲到像他们的 c s 写的那个 hoor 动画效果啊，我们今天使用水木型动画来对他进行改造啊， 就是做一个类似这样的效果，我们直接进入代码吧，这是这是上次的这个动画效果的代码呀，我们进去， 我们不需要这些变量了啊， 我们把它这个渲染出来， 这个 rafa 也不需要了，这两个事件先移除掉， 然后把下面这个组件删掉，下面这个也删掉，这个 user 先保留吧，我们看一下效果啊。 ok， 那就是这个页面的一个静态布局啊。 好，那我们直接使用这个水模型导入这个模型这个包啊， ok， 这里的关键部分来了，就是上期我们用的动画 是在这个 ul 元素里面的，那今天我们用水模型的话，那他这个相对的定位就不在这个 ul 里面，在力里面的，我们把力上面取一个 class name relative， 难道还是没有效果？那我们在这个力循环里面呢，给他加一个，加个模型， 给大家写个 class name 绝对定位， 给他加个边框 圆角保存， 那他现在就是所有的图片都加了边框了， 因为现在这个 motion div 它它在这个立立标签里面呢，我们需要需要的是 how 的时候呢，只显示就是 how 这个立的它的这个 motion 的 div 啊，那就是我们需要定一个变量， 比如说一个 const current， said current 带一个六十的，然后 在这个力元素标签上面写一个，就是，嗯，猫是 over 的时候呢，让它设置 current 为当前这个艾特码保存， 他还是没有变化呀，因为下面我们没有判断呐， 这个时候我们判断一下，就是说当前的 item 等等于它的一个 current， 这个时候呢，我们让它渲染这个 motion 点保存 k， 他现在就已经有了这个边框的这个效果，但是他这个是瞬间过去了，就是没有一个，就是选择性位移的一个效果。嗯，这个时候我们需要用到这个 free motion 里面有一个叫这个 loud guru 法，就 loud guru 这种技术啊，我们要用它这里，它这里有个 loud id 啊，就是这个， 我们复制这个，我们在这个模型 dla 上面加一个料的 id， 随便取个名字保存，看一下效果， ok， 他就有了，已经有了。这个位移的动画就很神奇啊，就是他需要一个 la lao 的 id， 其实这个 id 我们可以就是 使用这个 rec， 后果里面有个 user id 啊，我们用它来生成一个 id 啊，比如说控制这个 layoutid 等于一个 userid， 这样可以保证他在这个环境量是唯一的 led 绑定章上面去保存，没有没有问题啊，一样的非常流畅，只是说他没有一个缩放的动画和那个透明度的动画， 这里我就不加了，有兴趣的可以加一下。就这个代码量就对比之前的代码量就已经少了很多，之前的代码量就非常的，就是之前我需要 hover 的时候呢，获取这个元素的， 就是他距离这个 ul 元素的他的那个 top left 还要获取这个力元素的宽高啊，那现在使用这个 for motion 裤的话，就是就非常简单了，就直接所有都计算出来了。 好的，今天分享就是这里，关注我，教你更多潜能知识。

通过点击来切换不同的选项，这样的功能在我们的产品中非常常见。在 freeman 中呢，我们最简单的方式当然是直接用设计组件来实现。但是如果选项少还好，选项一多，你就需要给这个组件设置非常多的状态，同时给这个状态之间连上交互事件。 而且每多一个选项，你这个组件状态的复杂程度会呈几何指数上升。但是如果我们使用设置组件结合 off right 的方式，那么这个问题就变得非常简单了。我们只需要一个选项的小组件，然后给组件设置两个状态，一个是选中，一个是没选中。注意修改下组件状态的名称，我们在代码中会用到。 然后我们要使用 override 的功能。在文件中，我们根据有几个选项就设置几个函数，这些函数的核心是共用一个公共数据，然后通过 varian 的属性来决定主见显示的是哪个状态。 同时当点击这个元素，共用的数据呢就会被改写，只有和共用数据中对应值相等的组件才会显示成选中的状态。然后搭配上设计组件的组件内容修改功能，把每个组件的内容信息设置好， 这样我们就完成了一个可切换的标签栏的功能了。 如果我们还需要添加新的选项，我们在 override 文件中再增加一段 override 的函数代码，修改下其中的数据值，然后把这个函数覆盖到新增加的主径上就好了。 如果你也使用 discount， 欢迎加入我的 discount 频道，有任何前端代码 frame 相关的问题都可以在这里提问交流。

好，现在我们所看到的这个软件左边的这个竖条的是工具栏，上面的是菜单栏。 我们先简单的介绍一下我们的工具栏，这个黑色的箭头是用来移动图形的，这个白色的箭头是用来调整路径的一些形状，我们先举个例子。好，我们画一个正方形给他换个颜色， 他现在他这个状态是又有描边，然后又有填充的一个状态。黑色的这个选择工具我们先来拖动， 会发现他只能上下左右的去移动，但是我们选择这个白色的这个工具的之后，他四个角的形状都可以进行一个调整。我们先了解到这里，后面会比较具体的 讲解。好，现在我们来讲解一下填充和描边，现在这三个图形分别是填充和描边，然后还有描边和填充 啊，现在我们可以看一下填充和描边，点击他以后都显示着有颜色，那如果我只点击描边呢？他现在这个状态就是 填充这块是没有的，然后点击填充，然后描边这边是没有的，那如果我想要线条粗细改变的话，我们点击描边这边这有数值，我们就可以进行 粗细的一个调整。如果我想要把这个描边调整成跟旁边的这个一模一样，但是我并不知道他的这个数值的话，我们可以一键用吸管工具把它吸一下，然后他现在他的描边就是一致的，然后我们将这个 啊填充色关掉就可以了。然后填充的话，这边是我们可以点击这个小窗口填充，可以我们可以随意的去更改一下这个颜色， 这个是填充和描边的一个知识点。好，现在我们来讲解一下对齐工具。对齐工具呢，我们现在先随意的先将这几个图形打乱， 我们框选以后呢菜单栏会出现这几个小图标，这个是我们平常在做图的时候非常常用的一个工具，同学可以自己去进行一个尝试，对吧？如果我现在想要让他 全部呃左对齐，我们只需要一键一点，他就自动就会对齐，但是他现在是没有狙中的一个状态，那我选择水平狙中，嗯，然后 他就会自动对齐。啊，这是我们的一个对齐工具。接下来的一个知识点是路径查找器，当我们选择两个不同的图形进行一个叠加框选出选择第一个 连级啊，我们会发现他就会成为一个非常完整的一个图形，那我们如果选择第二个呢？啊，剪去顶层，我们会发现上面的这个图形就没有了，那如果我选择交集的话，他就只会保留中间这个图形， 那如果我选择 x 级的话，他就只会保留外面的图形，那这个是路径查找器。这个在日后我们绘制图形的时候是经常常用的，可以自己在下面尝试一下不同的形状模式会有什么样的效果。