xiaohanyu

@LeeReamond 还是不容易的，因为 motion 是个动态的东西，你去趴别的人网站，看别人的实现，然后来实现自己的，相当于，给你一堆食材，让你自己做顿美味，如果你没有经验的话，不容易。很多 motion 的设置其实并不是 linear 的值。

专业团队有专门做 motion design 的（算是 UX 下面一个很重要的分支），具体你可以搜下这种岗位的需求。

开源实现方面，可以看下 neon database 的网站： https://github.com/neondatabase/website 。

供参考哈。

如果是想要更大的灵活性（甚至一些可编程性的话），可以看看 retool： https://retool.com/ 或者其他类似的工具，国内应该有同类的竞品，自己可以去查查

海外的 SaaS 工具：

- https://tally.so/ ，有免费额度
- https://www.typeform.com/

“过渡的动画样式比较丰富的” 这点其实满难搞的，首先就是 CSS 的过渡（ transition ）和动画（ animation ）的 API 就有一大堆，然后也不太好学；再就是用得太多的话，网站也比较容易卡顿；还有就是，良好设计和规划的过渡和动画是 UX 的事情，程序员自己想出来的往往都是有问题的……这个是蛮专业的领域，大规模的团队是有专门的职位搞过渡和动画的。

建议只有框架内提供的基本的一些过渡和动画，不建议自己搞太多。

我了解到的一个比较好的应用过渡和动画的网站： https://www.relume.io/ 。看一下就知道，没有专业的 UX 团队，靠程序员自己是很难搞出这种效果的了。

总体上讲，react 的 UI 库选择还是比 vue 要丰富多了，不过学习成本是比较高的，如果只是做个静态的 landing page 或者交互性不多的网站，传统的 jQuery 方案，以及基于 jQuery 的各种 UI 库（ Bootstrap 之类）就是成本最低的选择，简单+容易上手+海量的模板选择。

Tailwind CSS 写起来比较快，不过项目规模大的话，几十个 class 写在一起，很难维护的。

程序员自己搞网站，没有设计师的话，注意 font/spacing/grid/color pattern 这几个基本点，保证全站的统一，然后不要引入太花哨的东西，再参考已有的一些设计，基本上是可以搞出一个及格的设计的。Tailwind 作者有本叫 refactoring UI 的书，写得蛮好的，可以参考下。

我自己用 react UI 库（ https://mantine.dev/）写的 SaaS： https://ppresume.com/ ，一个基于 LaTeX 的简历生成器。自认为还是做到了“简单”、“好看”的标准的。



[讨论]( https://v2ex.com/t/1030970)

仅供参考哈。

@kile 啊，PrimeReact 和 Chakra UI 我都没用过呢，不过我粗略看了下，觉得 mantine 有几点还是很有优势的

1. 组件更丰富，比较常用的 DatePicker, MonthPicker ，Chakra UI 没有： https://mantine.dev/dates/month-picker/，PrimeReact 有个 Calendar 组件，但是不如 mantine 的 DataPicker/MonthPicker/YearPicker 强大，再比如 Rich Text Editor： https://mantine.dev/x/tiptap/，这两个重量级组件在我的产品 PPResume 中都是重度使用的。Mantine v7 还加入了对 Charts 的支持： https://mantine.dev/charts/getting-started/
2. hooks 更多，参见： https://mantine.dev/hooks/use-click-outside/，对比 PrimeReact： https://primereact.org/hooks/usemounteffect/ 和 Chakra UI： https://v2.chakra-ui.com/docs/hooks/use-boolean 。
3. style 定制，mantine 提供特别丰富的 style 定制方式，最重要的是和一般 UI 库不同，mantine 可以定制选择 internal child components ，而不像大多数 UI 库只能通过传 className 的方式定制最外层的 component ，参见： https://mantine.dev/styles/styles-overview/ 和 https://mantine.dev/styles/styles-api/，当然 Chakra UI 和 PrimeReact 也是提供了 component style 定制的 API ，比如 Chakra UI： https://v2.chakra-ui.com/docs/components/slider/theming ，但是好像用的是自己的 DSL ，不知清楚是否可以用全部的 CSS ，mantine v7 用的是 CSS module ，可以利用全部的 CSS 属性的，Prime React 的 styling： https://primereact.org/calendar 。我总体感觉 mantine 的 CSS module 还是更舒服一些 ，性能也更好一些（ mantine v6 -> v7 是升级到了 CSS module ）

说的不一定对哈，供参考。

---

背景：我最开始写 PPResume 是用 tailwind ，后来花了点时间全部迁移到了 mantine ，经历了从 v5 -> v6 -> v7 的升级，总体对这个库还是非常满意的。

@kile Mantine: https://mantine.dev/ ，个人用过的最强大的 react UI 库，强烈推荐。最开始也是用的 tailwind ，后来迁移到了 mantine： https://github.com/orgs/mantinedev/discussions/6111

TS 一把梭写了个自己的 SaaS 产品： https://ppresume.com （一个基于 LaTeX 的简历生成器），13 KLOC 代码左右，感觉还是非常有帮助的，引入的成本不大，也没必要去生硬去抠类型体操，但是对开发流程和体验的优化还是很有帮助的。当然，如果只是临时写写一些几十几百行的脚本，TS 提升有限。

@demonps 嗯，章节顺序重排，还有自定义章节其实很多人提过，我也有列过计划： https://github.com/ppresume/community/issues/5 ，https://github.com/ppresume/community/issues/12 ，最近刚刚有点时间来着手做这些，不过在做章节重排之前还要先把后端底层的数据结构再重构一下，快的话估计一个月左右可以上线了