RicoUI

汇集一下 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 的扩展适合即开即用。

感谢大家喜欢，几天内收获一百多 Star。 今天又继续优化了一下： 1）优化公式渲染 2）增加代码高亮主题，预览图更加直观 github.com/ricocc/rico-md

个人网站作者开源了，值得 Star github.com/ITomPoland/por… 地址： itomdev.com 实现主要是用： Three.js + GSAP 想法比技术更重要！

这是一个让我停下来驻足仔细感受的个人网站！ 为什么我一直都在推荐每个人都去做自己的个站，因为个站是个特别私人的东西，你设计出来的作品会带着独特的个人特质和思考，这是能够感受得到的，而用 AI 无脑产出的东西，是无法触及到人内心的感受的。 itomdev. com 作者：Tomasz Szmajda Creative Developer & UI/UX Designer | High-End Web Experiences | React & GSAP Enthusiast

下午才想起来有 Xiaomimimo 有福利，简单填写了一下， 晚上就收到邮件，不过没想到送了顶格 MAX 16亿的积分，这下得好好折腾一下了，待我体验一下! 非常感谢 xiaomimimo!

@W__Unlimited 不会，目前的主题样式都是我自己调过的，如果是说尝试复制其他人的排版风格的话，目前还没听过侵权一说。 毕竟重要的是内容。

@ricouii 样式会侵权吗

再安利一下我的公众号 md 排版工具，真的用起来很舒服啊，也可以用来写文章 github.com/ricocc/rico-md

趁着假期重新考量一下创作方向了，这种视觉实现的编程探索感觉更合适我，至少比写长文有意思多了

@suddenly01234 看看这个地址 md.ricoui.com README 的地址是之前的，我改一下~ 谢谢

@ricouii 我打开怎么是这样的

最近的时间线上个人网站/作品网站又火起来了，想想我几个月前写的文章就没什么反响，可能文字写得不够好。 有兴趣的可以看看，网站是开源的，可以现成的技术栈二改成自己的网站，质量上更好些。 技术栈是 Astro + Tailwind, 有Figma设计稿，中英文版本的模板。内置 博客、项目、社媒卡片，技能模块等。

@endearqb 感谢，已修复。

@ricouii 提个小小的优化需求

非常喜欢！ 如果说对这套视觉无感、或者担心千篇一律的设计，我觉得重点在于，把思路放开，它并非单纯的一个排版主题 Skill，它已经把所有细节细琢好了，端上桌了，给了你一把铲子，任何人都可以拿这份规范，定制自己的主题规范，应用到实际工作流中。 千人千面，不同的想法和审美，得到的结果自然是不同的。

我整理了 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 优势：案例支持在线体验交互效果，组件设计模拟真实物理交互效果，极简设计的美感。这个灵感库体量比较小，但是设计质感和细节非常棒。 在快节奏的产品迭代中，我们不需要每次都从零构建所有模块。这些组件化灵感网站可以让我们更加专注，将复杂的设计拆解为可复用、可参考的独立组件，让设计和开发能够聚焦于核心创意和用户体验，而非重复劳动。

最近几天在闲暇时间， Vibe Coding 重构了一个公众排版工具，并且也开源出来了，欢迎体验。 md. ricoui. com

此仓库基于花叔 @AlchainHust 的开源项目 editor.huasheng.ai 进行重构。

从 DESIGN.md 得到启发，我重构和开源了一个公众号排版工具，视觉设计和交互，直接用浏览器扩展读取网站的DESIGN.md，然后直接应用到项目中，效果比我想象得更好！其他功能均由 Vibe Coding 完成，PRD 放在仓库里。 md.ricoui.com github.com/ricocc/rico-md/

Chrome 扩展，读取任意网站的 DESIGN.md： chromewebstore.google.com/detail/designm…