---
url: https://sugarat.top/weekly/2024-10-13.md
description: >-
  ① bolt - AI驱动一站式的应用开发 ② WebChat - 同网页在线聊天 ③ 一年一度的 js13kGames结果公布 - 13KB 大小的游戏
  ④ 新的 CSS logo？ ⑤ TS 类型体操练习 ⑥ 100+ 免费独特的 SVG 图标 ⑦ TutorialKit - 交互式教程创建
---

# 视野修炼第105期 | AI驱动全栈应用开发

欢迎来到第 105 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

\[\[toc]]

下面开始本期内容的介绍**ღ( ´･ᴗ･\` )比心**。

## 🔥强烈推荐

### [1. bolt - AI驱动一站式的应用开发](https://mp.weixin.qq.com/s/SbilYh8j7JOcNeFC-hBcVw)

[StackBlitz](https://stackblitz.com/connect/41692973) 出品的基于浏览器的 AI 辅助开发的工具。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/cce3adbdec12ec50e54038a684bf220c)

咱们来实现个人机对战的五子棋！

> prompt 如下：使用Vue3实现一个人机对战的五子棋，棋盘大小20\*20

![](https://cdn.upyun.sugarat.top/mdImg/sugar/750ab24bf4160a697a14e835b01c29cc)

真的 牛逼，十几秒钟，自动创建每个文件并编写代码，编写完自动运行，下面是效果。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/7c8064c7d324fcfb5712f991a0710a05)

一次性生成的落子算法是随机的，咱们尝试让它改进一下算法。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/168af03362e5669745631e76c38ce9d4)

下面是改进后的游戏效果：

![](https://cdn.upyun.sugarat.top/mdImg/sugar/2c30cc50b493a46a7e1baea38d8d7dfb)

只能说很牛逼了，以后这种 demo 都不用网上抄代码了，直接生成 过程清晰，随时"动动嘴"就改进。

平台还支持一键部署，直接给部署到 netlify 上

链接为：https://musical-smakager-13b9dd.netlify.app

大家可以访问试玩！

![](https://cdn.upyun.sugarat.top/mdImg/sugar/e7ec627dfb0a2498a80997dde63f8680)

### [2. WebChat](https://github.com/molvqingtai/WebChat) - 同网页在线聊天

一个浏览器插件，可以让你同访问同一网页的用户进行在线聊天，无需注册。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/18391931671393c28218470f6e89cf49)

*看网页资讯，交流神器，内容支持弹幕的形式在网页上展示。*

### [3. 一年一度的 js13kGames结果公布](https://js13kgames.com/2024/blog/winners-announced) - 13KB 大小的游戏

> 从今年提交的 187 个参赛作品中选出，每个参赛作品都装在一个 13 KB 的 zip 文件中。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/36586cae26cba169c0f65e55a3d01979)

网页点开即可体验。

下面是 TOP 1 的作品介绍：

![](https://cdn.upyun.sugarat.top/mdImg/sugar/272aa7c34c9c1e3a7877ed7fa1c66fc8)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/b7e14a99ed66fc801def18d1a3ec29a9)

这些小游戏都挺有趣，虽小但一点都不糙。

*13KB 中就实现了！非常的NB！*

## 🔧开源工具&技术资讯

### [4. 新的 CSS logo？](https://mp.weixin.qq.com/s/Vh8Z51eOgY7K83Z8JuZLQA)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/55796f695945a579f02c1afe94b248c8)

### [5. TS 类型体操练习](https://typeroom.cn/problems/all)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/8c4023bbdbff50c58464ba6414f41588)

### [6. 100+ 免费独特的 SVG 图标](https://spectrums.framer.website/)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/2bebf9719c0d048e5e2086a44d71924d)

### [7. TutorialKit](https://tutorialkit.dev/) - 交互式教程创建

TutorialKit 是一个开源工具，可让您为 UI 库或 Javascript 框架创建交互式代码教程，而无需实现必要的用户界面或底层逻辑。

底层基于 StackBlitz WebContainer API 驱动

![](https://cdn.upyun.sugarat.top/mdImg/sugar/38f4b27d49e7e4e927f8eab5567112b9)

*值得收藏，以后打磨在线教程的时候可以用上。*

## ⭐️强力推荐关注

> 周刊部分内容来源如下渠道，推荐大家关注。

* [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布
* [云谦：MDH 前端周刊](https://sorrycc.com/mdh/) - 前端资讯和分享
* [童欧巴：前端食堂](https://github.com/Geekhyt/weekly) - 你的前端食堂，吃好每一顿饭
* [前端 RSS](https://fed.chanceyu.com/) - 根据 RSS 订阅源抓取最新前端技术文章
* [值得一读技术博客](https://daily-blog.chlinlearn.top/) - 每天进步一点点，每天分享有料的技术文章！
* [FRE123 技术周刊精选](https://www.fre321.com/weekly) - 技术周刊精选推荐信息流