Gemini Code Assist 時尚版面

1. 事前準備

本程式碼研究室將說明如何使用 Gemini Code Assist，在網站上導入質感設計。實作 Material Design 後，您就能反覆調整設計、進行變更，改善使用者體驗並新增功能。完成這個工作坊後，您就可以運用 Gemini，透過 Material Design 或類似程式庫建立容易使用的網頁，而不必編寫 CSS。

必要條件

  • 對 HTML、CSS 和 JavaScript 的瞭解
  • 網頁設計的基本概念

課程內容

  • 如何使用 Gemini Code Assist 導入樣式資料庫
  • 如何使用 Gemini Code Assist 反覆調整設計，而非手動調整 CSS
  • 如何有效提示 Gemini Code Assist 提供符合需求的程式碼

需求條件

  • 存取已啟用 Gemini 版 Google Cloud 的 Google Cloud 專案
  • 設定樣式的網頁，或至少一個資料夾

2. 設定

在這個程式碼研究室中，您必須滿足兩項條件：存取已啟用 Gemini 的 Google Cloud 專案，以及供我們設定樣式的網頁。如要在新專案中啟用 Gemini，請按一下 Cloud 控制台右上方的「Gemini」按鈕，然後點選下方面板。

啟用 Gemini

如果你想設定網頁的樣式，你可以隨時從任何現成網頁開始設定。此外，由於 Gemini 已啟用，您也可以要求 Gemini 產生程式碼。如果提示 Gemini 之類的要求，結果應如下所示：Write me a web page with a form to gather profile information

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Profile Information</title>
</head>
<body>

    <h2>Get Profile Information</h2>

    <form method="post">  
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="address">Address:</label>
        <input type="text" id="address" name="address" required>

        <input type="submit" value="Save Profile"> 
    </form>

</body>
</html>

3. 實作 Material

首先，請要求 Gemini 在網頁上導入 Material Design：
Can you apply material design styles to this page?

注意：本程式碼研究室提供的所有提示都是範例，請善用這些靈感做為創作靈感，在專案中加入背景資訊，爭取最佳成效。

回應應如下所示：

實作質感設計

本研究室將使用 Material Design，但您可以要求 Gemini 導入所選程式庫。如果 Gemini 匯入的 Material 版本與預期不符，請嘗試在提示中提供所需版本。

4. 設計疊代

Gemini 也能協助你反覆調整網頁設計，不必手動探索 CSS。自行撰寫提示，要求 Gemini 反覆調整這個設計。為順利執行這類工作，請著重描述您有興趣變更的元素，以及要達到的成果：

Can we center the content on this page?

反覆調整設計

你也可以讓 Gemini 在網頁上加入功能元素。要求 Gemini 在表單中加入更多欄位或新增更多功能：

Can we add some more fields to this form, like phone number, email address?

在網頁中加入功能元素

5. 組織

你也可以讓 Gemini 統整相關結果，用最實用的專案處理。在本例中，由於重點在於疊代在此檔案中的設計，因此建議使用 style 標記。要求 Gemini 將回覆內容納入樣式標記，這樣就不必逐一套用變更：

Can you put this css in a style tag? I'd like to keep everything in this HTML page.

實作 Material Design

6. 協助工具

正如 Material Design 所述，無障礙和可用性是設計的重要元素。瞭解這一點後，請嘗試要求 Gemini 確認輸入內容的類型正確無誤。這可確保螢幕閱讀器等無障礙工具能正常使用。

Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.

無障礙功能異動

7. 結語

最終 HTML：實作 Material Design最終網頁 - 實作 Material Design

恭喜您完成本程式碼研究室！您已瞭解如何使用 Gemini 在網頁上導入質感設計。此外，您也學到如何疊代設計及整理產生的程式碼。這項新技能可讓您利用 Material Design 或類似程式庫，無須進行少量設定，就能建立容易使用且容易使用的網頁。