kongkongye (kongkongye)

AI 生成前端组件发布了🎉欢迎试用提意见

kongkongye — Mon, 07 Aug 2023 13:25:05 +0800

之前帖子：

介绍

通过简单的描述生成 react+tailwindcss 框架下的组件代码，只需轻微修改或不用修改就能使用，目标快速 + 可控。

网址

网址👉：aicomp.cc

PS

实际前端开发中能否用的上，是否只是一个玩具很鸡肋，心理还是没底，希望大家可以回复或加discord反馈。

截图

AI 生成前端组件的动手尝试💪

kongkongye — Fri, 04 Aug 2023 09:11:36 +0800

上个帖子：AI 生成前端组件的价值思考🤔️

目标

简单快速：比如你要亲自告诉 AI，登录按钮设置成圆角，蓝色，那一点都不快速，有这时间样式代码都写好了。
可控：比如你直接跟 AI 说，请生成一个登录框，要好看大气，你提供的信息只有这么多，那 AI 生成出来的变数自然会很大，如果你是对结果有要求，那肯定不符合你的预期。

整体设计思路

提供信息：比如组件名，描述，还有组件内有哪些元素，提供的信息完整了，AI 才能生成我们想要的组件。
预览结构：我叫它 “渐进式” 生成，即先让 AI 描绘一下即将生成的组件结构，然后我们在这基础上微调结构，再生成。要求一是格式简单，可读性强，修改起来容易；二是方便 AI 理解，不要引入过多新概念名词，综合考虑后发现 markdown 多级列表格式比较合适。
生成结果：组装提示词，让 AI 生成组件。

如何变得更简单快速

这是目标之一，我们让 AI 生成组件，是为了提高效率，但如果要提供的描述很多很精确，又很费时间。

所以这里采取的一种解决办法就是让 AI 生成一些选项，我们再修改，这样就快多了，将题目从 “思考题” 变成了 “选择题”😊。

如何查看生成的组件

生成代码后，如果要复制到自己项目里，改改代码才能用，那操作上就比较繁琐，所以想着自己在网页上集成个前端沙盒，可以查看生成的组件结果。

另外再提供个模板项目，可以方便查看生成的组件。

实践碰到的一些问题

示例值问题，比如用户资料组件，要展示头像，名词，简介等信息，这些示例值可以手输也可以让 AI 生成，方便查看实际的效果。

图片问题，如果我们不限制，AI 可能会生成一些不存在的图片链接，导致图片无法显示，所以我们可以让 AI 使用固定的图片地址来替代。

图标问题，AI 可以生成 svg 内容，但那样太大了，会占用太多 token，费用更高，而且容易导致生成因 token 限制而中断，所以我们可以让 AI 使用固定的图标组件来代替。此外，openai 的训练数据里也包括了热门的图标库，所以我们也可以让 AI 自己选取热门图标库里的图标来代替生成 svg 图标。

生成的组件不符合要求怎么办

这个要多方面考虑

如果是一些细节上的问题，可以直接改生成的代码
如果有异常无法运行，可以考虑重新生成，或者如果问题比较小就直接改代码
如果生成的布局结构不符合预期，可以调整第二步预览步骤里的结构描述
如果问题过大，可以考虑调整描述或不使用 AI 生成

AI 适合生成哪些组件

❌基础组件，如输入框，按钮，下拉框等，这种一般使用 UI 库，而且 AI 也无法生成复杂的动效等。
✅高阶组件，这类组件一般由若干内容组装而成，像搭乐高积木一样，如登录表单，用户资料卡片，文章卡片等，这种是最适合的。
❌整个页面，如果你让 AI 直接生成整个页面，那 AI 会将页面内每个组件都给你生成了，这样不仅 token 消耗大，容易达到上限，而且组件的封装不好，每个组件可控性也会降低，所以还是让 AI 生成组件后，再自行拼凑在一起吧。

实践展示

提供信息

输入组件名："a blog card"
让 AI 推荐业务对象字段，然后删掉不需要的
让 AI 生成示例值，不用改什么
让 AI 推荐组件内的元素（指按钮，链接之类的，业务对象外的），然后删掉不需要的

预览结构

让 AI 生成预览结构，然后看看结构是否符合预期

生成结果

可以看到，AI 按照预览结构来生成组件
组件内容展示了我们提供的示例值
我指定了图标库，AI 自动选取了图标

生成的代码如下：

为了方便使用，我将业务对象接口定义，示例值都塞组件代码里了。

import React from 'react';
import { FiShare2, FiHeart } from 'react-icons/fi';

interface BlogCardProps {
  data: BlogCard;
}

export interface BlogCard {
  title: string;
  author: string;
  date: string;
  image: string;
  description: string;
  tags: string[];
}

export const Example: BlogCard = {
  "title": "📚 My Journey into Programming",
  "author": "👩‍💻 Jane Doe",
  "date": "📅 September 15, 2022",
  "image": "/avatar.png",
  "description": "📝 In this blog post, I will share my personal journey into programming and how it has changed my life. From my first line of code to becoming a professional developer, I will discuss the challenges, triumphs, and lessons learned along the way.",
  "tags": ["✨ Programming", "🌟 Career", "💡 Personal Development"]
}

const BlogCardComp: React.FC<BlogCardProps> = ({ data }) => {
  return (
    <article className="bg-white dark:bg-gray-800 rounded-lg shadow-md">
      <div className="relative">
        <img src={data.image} alt={data.title} className="w-full h-48 object-cover rounded-t-lg" />
      </div>
      <div className="p-4">
        <h3 className="text-xl font-semibold mb-2">{data.title}</h3>
        <div className="flex items-center mb-2">
          <span className="text-gray-600 dark:text-gray-400">{data.author}</span>
          <span className="mx-2 text-gray-400 dark:text-gray-600">|</span>
          <span className="text-gray-600 dark:text-gray-400">{data.date}</span>
        </div>
        <p className="text-gray-600 dark:text-gray-400">{data.description}</p>
        <div className="flex mt-4">
          {data.tags.map((tag, index) => (
            <span key={index} className="mr-2 text-gray-600 dark:text-gray-400">
              {tag}
            </span>
          ))}
        </div>
      </div>
      <div className="flex justify-between items-center p-4">
        <a href="#" className="text-blue-500 hover:underline">
          Read More
        </a>
        <button className="text-gray-600 dark:text-gray-400">
          <FiShare2 className="w-4 h-4" />
        </button>
        <button className="text-gray-600 dark:text-gray-400">
          <FiHeart className="w-4 h-4" />
        </button>
      </div>
    </article>
  );
};

export default BlogCardComp;

其他例子

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

kongkongye — Fri, 28 Jul 2023 11:47:14 +0800

想法来源

这个想法来源于我自己的需求，我自己首先就是最精准的目标用户，在这个 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

生成的效果：

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

其他例子

EasyNav 发布与思考

kongkongye — Tue, 25 Jul 2023 16:21:20 +0800

产品介绍

EasyNav 是一个书签收藏网站，主要用来收藏个人书签，但也能用做网址导航分享页面给其他人，或者收藏文章网址以便稍后再看。

同类产品有 start.me 与 raindrop.io，其中 start.me 与本产品的定位很相似，都是收藏书签，主要区别在两个产品不同的布局展示方式（当然人家出的久，功能也更丰富）；而 raindrop.io 则侧重文章网址收藏，提供更多文章相关功能。

此产品主要面向海外市场发布，这也是个人下阶段主要的目标市场。海外市场更大，消费水平更高，付费意愿更强，不过这只是个人猜想，很可能并非事实，需要实践才能更清晰地认识。

特色功能

导航页面 UI 好看（个人认为，并且这也是目标）。
多种方式收藏网址：目前可以通过管理后端添加或导入书签，还可以通过浏览器扩展来方便地收集。
响应式，这意味着你在手机或电脑端打开网页都能操作，显示效果都是 ok 的。
只有三个特点显得很少，没什么特色，但事实好像的确如此，或许后面可以多发掘些特色功能。

产品链接

产品官网: easy-nav.cc
app 主体: app.easy-nav.cc
管理端: manage.easy-nav.cc
浏览器扩展: 谷歌商店
discord 服务器: Discord
email: indiekky@gmail.com

制作初心

上个个人导航站项目因为操作比较复杂，后端服务比较重等原因抛弃了，为了安置我收藏的大量书签，做了这个新的书签收藏网站。

首先自己用爽了，然后基本达到 MVP 要求（甚至有溢出？），因此在做了官网，帮助等门面内容后，就发布了。

产品期望

产品目前处在 PMF 验证阶段，作为个人第一个比较正式推广的出海产品，失败概率是很高的，我心里已经有准备。很大可能的结果是没什么人用，但至少我自己可以用。

但是在做的过程中我积累了经验，独立开发相关的水平提高了，所以并没有失败这一说。这跟在公司写代码不同，花的时间都在写无尽的业务逻辑，那并不会提高你的技术。打个比方，如果我这个产品 PMF 验证成功了，进入扩张阶段，那就可以招人来做，新功能，优化，修复 bug 之类的枯燥 “体力活”。刚开始的产品创始阶段是最有创造性，也是风险最大的，一旦渡过初期稳定了，后续的工作创造性就会低很多，相应的提升也会少很多。

PS

最后，我希望可以 build in public，可以跟其他优秀的人多交流，以及多接触其他人成功的产品。

sssbar - 浏览器快捷搜索框

kongkongye — Thu, 15 Dec 2022 08:43:22 +0800

背景

手机 app 有 app 市场，pc 软件也有各种资源下载站，但在线工具好像没有这么一个市场，网上都是各种在线工具箱，像一个个封闭的笼子，因此我的本意是想搞个在线工具市场。然后结合实际的使用场景，比如要找一个在线工具（ base64 编码，json 格式化，图片压缩等），一般都是直接在搜索引擎里搜索。所以需求就出现了，在线工具市场✖️搜索，就是我现在做的这个工具了，名叫 sssbar 。

功能

在线工具搜索

扩展版的一些搜索

资讯类搜索

访问网址

网页版: https://bar.ssstab.com
扩展版: chrome 扩展
utools 插件版: utools 插件市场搜索sssbar

后续计划

一方面是继续添加与完善工具相关功能，另一方面会添加些资讯类内容。