網頁設計實驗室

Web Design Laboratory

未來5年內,很多工作將被AI一一取代,我實證了用白話文下條件,讓gemini幫我寫網頁!!!

Dec 22, 2024

我對 gemini 下達了以下這段需求

請使用 Bootstrap 幫我建立一個響應式網站,這個網站首頁包含了一個大圖輪播,
包含了navbar的menu,menu包含了about us、service、products、news、contact,5個選單。
這選單也必須是響應式的。 網站的下半部包含了一排3個blog box請自行生成設計。
最底下請噹我設計一個foolter加上版權宣告。
請提供給我可運行的程式碼。



gemini 回應了如下的html語法

 <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>我的響應式網站</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
      </head>
      <body>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
      <a class="navbar-brand" href="#">我的網站</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
      <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">關於我們</a>
      </li>
      <li class="nav-item">
      <a class="nav-link" href="#">服務</a>
      </li>
      <li class="nav-item">
      <a class="nav-link" href="#">產品</a>
      </li>
      <li class="nav-item">
      <a class="nav-link" href="#">新聞</a>
      </li>
      <li class="nav-item">
      <a class="nav-link" href="#">聯絡我們</a>
      </li>
      </ul>
      </div>
      </div>
      </nav>

      <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
      <div class="carousel-item active">
      <img src="https://picsum.photos/1920/1080" class="d-block w-100" alt="First slide">
      </div>
      <div class="carousel-item">
      <img src="https://picsum.photos/1920/1080" class="d-block w-100" alt="Second slide">
      </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
      </button>
      </div>

      <section class="blog">
      <div class="container">
      <div class="row">
      <div class="col-md-4" *3>
      <div class="card">
      <img src="https://picsum.photos/300/200" class="card-img-top" alt="...">
      <div class="card-body">
      <h5 class="card-title">部落格文章標題</h5>
      <p class="card-text">這是一篇範例文章,可以寫一些關於您的網站或產品的介紹。</p>
      <a href="#" class="btn btn-primary">閱讀更多</a>
      </div>
      </div>
      </div>
      </div>
      </div>
      </section>

      <footer class="text-center py-3">
        © 2023 我的網站
        </footer>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js">
        </body>
        </html>


演示 :

See the Pen Untitled by 周平(瑪雅網路科技) (@vzhzchpn-the-vuer) on CodePen.


我還可以繼續提出更多細節要求 AI 去幫我快速達成目的

那麼我想說的意思是; 我還需要去學去背程式語法嗎?

AI的發展勢不可擋,它正在深刻地改變著我們的生活和工作方式。
失業問題: AI可能會取代部分人的工作,導致失業問題。
倫理問題: AI的發展涉及許多倫理問題,例如隱私、歧視等。
安全問題: AI的濫用可能帶來安全風險。

哪些職業會受到AI取代

生產線工人: AI驅動的機器人可以更快速、精準地完成重複性的組裝、包裝等工作。
資料輸入人員: AI可以自動化大量數據的輸入和處理。
電話客服人員: AI客服機器人可以處理大部分常見的客戶問題。
金融分析師: AI可以分析海量金融數據,提供更精準的投資建議。
醫療影像分析師: AI可以輔助醫生進行醫療影像的分析,提高診斷效率。
品質檢測員: AI視覺系統可以快速檢測產品缺陷。
翻譯人員: AI翻譯工具可以提供更快速、更準確的翻譯服務。
工程師: AI可以協助工程師進行複雜的計算和模擬。
科學研究人員: AI可以加速數據分析和模型建立。
記者: AI可以自動生成新聞報導。
律師助理: AI可以協助律師進行法律文件分析。
會計師: AI可以自動化會計流程。

哪些職業不容易被AI取代

高度創造力、創新能力的工作: 例如藝術家、作家、科學家等。
強大社交能力的工作: 例如心理諮商師、教師、社會工作者等。
複雜判斷和決策的工作: 比如高階管理人員、醫生等。
心理諮商師、治療師: 這些職業需要高度的同理心、傾聽能力和人際互動技巧,才能建立與客戶之間的信任關係。
教師: 教師不僅傳授知識,更重要的是激發學生的學習興趣、培養他們的思辨能力和創造力。這些都需要高度的人際互動和情感投入。
社會工作者: 社會工作者需要與不同背景的人打交道,提供情感支持和實質幫助。這需要高度的同理心、溝通能力和解決問題的能力。


接著我又請AI幫我寫一個簡單的 剪刀、石頭、布 遊戲

See the Pen Untitled by 周平(瑪雅網路科技) (@vzhzchpn-the-vuer) on CodePen.