通过截图生成网页代码之后，使用 AI 代码编辑器添加功能 可用于 Shopify 网站

随着 AI 工具的发展，现在即使你不懂代码也能够通过截图做出网页了。对于非技术人员而言，了解 AI 工具的使用流程以及如何表达自己的需求，比代码本身更为重要。 当你掌握了这项技能，在进行店铺装修或者借鉴同行网站的时候会非常有用，而且 AI 通过截图生成网页的费用大概 3 毛钱左右，而请人做一次需求最起码也得上百，成本不是一个级别的。 本期教程以 Shopify 图片压缩网站 为例，分享如何在电脑本地安装和使用 ScreenShot to Code，并演示如何通过截图生成代码以及放在 Shopify 网站上使用。 除此之外，下一期教程还会分享如何通过跟 AI 编程工具沟通，为你生成的网页添加功能。 当一切搞定之后，我会教你如何部署上线。这样你将不仅了解整个流程，并且最后会拥有一个属于你自己的图片压缩网站，还可以绑定自定义域名。 点击查看演示视频。本期会给出需要使用的工具以及具体使用方法。 需要用到的工具

通过 Bilibili 观看本期 Shopify 教程通过 Youtube 观看本期 Shopify 教程 点击一键复制折扣码是很多 Shopify 店铺都需要的热门实用功能。关于折扣码复制相关的教程，之前我发布过 Shopify 产品页多个折扣码一键复制功能。 增强版 Shopify主题 中也已经自带了折扣码复制功能，而本期将要分享的教程算是一个补充，不论你使用增强版主题还是其他主题，都可以跟随教程添加使用。 效果预览 电脑端 手机端 因为很多 Shopify 个人卖家或者中小公司很难既具备设计资源有具备技术资源（个人卖家难以既懂设计又懂技术，而很多小公司只有设计师没有前端员工），所以我分享这类教程给大家使用。 以前制作一项功能需要自己首先学到比较熟练的程度才能做出效果，或者花钱付费请人做。而现在只需要提供一张截图，然后根据你自己的需求进行优化。 也就是先从你的同行品牌网站上截取功能效果，通过 ScreenShot to Code 识别截图获得基本的网页代码，再通过 AI 代码编辑器通过自然语言沟通进行优化，比如让它添加点击按钮时的折扣码复制功能