📖 新手教程

零基础也能做工具

不需要懂编程,跟着步骤走,5 分钟做出你的第一个小工具

去创作页面

跟着做,一共 8 步

每一步都有提示,别着急,慢慢来

1
💡

找到你想要的工具

先想好你要做什么工具。比如:一个倒计时器、一个颜色转换器、一个BMI计算器……什么都可以!

💡想不出来?可以看看首页别人做的工具找灵感
2
🤖

让 AI 帮你写代码

打开任意 AI 对话工具(比如 ChatGPT、Kimi、豆包、文心一言),告诉它你想要什么,让它帮你写一个 HTML 小工具。

💡不知道怎么问 AI?看下面的示例提示词

下面这些话可以直接发给 AI(长按可以复制):

BMI 计算器

帮我写一个 BMI 计算器,输入身高和体重,点击按钮就能算出 BMI 值并显示是否正常。要好看一点,用渐变背景,圆角卡片。全部代码放在一个 HTML 文件里。

倒计时器

帮我写一个倒计时器,可以设置倒计时的时间和提示文字。开始后显示剩余时间,到时间了会有动画提醒。用漂亮的颜色,适配手机屏幕。全部代码放在一个 HTML 文件里。

随机点名器

帮我写一个随机点名器,可以输入一串名字(用逗号分隔),点开始按钮后名字快速滚动,再点一下就随机停在一个名字上。要有动画效果。全部代码放在一个 HTML 文件里。

颜色选择器

帮我写一个颜色选择器,点击可以选颜色,显示颜色的 HEX 值和 RGB 值,还可以复制。界面要简洁好看。全部代码放在一个 HTML 文件里。

3
📋

复制代码

AI 会给你一段代码。把这段代码全部选中,复制下来(Ctrl+C 或长按复制)。

💡代码通常以 <!DOCTYPE html> 开头,到 </html> 结尾
4
📝

粘贴到微坞编辑器

回到微坞的创作页面,把代码粘贴到左边黑色的编辑器里(Ctrl+V 或长按粘贴)。右边会立刻显示效果!

💡如果编辑器里已经有代码,先全选删除再粘贴

编辑器长这样 👇

HTML

<!DOCTYPE html>

<html>

...你的代码...

</html>

← 把代码粘贴到这里

5
👁️

预览效果

右边的手机框里会实时显示你的工具效果。你可以试试点击、输入,看看好不好用。

💡手机上点「全屏预览」可以看到完整效果
📱

左边:写代码

右边:看效果

6
💾

保存快照

满意了就点「保存快照」按钮(或者按 Ctrl+S),这样即使关掉页面也不会丢失。

💡可以保存多个版本,随时切换回去
7
🚀

发布并分享

点「发布」按钮,填写工具名称和简介,选择分类,点确认。发布后会自动生成分享链接和二维码!

💡需要先登录才能发布哦
8
🎉

分享给朋友

发布成功后,可以复制链接发给朋友,或者让他们扫二维码。所有人都能在手机上直接打开使用!

💡链接在微信、QQ 里也能直接打开

常见问题

我完全不会编程,真的能做吗?

当然可以!你只需要告诉 AI 你想要什么工具,AI 会帮你写出全部代码。你只要把代码复制粘贴到微坞就行了。就像让厨师做菜,你只需要点菜,不用自己炒。

用哪个 AI 比较好?

推荐用 ChatGPT、Kimi、豆包、文心一言、通义千问等任意一个都可以。免费版就够用了。关键是把你的需求说清楚,比如"帮我做一个 XXX,要好看,适配手机"。

发布需要注册账号吗?

是的,发布工具需要先登录。注册很简单,用邮箱就行。不登录也可以在编辑器里写代码和预览,只是不能发布到广场分享给别人。

代码粘贴进去后预览是空白的?

可能是代码不完整或者有错误。可以回到 AI 那里,让它检查一下代码。也可以先试试点「试试示例」按钮,加载一个能用的示例代码看看效果,确保编辑器正常工作。

可以修改别人发布的工具吗?

可以!在任意工具详情页点「改编」按钮,就会把别人的代码复制到你的编辑器里,你可以随便修改后发布自己的版本。这是微坞的特色功能 —— 大家互相学习、互相改进。

发布的工具别人怎么看到?

发布后工具会出现在首页广场,所有人都能看到。你也可以把生成的链接或二维码分享给朋友,他们在手机上直接打开就能用,不需要安装任何东西。

准备好了吗?

跟着教程做,你也可以做出好用的工具!