设计团队和Web开发人员面临的最大挑战之一是将无花果设计变成响应迅速，专业的网页，这些网页仍然忠于原始愿景。
幸运的是，有许多AI开发工具使过程更快，更容易。三个领先的AI驱动IDE包括：
github副标士
帆板编辑
光标AI
光标AI允许您使用简单的提示将无花果设计转换为代码。
凭借对AI驱动的IDE的知识和舒适感，图形艺术家现在可以轻松地将其无花果设计转换为代码，并创建功能齐全的网站，而无需深入了解HTML，CSS或JavaScript。
将无花果设计转换为代码
好奇如何将FIGMA设计变成可准备生产的HTML，CSS和JavaScript？
这正是您将在此Figma中学习的，以使用Cursor AI教程进行编码。
对于本教程，我要求一位图形艺术家为宣传我的Scrum认证书的网站创建无花果设计。在不编写一行代码的情况下，我将向您展示如何使用光标AI将这些设计栩栩如生。
下面的动画GIF显示了UX团队交付的设计。
移动和桌面无花果设计都将通过Cursor AI转换为HTML，CSS和JavaScript代码。
开始之前
在将无花果设计转换为网页之前，请确保已准备就绪：
无花果设计中使用的特定字体家族，颜色和梯度。
所有必需的图像资产，SVG和图标。
任何首选的库或框架，例如lineicons，bootstrap或react。
光标AI已安装和配置。
步骤1：设置您的无花果编码项目
您的第一个提示将要设置HTML和JavaScript项目，并使用响应式导航栏生成基本网页。工作的Navbar确保设置和库的运行正常。
这是提示：
我需要光标为我创建一个新的HTML和JavaScript项目，以便我可以为Scrum Master认证指南构建专业的网站。
这只是一个简单的HTML和JavaScript项目，我将在桌面上本地测试，但是它将得到专业维护，因此它需要使用行业标准文件和文件夹结构。
我想使用免费的Linecons库和Bootstrap JS来响应响应，我需要各种资产的文件夹，例如图像，CSS和脚本。
首先，该网站需要在顶部有一个响应式，浮动的，引导导航栏，并带有左侧对齐的文本，上面写着“很麻烦”，且右对齐的家庭，Twitter，Twitter，YouTube，TSS，TSS（就是www.theserverside.com）和Xennial（这就是www.xennial.com）。文字“令人讨厌”的文字应每10-15秒随机动画，以一种有些烦人的方式。
我将提供有关如何在接下来设计页面的其余部分的说明。
光标将需要一两分钟才能创建项目并设计页面。完成后，只需单击“接受全部”并查看生成的网页。专门检查导航栏是否在台式机和移动模式下适当地呈现。
在移动设备上变成汉堡包的工作导航栏证明了该项目的配置正确。
步骤2：建立整体布局
无花果设计包括七个不同的部分，还有一个页脚和我们刚创建的导航栏。在下一个提示中，我们将在指定字体系列，颜色和梯度以应用网站的同时生成所有这些部分。
我们还将为整个英雄部分的梯度外观提供基本说明。
在Nav Bar下，我喜欢单独的部分，名为Hero，Seximonials，关于统计，视频，定价和作者。还添加一个带有版权通知的页脚。
英雄，统计和页脚部分应使用线性的45度梯度，从蓝紫罗兰（Blueviolet）到deeppink的背景。
关于视频和作者部分应该具有雪白背景。其他部分应为固体白色。
另外，当页面加载时，英雄部分应仅占用视口的75％。
我想将Poppins用作字体。在浅色背景下，字体颜色应为标题进行挖掘和午夜蓝色，以供较小的文本。
在梯度背景下，字体颜色应为白色，用于标题，而午夜蓝色则应为较小的文本。
另外，创建一个有趣而简单的页面加载动画，以稍微增添一点色彩。
请注意，我的提示如何获得一些乐趣 - 要求页面负载效果甚至是烦人的动画？光标AI创造性地处理这些内容，并添加JavaScript以使图像或文本弹跳或随机淡出之类的元素。这是一种使原本静态页面生动的好玩方法。
步骤3：组织您的资源
如前所述，您需要准备好图像，SVG和其他资产。在此步骤中，我们将将它们组织到一个图像文件夹中，并提供诸如作者，英雄和推荐书之类的子文件夹，以提供更好的结构。
接下来，我们将提示光标AI构建一个英雄部分旋转木马，该旋转木马使用英雄文件夹中的图像。
这是提示：
更新英雄部分，以便在大屏幕上将其分为两半。
在左侧，它在黑暗的常规文本中说“升级您的敏捷游戏”
在大白色字母下，它说：
学会敏捷
大师Scrum
快速认证
在此下，在黑暗文本中说：“通过PSM和PSPO认证提高了您的职业生涯。”
在文本下，添加链接到Twitter，YouTube，GitHub和Amazon的图标。
第一个和第三个图标应为白色，具有方形白色边框和透明背景。第二和第四个图标应在白色背景和方形白色边框上进行Deeppurple。
当用户徘徊在图标上时，背景过渡到deeppurple，图标为白色。当用户悬停在图标上时，使用上下的滑块效果进行更改。
在右侧，添加一个自举旋转木制旋转木制，该旋转旋转曲线通过刚刚放置在图像下的英雄文件夹中的所有图像。这些图像都具有500×513的比率。
轮播背景应该是透明的，旋转木马应每4秒钟移动一次新图片。使旋转木马中的照片尽可能地占据右侧的大部分空间。
当光标AI代码生成完成后，我们可以看到英雄部分看起来与无花果设计非常相似，直到字体，颜色和渐变。
我们已经促使将所有字体，颜色和梯度从无花果设计转换为网页的英雄部分。
步骤4：推荐部分
“推荐”部分仅显示最后一步中放置在图像文件夹中的三个图像。
有效显示图像的一种提示是告诉光标AI的尺寸，以更有效地帮助工具格式化。这是提示：
删除“推荐”部分中当前的所有内容。
然后，对于“推荐”部分，我希望您从最近更新的推荐文件夹中添加三个450×360个图像，以便它们看起来均匀间隔，并且在桌面模式下彼此相邻。将它们堆叠成较小的屏幕。
当他们进入视口时，每个图像都应飞到屏幕上。
每个图像都应具有不同，有趣且友好的动画，当用户徘徊在它们上时。
确保在推荐部分的顶部和底部有一些填充，以便图像在上方和下方的各个部分之间很好地间隔。
步骤5：关于部分
大约部分遵循经典的50/50布局，左侧有图像，右侧有文字。
在此步骤中，我们将要求光标AI生成有关该书的一组项目符号。您可以随时以后进行编辑或更换；您无需前面提供所有文本。让AI进行繁重的工作！
这是提示：
完全更新有关部分。
将页面分为两半。在左侧，显示图像目录中的500x625px文件，名为Scrum-guide-cover.jpg。
在进入视口时将其飞到屏幕上的图像中添加一个有趣的动画，并在有人徘徊时进行另一个动画。
右半添加了一个中心的标题，上面写着“快速获得认证！”并制作字体白色，并将标题放在使用英雄部分梯度的紧密包装背景上。
然后在深色文字中以粗体写道： “没有其他Scrum Master认证指南提供：”
然后添加七个要点，内容涉及一本好的认证书包含的内容。
最后，以大胆文本为中心，链接到Amazon.com写：
立即获取副本
您可以从生成的页面中看到Cursor AI在填写Figma Design的Lorem Ipsum文本方面做得很好：
在证明和关于节的章节中，我们让Cursor AI生成了自己的文本和项目符号。
步骤6：动画计数
流行的Web设计元素是动态增量计数，一组统计信息在出现在屏幕上时从零到最终值的动画。
尽管使用JavaScript手动实现这可能有些棘手，但制作精良的提示使光标AI可以轻松为您生成组件。
完全重新设计统计信息部分的内容。
在本节内，显示以下四个统计信息：
323页
125五星级评论
325多个问题
585+认证
在拥有它们的数字之后包括加号。
每个统计数据应包括一个有意义的中心lineicons图标，一个大胆的数字从0到其最终值，使用JavaScript以及下面的小标签。
风格具有白色圆形背景的图标。将所有内容归为垂直和水平。使用平滑的动画进行计数数字，该部分进入视口时会触发。
步骤7：嵌入YouTube视频
接下来，我们将测试光标在页面上嵌入YouTube视频的能力。本节还使用50/50布局：一侧的视频，另一侧文本。
在较早的提示中，我们明确描述了布局应如何适应桌面和移动设备。从这一点开始，并不总是必要的。光标AI通常会生成响应式的引导布局，这些布局在没有明确提示的情况下在设备上看起来很棒。
现在让我们重做视频部分。
以本节顶部为中心，添加了一个标题，上面写着“ Scrum变得容易”，将文字制成白色，并将标题放在使用与英雄部分相同的梯度的紧密包装背景上。
然后，在标题下，将部分分成两半以进行桌面查看，然后将内容堆叠在移动设备上。
在左半部分，显示此YouTube视频：
https://yout***u.be/fu2bvctsd9u
在右侧，添加以下粗体文本：
在行业最重要的敏捷和Scrum领导者Darcy Declute（@scrumtuun）的帮助下获得认证。
然后，在常规字体中，添加以下要点：
认证的Scrum Master（PSM1），产品所有者（PSPO）和Scrum Developer（PSD）
Twitter上超过25万名关注者
超过100万的YouTube观看次数
制造，零售和金融方面的教练经验
然后以核心点为中心，添加了一个呼吁。
顺便说一句，本节中使用的视频来自TheServerside文章什么是Scrum？值得一读。
统计数据和关于部分的统计信息在移动设备和桌面上都很好地呈现。
步骤8：定价部分
定价部分是有效提示的最棘手的部分之一。
在这里，我专门参考卡，这是一种旨在组织结构化内容的引导组件。这是一个很好的例子，说明如何使用AI工具对基础技术有一些熟悉的效果。
提示比平常更长，但输出与原始无花果设计非常匹配。
现在，在其下方使用中心标题和3列定价表更新“定价”部分。
标题应包括：
小文字中的简短描述：“选择最适合您的格式！”
一个大标题：“平装本，精装和Kindle”中心标题，将字体变成白色，并将标题放置在使用与英雄部分相同的梯度的紧密包装背景上。
较小的大胆文字的行动电话：“立即获取！”
每张定价卡应具有完全白色的背景，并带有微妙的阴影和圆角。
用大胆的文本显示每张卡顶部的价格。价格为54.99美元，$ 34.99和$ 19.99。
在价格下显示格式精装，软键，Kindle。此后添加一个分离器线。
在分离器下，每张卡上的2个好处列出了2个好处，其好处是：
精装：
由作者签名！
最耐用的格式
软包：
数百个问题
您的最佳价值！
点燃：
立即阅读！
仅在亚马逊上。
卡上的所有文本都应集中。
在每张卡上列出的好处下，响应地显示了图像目录中名为Scrum-guide-cover.jpg的500x625px文件。图像的宽度应扩展到卡的宽度。
在本书的图像之后，添加一个分隔符线，然后在每张卡的底部添加一个中心的购买按钮，该按钮使用与英雄相同的梯度并链接到Amazon.com。
确保卡在小屏幕上垂直堆叠，但在桌面上连续显示3。
除了我可能应该为每个版本使用其他图像的事实外，我认为结果看起来还不错：
步骤9：作者
最终部分使用一个巧妙的技巧，让光标为我们生成相关内容。
我们想使用他们的图像来展示这本书的贡献者。图像文件夹中的每个JPG文件都包含作者的名称和文件名中的角色。在此提示中，我们要求Cursor AI仅根据文件名来提取这些信息，并生成名称，角色，甚至简要描述每个贡献者的职责。
这是提示：
更新作者部分。
对于本节，您将使用放置在图像/作者文件夹中的图像，因此请查看这些文件的名称。
对于标题，中心，将其紧密包裹在英雄部分中使用的渐变中，并使颜色为白色。
对于内容，请使用响应式网格，并在自己的卡片中显示每个团队成员的图像，并使用Bootstrap的圆形圆圈放置在圆形框架中。
图像添加作者的名字及其在撰写本书中所扮演的角色之后。
然后添加一个分离器，然后写一个句子，描述该角色中某人的工作。
图像文件的命名格式是松散的“ firstName-lastName-lole”，因此请使用每个文件的名称显示用户的名称和扮演的角色。
在每张卡下方，添加社交媒体图标按钮，例如LinkedIn，Twitter，Github和YouTube，并在“英雄”部分格式化按钮时格式化它们。
光标AI使用的文件嵌入了文件名中，以生成作者部分的内容。
步骤10：支付光标AI订阅
上图显示了正确显示的社交媒体图标，但是最初的结果有一个缺陷：每个第二个图标都是由于白色背景上呈现的白色图标而看不见的。
我写了一个提示来解决该问题，但是我的游标AI的免费层触及使用限制，服务器决定保留其资源来支付用户。
在光标AI的自由层上存在使用限制。
没问题 - 我迅速手动修复了图标，将更新的文件拖动到我的github页面存储库中，并在部署了网站后看到了更改。
将最终网页与原始无花果设计进行比较，我给我留下了深刻的印象。光标AI使将无花果设计变成实时网页非常容易。
最终的HTML CSS代码与无花果设计很好地比较。
当创建网页只是为了推动此练习而创建的网页时，我确实将结果上传到了我的网站。您还可以查看本教程在GitHub上创建的FIGMA-TO-CODE文件。