跳转至主要内容

Build with AI

AI 时代的路径改变

去年我在 AI 的辅助下,做过 两个 Shopify 相关的谷歌浏览器插件,一个用于店铺装修时快速生成 Shopify 主题的预览链接,另一个用于检测其他 Shopify 网站使用的是哪款主题。

值得一提的是,在此之前我并没有学习过开发浏览器插件,也没有观看其他教程,直接通过跟 AI 加持的代码编辑器进行沟通便能实现。也就是说,以前的路径可能得自己先花时间精力学习和掌握之后,才能做出对应的成果,而现在有了 AI 工具,要做的主要是表达自己的需求。

除此之外,春节前我还做了 Shopify 图片免费压缩网站,并且 一天之内做出了 5 款安卓手机 App

Up 主知识背景

熟悉我的同学应该知道我主要创作 Shopify 相关的教程,平时也会选择性地接一些 Shopify 主题修改和优化的需求,主要是偏前端的。

对于后端和服务器相关的知识,我其实也有所了解。之前做的 Shopify 教程选题 征集网站、增强版主题的授权验证,以及最近针对在线聊天应用做的 订单验证和定制信息收集,都涉及到后端服务。

不过此前我没有开发过需要完整后端模块(例如:账号注册登录、数据库和文件存储等功能)的应用。春节期间我尝试性地做了一个笔记 App,虽然用到了用户注册登录和数据库存储,但我感觉它并没有解决实际的需求痛点,大概率不会每天都去使用它。

完整实用的作品

在线聊天应用

春节后某天,因为我对象的公司不允许使用微信,我想到其他上班族可能也有类似需求——工作期间偶尔需要与同事或朋友聊天,但使用微信等软件会让人感到紧张(像在偷偷划水摸鱼),担心被领导或同事一眼看出。

我突然想起之前尝试做过的一个在线聊天应用。大部分人每天工作中都会使用浏览器,于是我花了大约两周时间不断优化细节和添加功能,最终完成了一个令人满意的作品。现在我们每个工作日都会使用它进行通信,避免了工作期间使用微信的尴尬。

在线聊天应用功能清单

网页监控截图系统

网页截图对比监控系统

AI 技能分享

我一直有在关注 AI 相关的信息,并且希望把它应用到工作中来。因为我已经自由职业 4 年左右,相对来说时间安排可以更自主,但是很多在上班的同学就没有那么多时间精力去关注和实践了。

我在做这个聊天应用的过程中积累了一些技巧和经验,想把它们分享出来。我也留意到了一些博主在制作和出售相关的课程,我完全也可以做一套类似的课程来出售,但我觉得似乎不必,因为我的工作重心仍然是 Shopify 相关,大概率你关注我也是因为 Shopify 教程。

SVIP 增值计划

所以我决定将 AI 编程和 Shopify 相结合起来,后续发布一些教程,直接对 SVIP 开放。如果你目前还不是 SVIP,可能会觉得还不是类似的套路,但是对于已经是 SVIP 的同学来说,却是一种增值,不需要再付出额外的费用,也不需要购买其他博主的课程,登录博客就能查看对应的内容。

我希望实现让 SVIP 会员既能学习 Shopify 相关的教程,又能掌握 AI 编程的一些技巧,通过自己动手和动脑,解决其他非工作直接相关的需求。毕竟,除了工作还有生活。而且在这个过程中你所掌握的新技能,没准也同样能够应用于工作。

后续我会发布相关的教程,并且链接在这个页面底部,敬请关注!

第 239 期 Shopify 产品页面品牌风点击一键复制折扣码卡片分享
通过 Bilibili 观看本期 Shopify 教程通过 Youtube 观看本期 Shopify 教程 点击一键复制折扣码是很多 Shopify 店铺都需要的热门实用功能。关于折扣码复制相关的教程,之前我发布过 Shopify 产品页多个折扣码一键复制功能。 增强版 Shopify主题 中也已经自带了折扣码复制功能,而本期将要分享的教程算是一个补充,不论你使用增强版主题还是其他主题,都可以跟随教程添加使用。 效果预览 电脑端 手机端 因为很多 Shopify 个人卖家或者中小公司很难既具备设计资源有具备技术资源(个人卖家难以既懂设计又懂技术,而很多小公司只有设计师没有前端员工),所以我分享这类教程给大家使用。 以前制作一项功能需要自己首先学到比较熟练的程度才能做出效果,或者花钱付费请人做。而现在只需要提供一张截图,然后根据你自己的需求进行优化。 也就是先从你的同行品牌网站上截取功能效果,通过 ScreenShot to Code 识别截图获得基本的网页代码,再通过 AI 代码编辑器通过自然语言沟通进行优化,比如让它添加点击按钮时的折扣码复制功能
通过截图直接生成代码 不懂编程也能做网页 店铺装修或借鉴同行网站必备
随着 AI 工具的发展,现在即使你不懂代码也能够通过截图做出网页了。对于非技术人员而言,了解 AI 工具的使用流程以及如何表达自己的需求,比代码本身更为重要。 当你掌握了这项技能,在进行店铺装修或者借鉴同行网站的时候会非常有用,而且 AI 通过截图生成网页的费用大概 3 毛钱左右,而请人做一次需求最起码也得上百,成本不是一个级别的。 本期教程以 Shopify 图片压缩网站 为例,分享如何在电脑本地安装和使用 ScreenShot to Code,并演示如何通过截图生成代码以及放在 Shopify 网站上使用。 除此之外,下一期教程还会分享如何通过跟 AI 编程工具沟通,为你生成的网页添加功能。 当一切搞定之后,我会教你如何部署上线。这样你将不仅了解整个流程,并且最后会拥有一个属于你自己的图片压缩网站,还可以绑定自定义域名。 点击查看演示视频。会给出需要使用的工具以及使用方法。 需要用到的工具
通过截图生成网页代码之后,使用 AI 代码编辑器添加功能 可用于 Shopify 网站
这篇教程展示如何使用 ScreenShot to Code 工具将网页截图转换为可用代码,并通过 AI 代码编辑器为 Shopify 网站添加功能。非技术人员可以轻松创建图片上传压缩工具,或实现产品页折扣码一键复制功能。整个过程只需在本地安装相关工具,通过AI 代码工具添加所需功能。