How to Launch an Application Website in 22 Minutes Without Technical Skills (AI Coding with Bolt and Lovable)
- David Kuo
- Jan 22
- 8 min read
Updated: Jan 22
如何在 22 分鐘內推出應用程式網站—不需任何技術背景
Have you ever wanted to launch a service or business that requires a website but didn’t know where to find technical help? Maybe you were worried about being overcharged, couldn’t evaluate the quality of work, or lacked a technical co-founder to get started. Watching others bring similar ideas to life while your dream remains unrealized can feel discouraging.
您是否曾經想推出一個需要網站的服務或業務，但不知道去哪裡找到技術支援？也許您擔心被收取過高的費用，無法評估工作的品質，或因缺乏技術合夥人而無法啟動。看著別人將類似的想法變成現實，而自己的夢想停滯不前，這種感覺或許令人挫折。
This is where the no-code movement comes in. It empowers non-technical individuals to build an initial working prototype or even a fully functional first version without writing a single line of code. By using intuitive tools like drag-and-drop interfaces or AI-powered automation, you can quickly communicate with potential customers, gather feedback, and turn your idea into reality.
這正是 無程式開發運動 的核心價值。它讓非技術背景的人能夠在不寫一行程式碼的情況下，打造初步可運作的原型，甚至完整的第一版產品。透過拖放式介面或 AI 驅動的自動化工具，您可以快速與潛在客戶溝通、收集回饋，並將您的創意轉化為現實。
******
Why Now? Why Launching a "Not Yet Perfect" 1st Version of Something is Critical / 為何要行動? 為什麼建構一個"尚未完美"的第一版是很關鍵？
Do you know why having a working prototype—even if it’s not perfect—is critical to success? The purpose of an early version isn’t to scale or serve millions of users. Instead, it’s to validate your idea and uncover critical market insights. A prototype helps you learn which features customers don’t need and which ones are must-haves.
您知道為什麼即使不完美的原型也對成功至關重要嗎？早期版本的目的並不是擴展規模或服務百萬用戶，而是 驗證您的想法 並挖掘關鍵的市場洞察。原型可以幫助您了解哪些功能是不必要的，哪些則是不可或缺的。
EXAMPLE / 舉例
Take LINE as an example. When it launched, it focused on stickers—a feature competitors mocked or ignored. However, in the mobile era where time and convenience are paramount, LINE’s stickers provided users with an easy way to communicate visually without interrupting their mobile experience. This insight helped LINE dominate the messaging market."
以 LINE 為例，剛推出時，他們專注於「貼圖」功能，而競爭者對此嗤之以鼻。然而，在行動時代，時間與便利性至關重要，LINE 的貼圖讓用戶能夠以視覺方式快速溝通，而不會中斷使用體驗。這一洞察最終幫助 LINE 成為即時通訊市場的領導者。
******
How to Build Your Dream with No Technical Background / 不需要技術背景，也可以開始建構自己的夢想:
Step A: Get to Know the AI Coding Tool in the Market / 步驟A: 認識目前市面上可用的工具
Two leading no-code platforms, Bolt and Lovable, make it easy for non-technical founders to create application websites. Here’s how they compare:
兩個領先的無程式平台 Bolt 和 Lovable，讓非技術背景的創業者輕鬆建立應用程式網站。以下是它們的比較：
Tool A > Bolt ( https://bolt.new/ )
Strengths / 優勢:
Bolt is designed for speed and simplicity, making it ideal for users who need to launch functional applications quickly. Its drag-and-drop interface is intuitive, and its AI-powered automation accelerates workflows.
Bolt 專為快速與簡便設計，特別適合需要快速推出功能性應用程式的用戶。其拖放式介面直觀，AI 自動化功能加速工作流程。
Best For / 適用對象:
Small businesses, startups, or individuals creating MVPs (Minimum Viable Products).
中小企業、新創公司或是想開發 MVP（最小可行產品）的個人。
Weakness / 劣勢:
Limited advanced customization options compared to Lovable.
與 Lovable 相比，自訂功能選項較有限。
Tool B > Lovable ( https://lovable.dev/ )
Strengths / 優勢:
Lovable focuses on creativity and user experience, offering extensive customization options for design and layout. It’s perfect for projects requiring unique branding and detailed user interfaces.
Lovable 著重於創意與用戶體驗，提供豐富的設計與佈局自訂選項，非常適合需要獨特品牌形象與精緻用戶介面的專案。
Best For / 適用對象:
Designers and businesses looking to build polished, visually engaging applications.
希望打造精美、視覺吸引力應用程式的設計師與企業。
Weakness / 劣勢:
Slightly steeper learning curve compared to Bolt.
與 Bolt 相比，學習曲線略高。
Step B: Check Out How These 2 Tools Are Similar or Different and Decide Which One To Try / 步驟 B: 實體比較這兩個工具的相識及差異，並決定使用哪一個工具來嘗試
Thank you to the amazing YouTubers for using the same requirements and AI prompts to generate results with both tools side by side.
感謝這些了不起的 YouTuber，使用相同的需求和 AI 提示，同步比較這兩款工具的生成結果。
>> Comparison 1 / 比較 1
AI Prompt Used / AI提示句子
I want to build a task app similar to Trello with a drag and drop interface
>> Comparison 2 / 比較 2
Prompt Used
I want to create an app where a user can upload a video like a mp4 or a link (like youtube, instagram, tiktok) and when they do there will be a button that allows them to click and when they click an action happens.
That action will be the button calls a webhook that we will provide at a later time, but for now lets use test data.
So when the user clicks a new container with text will appear and the upload box will disappear.
There will be a button that says upload new content.
.....
>> Comparison 3 / 比較 3
Step C: Follow the Video to Build Your First Web Application / 一步一步的更隨影片的講解，來學習建構自己的第一個網路應用網站
Lovable ( https://lovable.dev/ )
Bolt ( https://lovable.dev/ ) Demo by Kevin Badi
step by step demo / 每個步驟展示:
building recent popular Cal AI function to track daily intake of each meal by uploading photo.
每個建構一個用AI算每天餐點照片的熱量、蛋白質! 以模仿最近火紅的Cal AI
Function Demo / 展示功能:
photo image upload
compare intake goal
show calendar
connect to OpenAI model to analyze each photo
******
FAQ / 常見問題
Q1: What Functions Can You Achieve Using These Tools / 有哪些功能在這些工具可以實現的呢?
You can build a web application with a user login function and a user backend, where all information is stored in a database. Additionally, the application can connect to large language models like OpenAI or Claude for data analysis. All the code can also be pushed to GitHub for storage and version control.
您可以建立一個具有用戶登入功能和用戶後台的網頁應用程式，所有資訊都可以儲存到資料庫中。此外，該應用程式還可以連接大型語言模型，例如 OpenAI 或 Claude，進行數據分析。所有程式碼也可以推送到 GitHub 進行儲存和版本控制。
Q2: What is the best way to start? You can begin with one of the following approaches / 如何開始是最好的方式？您可以從以下兩種方法之一開始
Option 1: Just Do It / 直接嘗試
Have an Idea in Mind: If you already have an idea, simply register for a free trial on one of the tools (Bolt or Lovable). Use a simple AI prompt and watch how the tool builds and turns your idea into reality in just a few minutes. You’ll see clickable functions like menus, upload options, or input fields that generate responses seamlessly.
有想法就行動：如果您已經有一個想法，可以先註冊其中一款工具（如 Bolt 或 Lovable）的免費試用，然後輸入簡單的 AI 提示，看看工具如何在幾分鐘內將您的想法變成現實。您將看到一些可點擊的功能，例如菜單、上傳選項或輸入欄位，並可生成相應的回應。
Option 2: Follow a Tutorial / 跟隨教學操作:
Alternatively, you can follow one of the videos shared in this blog post. These step-by-step guides will help you replicate the process and achieve similar or even the same results.
或者，您可以按照本篇文章中的教學影片逐步操作，看看是否可以達到類似甚至相同的效果。
It’s a lot of fun, and for those without a technical background, no-code tools finally make it possible to turn our ideas into reality. / 這是一件非常有趣的事情，對於沒有技術背景的人來說，無程式工具終於讓我們可以將自己的想法變為現實。
Q3: Why am I sharing these tools with you all / 為什麼我要與大家分享這些工具？
Waiting of 2 Years
I have actually been waiting for tools like these for more than two years since ChatGPT was launched. Finally, in the past few months, these tools have become solid enough for non-technical users to try and bring their ideas to life.
其實，自從 ChatGPT 推出以來，我已經等待這類工具超過兩年。終於，在過去的幾個月裡，這些工具已經成熟到足以讓非技術背景的使用者試用，並將自己的想法變成現實。
My Personal Life Purpose
has always been to help people realize their 10x potential and achieve their desired state. Many of the people I’ve had the most fun interacting with—whether through my teaching, mentoring sessions, or speeches—are individuals who want to solve problems using technology. However, a good portion of them haven’t found a technical co-founder, don’t have the budget to hire developers, or have spent over 200,000 NTD on development only to end up with unsatisfactory results.
我的人生使命一直是幫助人們發掘自己 10 倍的潛能，並實現理想狀態。在我的教學、指導課程或演講中，我與許多有趣的人互動，他們之中有不少人希望用科技解決問題。然而，許多人尚未找到合適的技術合夥人，也沒有足夠的預算聘請開發者，或者花費了超過 20 萬新台幣，卻得到不理想的結果。
My Wish
I hope this post brings hope and actionable steps for people to see what’s possible. There’s no such thing as failure—only steps toward finding success.
希望這篇文章能帶給大家希望，並提供具體步驟，讓大家看見可能性。所謂的「失敗」並不存在，只有邁向成功的每一步。
Q4: The Role of Technical Skills in Scaling vs. Validation / 技術能力在擴展與驗證中的角色
Interestingly, technical skills are critical for scaling and building a sustainable service. However, at the early stage, when the goal is simply to validate whether your idea works, having something tangible—a prototype—is far more valuable. This lets your customers or users provide feedback and help you refine your idea.
有趣的是，技術能力在擴展和構建可持續服務方面非常重要。然而，在早期階段，當您的目標僅僅是驗證想法是否可行時，擁有一個可操作的原型反而更加有價值。這能讓客戶或用戶提供回饋，幫助您完善想法。
******
Call to Action: Build Your Idea Today / 行動呼籲：今天就實現您的想法 (Just in 22 minutes / No Need to Pay for Free Trial / 只需要花22分鐘，透過免費試用不需要花錢)
Whether you choose Bolt for speed and simplicity or Lovable for creative flexibility, the no-code movement has made application development accessible to everyone. Start your journey today and turn your idea into a reality in just 22 minutes—no technical skills required!
無論您選擇 Bolt 的快速與簡易，還是 Lovable 的創意靈活，無程式開發運動已讓應用程式的開發變得人人可及。現在就開始您的旅程，在短短 22 分鐘內實現您的想法——完全不需要技術背景！
Comments