pencil插件 vscode安装

二零二六第一个 web coding 神器出现了，它叫 pencil ai， 一个专门做 ui 设计的 ai 工具，这是一个 ai 分 镜工具，有 pencil 完成设计稿， cloud code。 写完前端代码，我们看一下实际的效果。点击登录按钮， 进入到项目的管理页面，打开其中一个项目，这个项目详情页面左侧是分镜的预览和管理区域，右侧是分镜的编辑区域，整个项目的布局和 u i 细节都非常完善。先给大家演示一下 pencil 是 怎么工作的。 首先我们要知道 pencil 工作机制，其实 m c p 就是 ai 可以 直接访问的一个外部服务，所以我们只需要在 ai 里面跟他说我们的需求，比如我让他帮我做一个 ai 脚本工具， 然后你就可以看到 color code 掉了。 pencil mcp 开始进行设计，它列出了所有图度，然后一步一步完成设计任务。整个设计过程也非常有趣，我们可以通过左边这个画板实时查看 ai 到底是怎么去进行设计的， 并且每一次设计完成之后，他都会截图确认自己的设计是否正确。等了大概一分钟，一个精细的设计稿就完成了。还有一个比较好的点， pencil 内置了一些主流的 u i 组建库，通过这些组建库你就可以做出非常规范的前端页面。接下来跟大家说一下怎么安装使用 pencil。 很多人以为只有特殊的网络环境才能使用 pencil， 其实不是的。首先你需要下载一个 bs code， 接下来在 bs code 里面找到它的拓展商店，然后输入 pencil 搜索， 然后点击 install 进行安装，这样你就可以在 vs code 里面去使用 pencil 这个插件了，同时你在 vs code 里面其实是可以去配置很多国产模型的，比如 glm， 比如 mini max 的 m， 二点一都可以。最后再分享一下我对 pencil 这个产品的一些理解，我认为它真的是一个很好的 ai 产品模板， 它不像传统的设计工具一样，不是在网页就是 app， 它直接做到了 id 里的插件，说明它瞄准的人群是独立开发者。 独立开发者做 ui 做前端的时候通常有两个痛点，一个是做的东西不好看，另一个是做的东西无法满足一些规范，比如组建按钮等等。而 pencil 做了一个很好的生产闭环，完美解决这两个痛点。在 cloud code 里，首先由 build 去向 ai 描述需求， ai 理解需求之后会转化成精细的设计语言， 基于设计语言， pencil 输出详细的设计稿，最后再由 cloud 去完成前端的页面，整个流程都是在 cloud code 里完成的，真的是一个特别好的产品体验。好，今天的分享就到这里了，如果你想了解更多 web coding、 ai 相关的好玩的事情，请持续关注我，我们下期继续。

首先声明，国内网络环境安装 flutter 并不友好，需要耐心。建议首先下载 flutter sdk， 然后解压到本地目录。接下来打开 versus code， 在 插件浏览器输入 flutter， 搜索并安装完成后输入 ctrl 加 shift 加 p 组合键，点击 new project t， 在右下角选择 locate s d k， 找到我们下载解压的 flutter 目录。接着选择 application， 回车接受默认项目名称。当初步结束后， output 的 窗口会出现如图所示信息 表示要点击 terminal 窗口，然后输入 flutter run 命令，出现图式选择提示，我选择浏览器打开，不一会就出来图式界面， 点击右下角的加号，看看 app 是 否成功响应。好了，本节教程到此结束，需要 flutter sdk 的 可以评论区留言。

用 ai 写过代码的都知道，一到界面它就会卡壳，你脑子里想象的画面呢， ai 是 根本看不见的，所以你只能不停的修改提示词，反复的跑代码。这两天在外网有一个爆火的工具 pencil， 就是 为了解决这个问题， 用法也非常简单，打开你常用的呢，是谷歌的 anti gravity， 当然 vs code， cursor 这些也都行。插件市场里搜索喷索安装，装好之后呢，它就会通过 m c p 协议连上你的 id， 这时候你新建一画布啊，你就可以用自然语言描述来生成界面了，因为是同一个 ai， 同一上下文，你不用再去截图，不用再去描述。 当然，你也可以直接导入之前的飞干马文件，哪里不对呢？直接在画布上进行修改，比如我想把整个页面变成中文，你看啊，它会自己逐个空间的去做修改，改完之后呢，你再让 ai 根据话筒内容生成代码 就可以了。而且设计文件呢，你是可以直接存在代码仓库里的，能记得管理，能分支，能回滚。当设计和代码呢，都在同一个地方被同一个 ai 理解呢，那么这个协助成本呢，就趋近于零了。你可能会说飞干马也有类似的功能，但你要知道，飞干马需要付费版的开发模式才能使用。 pencil 这个工具呢，免费。这么看啊， web 抠定之后呢，就是 web 点赞了，建议大家都去试一下，感受一下这种未来的开发方式。

相信大家在使用 ai code 编辑器时都有个困扰，那就是只有干瘪的代码页面，没有像 jamming 一 样的画布功能，可以实时查看和编程，非常的不方便。 ok， 这个困扰从现在起将彻底 say goodbye！ 最近一款应用在 ai coding 圈内火爆出圈，它就是 pencil， 完美解决大家使用 ai code 编辑器时没有画布的麻烦，重点是它免费且随意用。话不多说，这期视频茶馆将教大家如何使用这款 ai 编程神器。 首先茶馆以 vs code 来展示，打开 vs code， 导入你的项目文件，或者新建一个文件，这里茶馆新建一个空白文件，加作演 示。然后来到 vs code 的 拓展菜单，搜索 pencil， 认准这个 logo， 点击安装。安装完成后点击设置，你会看到它支持的 ai code 工具有哪些，非常多选项，有 clod code、 code code 格式、 jimmy 等等工具。 勾选自己使用的工具，这里茶馆选择 clod code， 然后打开 clod code 和 pencil 窗口，直接就可以使用了。在 clod 对 话框输入自己的需求， 但要调用 pencil 的 前提是要告诉 ai 模型，利用当前的 pencil mcp 加上自己的需求， ai 编程工具就会自动调用 pencil 来做画布实时展示了。重点来了， pencil 作为一个画布 mcp， 它还能像 figma 一 样能任意编辑内容，非常的强大， ai 抠定的效率又提高了一个档次。好了，本期 pencil mcp 教学就到这了，更多创意等待各位去挖掘，关注茶官， ai 学习不迷路！

昨天看到说这个 pencil 新推出的一版做前端设计非常的牛逼啊，今天试了一下，果然不同凡响，我给大家演示一下，大家自己体会。 这 pencil 安装也很简单，只要在这个 id 里面这个 vs code 里面的插件装上就可以了。我看了一下它设置基本上所有的 id， 嗯，还有这个命令行都可以通用。我这边只是很简单的输入一个提示词，让他帮我做一套冷酷联网的这个界面。没有多说啊，现在就开始了，为了方便我这边，他过程中我给了五倍的加速， 虽然是五倍加速，他其实本身也很快啊，这么多，好像有七个页面，还是几个页面，全部设计完，大概花了 三分钟左右的时间吧，两三分钟的速度非常非常快，而且界面设计的还可以。所有界面里面的这些内容啊，都有这个分层，大家自己看一下。 我这边点放大给大家看一看啊，里面的图层都可以编辑好，这就这就完成了。 那如果说要对某个页面进行继续修改，我想应该也很简单，只要点这个页面，然后继续输入相应的这个修改的几十次就可以了。 好，假设我们对这个页面都很满意，那么接下去我想要得到这些页面的这个代码，怎么操作也很简单，我们新开一个 agent， 然后告诉他我们对这些页面都满意，让他帮我们把这些页面转成代码， 并且存在相应的文件夹里就可以了，然后后面也按照五倍的加速来做。这个的话，相对来说 以前的一键他都可以做到，大家简单看一看就行，只是给大家展示一下从零到有页面，再到这个生成页面代码的过程，就是这么丝滑。 那么现在基本上应该到了人人都可以做这个 app 界面的这种时代了，只要有想法就可以实现。

相对于我们搞单机研发的来说，呃采用的 e d a 开发工具就是 ko 啊， ai 呀。 呃，我们现在基本上都是做 ar 处理器的开发，然后都大家都比较熟的就是 ko 进行开发，但是用久了 ko 之后，你就会发现 ko 的 调试和那个观看代码的那个界面确实并不友好，加上现在呃各类 ai 的 那个软件都已经出了，所以我们如果还在用 q 进行 s t m 三二的开发，加上 q 本进行开发的话，像这种呃效率就比较低。然后 我们现在自己摸索了一套，然后就是用 q， 用 q 版，然后配合 q， 然后再加 vs code， 伴随着 ai 进行那个开发的话，那么效率就增加了很多。 嗯，桌面上我有一个 q 工程，然后这这个工程我写了一点， 因为这个项目比较大，然后逻辑比较复杂，可能逻辑比较复杂，我采用的是操作系统的方式，就用的 boris， 然后去跑，然后跑系统的时候，嗯，发现那个看代码太繁琐了， 然后自己就开始摸索了。啊，用那个呃 vs code 的， 然后去看代码。因为以前是用呃用那个 s i 四这种软件或者代码比较工具，然后去看代码的， 然后现在 s i 四也不更新了，加上那个东西它体验也比较大，所以现在基本上代码都是用 vs code 的， 然后用 vs code 去看这个代码的。嗯，就衍生出了一个问题，就是想用 vs code 直接来写单拼接的代码， 那么写单拼接的代码呢？啊，我们遇到最难的问题就是不能用 vs code， 在 呃编辑单拼接代码的时候进行第八个啊，调试啊，查看计算器， 但是现在已经有插件可以进实现到这样的内容了。呃，我打开一个我的 m 叉，哦，好，拍错了，关掉。 那是打开 vs code， 这个是我的一个 vs code， 然后我的工作区间有个配置文件，就是已经把它配置成 s k m 三二的模式了，然后这边就是我的一些安装的这边，嗯， 我的安装了一些扩展在这里，然后进行一个 s t m 三二的开发，然后再配合。啊，同一零嘛，也就是阿里的大模型。 这个，然后进行 ai 那 个一些部分程序代码帮我编辑查找问题。啊，不漏啊，像这样就很大的提高了效率。该看我们的一个工程吧， 那这一个像星星一样的东西，就是它的配置 id 一， 然后这里面这是我项目的名称，然后代码在这边 面卡后开始，然后我们可以看到这上面有可以构建，构建就是 building， 然后就变异嘛，然后可以看到变异奖，这都是它的变异的信息， 然后编辑完成，如果没有错的话就报一次 cos， 然后有错误的话他会报也有。 然后这就是我们的一些编辑的信息，采用的什么编辑器啊？然后这个是编的一些内容，然后 rom 和 rom 的 占用量，然后剩余量是多少？然后这个还可以直接进行下载， 我这边已经配置好了下载工具接令，可，然后那个编辑的那个工具就是 s h， 其实这个可以换成 g c c 的。 今天支付宝，我这是 f 四的一个单品机，然后就是四零七，我现在下载一下， 这是下载进去的 swd 模式，然后下载了之后，这边也可以进行呃，调试。第八个就像 qq 使用 jingle 返帧一样的， 就像这个， 然后等到 bbb 连接，连接目标， 然后这是目标的一个兴趣，然后这边就有呃呃，那个全速运行吧，然后这里有弹幕调试和点物， 然后这就是我的那个，嗯，清除结束吧，我先把断点打在这里，然后程序先跑到这边 来。好，程序，现在已经到这里了，然后再到 s a 啊， s a t 文件注册话这边 啊，因为我这是做的一个呃， usb 挂载 sd 卡的一个，有这么一个功能。然后到这边，到这边之后，然后全速运行吧，会有一些新通的一些版权信息的，在这里， 这只是告诉你我可以调试。然后这边就是我的一些编辑文件，这是我最开始的信息， 然后版本号就是我的腾讯飞马版本，版本号系统频率 s b 二 s b 一 的时钟，然后 s b 卡文件系统能挂载，写入文件 设置数据，然后就，然后获取 sd 卡的信息，然后这是一个三十二级的 sd 卡，然后下面是我跑的一个任务，蓝牙的呃，触手画的一个任务。 好，分享到就先分享到这里吧，有不懂的可以呃留言，然后问我，大家一起探讨。

完全区别于 figma， 它是由提示词驱动的下一代 ui 设计工具 pencil。 我 给大家试了几个案例，带大家看看效果。 第一个是一个机器人产品官网设计，我用的 pencil 客户端接入 cloud code api 做的整个页面跟 figma 很 像，但是功能更少一点，因为它基本全靠左下角的提示词输入框。 我把需求给他之后，可以全程直播看他画图。他画图的条理非常顺，就是从上到下依次搭建，设计元素很工整，过程很解压，没有多余操作，很快页面就画好了。审美这块还是基于模型能力，这个是 color code， 用 jimmy 的 话效果会更好。 第二个测试批量绘制页面，一个商城应用多个页面，感觉它更丝滑了。开始画图之后，中间不带停的，依旧给我一种很解压的感觉。整体页面功能其实还是比较复杂的，但是产出的内容也是可用的。再次强调一下，这里 ui 审美其实是看你的模型能力，你可以调用其他模型去做。 如果不用 ctrl 客户端，也可以直接到 id 工具内使用，比如 ctrl 添加插件之后，可以直接在 ctrl 内高效调用。 但是我始终觉得科室内的用起来没客户端顺畅，并且还容易出现一些小问题。比如这里我用它绘制一个 to do list 的 首页， 它画完了，但是把产出的内容挡在了一个空白画板下面，并且中间布局有点小问题，但是修改起来很方便。 command 加 c， 然后 command 加 v， 把对应内容复制到这里，描述一下出错的内容，它可以指哪打哪，很快就修改好。 拍手的意义更多的不是设计能力有多强，而是 ai 时代下新的开发工作流一定会让设计产品开发各个智能定位越来越模糊。如果需要体验，推荐大家使用客户端，接入 cloud code 的 a p i 更加丝滑，也可以加入粉丝群与我交流。

一、天学一个 python 知识，今天我们来学 vs code 的 插件。 vs code 作为一款好用的轻量级代码编辑器，不仅支持代码调试，而且还有丰富的插件库，对于初学者用来写 python 是 不错的选择，下面就推荐几款还不错的插件。 一、 python extension pack 提供了代码分析、高量规范化等很多基本功能，只有装好这个插件才能愉快地写 python 哦。 二、 love code for python 该插件会实时展示你的每一个变量值，且能够识别 print 并自动打印，对于刚接触 python 的 同学会更加友好。三、 python preview 这个插件有个很厉害的功能， 能够实时格式化你的代码，不仅如此，还能为 vs code 切换各种皮肤。四、 swordlines 可以 给你按字母大小排序，而且还能将所有文本打乱顺序，做短文本分类的训练。清洗数据集的时候，这个工具大有用处。五、 git graph 这个工具可谓是 git 神器，堪比屁哈门内的 git 管理器，通过这个扩展，可以清楚地看见当前分支的 commit 记录和变化。六、 python snippets 这个工具可以给你提供虚拟代码做参考，而且你不用再去搜索引擎搜索实力，非常方便。 七、编辑 comments 这是一个让你能更好地编辑注事的工具，它能根据关键词用不同的颜色高亮代码片段。八、 python osc 用 generate data 这个插件能够自动生成函数的注式格式，通过 tab 键快速切换填充块，编辑相应的注式。 想要用插件学习的同学可以三连一下主帮无偿分享，想帮到正在学习拍算的宝子们。

ui 设计和开发终于不用再吵架了，因为现在设计即代码，代码即设计。是的， cloud code 又有一个很厉害的 m c p 神器，叫 pencil。 你 只需要大概写一下你的产品需求， cloud 就 会开始调用 pencil。 比如我让它设计一个放 skills 合集的网页，要用标准的苹果设计美学。你看它会开始在画布上实时构建 ui， 自动生成每一个组建图标页面。大概过了不到一分钟，一套完整的网页前端设计就生成啦，每一个组建里的信息和配色还能够二次编辑修改，真的很棒！ 体验下来，我感觉这个就是 wipe coating 和 wipe design 的 暴力合体。那要怎么用呢？来来来，直接上教程。我们来到 vs code， 在 插件里找到 pencil， 点一下安装。看到这里有个小铅笔就证明已经安装好了。但是你还需要告诉 cloud code， 让它配置一下 m c p 服务器，配置好了就能快乐 coding 和 design 了，非常简单，朋友们快去用。

大家好，今天教大家如何在 vs code 中通过 cloud code 插件调用 glm api 实现 ai 辅助编程。第一步，打开 vs code， 还没安装，可以去官网下载。第二步，安装 cloud code 插件，按 ct 二 l command 加 shift 加 x 打开扩展，试图搜索 cloud code， 点击安装。 第三步，配置环境变量， 按 ct 二 l command 加依次点击扩展 cloud code settings， 将左侧所示的全部代码写入替换 api key 即可。 g l m a p i 获取，可以在 big model 官网订阅。注意 base u r l 和密钥输入正确完成后按 c t r l command 加 s 保存。现在可以点击右上角 cloud code 的 图标使用了。 第四步，使用前设置，点击右上角 cloud code 图标，输入 config， 进入设置，勾选 disable login prompt， 关闭登录页面。第五步，开始使用，创建文件后，通过侧边栏调用 cloud code， 按照以上步骤就可以在 vs code 中成功调用 glm api 了。

给大家分享一个新工具叫 pencil， 这个工具特别强， 它能够基于我们的提示词去生成这个产品原型，感觉非常棒。这是我刚才使用提示词让它帮我生成的一个原型啊，背景有点乱，但是没关系，我们看一下它这个界面，它实现的非常的完整，这是一个健身的这个 app， 重点是这个整个的过程，它可以调用我的这个 calculator， 里面的就是 ar agent， 使用的是克劳德奥。 然后还还有一个很重点的是，我可以直接通过这个刚才生成的这个原型让它去生成应用，我们看一下它生成应用的结果， 这是浏览器里啊，浏览器本地浏览的这个就是应用结果，这是不是非常完美，非常赞的一个这个 app。 呃，这个喷子里解决了非常大的一个痛点啊，就是之前的这个就是 ai 模型，它的审美非常垃圾，然后呢，我们需要界面原型的时候就比较难去做这一块吧。呃， 目前我的体验是他的完成度非常的高，并且呢就是啊用力，就是我知道他这个后面的话，我完全可以通过这个 ai 来驱动我这个圆形设计了，这个是非常非常棒的，以后可能这个工作流要完全的改变 啊。今天先分享到这啊，稍后有新的这个新的的时候再给大家进一步分享， 然后哦，记住就这么安装的啊， ps 里收一下就知道，安装起来非常简单，它支持 ctrl 和各种各样的，就是，呃，主流的编辑器吧。好的，今天就这样。

不知道什么时候 vs 扣的不能直接下载插件包，在没有外网的环境下写代码，想给 vs 扣的装个插件， 结果发现插件市场根本打不开，有网的电脑上 vs 扣的页面上找不到直接下载的按钮了，今天就跟大家分享一个特别玄巧的办法，不用命令行，利用一个扣子工具就能轻松搞定。 第一步，获取插件信息首先你需要在另一台能上网的电脑上打开 vs code 的 插电市场的网页，找到你想要的插件，比如搜索 n f connect， 进入插件详情页后，注意看页面右侧，找到安装这部分， 把这里写的插件标识信息，比如说发布者和名称完整的复制下来。第二步，只用扣子工具生成链接， 接着打开一个特定的扣子工具网页，这个工具是其他开发者制作，专门来解决这个问题的。你把刚才复制的插件信息粘贴到工具的输入框，然后按回车，稍等片刻， 他就会帮你直接生成一个插件的下载链接。第三步，离线安装，把这个插件的文件用 u 盘拷贝到你的离线电脑上，插件安装选择从本地的安装包安装。如果你有其他的离线下载小妙招，欢迎在评论区交流。

以前我们写代码是写代码，做设计是做设计，但现在看好了，在 code code 终端里直接输入一行指令，设计一个未来感的火箭发射终端。 ai 不 仅仅是在写代码，而是在实时的渲染 布局瞬间完成。但这只是开始。所有的 ui 元素、数据与格式画面吧，暗色、模式、配色全部自动填充。这不是简单的线宽图，而是高保真的生产级界面。 无论是复杂的控制台，还是移动端的习惯追踪 app， 甚至是高大上的官网，它都能够通过自然语言理解并构建。最炸裂的功能是，选中设计稿，直接一键转换为前端代码。这不仅仅是生成， 你还可以像操作飞克马一样，拓一组建切换量，按主题调整网格渐变。以后，设计师和程序员再也不用打架了，用它直接起飞！想体验这种梦幻联动吗？还不赶紧去试试！

用 ai 写过代码的都知道，一到界面它就会卡壳，你脑子里想象的画面呢， ai 是 根本看不见的，所以你只能不停的修改提示词，反复的跑代码。这两天在外网有一个爆火的工具 pencil， 就是 为了解决这个问题，用法也非常简单，打开你常用的 ide， 比如我这里用的呢，是谷歌的 anti gravity， 当然 vs code 浏览器这些也都行， 它就会通过 m c p 协议连上你的 ide。 这时候你新建一个 ai， 同一个上下文，你不用再去截图，不用再去描述。 当然你也可以直接导入之前的飞干马文件，哪里不对呢？直接在画布上进行修改，比如我想把整个页面变成中文，你看啊，他会自己逐个空间的去做修改。改完之后呢，你再让 ai 根据话筒内容生成代码 就可以了。而且设计文件呢，你是可以直接存在代码仓库里的，能记得管理，能分支，能回滚。当设计和代码呢，都在同一个地方被同一个 ai 理解呢，那么这个协助成本呢，就趋近于零了。你可能会说飞干马有类似的功能，但你要知道，飞干马需要付费版的开发模式，建议大家都去试一下，感受一下这种未来的开发方式。

同学们，我们继续 ai 成长之路，拍摄终极片，今天我们必须学习 html 语言，好同学们，我们继续来学习 vs code， 那 么 vs code 我 们装上之后，吴老师这个呢已经是中文版的，也就说已经装了汉画包了，那么我们怎么去装这个 vs code 的 插件， 怎么卸载我们呢？这一小节呢来讲一下。首先我们看吴老师这个 vs code 呢已经装了这个 很多插件，这里装的插件，那么这里呢有一个中文版的汉画包，那为了呢就是我们来演示一下，因为大家第一次装可能是英文版，来演示一下，我们把它给卸载一下， 好，我们重新启动，这时候我们看所有的那个 vs code 呢就是英文版的了，不再是中文版的， 那么首先我们来装一下我们汉画包的，也就是汉画的插件，然后我们呢要选最后一项，这个地方呢是扩展的意思，那么我们在这里呢找什么呢？搜我们 chinese， 我们看，我们就搜到了我们 chinese 的 这个简体中文包，我们打开，然后这里呢也有 install， 然后我们点 install 安装 好，安装完成，这里弹出一个对话框，说语言改变了要求，我们呢重启，我们呢点重启，好，重新启动，之后呢我们看我们呢就变成了中文版， 那么我们还要装一个插件，这个插件呢就是 open in bro， 就是 这个插件，为什么装这个插件呢？ 装这个插件呢就是我们在写我们的 html 之后，我们在这个编辑器上点击右键，然后就可以用浏览器来打开，否则的话我们得双击我们这个文件才能用浏览器打开， 所以呢我们用它，这样呢我们后期在测试的时候会更好的用，所以我们安装一下， 我们选任务发布者和安装好，安装完成，我们可以看到这是我们新安装的这一个，还有 这个大家也知道 vs code 呢，不仅仅可以编辑 html 语言，还可以编辑其他的语言，这是大家需要知道的就可以了。好，这一小节呢，我们就先讲到这里，今天就讲到这里，谢谢同学们的观看。

这个酷搜插件真的很好用哦，它能把代码的记录，就是你改了哪些都记录在这，然后你可以回滚。 这个呢就是说我们经常改代码，没有提交 get 之前很容易，哎呀一顿乱改，把好的改坏了，那么它可以在这里能找回来，可以自己回滚，也可以恢复，还挺好用的。最牛逼的就是它还有一个 m c p 的 功能， 这个 m c p 呢更厉害，它可以让我们原来可能还要自己去点，那么直接让大家自己去找代码，把搞丢的代码找回来，很方便。