AI生成前端组件的价值思考

AI生成前端组件的价值思考

想法来源

这个想法来源于我自己的需求,我自己首先就是最精准的目标用户,在这个AI时代,我希望AI可以帮我尽量多地干活。 结合自己的日常独立开发情况,发现花在调前端组件样式上的时间很多,因此思考能不能让AI把这部分活接过去,或者能提高一些效率也行。

适合用户

外行或刚入门的前端开发者不是此AI的目标用户,此AI目标用户是已入门的前端开发者,并且使用tailwind作为UI库。

实际场景

非目标场景:figma画原型图,然后前端照着做

这种情况下,UI设计师先干活,做出原型图,然后前端照着写组件,前端需要的组件布局,颜色,间距等都是确定的值,用AI生成组件并不能提高效率,反而会降低效率。

目标场景:前端直接写组件,然后调样式

这种情况下,我们是怎么写组件的呢? 一种方式是凭经验直接从零手撸,然后反复调整样式看效果,很多时候我们都这么做; 如果脑子里没有概念,可能会去网上找现成的网站进行参考,对照着做; 此外我们还可能直接网上找现成的模板,然后复制下来再改改。

此AI就是为了提高这种场景下的开发效率而专门设计的。

提效的点

搞清楚目标场景下,时间都花在哪里,才能进行提效。

按个人实践经验,如果从零撸组件,时间通常大量花在布局,调样式上; 如果网上找现成组件对照着做,会快一些,因为大脑不用太多思考,所以会更轻松,从创造的活更多的变成体力活了,而干体力活也是要花时间的; 如果网上找现成的组件模板改,时间一是花在找模板与比较哪个更好,二是改模板花的时间,包括先理解下载的代码,然后调整,这种模式最大问题是大部分时候,网上下载的现成固定模板跟我们的实际需求并不匹配,比如布局会有些不同,多了些元素,少了些字段,样式要改等,如果模板过于复杂,可能最终改的面目全非,或改出一些隐藏毛病,回过头看还不如从零手撸。

搞清楚了时间都花在哪里,下面就可以进行针对性提效了:

功能介绍

此AI通过简单的描述来生成组件:组件名称,字段描述。

生成的组件特点:

  • 支持深色模式
  • 支持响应式,可能需要额外的描述
  • 属性提取,比如将标题提取为props变量,可以在调用时传入
  • 支持调色板,比如你的应用有固定的一套颜色

粒度思考

开始可以是粗粒度的,比如就提供个组件名称叫“登录”组件,然后AI随机生成个登录组件,可能有名字,密码输入框,与登录按钮。

然后你可能对布局不满意,比如登录按钮位置不对;或发现少了元素,比如没有注册按钮。 那就可以添加更多描述,然后AI重新生成更精确的,反复如此直到满意为止。

但是不要太细,比如写“设置标题大小为32px”,或“设置按钮颜色为#FF0000”,那还不如生成后你复制代码,然后手动改来的快。

原理思考

AI为什么能节省我们的开发时间? 因为我们提供了组件名称,与需要的字段列表,AI能像人一样思考,能从语义上理解你想做的东西,它就知道对于这个组件,这些字段应该怎样布局,字体大小,颜色,样式,间距要怎么设置,因此这部分思考时间AI就帮你节省了。

你是否需要它?

你对组件的样式要求越低,它就越适合你; 反过来你对组件的样式要求越高,比如指定的布局,大小,颜色,间距,你明确的要求越多,AI能帮你思考节省的地方就越少,它就越不适合你。

实践

初次尝试

提供的描述:

名称:a profile card
描述:a small user profile card to display user information
元素列表:
profile picture
username
bio
link to see detail

生成的代码:

import React from 'react'  
  
interface ProfileCardProps {  
  profilePicture: string  
  username: string  
  bio: string  
  link: string  
}  
  
const ProfileCard: React.FC<ProfileCardProps> = ({  
  profilePicture,  
  username,  
  bio,  
  link,  
}) => {  
  return (  
    <div className="bg-base-100 dark:bg-base-200 p-4 rounded-lg shadow-md">  
      <div className="flex items-center">  
        <img  
          src={profilePicture}  
          alt="Profile Picture"  
          className="w-12 h-12 rounded-full"  
        />  
        <div className="ml-4">  
          <h2 className="text-primary font-bold text-lg">{username}</h2>  
          <p className="text-secondary">{bio}</p>  
        </div>  
      </div>  
      <a  
        href={link}  
        className="mt-4 inline-block text-primary hover:text-primary-content"  
      >  
        See Detail  
      </a>  
    </div>  
  )  
}  
  
export default ProfileCard

生成的效果(设置了字段值):

思考: 可以看到,描述里我们只提供了元素的名称,并没有提供位置,大小,颜色等信息,AI帮我们思考出了这些元素的布局与样式。

添加字段

假如我们需要加用户角色与登出按钮。

提供的描述:

名称:a profile card
描述:a small user profile card to display user information
元素列表:
profile picture
username
bio
link to see detail
badge style user role
button to logout

生成的效果:

思考: 可以看到,提供了两个更多字段后,AI生成了另一种合理的布局,如果多生成几次,每次的效果可能都不太一样,但基本都是合理且好看的。 另一个就是我们描述的badge style并没有实现,说明AI具有理解与思考能力,并不是完全死板地按我们的指令做。这种情况下如果一定要badge样式,直接在生成的代码上改可能比较快,而不是提供非常详细的描述,一定要让AI生成出你想要的效果。

微调布局

假如我们对布局有一些要求,比如我想用户role以badge样式放右上角。

提供的描述:

名称:a profile card
描述:a small user profile card to display user information
元素列表:
top:
 - profile picture in left
 - username and bio in right
bottom:
 - link to see detail
 - button to logout
badge style user role in top right with absolute position

生成的效果:

思考: 实际微调下来,小问题还是有一些的,生成的并不很稳定,可能在怎么描述上要花点功夫。

其他例子

订阅

这个专栏会同步更新在 Solo 社区、公众号、知乎、社群。

微信搜索"Solo 独立开发者社区"或者扫描二维码,即可手机订阅。

社区网址:Solo 独立开发者社区-链接每一位独立开发者, 从 Solo 开始

转载请说明出处内容投诉
CSS教程_站长资源网 » AI生成前端组件的价值思考

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买