00:00:00我将带你和数百名设计师一起，进行一次非常酷的实验。
00:00:06我想看看我们能把 AI 设计推向何种高度，而这一次是专门针对 Claude Code 的，
00:00:13我们要基于同一个虚构的商业创意来制作一个网页首屏（Hero Section）。
00:00:19目前 designcourse.com 正在举办一场为期 30 天的 UI 设计挑战赛。
00:00:24这是 100% 免费的。
00:00:25我们已经举办过一次挑战赛，收到了超过 200 份作品，而这是
00:00:30第二次挑战。
00:00:31我将向你展示如何使用 Claude Code，并为其配备特殊的“设计技能”，
00:00:37以便产出一些真正优秀的设计。
00:00:40这次挑战的目标是：我会给你们所有人提供同一个虚构的商业创意，
00:00:44但我们要看看你的提示词技巧如何，能否为这项任务创造出
00:00:50最佳的 UI 效果。
00:00:52稍后，我会向你演示今天如何具体参与这项挑战。
00:00:56无论你什么时候看到这个视频，即使是几个月后也没关系。
00:00:58你随时可以参与挑战，看看大家都在做些什么。
00:01:01但首先，我要展示如何配置所需的一切。
00:01:04首先，你显然需要安装 Claude Code，对吧？
00:01:07这是它的设置页面。
00:01:10它支持不同的环境。
00:01:11我不打算逐一演示，所以我直接把设置页面的链接放出来。
00:01:15如果你还没安装，可以研究一下怎么安装。
00:01:17准备就绪后，只需输入“Claude”，它就应该会像这样加载出来。
00:01:22好了。
00:01:23好的。
00:01:24下一步是确保为其配备一项“特殊技能”。
00:01:26所谓的“技能”，其实就是一组输入到 AI 上下文中的指令。
00:01:30有很多种不同的技能。
00:01:31在展示技能之前，我先教你怎么在系统中安装技能。
00:01:32你需要根据你使用的操作系统和环境，找到你的 Claude Code 文件夹。
00:01:37找到对应的文件夹位置。
00:01:43位置取决于你的 OS 和环境。
00:01:44然后你只需获取这个 Markdown 文件（即技能文件），并将其放入
00:01:49该文件夹中。
00:01:50我说的这项特定技能叫做“Front End Design”（前端设计），就在这里。
00:01:55我会把链接放在描述栏中，方便你获取。
00:01:58你需要点击 Skills、Front End Skills、Skill.md，然后在这里，
00:02:03点击“Download Raw File”（下载原始文件），明白吗？
00:02:06拿到这个技能文件后，去我刚才给你看的路径里
00:02:12找到你的 Claude Code 文件夹。
00:02:14在我的 Windows 11 上，路径是 C:\Users\Gary\.claude。
00:02:21在这里面，你可能还没有 skills 文件夹。
00:02:24如果没有，就新建一个。
00:02:25我已经建好了。
00:02:26双击进去，然后创建一个名为“Designer”的文件夹。
00:02:31在里面粘贴那个技能文件 Skill.md。
00:02:35如果你已经运行了 Claude，请先按几次 Ctrl+C
00:02:39将其关闭。
00:02:41再次输入 Claude，然后输入 /skills 来列出所有可用技能。
00:02:47目前我有三个。
00:02:48我们可以在这里看到 Front End Design。
00:02:51使用这项技能的方法是输入 /frontend-design。
00:02:56然后粘贴你的提示词。
00:02:58现在让我演示一下它的实际效果。
00:03:00如果我输入 /frontend-design，加上提示词：“为一家 AI 身份
00:03:06验证服务公司设计网页首屏。”
00:03:07“要求使用浅米色背景，采用两栏布局，有醒目的标题，
00:03:11左侧是文案和行动号召（CTA）按钮。”
00:03:13“右侧应该是一个虚构但简洁的 UI 动画，用以展示
00:03:16身份验证的概念，抱歉，是身份验证。”
00:03:20“将其放入带 CSS 的 HTML 文件中，并包含变量。”
00:03:23这就是我全部的提示词，而这就是它产出的结果。
00:03:28我不知道你怎么想，但这真的非常出色，而且是一次成型（One-shot）。
00:03:33你也看到了提示词。
00:03:35内容非常少。
00:03:36现在我要向你展示这项挑战，以及我希望你们为这个虚构业务
00:03:41使用的商业创意，我想看看你们能做出什么。
00:03:46这里的想法是融入你自己的设计偏好，从而创造出
00:03:51独特的、甚至是带动画的作品。
00:03:53第一步是访问 [designcourse.com/foundations](https://www.google.com/search?q=https://designcourse.com/foundations) 挑战页面。
00:03:58链接就在下面的某个地方。
00:04:00来到这里，你会看到这个页面，已经有 613 名学生参加，第一次挑战
00:04:06收到了 197 份作品。
00:04:08现在是第二次挑战。
00:04:09你只需点击这里，就会看到“获取 2026 UI/UX Figma 模板”。
00:04:16里面就是第二号挑战，那就是我希望你使用的内容。
00:04:20它看起来就像这样。
00:04:23这是第二号挑战，这里是说明。
00:04:27这是我希望你包含在提示词中的一部分内容。
00:04:29这是虚构的商业创意。
00:04:31我不希望你使用任何其他的点子。
00:04:32我希望我们都用同一个创意，即“AI 房屋检查业务”。
00:04:37它利用计算机视觉分析爬行空间、屋顶和地基图像，查找常见缺陷，
00:04:42并自动生成标准化的检查报告。
00:04:45我们的目标是用这段初始提示词来指导 AI，
00:04:50利用我们的 Claude Code 设计师技能，创造出一个更高水平的首屏。
00:04:56这边是具体说明。
00:04:58使用 Claude Code 为这个右侧边框内
00:05:03展示的虚构商业创意生成一个网页首屏。
00:05:05确保将那段内容粘贴到你的提示词中。
00:05:08包含业务创意的同时，也要加入你自己的设计和样式偏好。
00:05:13就像我刚才引导它去尝试创建那个动画卡片一样，
00:05:17你们刚才看到的。
00:05:18你可以根据需要使用多次提示词来完善最终结果。
00:05:22如果你愿意，也可以集成动画。
00:05:24提交时，首先请注明达到最终结果所用的提示词次数，
00:05:29因为我希望你根据自己的意愿去打磨结果。
00:05:32同时也要在评论区附上提示词本身。
00:05:36你也可以使用 Claude Code to Figma 插件，在作品中
00:05:42分享设计稿的 Figma 原型链接，但这不是必须的。
00:05:44一张截图也可以。
00:05:47Claude Code to Figma 插件可以让你把 UI 的最终结果
00:05:53直接发送到 Figma。
00:05:54我在这里就不演示怎么操作了，因为我昨天刚上传了一个
00:05:58专门介绍这个插件的视频。
00:06:00再次强调，这不强制要求。
00:06:01提交作品时，一张截图就足够了。
00:06:04这里展示了如何提交你的参赛作品。
00:06:09举个例子，如果你确实决定分享你正在制作的 Figma 文档，
00:06:14这样如果我点评你的作品，我就能直接进行修改。那么你就点这里的 Share（分享）。
00:06:18点击 Copy prototype link（复制原型链接）。
00:06:20确保权限设置为“所有人可查看”，然后随作品一起提交。
00:06:25完成提交。
00:06:26这将会是一次非常酷的挑战，因为我们要看看
00:06:30大家的结果是否会非常相似。
00:06:32如果你不提供太多方向，不加入自己的创意兴趣和样式偏好，
00:06:37那么结果确实会雷同。
00:06:40但如果你这么做了，我想我们会看到许多非常有趣的
00:06:47变体和概念被创造出来。
00:06:48所以，请明确你想要的配色方案，指定任何你想要的
00:06:53有趣的插画或动画。
00:06:55目标是尝试榨干 AI 的产出能力。
00:06:58好的，希望看到大家都能参与进来。
00:07:01这是一个非常酷的挑战。