Gemini Code Assist 時尚版面

1. 事前準備

本程式碼研究室說明如何使用 Gemini Code Assist 在網站上實作 Material Design。導入 Material Design 後，您將反覆修改設計，藉此改善使用者體驗並新增功能。在本研討會結束時，您將能夠使用 Gemini 建立實用且容易使用的網頁，並採用 Material Design 或類似的程式庫，不必撰寫 CSS。

必要條件

  • 瞭解 HTML、CSS 和 JavaScript
  • 對網頁設計有基本瞭解

課程內容

  • 如何透過 Gemini Code Assist 實作樣式程式庫
  • 如何使用 Gemini Code Assist 疊代設計，而非手動調整 CSS
  • 如何有效提示 Gemini Code Assist，以您想要的風格提供程式碼

需求條件

  • 存取已啟用 Gemini for 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

本實驗室使用 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. 協助工具

如質感設計所述，無障礙功能和可用性是設計的重要元素。請 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。您也學到如何疊代設計，以及整理產生的程式碼。這項新技能可讓您使用 Material Design 或類似的程式庫，以最少的設定建立實用且容易使用的網頁。