RicoUI

234 posts

RicoUI banner
RicoUI

RicoUI

@ricouii

👏网页设计师,探索 AI 和 Vibe Coding,以及写写文章,探讨关于设计和开发的一切体验。目前围绕设计领域开发中... 🌱 OG 灵感: https://t.co/1dQBWsIfPk 🎨 渐变资源: https://t.co/e5xIIx0sao 🛠 工具箱: https://t.co/W4ToeSO8Pv

GuangZhou Katılım Ocak 2025
217 Takip Edilen854 Takipçiler
RicoUI
RicoUI@ricouii·
汇集一下 DESIGN.md 工具网站: 1. styles.refero.design 2. neuform.ai 3. designmd.me 4. designmd.supply 5. getdesign.md 6. github.com/bergside/desig… 个人推荐 refero,提供了 2,000+ DESIGN.md,以及支持 DESIGN.md、Tailwind v4、 CSS Variables 和 Design Tokens 最全面的配置输出。 neuform 给我的视觉体验更好,除了 getdesign md,其他全都支持输入任意网站生成设计规范和配置,design-md-chrome 则是 chrome 的扩展适合即开即用。
中文
2
49
319
12.1K
RicoUI
RicoUI@ricouii·
感谢大家喜欢,几天内收获一百多 Star。 今天又继续优化了一下: 1)优化公式渲染 2)增加代码高亮主题,预览图更加直观 github.com/ricocc/rico-md
中文
0
0
2
129
RicoUI
RicoUI@ricouii·
这是一个让我停下来驻足仔细感受的个人网站! 为什么我一直都在推荐每个人都去做自己的个站,因为个站是个特别私人的东西,你设计出来的作品会带着独特的个人特质和思考,这是能够感受得到的,而用 AI 无脑产出的东西,是无法触及到人内心的感受的。 itomdev. com 作者:Tomasz Szmajda Creative Developer & UI/UX Designer | High-End Web Experiences | React & GSAP Enthusiast
中文
1
2
24
2.3K
RicoUI
RicoUI@ricouii·
下午才想起来有 Xiaomimimo 有福利,简单填写了一下, 晚上就收到邮件,不过没想到送了顶格 MAX 16亿的积分,这下得好好折腾一下了,待我体验一下! 非常感谢 xiaomimimo!
RicoUI tweet media
中文
0
0
0
236
RicoUI
RicoUI@ricouii·
@W__Unlimited 不会,目前的主题样式都是我自己调过的,如果是说尝试复制其他人的排版风格的话,目前还没听过侵权一说。 毕竟重要的是内容。
中文
0
0
1
319
RicoUI
RicoUI@ricouii·
再安利一下我的公众号 md 排版工具,真的用起来很舒服啊,也可以用来写文章 github.com/ricocc/rico-md
RicoUI tweet media
中文
11
57
321
26.3K
RicoUI
RicoUI@ricouii·
最近的时间线上个人网站/作品网站又火起来了,想想我几个月前写的文章就没什么反响,可能文字写得不够好。 有兴趣的可以看看,网站是开源的,可以现成的技术栈二改成自己的网站,质量上更好些。 技术栈是 Astro + Tailwind, 有Figma设计稿,中英文版本的模板。内置 博客、项目、社媒卡片,技能模块等。
RicoUI@ricouii

x.com/i/article/2014…

中文
1
0
3
465
RicoUI
RicoUI@ricouii·
我整理了 12 个聚焦组件化的灵感库,它们不针对完整的系统案例,而是细致的分类和筛选,精选那些优秀的模块案例,不限于 Hero、Pricing、Forms、Blog、FAQ、Features 等网页模块,亦或是 Button、Color、Typography、Modal 等再细分的基础组件: 1. Navbar Gallery 地址:navbar.gallery 优势:按设计风格(3D、Animated、Brutalist 等)做了细致分类,可快速筛选符合项目调性的参考;案例覆盖移动端、桌面端多设备适配场景,设计细节标注清晰,无论是导航交互逻辑还是视觉样式,都能直接借鉴,帮助设计师快速突破导航设计同质化困境。 2. SupaHero 地址:supahero.io 优势:案例风格多元,包含静态简约风、动态交互风、3D 视觉风等,可按行业、设计风格快速筛选;每个案例都完整呈现了标题、副标题、CTA 按钮、背景元素的搭配逻辑,设计师可直接参考布局比例和视觉层级,开发者也能借鉴响应式适配方案。 3. Cta Gallery 地址:cta.gallery 优势:按行业(电商、SaaS、创意服务等)和呈现模式(按钮式、表单式、弹窗式等)分类清晰;案例突出转化型设计的核心细节,如颜色对比、文案引导、交互反馈等,能帮助设计和开发精准优化转化路径,提升用户点击意愿。这样的设计和分类方式,还挺少见,推荐看看。 4. Footer Design 地址:footer.design 优势:按照类型(type)和风格(style)多达数十个分类,方便检索。案例覆盖简约风、丰富型、创意互动型等多种风格,而且有适配不同网站的整体调性;详细呈现了页脚的布局逻辑和信息层级,帮助设计平衡功能性与美观度,避免页脚设计流于形式。 5. unsection 地址:unsection.com 优势:按模块功能和设计风格(Minimal、Interactive、Illustrative 等)双重分类,筛选精准;每个案例都展示了分区的内部布局、元素搭配和视觉节奏,无论是设计分区结构还是开发实现响应式布局,都能直接参考。 6. 404s Design 地址:404s.design 优势:案例按设计风格(Glitchy、Minimal、Illustrative 等)分类,可匹配不同品牌气质;每个案例都突出了 “错误提示 + 引导回流” 的核心逻辑,同时融入创意设计,帮助降低用户流失率,提升品牌好感度。 7. Lookup Design 地址:lookup.design 优势:搜索功能强大,可按组件名称、设计风格、技术栈快速定位案例;案例质量高,均来自优质商业项目和设计获奖作品,附带详细的设计细节和实现思路,支持设计师和开发者交叉参考。 8. Nicely Done Components 地址:nicelydone.club/components 优势:案例注重设计规范和交互逻辑的统一性,适合作为品牌设计系统的参考蓝本;支持按组件类型和设计风格筛选,每个案例都标注了关键设计细节,帮助设计团队建立统一的组件设计标准。如果想使用完整的功能,得升级付费。 9. Awwwards Collections 地址:awwwards.com/collections/ 优势:案例权威性强,设计水准顶尖,能直观把握最新组件设计趋势;按设计风格、行业、组件类型多维度分类,支持设计师快速汲取获奖作品的设计灵感,提升项目设计质感。这也是我特地放到这个合集中的原因,设计品质和交互动效绝佳。 10. Detail Design 地址:detail.design 优势:案例放大组件的细节处理,如按钮的 hover 效果、表单的输入反馈、卡片的阴影层次等,支持按组件类型和细节特点筛选,精准匹配不同场景的细节优化需求。 11. FigComponents 地址:figcomponents.com 优势:案例与 Figma 设计工具高度兼容,支持一键复制或下载组件文件,无需重复绘制;组件设计规范统一,可直接融入自有设计系统,提升设计效率;社区活跃度高,案例持续更新 12. Drams 地址:drams.framer.website 优势:案例支持在线体验交互效果,组件设计模拟真实物理交互效果,极简设计的美感。这个灵感库体量比较小,但是设计质感和细节非常棒。 在快节奏的产品迭代中,我们不需要每次都从零构建所有模块。这些组件化灵感网站可以让我们更加专注,将复杂的设计拆解为可复用、可参考的独立组件,让设计和开发能够聚焦于核心创意和用户体验,而非重复劳动。
中文
0
1
4
247
RicoUI
RicoUI@ricouii·
最近几天在闲暇时间, Vibe Coding 重构了一个公众排版工具,并且也开源出来了,欢迎体验。 md. ricoui. com
中文
0
0
3
318
RicoUI
RicoUI@ricouii·
从 DESIGN.md 得到启发,我重构和开源了一个公众号排版工具,视觉设计和交互,直接用浏览器扩展读取网站的DESIGN.md,然后直接应用到项目中,效果比我想象得更好!其他功能均由 Vibe Coding 完成,PRD 放在仓库里。 md.ricoui.com github.com/ricocc/rico-md/
中文
2
0
4
228