企业官网建设流程全解析

一起买买买网站建设,网站建设英文如何表达,神马快速排名优化工具,外网npv加速器Gemini 3发布了#xff0c;有关于它在UI设计方面非常棒的炒作。别误会#xff0c;我尝试了提示#xff0c;它给了很棒的设计。 但是 我想尝试这个#xff0c;看看能否将其集成到我的工作流程中。我的通常流程如下#xff0c;总结起来#xff1a; 与客户交谈#xff0…Gemini 3发布了有关于它在UI设计方面非常棒的炒作。别误会我尝试了提示它给了很棒的设计。但是我想尝试这个看看能否将其集成到我的工作流程中。我的通常流程如下总结起来与客户交谈找到他们的目标理解他们的品牌并找到与品牌匹配的灵感然后我创建一个情绪板并呈现给客户。他们对它提出意见我决定设计方向接下来我为每个页面创建网站地图信息架构。此信息架构的内容通常来自客户但在那之前我会使用AI来完成它线框图设计。它们是两个不同的步骤但为了保持简短它将是一个步骤你可以看到好的设计不是塞入大量文本并得到一个设计。客户希望设计是他们的。匹配他们的品牌并反映他们的意见。但是AI将无处不在如果你不适应它将在你自己的游戏中击败你。所以我开始了我的实验看看AI能在多大程度上做我的工作。我不是世界级设计师但我对自己创建的东西非常挑剔。我需要AI创建我想要的确切东西。免责声明——Gemini没有保存我的任何提示这实际上是我实验的快速案例研究。我从一种设计转向另一种类型的设计主要是因为我需要测试图像生成对应用程序有多好1、使用Claude技能Claude非常擅长编码但它仍然不擅长设计。然后出现了能够引导Claude生成好的UI设计的Claude技能。我尝试了这个并能够为AI服务提供商生成一个着陆页。请注意这只是一个单一的提示没有给出其他细节你可以看到这仍然有AI糟糕的颜色这不够2、使用Claude技能和Gemini但带有图像示例我使用了Claude代码和Gemini使用Cursor为一家名为Sentido的酒店创建着陆页。我只给了它图像示例我需要内容的部分。这是它给我的Gemini输出Claude输出你可以看到两者相似但Gemini给我的更加精致和简单。Claude有更多的细节/元素而Gemini选择了极简主义路线。Gemini实际上在这里完美地达到了品牌。3、使用Claude技能但有更多上下文和很棒的提示现在我提升了一点。我得到了一些我喜欢网站的例子并写了每个部分的结构应该是什么样子的。然后我将这些输入到一个名为Gemini UI设计的GPT它给了我一个详细的提示从设计方向到应该使用的颜色和排版我没有定义它们最后我使用Claude代码与GPT给我的提示以及图像参考一起构建着陆页Gemini输出Claude输出你可以看到Claude实际上遵循了指令并给出了预期的设计这不是世界级的但它做了我期望的而Gemini在bug和整体设计方向上有点失败但这仍然不是我想要的。如果我有这些设计的Figma文件我会改变它们。这是我第三次尝试但我不能放弃。经验教训你必须确保你解释例子。你不能只是一堆扔进例子并期望Claude或Gemini构建某种东西你必须在颜色、字体、图标和动画使用方面具体说明4、使用Gemini和Claude技能一起我看到了Meng To的LinkedIn帖子。他发布了一种用Gemini获得很棒设计的方法。那就是尽可能具体。我使用了他的提示然后要求Claude使用前端设计技能为着陆页创建一个主提示。这个提示有以下部分英雄部分——设置颜色、排版和间距的基础图标和排版——Iconify集和自定义字体配置入场动画——淡入、滑动、模糊效果具有适当的填充模式社交证明——标志跑马灯和评级显示CTA按钮——边框光束和微交互等高级效果其他部分——功能、定价、推荐、常见问题解答、页脚完善——最终一致性检查和增强但我只想尝试一下带有动画的英雄部分所以我要求Gemini给我一个带有GSAP揭示动画的英雄部分。我使用了一个例子作为参考。点击这里查看示例网站这是它给我的你可以看到对于一个单一的提示来说这很棒我添加了动画还从React bits复制了一个背景动画下一步是获取代码文件将它们放入Claude代码中并要求它基于英雄部分设计生成一个全面的style.md文件。我使用前端设计技能实现了这一点。一旦样式指南完成我要求它生成页面的其余部分。我定义了我需要的部分没有其他。这是它给的你可以看到比以前的例子更精致。但是我想做更多。我还不能放弃。所以这里是第五步经验教训给AI自由探索可以产生一些很棒的设计提供的例子应该限制为1个或者在设计方面彼此相似5、使用标准UI设计流程与AI仍然我不想放弃。我需要作为设计师拥有的控制来创建我需要的设计。所以我从创建设计时通常采取的第一步开始。这是获取项目简报并从中创建情绪板。这个情绪板包括关于参考的详细信息以及模型应该从参考中取什么颜色排版任何动画模式与此同时我还创建了一个文档包括页面每个部分的内容然后我开始用例子描述每个部分我添加了尽可能多的上下文。这些包括部分灵感的截图可以放在这个部分的视觉效果这个部分的动画文本设计部分中将使用的组件构建的文件夹结构现在这是我通常会开始设计页面的点但现在是LLM的工作来做它了。所以我创建了一个文件夹来添加所有图像包括截图另一个文件夹来添加关于情绪板和部分的详细信息一旦完成我要求cursor生成一个包含所有所需信息的样式指南。然后我创建了一个PRD以及与PRD中列出的任务匹配的任务列表结果不是我预期的。所以我再次分析意识到我有冲突的指令并且提供的灵感深色和浅色模式混合与我想的不一致这是我知道AI需要一个非常具体的路径以便能够按照指示完成工作的地方。所以我切换到Claude并要求它根据我的灵感和想法重新制作vibe情绪板。它给了所有部分的markdown和vibe情绪板。我再次运行项目这是我得到的同样这比以前好但仍然有一些bug。6、使用Gemini和Claude生成英雄部分和样式指南所以我尝试了另一种方式。这次我使用了vibe情绪板和截图来要求Gemini 3创建英雄部分。它给了我一个干净的设计所以我再次提示它添加一些背景交互。这是它给的然后我切换到Claude代码使用前端设计技能并要求它创建一个全面的样式指南。使用这个样式指南我设法创建了以下设计同样这很棒但不是我认为它能做到的。也许我在沟通我想要的东西上失败了。7、仅使用Gemini我再次尝试这次使用googles AI Studio用我拥有的内容创建着陆页。这是它给出的设计这又比Claude做的更好但仍然这不是我预期的哈哈我可能有高标准我尝试了最后一次这次给Gemini我想要的设计带有例子然后要求它使用自己的创造力构建着陆页。这是它给我的终于我真正喜欢的东西我希望我可以调整一些但仍然这比我们以前有的有重大改进。经过所有我的努力我肯定觉得Gemini会是一个更好的选择8、自己做现在我花了一些时间自己做这个设计。我花了大约4-5小时但如果我得到了资产我可以做得更快。它是如何工作的部分中的资产花了一些时间因为我不得不使用Claude提示并找到最好的方法来做它。我给Claude一个我想要的插图例子可以说它很好地解释了风格。对于英雄图像我想可视化从不同角度来的线形成一个流线焦点所以我再次要求Claude帮助我它给了我一个相当好的英雄图像。此外我使用了微妙的黄色灯光带有模糊效果和噪声背景。结论AI设计肯定将成为大多数设计师的设计方式。目前没有方法在Figma中用这种质量提示设计我尝试了失败了一旦完成我们将看到更多AI用于设计因为现实地讲客户项目通常从figma开始并在wordpress或webflow中结束但是我将其视为获取更多布局/设计灵感的工具而不是成为唯一的设计大师记住AI可以产生看起来经过设计的东西——干净的排版、时髦的渐变、适当的间距。但设计作为一个学科是为特定人解决特定问题。一个看起来很棒但不转化或者感觉不像品牌或者混淆用户的着陆页——不管它看起来多么精致那都不是好的设计。原文链接AI Web设计实测 - 汇智网