1. 准备工作
此 Codelab 介绍了如何使用面向开发者的 Duet AI 在网站上实现 Material Design。实现 Material Design 后，您将对设计进行迭代更新，通过做出更改来改善用户体验并增添功能。在本研讨会结束时，您将能够使用 Duet AI 通过 Material Design 或类似的库创建实用且人性化的网页，无需编写 CSS。
前提条件
- 了解 HTML、CSS 和 JavaScript
- 对网页设计有基本的了解
学习内容
- 如何使用 Duet AI 实现样式库
- 如何使用 Duet AI 对设计进行迭代，且无需手动调整 CSS
- 如何有效地提示 Duet AI 以您期望的样式贡献代码
所需条件
- 访问已启用 Duet AI 的 Google Cloud 项目
- 一个要设置样式的网页，或者至少一个要在其中创建网页的文件夹
2. 设置
在此 Codelab 中，需要准备以下两项：对启用了 Duet 的 Google Cloud 项目的访问权限，以及供我们设置样式的网页。点击 Cloud 控制台右上角的“Duet”按钮，然后在下方面板中点击“启用”，即可在新项目中启用 Duet。
对于要设置样式的网页，您可以随意使用手边任何可用的网页。或者，由于 Duet 已启用，您可以要求它为您生成一个网页。如果您向 Duet 提出 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
首先，通过发出以下提示，要求 Duet 在我们的网页上实施 Material Design：Can you apply material design styles to this page?
注意：此 Codelab 中提供的所有提示均为示例。您可以用这些提示作为灵感，编写您自己的提示，并添加项目背景信息，以获得最佳效果。
回答应类似于以下内容：
本实验使用的是 Material Design，但您可以让 Duet 实现您选择的库。如果 Duet 导入的 Material 版本与预期版本不同，请尝试在提示中提供所需的版本。
4. 设计迭代
Duet 还可以帮助您对网页的设计进行迭代，且无需手动处理 CSS。提出您自己的提示，让 Duet 进行设计迭代。为了在此类任务中获得最佳结果，请尽可能简要地描述您想要更改的元素及其预期结果：
Can we center the content on this page?
您还可以让 Duet 为页面添加功能元素。让 Duet 在表单中添加更多字段或添加其他功能：
Can we add some more fields to this form, like phone number, email address?
5. 整理
此外，还可以让 Duet 将生成的结果整理到最适合我们项目的位置。在本例中，由于重点是对这一个文件中的设计进行迭代，因此 style 标记是理想的选择。要求 Duet 将其回答包含在样式标记中，以免在操作过程中将其更改应用于多个样式标记：
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
6. 无障碍功能
如 Material Design 中所述，无障碍功能和易用性是设计的基本要素。考虑到这一点，尝试要求 Duet 确保我们的输入使用了正确的类型。这样可确保屏幕阅读器等无障碍工具能够正确获取它们。
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. 总结
恭喜您完成此 Codelab！您已经学习了如何使用 Duet AI 在网页上实现 Material Design。您还学习了如何迭代设计并整理生成的代码。通过这项新技能，您只需进行极少的设置，即可使用 Material Design 或类似的库创建实用且人性化的网页。