--- author: 用AI發電 date: '2026-03-01' guest: '' layout: post.njk source: https://www.youtube.com/watch?v=Lh5deM1npBQ speaker: 用AI發電 tags: - ai-e-commerce - landing-page-design - ai-customization - product-development - shopify-ai title: AI赋能电商：从产品发想到高质感Landing Page的打造 summary: 本次直播课程探讨了如何结合AI工具（如Shopify AI和Gemini）与商业洞察，高效制作高质量电商落地页。嘉宾林森分享了其物理产品“星流中 Flow Clock”从概念到市场推广的历程，并详细介绍了产品特点。独行则深入讲解了电商落地页的设计原则，包括文案撰写、设计参考寻找，以及如何通过AI客制化Shopify免费主题，打破传统客制化成本高的限制，强调了产品价值呈现与引导购买的重要性。讨论也触及了AI摄影的局限性及实体产品开发的不易。 insight: '' draft: true series: '' category: ai-application area: tech-engineering project: [] people: [] companies_orgs: - 平静科技 - Shopify - WordPress - HTC - EC - 华为 - OPPO - OpenAI products_models: - 星流中 Flow Clock - Gemini - ChatGPT - WooCommerce media_books: [] status: evergreen --- ### 直播开场 **独行**: 我这好像断掉了，不知道为什么我重进一次。好了。 **独行**: 好，我先下去了。好好诶。 **独行**: 之前的那个请问你现在看到我是一个还是两个？两个？嗯，变成那个哎可以了，一个了，一个了，一个了。好好好，hello。 **独行**: 小西瓜，我我都退不出去了。hello Alice，hello，我们来等大家一下，大概等个三到五分钟，然后我们就开始看一下。我来把那个PowerPoint分享一下，分享分享。看一下林森，你这次就是直接，哎，林森，你这次就是直接讲了吗？就不PowerPoint了。 **林森**: 好啊，我等一下就是直接用讲的，然后再让大家看一下这个官网的样子。 **独行**: 好，我来我来给大家window，我来share这个window。应该要放个音乐，让他放个爵士乐之类的。 **林森**: 对了，来点音乐应该不错啊。 **独行**: 看一下，hello Andy。嗨，佳佳明好，应该是这样念。好，嗨奥斯卡，然后炒西瓜也在。Andy有分身，可能可能是跟你遇到一样的游戏问题。好嗨，大家，我们大概等一下五分钟，然后等其他人进来了之后，我就会开始。因为我们现在直播有八个人，给大家看一下。 **独行**: 然后大家现在人都在哪里？在亚洲吗？还是在欧洲、美洲？美洲应该是还没有，我们现在这个美洲的，他们还没有起床。Jimmy你好，Max你好。我其实之前有一些要跟那些美国的同事工作，然后因为我们欧洲这边跟美国的时间，那个时间很难对上。就是我们通常要下午三点的时候，他们才开始上班。尤其是我记得那个同事是住在那个波士顿，然后我每次都要，而且就是你传讯息给他他还不一定会马上回。你大概就是什么事情要问他，就是隔天早上你才会看到他昨天几点半夜传的讯息。那所以说跨国工作其实也不是那么的开心。 **独行**: 我也有听过有朋友他们讲说，你可能跟好几个时区的人工作。有时候你就是要很奇怪的时间起床，那就是一个很困扰的点。所以我们选择这个时间呢是对亚洲跟欧洲比较友善，但是对美洲就没有那么友善了。所以美洲的朋友你们就只能跟你们说声抱歉。好，有十个人的，我就是等这个数字跳到十，我就要开始。好，我要开始了。我看我把那个PowerPoint在这里好就开始。 **独行**: Hello，大家我是独行，然后我们在场的有Vincent。欢迎大家来这一次 **AI** **Shopify** 制作高质感 **Landing Page** 的直播课。我们这个直播课其实是这样子，我们想要带大家看一下怎么样从真实的商业场景，你去搭配 **AI** 作为一个电商的 **Landing Page**。我们这一次搭配的主要有两个，一个是 **Shopify**，然后另外一个就是我们会有一些 **AI** 工具，我们等下会介绍。 **独行**: 这一次的流程是这样子，我们会先请林森介绍一下他们家的产品叫做**星流中 Flow Clock**。我们其实这个整个 **Landing Page** 就是我们两个一起把**星流中**的 **Landing Page** 做出来。首先是介绍产品。接下来我们再会讲说这个 **Landing Page**，尤其是电商的 **Landing Page**，它是怎么制作的？因为电商的 **Landing Page** 跟一般可能跟官网或是你没有购物功能的官网，其实还蛮不一样的。最后呢我们会有一个 demo，就是 demo 给大家看，说用 **Shopify** 加 **AI**，怎么样去客制化你的布景主题。最后的最后，我们会有QA。所以如果你有任何的问题，你可以在 chat 里面就是把你的问题问出来。那就事不宜迟，我们就请林森来介绍一下我们的 **Flow Clock 星流中**，我先停止分享。 ### 林森介绍星流中 Flow Clock 产品 **林森**: 好好嗨，先跟大家打个招呼。我是林森，也很感谢独行的邀请来参加这个线上的直播。我是这个**平静科技**的创办人。因为这个是我在踏上创业之旅后想做的一件事情，就是我希望大家就可以知道为什么这个公司叫**平静科技**。 **林森**: 我先介绍一下我的背景。我的背景是我是在软件工程师，然后在手机的行业工作了将近有二十年。这二十年到后面的话，其实大部分都是从事跟软件架构有关的工作。我待几个工作的公司大概是像 **HTC**、**EC**、**华为**、**OPPO**这样比较大的行业领导公司。 **林森**: 但也因为在这些公司工作了很长的一段时间，在这个产业工作很长的一段时间。我一直到后来，因为我们也知道手机的发展，它横跨了从原本只是一个通讯工具，到后来功能越加越多，一直到后来它变成无所不包的一个设备。同时呢我们也因为这样子，我相信大家都有感觉，我们的专注力越来越弱，越来越容易分心，越来越难保持说我们怎么样好好做一件事情的这种状态。 **林森**: 我认为说科技应该不应该是像手机那样频繁打扰你，而是应该是让人家感觉以人为本，然后让人家感觉平静舒适的。这就是我这个公司**平静科技**的由来。我在这个手机产业工作很久，所以我对于手机怎么样去剥夺人的注意力，这个非常有感觉了。因为毕竟手机每次功能的进化都会跟这个有关。 **林森**: 所以我因为我自己也在中间痛苦了好长一段时间，我到底要怎么样去保持我的专注？所以说我后来决定做一个自己的产品，这个产品能够帮助我来做专注。实际上在更早之前我试过了，有一个方法叫**番茄工作法**，这个应该是大家都听过。目前的话，如果你要运作这个**番茄工作法**的话，你可能有几种方式。一种是你可以去买一个计时器，通过计时器来运行这个**番茄工作法**。 **林森**: 另外一个方式呢是你可以用手机的 app。手机的 app 它建议你可以随时下载一个 app，来跑这个工作法。但如果你用手机来跑这个的话，你会发现很神奇的是，一旦你每次需要去操作它的时候，你就会反而会被它影响。因为你每次一打开手机，你就会分心，一打开手机，你的时间就会过得很快，你甚至都不知道自己过一段时间，自己不知道自己在干什么。所以我设计一个独立的设备，独立的产品。这个产品呢是能够单独去跑独立的去跑这个**番茄工作法**。因为这个工作法已经被证明是很有用的嘛，那就是设计的初衷，我想要这么一台产品。 **林森**: 好，所以我就踏上了创业之路。那话不多说，我就让大家看看这个**星流中**就是我设计的产品。他平常的情况下，他是一个时钟，但是我只要按下一个按钮，他就能够进入我这个叫专注模式，就可以执行这个**番茄钟**了。 **林森**: 好，为了让大家保持平静的那种感受，所以我在显示上特别采用了这个**电子墨水屏**。大家可以看到这不是假的，你刚刚看到它还跳了一下，这看起来很像是纸。它实际上它看起来就跟纸一样，有很高的对比，而且很广的视角。所以它放在你桌上的时候呢，你看着是非常的舒服，而且它不会发光，所以它不会像一般的屏幕一样让你感觉到不舒服。那这是我觉得说一个让你专注的产品，它必须要保有的一个特质。 **林森**: 这是第一个，就是说首先它采用**电子纸**的屏幕。大概就是说你看像比如这个页面，这个是专注的模式嘛。这个专注的页面实际上已经包含了所有**番茄工作法**执行的要素。那我要怎么开始呢？我再按下这一个按钮。这个时候呢它就会开始倒数二十五分钟，并且每一分钟它都会更新一次画面，在时间结束的时候提醒你。 **林森**: 好，所有你要做的事情就是你只要按下这个按钮。因为二十五分钟的专注时间结束之后，它就会进入休息。休息的时候你一样，你也会知道它会出现一个提示你现在是短的休息或长的休息。然后你只要按下这个按钮，它就会自动自动地帮你去做倒数。那这不像说如果你要使用一般的计时器的话，你必须要频繁地去做设定等等的。 **林森**: 好，这里还有一个特点是大家有没有看到这个发亮的这一条。这条是我特别发想设计的，因为它的灵感来源是来自于广播节目的这种外面的这种unair的灯箱。我把这个概念放在这个产品里面，我这个叫做**专注灯 Focus Light**。它主要的目的就是为了让你在专注的时候呢去提醒你，比如你面对自己的时候，你可以看到它橘色灯亮着，仪式感会给自己提醒，随时提醒自己我现在还在专注的状态中，不要太容易分心嘛。 **林森**: 另外一个好处是，比如说我在这样子使用的时候，周边的人也都能够看到这个灯是亮着的。这个灯是亮着就表示我在告诉别人我在专注，然后请你们不要打扰我，因为这样可能会中断我的思考，正在做事情。好，那个就是这个产品的几个特点。当然还有一些特点，我不在继续强调。 **林森**: 我跟你们介绍这些，其实一方面我我确实想要呼吁，尤其是在这个很多干扰的时代里面，其实大家的专注力是越来越难保持。但实际上呢，不管在任何时代，在资讯时代，或者说现在我们已经要进入 **AI** 时代，我都认为说个人的专注能力也就等同于你思考能力，永远都会是这个时代，无论什么时代最重要的事情。所以保有你们的深度思考是非常重要的。这就是我介绍这个产品的几个大项。实际上这也是我们在设计这个官网呈现上面的一些重要思路了。你必须要对你的东西很了解。 **林森**: 当然你自己的产品你肯定会很了解。但是你要怎么样透过你你想的可能很清楚，但你要怎么样透过一个好的表达跟设计去设计一点，官网其实是非常不容易的一件事。我必须要说这个产品设计完之后，它又过了好一阵子，我们才慢慢摸索出我们要怎么去表现它。因为这个产品是先发想了，先设计的，先研发了之后，然后才去想怎么样去做行销。好，我打开我现在目前的官网给大家看一下。 **林森**: 好，那这个就是目前我们用 **Shopify** 设计来的官网。可以看到就是我们首页这个hero page，这个会有首页的大图。我们这一页主要是我们希望强调就是说当你专注的时候，实际上你是进入你自己的这个空间里面，然后外界的这些变化其实都跟你没有关系，因为你在你自己的任务里面。 **林森**: 好，接下来就是对每一个讲过的这些部分的一些产品的，你必须要挑选几个最重要的东西放在你的首页。首先我们这个产品最重要是一个**电子纸**的显示。所以我们会有这个是一个**电子纸**的介绍。我们强调一下**电子纸**是让你的视角回归自然，你在什么角度你都能看到它。所以你不需要为了看清楚它，特别调整你的角度。那这是一个section。 **林森**: 再下一个我们要强调的就是你的专注是一种可以被看见的状态。如同刚介绍我们这里这个**专注灯**是能够提醒他人，然后让你的专注是可以被尊重的。再就是因为它运行是以**番茄工作法**为基础来设计的嘛，所以我们让专注跟休息都变得更轻松，让你的休息是没有内疚的。因为休息才能够帮助在下一个阶段持续而且更好的专注。所以我们这边都有，除了有这个图片，就是这个照片以外，我们还有这些特别撰写这个文章去做介绍。 **独行**: 好。 **林森**: 然后最后呢在几个大的特点，刚刚这些像这个心流状态，或者说**电子纸**，这实际上我们在针对一些特殊的我们想强调的部分，我们会特别做一个页面去说明。然后最后在首页的下方，为什么强调是为什么你要选择**星流中**？好，那我们就进一步了解，点进去之后呢，就会进到产品的购买页面。 **林森**: 这个页面产品的这个页面呢，它会说的更清楚，它会有产品的照片，还有以及产品的更多的一些更详细的一些描述。你为什么要选择这个产品等等的这些功能，还有一些我们想要再一次强调的这些地方。 **独行**: 好好。 **林森**: 我包含说这个时间可以自己设定，然后你可以自己去，因为我这个不是内建电池的，你实际上可以去采购，可以去买一八六零的电池来使用。好，最后呢再一个产品规格，我们可以按下这个收折业务去看这个产品的规格，还有这些常见的问题。这个就是我们我们在需要基于 **Shopify** 这个上面去设计制作的这个 **Landing Page**。整体来说就是我们是在这个大的框架里面去做这些调整。 **林森**: 还有一点可能要稍微强调的就是经验分享。这些你看到的这些照片，都是真正的**商业摄影**，就是实物去拍摄的**商业摄影**。这边的照片没有使用 **AI** 产生，并不是说我们不想做，而是说我们之前尝试过，想使用 **AI** 来辅助在照片的呈现上。后来我们发现说 **AI** 是没有办法达到我们想要的在商业正式的官网上面呈现的效果。所以大家看到的这些照片，全部都是真正**商业摄影**去拍摄的，没有任何 **AI** 的成分在里面。 **林森**: 好，在这个导购，应该说在这个CTA下面，我们还有一些我们早期合作，就是体验的一些influencer，他们提供给我们的一些使用心得。在这里要注意到，这边是一个轮播的配置。以上就是我的这个产品的介绍以及官网的介绍。也希望你们通过这个方式来跟大家介绍我的产品，让你们对我产品有多一点了解。 **林森**: 同时呢大家也可以去想一想，自己不管在平常的工作，或者说现在你们的专注力是不是能够通过这种方式再集中一点，减少被打扰的机会。当然如果你们对这个产品有一些兴趣的话，我们也可以再多聊聊。但是刚才的介绍主要是一方面大家了解这个产品，一方面大家去了解这个产品的特点，以及这个 **Landing Page** 是怎么去考虑怎么去被设计出来的。好，我的部分我先介绍到这边，谢谢。 ### 电商 Landing Page 制作核心与 AI 应用 **独行**: 这是Vincent。我觉得Vincent最难能可贵的是说他的产品是实体的。其实大家要知道做实体的产品其实风险非常的大。尤其Vincent又是做比较属于科技类的产品。所以你可以想想他花了几年，大概两三年去做第一个model。 **林森**: 这个产品从开始做到现在已经将近三年了，从第一个POC出来大概做了一年吧。 **独行**: 哇，所以其实很不容易。然后我有看过Vincent前几个model到最后这个版的model。就是你可以想得到说他因为他跟我们做写程式不一样，写程式是你可能几秒钟一分钟就可以有个新的版本。可是做实体的东西你就可能下一个打样打完可能要等一个月或等三个月，这是实际实体产品它的规模，它的进程。好，那我今天想要，谢谢谢谢路遥，路遥下单了，我们会给你购买链接别担心，不用急。 **独行**: 我今天我现在想要跟大家一个问题。因为大家看到了**星流中**的 **Landing Page**。那你可以想一下说这个所谓的电商 **Landing Page**，它应该要有什么功能。每个人的答案可能会不一样。我这边可以告诉你我这边整理出来的很简单，就是两件事情。 **独行**: 好，来分享一下我的屏幕。就是两件事情了。首先他要展现产品的**价值**。你注意我的用语，我不是说产品的功能，也不是说只是讲产品，而是产品的**价值**。所以假设你去买游戏，买游戏，我当然要告诉你我先告诉你这个游戏有多好玩，然后接下来告诉你这个游戏怎么玩。但是有时候你会看到有的 **Landing Page** 它会落入个陷阱，它就一直跟你讲很多很多的功能。它没有告诉你说我这个产品是做什么的。所以我认为你要先去告诉大家说，你这个产品它的**价值**是什么？看是它要解决什么问题，还是说还要让你更happy，更开心。 **独行**: 另外一个电商的 **Landing Page** 最重要的要素就是它要**引导购买**。**引导购买**是这样子，它要做到一件事情，比如说它要引导你去点一个按钮，你就可以进到购物车，或者是说它要直接让你进去结账。这都是在电商的 **Landing Page**，它要有的功能。要功能，它就是必须要有后端系统去支撑。大家比较常用的就是 **Shopify**。那如果说你在 **WordPress** 的话，你就自己要去安装一个 runtime，叫 **WooCommerce**。 **独行**: 好，这个 **Landing Page** 呢，你现在知道它要具备哪些功能了。那我们来看一下 **Landing Page** 要怎么开发跟设计。首先它开发跟设计有三个点。我们其实一开始我们在做这个 **Landing Page** 的时候，是花了很多时间在发展文案。发展文案我觉得就像Vincent讲最重要的事情，就是你这个人要非常产解你的产品，然后你才能把那个文案发展出来。 **独行**: 首先你去，其实就是像是一个sales，你去介绍一下你这个产品它是什么。然后呢再把这个产品，它把它的特点一一的列出来。我们那个时候是用的什么文字呢？比如说Vincent他是他去参加很多活动，他会像大家这样子在外面演讲。我觉得林森他作为一个很聪明的地方，是他把它录下来，把它转译成，把那个detection把它转成文字。我们一开始就是用这些文字把商品的文案变出来。然后也有用 **AI** 发展出几个版本。所以第一个就是文案，所以第一个绝对不是先做设计，而是先先做文案。 **独行**: 第二件事情就是你要去找一下设计的参考。设计的参考是这样子，你要去看一下说你的这个你的这个产品，它同性质的产品里头，它有没有类似的設計。如果比如说你可能要卖，假设你要卖台币一万多块。那一万多块的同性质的产品，它的网站是做什么样子。然后你去找一找，你大概要做到什么程度。做了这些事前研究之后，你才去开始去做这个网页。所以其实最忌讳，就是你一开始就去跳去做设计。因为这样子你会不知道从何开始，你也不知道你的终点是什么。 **独行**: 好，那既然是这样子，大家也不要把 **Landing Page** 想的太复杂，我这边就直接提供给大家一个公式。这个公式呢我们在我们这个课程，我们这个直播课结束之后呢，会把这个公式给提供出来。这个公式是这样子，简单来说，**Landing Page** 你可以把它分成四个部分。 **独行**: 首先呢就是我们刚刚讲的它会有一个hero的部分。hero部分简单来说就是我要想出一句话，或是说我要想出一个一个一个一个主张，去可以去吸引大家。但这个主张它不一定，它可能不一定要解释所有事情。但是它要能反映说你要怎么样去，你要这个产品它大概是什么样子。我们刚才你有看到我们刚才有一个主张，那我给大家看其他的例子。比如说像我们用爱发电这边，我们的主张就是用爱用 **AI** 把想法变现实。 **独行**: 你可以看到像 **OpenAI**，它有自己的主张。所以这个hero section它其实就是一个hook，就是把你的让你有兴趣，把你的注意力抓住你的注意力。好，那你把大家的注意力抓住了之后呢，接下来你就要讲，你真的就要讲功能了。它到底要达成什么目标，你要有哪些功能？那有什么核心的要点？我们在这边我这边也有特别放的一个点，是评论的部分。这个使用者评论，我觉得它在制作它在制作的内容，尤其是内容的部分很重要。 **独行**: 它最好是来自于真实的回馈，而不是你自己用 **AI** 乱写出来的。因为这个真实的回馈，它会反映出来说这个产品它有可信度，而且这些人最好是真实的，你可以找到的人。比如说我觉得在**星流中**这个评论的地方，user review的地方，它做的很好的地方是这些人他都是实际存在的人，他们是真的像林森，他们是真的去找这些人去试用这个产品，然后把他们的心得讲出来。像梁文轩也是我们社群的成员，所以这些人都是真的找得到的人。哎，这边就已经不关乎怎么样使用 **AI** 了。因为这边比较最重要的事你要证实这人是真人。 **独行**: 再来就是常见问题跟行动呼吁。常见问题比较是你可以放在这边，你也可以像Vincent那样子，你可以放在产品的页面，就是产品。我们产品有一个购物车介绍的一个页，你可以放在那边，你不一定要放在首页。然后最后是行动呼吁，就是你请大家去购买或是去下载这类的事情。所以简单来说，你就可以用这个，我我基本上就是直接用这个公式，跟林森一起把整个 **Landing Page** 一块一块做出来。 **独行**: 这边我想要给大家看一下找参考的部分。就是当你要去找参考，你真的是要去看一些同性质的产品，或是说可能类似科技的产品它怎么样去做的。我这边其实我们这边主要参考了两个网页，一个网页是 **Remarkable**，这也是一个**电子纸**屏幕的产品。另外我也去参考 **iPhone**。我告诉你们我这边可以拆解出来给大家说我大概什么东西用在什么地方。例如说呢我们这边有没有看到，我们这边其实是有一个特效的。 **独行**: 你看到有这个雾化的这个特效，就是变成文字变粒子这个特效。我们其实是学 **Remarkable** 他们的这个网站。在 **Remarkable** 这个网站呢，他们其实用了蛮多网站的特效，我们觉得有一些不错，我们就把它学了起来。比如说向它向它致敬。这边这个特效他们改掉了，好吧，抱歉。 **独行**: 好，那我们比如说你喜欢比如说，你很喜欢这个版面，我们就会像我的做法，就是我把它给截图下来。那如果是它是有动态特效的，比如说像这个它就有动态特效，我就会把它录影，我就会把它屏幕录下来。那这个就会是很重要的reference，你用这个参考的话，你就可以去跟 **AI** 聊，让 **AI** 把你的这个规格把它定义出来。我等下会示范，但首先你必须要去找一些，你如果真的是脑子没有想法的话，你真的要去找很多参考。因为设计这件事其实本身就是在做在做事前研究。 **独行**: 好，你有了这些参考之后，接下来下一步我们就要开始做了。但是这边呢我想要跟大家讲，为什么我们要用 **AI** 做这件事情？因为一定会有人问，说为什么不要就买布景主题就好了。我们一开始也在讨论这件事情。我自己的经验，因为我之前接蛮多案子都是在做 **WordPress** 案子。我其实就是帮我的客户买布景主题的那个人。我发现布景主题它有一个问题，就是很多时候布景主题它有一些固定的版面，那是你没办法改的。 **独行**: 比如说它有一些地方，它只能让你去调颜色，然后或者是字形，但是它可能不让你去上传你自己的字形。很多布景主题的问题就在于说你不是每个东西都可以客制化。再来就是还有一个问题，就是说其实如果当你想要客制化的话，客制化的费用其实是很贵的。这边是我找到一个价目表，蛮近期的一个价目表。 **独行**: 这个价目表呢，你可以看得出来，比如说我们买一个布景主题，可以从免费的买到贵一点的布景主题。但是如果你请人家客制化的话，你大概会需要几千美元。这边是用美元来算，千到百美元不等。可能在中国或台湾会比较便宜一点。但基本上就是你要做客制化都要花蛮大一笔费用的。所以 **Shopify** 的案子一直都有人在接，很多网络上可以找到很多 **Shopify** expert，很多人是靠这个吃饭的，因为它的客制化费用真的很高。 **独行**: 那你自己去刻用 **AI** 去客制化，我们这些这些设计的话，它有一个好处，就是说你之后你想要重复使用是很方便的。就是假设它不会说你在这个地方把这个区块设计完之后，你没有办法用。你可能你可能装一个新的布景主题，它整个被洗掉，你就没有办法用了。你你可以使用的。因为你在 **Shopify** 这边生成的样式的layout，它都会是一个code形式。只要是code形式，它就是可以复制跟重新使用。 **独行**: 好，我们这边的解决方案是什么呢？我们我跟Vincent在讨论的时候，我们在想说有没有什么方法，就是我既可以突破布景主题的限制，然后我又可以不要花那么大的费用或者精力时间去重新做整个布景主题。我们的解决方案是这样子，我们直接去用官方，就是 **Shopify** 官方做的免费布景主题。因为那个会是官方他自己做，而且他一直都会更新。 **独行**: 有的布景主题是这样子，你去跟第三方买了之后，它可能某一年它就不更新了，它不更新就会出很多问题。比如说 **Shopify** 的布景主题会有一些安全性的地方，治安的地方它需要定期更新。那你的你的布景主题就没有办法跟上，或是有一些新的功能。那我们如果用它官方的免费的布景主题，然后拿来修改的话，那你就你就一方面你有一个骨架可以用，你有一些原生的功能可以用。那一方面呢你也不用再整个重做一遍，然后你也可以去使用官方的来更新。好，那就是我们用 **AI** 客制化布景主题的原因。 ### AI 工作流与示范 **独行**: 好，那接下来呢我想要来跟大家讲一下这个工作流。这个工作流是这样子，它可以用在什么地方？**Shopify** 可以用，**WordPress** 也可以用。因为 **WordPress** 现在有 **WordPress AI**，所以如果你有 **WordPress** 的订阅的话。那 **Shopify** 这个 **AI** 它是你只要有任何一个层级的订阅，你都可以用它的 **AI**。所以其实你可以直接用最低的方案就可以开始用了。它我觉得还蛮划算的。 **独行**: 那 **Shopify AI** 它有什么特点呢？它跟 **ChatGPT** 有什么不一样呢？首先是它的这个 **AI**，它其实是有特别特化过的。它写出来的 **Shopify** 的code比较不会有bug，而且它非常的聪明，我们等下可以见证它有多聪明。我们这个工作流是这样子，首先你要把这个需求转成文字。接下来你先用 **Shopify**，你先把第一版做出来。然后最后你再看你是要用 **ChatGPT/Gemini**，还是你要用Claude你去做微调。所以我们通常都会去经过这三步。 **独行**: 好，那接下来呢我要来示范给大家看，我先分享另外一个链接。来走到了Interesting。嗯，找到了这里。就是假设你现在找到了一个你很喜欢的效果，而且它是非常聪明的，它那个动效果也做很好。有一个很喜欢的效果，我给大家看一下这个效果，这个效果蛮有趣的。这个效果的重点呢，它是在有一个卡片，它可以像闪念的卡片，**Flash Card** 那样子一直去换。你可以把你的内容去整理在卡片里头，我觉得这个特效很有趣，所以我就选了这个特效。 **独行**: 这个特效我就把它用屏幕录影把它录下来。注意我这边是使用 **Gemini**，为什么要使用 **Gemini** 呢？这边真的就是他们家的model做的很好的地方。**Gemini** 它解读影像的内容解读的非常精准。我试过其他的其他家，我觉得 **Gemini** 是做的最好的。就算你只是用免费的这个额度还是可以有同样好的效果。我这边讲的，我这边下给他的是我希望他精确描述影片的这个效果跟运作，但是你不要让他写code。我告诉他说，你帮我转换成一个prompt的叙事叙述。 **独行**: 为什么不要让他写code呢？因为我们想要给 **Shopify** 写。**Shopify** 它最厉害的地方是，无论你给他的是动态效果，还是给一些很特别的layout，其实他都做了出来。我大概试了几十个不同的版面，他都做了出来。如果你给 **Gemini** 或是给 **ChatGPT** 写蛮容易你会写出有bug的code。那个code在 **Shopify** 是没有办法用的。所以我们这边主要是要让他去描述需求。 **独行**: 你看我这边描述出来的一个范本是这样子，它讲的非常的清楚。它帮我建立一个卡片，层叠滚动的区块。这边一定可能会有人问说，那我是不是一定要使用英文？我这边试的效果是中英文都可以。中英文出来的效果都一样好，所以你其实可以使用英文，简体中文，繁体中文都可以。好，那假设我把这个prompt把它复制起来。 **独行**: 我到我们的，我这边有一个很空白的一个布景主题，要使用 **Shopify** 的 **AI**，你就是要在这边它有一个Generate。很不明显，这个Generate就是使用它的 **AI**。大家看一下我的右手边，右手边这边呢，你就可以去输入。那我就把刚刚这个prompt我就可以直接输入了。你输入了之后，它就会开始写。好，那我先直接给大家看成果。 **独行**: 这边呢就是我我刚刚做出来的一个成果。我想要让大家在那个预览的页面去看。你看它这边做出来的成果，就是它把一个很空白的样式先帮你做出来了。然后 **Shopify** 它最棒的地方是你自己去客制化，你可以去，它会给你一些选项，它自动就帮我产生了一些选项。大家看右边，比如说你可以去调整这个卡片你要多宽多高，它都帮你做出来了。 **独行**: 好，那 **Shopify** 他这边呢，其实他本来如果你刚刚生成好的话，你其实还是可以请他再做一些微调。但是如果你不小心把它关掉了之后呢，那个微调的选项就会不见了，就是那个prompt就没有办法来下了。那怎么办呢？当你遇到这个状况，你想要再微调，比如说我们想要微调什么？我们想要让每张卡片都不同的颜色。 **独行**: 那你要想要的微调的话呢，你可以进去找 **ChatGPT** 还是 **Gemini**。大家可以看到，我就直接把全部的code给他。code是长在这里，在右手边，你可以看到一个那个点code，进去之后呢，你把这个code整个复制下来给他。这个code都不是我写的，这个code都是全部都是 **Shopify** 写的。它就是会帮你存在block这个资料夹里头，然后连你的prompt他都会保留。你就可以把这个整个复制，然后在 **ChatGPT** 你跟他说，我我现在这个手机的版面，你要帮他调成单栏的，或是说你想要有色彩什么的，你都可以跟他讲。 **独行**: 我做的是我请他，我请他让我可以调整卡片的色彩。调整完之后，它就会给你一个一整包的code，你就把它复制再贴上贴回去，然后它的结果就会出来了。你看我们调整，我们原本它是没有色彩的，调整完之后，你就可以去调整它的背景色跟文字的颜色。那这个就是从 **Shopify** 的 **AI**，我们在做这些布景主题的客制化的方式。我们几乎每一个我们刚刚讲的，我们刚刚给大家看官网的那个**星流中**的官网，几乎每一个都是这样子做出来的。 **独行**: 不好意思，我先停止分享，我贴错官网贴了旧版本。顺便给大家看一下之前的官网是做成什么样子。我觉得大家很好奇，就是说到底为什么会让Vincent决定，就是要决定说要去请摄影师拍。比如说我们我们其实就是把这个布景主题，免费布景主题跟我们自己客制化的去混用。比如说这两个栏位，这个就是我用 **Shopify AI / ChatGPT** 做出来的。这一块也是，然后这一块也是，这个动效也是这样做出来的。它在屏幕上录影有点卡，但它其实实际上很顺滑。 **独行**: 所以是这样子，你选了一个免费的布景主题，你就可以去还是可以去使用它的功能，你不用什么都自己做。然后你可以这样子去把它mix起来，它还是可以是一个很好看的，很好看的一个官网。好，那我因为Vincent他前面有提到，就是说为什么要为什么要请，就是我们后来就是Vincent他后来请了一个摄影师，我们想给大家看一下前后对比可以吗？ **林森**: 可以啊，可以。 **独行**: 好，就是那个前后的对比真的非常巨大。你大家可以看得出来为什么就是真的是请摄影师，他的好处是什么？就是比如说我们我还是我还是跑到刚刚的那个，我还是弄错等我一下。Page就是我们一开始Vincent，他是自己拿摄影机拍。我不能说他拍的不我不要得不要得这个评价，我们不我不要，我不能说你拍的照片差，我觉得你拍的有些照片都蛮有氛围的。 **独行**: 但是我我发现我发现跟摄影师的比起来，因为我觉得摄影师他的照片出来是很有一致性的。可是我们素人会拍，就是说我们不知道要怎么样让那个当一整组的照片，看起来真的就是像同一个collection，同一个系列，包括他的调色，然后他的氛围。这个真的就是摄影师的专业。如果说你要完全就是用 **AI** 做这件事情的话，我觉得现在你说它用 **AI** 还是有点难度。你可能就是要真的会花很多很多的时间。 **独行**: 好，我找到了。那这个就是我们之前的做的一个版本，我们内容都还没有放，我们那个时候内容最后还没有放上去，我们先做一个样子出来。像这一张就是 **AI** 做的，这张是前面这个产品的照片是Vincent他有拍。然后我把它合成到一个 **AI** 的背景，这个就是难上加难。这个也是有，难上加难，这样看起来很漂亮。可是你会发现就是说，像这张也是Vincent自己拍的。其实Vincent还蛮会拍照的。就是说你真的要跟专业的摄影师比起来，你你会发现那个差距是看得出来的。 **独行**: 我们还有一个问题就是说有一些重要的摄影师，他还可以提供一些重要的思考。比如说他可以让你去，他可以帮你去发想一些不同的场景。比如说我们我们如果是自己拍的话，我们就想不到说还可以去调这么刁钻的角度。还有这一张，这张是我最喜欢这张，可以印成海报。这张也是我们如果素人去拍，我们可能不会想到说这个原来这个场景可以这样布置。它几乎就等于它几乎就像是一张时尚杂志里面的形象照了。所以这种形象照，我我个人是觉得其实找摄影师会比较好。 **独行**: 我们可能用 **AI** 能做的，用 **AI** 能做目前比较能做是说你可能有一些产品的，你可能要有些产品的那个小照片，你可能想要让你可能把它光影修一下，一些小修小改，我觉得大概是没问题。实际的。可是如果说明森他们这个他们的产品，它会有很多刁钻的角度。那个角度是你只要一用 **AI** 去让他换个角度，它可能还蛮可能会跑掉的。目前遇到的问题都是这样子。好，大概就是这样子。我觉得大家有没有什么问题，或是有没有想要想要去问林森的？ **独行**: 我先那个把我的分享拿掉。 **林森**: 好。 **独行**: 谢谢路遥说那个Vincent的摄影很棒了。我自己要问我自己想要问Vincent，如果大家没有问的话，我来问一下。我现在问一下，就是因为我跟你讲，我们两个合作的流程。会不会有英文版本和外文版？林森想到回答一下。 **林森**: 会我们是先把中文做好之后，然后才会再做。我们在做英文版本。 **独行**: 哇哇路遥帮你卖。 **林森**: 哇，谢谢路遥，我们先做中文版，然后再做英文版。因为 **Shopify** 的多语系也是要切。起码你要先做好一版，然后再把它切出去嘛。再加上就是整个设计其实包含很多很多，你要怎么呈现你的产品的思考在里面。所以说在这个过程中，其实就花了蛮多时间去做整理嘛。那可能也许不同不同语言的表达方式它可能又不一样。所以我觉得一次做一个语系的版本会比较好。一次如果说一次做两种语系，那可能要考虑的事情会很多。 **独行**: 迪问了一个很棒的问题，我可以回答一部分，然后一部分我想要也想听听看林森的想法。就是已经购买布景主题并上线网站，如果用这个方式客制化，会建议在免费还是在付费的布景主题呢？我觉得是这样子，就是你现在已经有用。我我以一个设计，我以现在一个设计的角度来告诉你就是如果你已经有一个付费的，你现在在用，那你就继续用。然后你因为其实我们刚刚用 **Shopify** 做出来的这个code，它其实是你可以自己去备份。它就是他。 **独行**: 你就算买了新的布景主题，你也可以把这个code重新再使用。它基本上就是完全是符合 **Shopify** 内部的规定的。但是如果说你想要换布景主题的话，那你就要去，你就要真的要去规划一下。因为你换的布景主题，你一旦你换的布景主题，你前面设计的一些参数，它都会被洗掉。对的对的对的。除了除了你原本那个除了它原本的一些功能之外，它只要是你前端，你又比如说什么是参数呢？比如说颜色，然后颜色，你用哪些颜色的色票，那个蛮可能会被洗掉的。 **独行**: 或者说你自己有添加了一些什么粗体，自己的设定，那可能会被洗掉。除非是你把它变成 **Shopify** 的那个global setting，就是它有一个品牌的设定。你可以如果你怕被洗掉，你可以通通都坐在那个品牌的设定那边。我想听听看Vincent的想法。 **林森**: 好，我个人是觉得还是要看说你现在的布景主题，它到底有什么东西是你你你一定需要的就是你脱离不开它的。那因为像这个 **AI** 就是算法里面的 **AI**，主要是针对针对它那个大的框架里面去做做 **AI** 的这些模块变化等等的。但是它对于整个布景主题，我至少我没有感觉它很容易地通过这种 **AI** 的方式去做修改了。 **林森**: 所以如果如果你没有能力去改整个布景主题的话，那可能是布景主题优先。但你如果说有办法在一个很基本很阳春，现在就像我这个这个官网是用免费的布景主题做的。然后你有办法通过在这个基础上面，通过你自己的整理，或者说 **AI** 的帮助去做到你要的效果的话，那我觉得移回来也是可以的。就是移回来。只是说你抛到抛回去免费的布景主题可能有有一些工作量。 **林森**: 但是我想在这个问题我我我跟独行之前也讨论过了。我们我们是觉得说如果你能够掌握像像比如说我们我们制作的这个过程的话，其实免费主题加 **AI** 就已经能够帮你做到很多很多事情了。它不一定要不一定要去买。这是我的建议。 **独行**: 我我觉得这个免费主题，它其实还已经蛮好用的。就是说我现在我先讲一个很实际的事情，就是说我们讲我们讲你的产品的价位好不好？就是说一般的免费主题，如果你的产品的价位是大概可能我我我用美元来讲好了，可能一百美元以下。那我觉得我觉得基本上都做得出来。可是在一百美元以上，你的你的产品开始一百美元，可能八十或一百美元以上的话，你就要去思考说我要怎么样把更好的质感做出来。 **独行**: 那个更好的质感，就来自于说你看我们就做过一大堆，就做有的美的动画，那个那个真的是需要，那个是必要的。你那个不一样的，你的那个layout设计就变得必要的，你的动效变得必要的。然后你好漂亮的照片变得必要的。那就是所以你就得要去思考说OK那我到底要怎么样才有办法做出那个质感。我们这边的首次学习是因为像Vincent，它有一些技术能力，我们这样都会用 **AI** 嘛。 **独行**: 然后你有一些技术能力一点，你不用说真的倒很精通。因为你看我刚刚示范的，我也没有跟你讲他的程式语言，那写什么，他就是完全没有，你基本上就是你只要掌握那个流程就做得出来。所以你就要去思考说我要花哪些effort。那客制化大概就是这么贵。那你可以去外面问一下，他客制化的钱是多少。但如果说你要自己做的话，其实免费布景主题加就像Vincent加免费布景主题加那个 **AI** 其实就还不错。你们选用的林森，这可以吗？这可以问吗？就是路遥问的一个问题，是否可以就是分享一下你用哪一个布景主题？ **林森**: 就是它，就是这一个。其实它免费的主题也没几个，你上面叫对，就没几个。 **独行**: 我我个人推荐的是你去选你选一个素一点的。因为素一点的最好客制化。就是如果你选了一个，就是说它什么颜色什么东西都是固定的。或者说它的那个版面，你就只能用那种很浮夸的那种版面的话那个不好客制化。最好客制化是那种清汤素面那种那种布景主题。就是很简洁的那种，然后你要加什么东西就很好加。 **林森**: 对，像像这个主题，这个主题基本上没有什么会动的动画了。就是会动的东西你可能都要靠你自己做动图拍影片这样子。那但是但是你可以看刚的demo里面看到它有像这种非同步卷动，或者说像粒子效果，甚至是那种随着你的scroll拉大的这种效果。这种效果在这个布景主题里面都没有。所以如果你单纯就用那原本的主题做的话，会很素非常素很平。那但是有了算法的 **AI** 的帮助，就让这个主题完全不一样。所以就就像独行讲的，你要你可以从一个很素的主题，再加上你的创意，就可以把它变得很不一样。 ### 产品预购与问答 **独行**: 好，我看到一个很重要的问题，我把它置顶一下，已经开始预购了吗？ **林森**: 我们这个月三月都会预计开始开启预购了。然后会在五月预计会在五月多开始上市。所以大家如果有兴趣的话，那个可以在官网官网官网有一个留email的地方，大家可以在那上面上面留下email。那预购开启的时候，我都会通知大会，通过email通知大家。 **林森**: 我必须要讲，就是因为一路走来就很多，那真的是很多朋友的支持。所以在预购的价格会会会比我们这定价优惠很多。其实就是感谢大家。因为真的从零开始做一个产品，尤其是这种硬体的产品，非常不容易。那就是也很感谢大家愿意愿意就是支持，而且等我好一阵子的，等了我真的好一阵子。我经常被问到底什么时候要上市。我也很希望能赶快把这个东西拿到你们面前。所以请大家请记得去帮我填一下预购的那个通知的email。 **独行**: 好，Vincent，还有一个问题在问你。 **林森**: 好，我看到了。时钟的APP版本，事实上我没有做这个app版本。因为就像我刚前面介绍这个痛点，就来自于说我我就是不想用手机。因为我只要用手机，我所有的计划都会被破坏掉，所以我都没做。这个app说我一开始就是朝着实体的独立的产品而去的，所以我没有去特别做这个APP的版本。 **独行**: 我觉得它有一个好处。因为我我因为我自己有在用**番茄钟**，它有个最大的好处是说，因为现在**番茄钟**就是要么就是app版本，要么是网页版本。然后你会不小心去点到别的东西，你会不小心就是啊我要看一下点一下这个，然后你就你就陷进去了。那就有点失去**番茄钟**的用意了。我觉得Vincent那个好处是说它的**番茄钟**就是它的这个 **Flow Clock**，它就是一个实体的。然后你随时就提醒自己说，我现在正在工作，现在在休息。真的真的差很多，体验起来是真的差很多。 **林森**: 我还要讲一件事，就是如果你用做APP的话，你你你你想要看到你目前的状态，你都需要去打开手机嘛。那姑且不论分心这件事情，打开之后，你还有很多很多的手需要去操作嘛。就像这个就是我一直开着。就像这个就是一个独立的装置加这个墨水。就是**电子纸**的话，这个资讯很清楚，就摆在你桌上，你可以随时知道还有多少时间，然后你现在是什么状态。 **林森**: 包含说，比如说这个是我今天的目标等等。我想做八次，我做了几次等等。还有这个这个要show off一下，就是我这个我已经做了五百三十四个了，我已经做了五百三十四个二十五分钟了。就比如说像这样的讯息，它应该它应该平常就是放在呈现在你想看到的位置。那如果你做APP的话，你想看这些东西你得突破很多障碍。那这就是我想要解决的问题之一了。 **独行**: 好，谢谢林森。我们来看下一个问题，不好意思，时间有点超过我们。如果如果大家如果有事情可以先走，但我们还是会有录音。迪问说，请问 **AI** 目前能辅助的只有区块的部分吗？如果是网页网站页面框架部落格页面功能需要整个重新设计。 **独行**: 好，我告诉你一件事，Andy我告诉你就是他，他能做到的是什么？就是假设比如说有些东西我们用 **AI**，有些东西是 **Shopify**，他自己不给我们碰的。比如说他有一些电商的一些logic，就是你可以去你 **Shopify**，你会发现它是被锁起来的，这是他不给我们弄的，所以这个东西你就没有办法用 **AI** 改。 **独行**: 还有就是比如说它的页面功能，它的页面假设是假设你讲的是很核心的功能。比如说我我可能什么自动自动抛文，就是那种就是你可能每个每个礼拜一都抛一次这种东西，就是这种它那后端功能它是不让我们碰的。你主要碰的是比较前端的部分，就是比如说这个页面怎么呈现，它的内容怎么呈现。还有一些动画，然后你可以去调整的是说OK我我在遇到什么版面，我的我的这个区块长什么样子之类的。只要是前端的功能它都可以变，但后端的东西甚至涉及到他的资料库跟他商业逻辑都是没有办法的。好，大概就是这样子。想要这样回答到你的问题吗？ **独行**: OK，我想要给大家看，就是我们现在如果你要预购的话，你可以点这个预购链接。那我们就可以你可以添加你的email。然后Vincent他发布产品的时候呢，就会把email寄到你的信上。好好谢谢。嗯，对，好嗯，好。 **独行**: 如果没有问题还有问题吗？看一下，看起来是没有了。好，如果没有问题的话呢，我们这个课程呢就是我们今天的直播课程呢，我会会有一个比较简短的版本，我会把它再重新发布到我们的 **AIUIUX**。这个是那个课程的课程的另外一个section里面你可以看得到。就是我们会有一个关于 **Landing Page** 的章节。如果你对Vincent的产品**星流中**非常感兴趣的话呢，其实我们接下来还会再录一期podcast，Vincent会用一个小时的时间再完整的给你介绍一下。没有啦，我们会聊一些 **AI** 吧。好了，谢谢大家，谢谢大家的参加，谢谢谢谢Vincent，全部都是Vincent赞助的，谢谢Vincent。 **林森**: 没有没有，谢谢独行这一段时间的帮忙。 **独行**: 好，那就祝大家周末愉快啦，拜拜。 **林森**: 好，拜拜。