用TRAE为vibe coding制作的图片查看器软件制作官方网站

大家好,我是一名平面设计师,0编程基础从0-1开发4个半月开发了一款图片查看器桌面端软件,

然后我使用了trae制作了官网,并部署在自己的云服务器上。

前端框架

  • React 18 - UI 框架

  • TypeScript - 类型安全

  • Vite 6 - 构建工具

样式

  • Tailwind CSS 3 - 原子化 CSS 框架

  • PostCSS + Autoprefixer - CSS 处理

  • clsx + tailwind-merge - 类名管理工具

动画与特效

  • Framer Motion - React 动画库

  • GSAP - 专业动画库

  • Three.js - 3D 图形库

  • PostProcessing - 后期处理效果

  • tsParticles - 粒子效果引擎

光标特效有到React Bits上拿的样式。

使用的是腾讯云的服务器,抢的国区38元一年4核4G。然后一元域名。不好的地方就是需要备案啦,不过也不算太久,基本1-2天审批一个东西,大概审批个3次左右就完成了,不算难,就是准备材料有点小麻烦。

本来想一起把图片查看器这个项目也说说的,本来想做个视频,但刚好事比较忙,明天估计做不出来参加这个社区活动就先分享一下我这个官网的经验啦

想试用我的图片查看器桌面版可以到我官网下载 https://pixdualv.art

4 个赞

我靠,这么强:+1:

2 个赞

很好看哎:tada:

2 个赞

谢谢,下次有机会分享一下我这个图片查看器,0基础制作4个半月,功能超级多的,但目前这个论坛格式有点难写。。可能到时会分享一个介绍录像

2 个赞

做的挺好看的


交互是真有趣
大哥你多分享点

1 个赞

前端好高级,想学习一下是怎么做出来的,我trae生成的太土了感觉

2 个赞

+1 他们做的是真好看

其实没用啥特别方法。。因为我本身是个平面设计,喜欢浏览或者找参考的习惯,有参考了剪映和TRAE的官网啦,一开始直接让参考剪映的布局,但是出来效果不好,位置全是错的。后来只好自己跟AI一步步调整了。。有些效果是在React Bits上面拿的效果,你们可以在一些库上找合适的,然后让ai加到自己的项目上,但是代码很长,我就记成笔记本形式让模型读取,不然上下文读不完那么长的代码~~虽然效果不一定能复刻,但也非常像,稍微调整一下就可以

4 个赞