During the year I learned Vibe Coding, I cut down the website and started practicing again.
*This article was originally published in “Vista Newsletter” No. 147 (original link (opens in a new tab)). *
Hello, hello!
This weekend coincides with consecutive holidays. I opened Claude Code early in the morning and said one sentence to it: Let’s revamp the entire vista.tw.
Two days later, the new version of the website was online. From the navigation bar, home page, course center, corporate course invitation page to free resource page, the fonts and colors have been changed, and the English and Japanese versions have also been organized together. Of course, there are still some details that need to be fixed slowly, but the general direction is already in place.
In this issue of the newsletter, I want to talk to you about this revision. On the one hand, I want to record my experience in learning Vibe Coding (opens in a new tab) this year. On the other hand, I also want to introduce to you how to use the new version of vista.tw so that it can really help you.
This year, I changed from a writer to a hands-on person
If you have read my previous newsletters, you should know that I spent a lot of time learning Vibe Coding this year.
To put it simply, Vibe Coding uses natural language to tell the AI what you want to do and let it write the program for you. You are responsible for looking at the results, judging what is wrong, and then asking it to modify it. For someone like me who has been writing for thirty years and has never been an engineer, this change is huge. In the past, if you wanted to add a function to your website, you had to find someone, wait for the schedule, and negotiate a budget; now, as long as you can clearly explain the requirements, you can start building it on the same day.
vista.tw is the best example. The predecessor of this website was a blog I started writing around 2010. I changed platforms several times in the middle, and every move was like cleaning an old warehouse. In January of this year, I made up my mind to cut off the entire old system that I had been using for many years, build it from scratch using Vibe Coding, and move thousands of articles into the new home one by one.
This year’s learning-by-doing process later turned into a book. On September 2, my 21st book “Zero Basics of Vibe Coding: Using AI to Make Websites, Apps and Work Automation Tools (opens in a new tab)” was published by Qi Feng. This book is written for friends who have never written a line of program but want to do something by themselves. The book also breaks down how vista.tw is actually deployed and launched step by step. You don’t need to understand every technical detail. As long as you learn to clearly explain your requirements, the next thing can be left to AI and automated processes.
Go to the blog to read “Learning Vibe Coding from Zero Basics” (opens in a new tab)
The website is beautiful, but visitors can’t find what they are looking for.
At this point, you may be curious: The website was just built in February this year, why did it need to be revised again in October?
The reason is very practical. Vista.tw, which was launched this year, is in the style of a literary youth magazine. The layout is very high-quality and has accumulated more than 5,000 articles in three languages. It is qualified as a brand facade. But after reading it for a few months, I discovered a problem: it looks like a magazine, but it may not give readers what they want most.
I went to look up the information in Google Search Console, and the results were a bit embarrassing. The four income-related pages on the navigation bar, namely “Services”, “Free Resources”, “Workshops” and “Works”, have not received as many visits from Google search points in the past two months as expected.
Looking more closely, the course entrances are scattered in three different places. After visitors click in, they have to go to another website and look at the sales page again before they can actually sign up. Every additional layer of connection creates an additional layer of friction, and those who are interested are likely to leave halfway through.
No matter how many articles you write, if readers cannot find the entrance when they want to find courses, free resources, or invite me to take classes, the website has only completed half of the task.
Revision concept: from a magazine to a store
So for this revision, I set a very simple direction for myself: let visitors find what they want in the shortest possible time.
Specifically, there are three principles.
First, the division of labor is clear. vista.tw is the entrance, where all course introductions, free resources, and course invitation information are placed; solo.tw (opens in a new tab) retreats to the back as the cashier, only responsible for registration, payment, and student area. Readers no longer have to jump back and forth between two websites.
Second, reroute as needed. The new version of the navigation bar is arranged according to the depth of your relationship with me: course center, free resources, articles, company invitations, and about. Whether you are here for the first time or you are an old friend who has been reading my articles for several years, you can quickly find the next step.
Third, give only one major action at a time. There is only one main button on the first screen of the homepage “View recent courses”, and there is a small bulletin board next to it to tell you which courses are open for registration and what free resources are available. I don’t want visitors to be faced with ten buttons upon entering and not press any of them.
Visually, I also gave up the original magazine style and changed it to a brighter and rounder style. The title was replaced with a round body, and a warm paper-like background was used with yellow buttons. It looks more friendly and more like a place that welcomes you in.
One weekend of revision, three things I learned
It is really fast to use AI to revise the version, but after two days of doing it, I also stepped on a few pitfalls. Well, pick three to share with you.
1. Briefings are not equal to web pages
The visual inspiration this time comes from the Course Briefing (opens in a new tab) that I recently designed. I like the bold bold text, highlighter marks, and illustration stickers on the newsletter, so I asked AI to move the composition of the newsletter cover to the home page.
As a result, after the first version went online, even I shook my head after reading it. There is a large amount of white space, the character pictures are very small, and there is almost no information on the first screen. It looks like a briefing cover. It’s beautiful, but it lacks what a website should look like.
Later, I asked AI to make three sets of homepage samples in different directions at once, compared them together, and finally chose the new version: on the left is the title, one-sentence introduction, main button and several performance figures; on the right is the “Now Open” board. The lesson learned this time is: visual ideas can be inspired by briefings, but web pages must be scannable and have a clear information hierarchy, and the composition cannot be copied.
2. AI can do things quickly, but you still have to make your own judgment.
AI can change an entire page in a few minutes, but it doesn’t necessarily know which sentence will misunderstand the reader.
For example, there was originally a section on the homepage with the title “Start for Free”, which looked very friendly. But after thinking about it, readers might think that all my courses are free, so I changed it to “find the next step that suits you.”
Like the introductory text on the first screen, AI begins by writing “I have organized the operating methods of unmanned companies into lessons that you can use immediately.” I changed the last word to “skill” because what readers want is to learn one thing, not one more lesson. There is also color matching. The original saturated blue is used in large areas, which is very dazzling after looking at it for a long time. I asked it to leave the blue only for links and small embellishments.
These are small changes, but each requires someone to put themselves in the reader’s shoes. AI makes things faster, but the responsibility for judgment still lies with us.
3. What is really slow is deployment and inspection
Modifying the code is fast, but waiting for deployment is very slow. vista.tw has thousands of articles, and it takes about forty minutes to fully build it. If you find an error after pushing, you will have to wait another round.
On Saturday, I encountered this once: when changing the URL of a book page, AI changed the path of the image, but the image file was not moved accordingly. As a result, the automatic check blocked the entire deployment. Later, I learned a lesson. Before pushing it, I would run several checking programs on my computer to confirm that there were no problems before sending it out.
In addition, I also dealt with the speed of the website. Before the revision, when using a mobile phone to open a long article with an embedded YouTube video under a slow network, it would take more than ten seconds for the full screen to appear; after the adjustment, the average article takes about two seconds, and the long article with a video has been shortened to about five seconds. Readers may not necessarily notice this improvement, but every second they wait means one less person has to press the return button.
The new version of vista.tw, you can use it like this
Having said so much about the revision process, the most important thing is: How can this website help you? I’ve compiled a few common uses.
Don’t know where to start? Let’s first look at the four starting points on the homepage
There is a section in the middle of the homepage “What do you want to solve today?”. I have divided the most common needs of readers into four types: writing papers and doing research; wanting to produce content stably; wanting AI to do things for you; and finding lecturers for your unit. Choose the one that best suits your needs and it will take you directly to the right course or resource.
Want to take a class? Go to the Course Center to see the upcoming courses
The course center will list public classes that are open for registration in the near future. For each class, you can first look at the course essence, time, location and fee on the page, and then decide whether to register. There are currently two open sessions: the third “AI Empowered Academic Research and Writing Practical Workshop (opens in a new tab)” on October 31, and the seventh “AI Content Production System Workshop” on November 14. Register before October 31 to enjoy the early bird price. If the time is not coincidental, you can also register for the class start notification, and I will notify you as soon as possible when the next class starts.
Still waiting and watching? Get free resources first
On the free resource page, there are currently four tools that can be obtained directly: AI content production system blueprint, unmanned company startup package, research integrity self-inspection Prompt Pack, and instructor AI lesson preparation self-inspection checklist. There is also a presentation library that contains presentations from my past courses and lectures, most of which are publicly viewable.
Looking for articles? Use topics and search
More than 5,000 articles are divided into topics such as AI practical applications, writing, content marketing, personal branding, entrepreneurship and profit models, productivity systems, etc. Each topic page organizes related articles together. If you want to find a specific topic, you can also search directly on the site. If you like reading notes, the “Underlined Sentences” page contains the sentences I underlined from the book, which is very suitable for reading in odd moments.
Want to invite me to class? Fill in the form directly
In the past, class invitations were sent by email, and it took a lot of time to go back and forth to confirm needs. This time I designed a new corporate lecture invitation page, listing common lecture topics, suitable candidates and past cooperative units. There is a form below. After filling it out, I will reply to you within three working days.
Read a new book? Extend your learning at the book station
“Zero Basics of Vibe Coding” also has its own book site, where you can read the full text of Chapter 1 and Chapter 4 for free, as well as supporting briefings and extended articles. If you have already purchased the book, the readers’ section is also organized here.
The threshold for taking action has really become lower.
Looking back on these two days, what impressed me most was not how fast AI can write programs, but how a writer can reorganize a website he has run for more than ten years from the inside out in one weekend.
A few years ago, such a revision would have required finding an outsourcing team, holding several meetings, and waiting for several months. What I have to do now is actually very similar to writing an article: think clearly about what readers need, explain it clearly, see the results, and revise it again and again.
This is also what I want to convey most when writing “Learning Vibe Coding from Zero Basics”. You don’t need to become an engineer first. As long as you are willing to explain the ideas in your mind clearly, AI will accompany you to implement them step by step. If you have a website or gadget that you have always wanted to do, but feel that you don’t understand the technology and have yet to get started, this book may be able to help you take the first step.
Get “Learning Vibe Coding from Zero Basics” (opens in a new tab)
Finally, I would like to ask you to do me a favor: browse the new version of vista.tw when you have free time. If you find something weird, can’t find something, or if there are any resources you hope to have on the website, please reply to me directly. This website is made for you, and your opinions are the direction for the next round of revisions.
See you next time!
Vista
Next step
Bring this topic to your team
Vista Cheng speaks and runs workshops on AI workflows, writing and content systems for companies, schools and public agencies.
