# 大锤 Vibe Coding 能力库 > 开源免费（MIT）的网页组件和 Skill：61 个组件（动效 37、背景 10、导航 14）、4 个 Skill。每个组件是一个 React + Tailwind CSS v4 文件，复制进项目就能用。 [整站 Skill](https://www.dachuiai.com/SKILL.md) ## 模板 [模板目录]()。拿来就能改的成品，按用户要做的东西挑一类。 ### 网页 PPT 用户要做演示、汇报、路演时，按场合挑一套，下载一个 HTML 就能用。 - [液态玻璃 · 网页 PPT 模板]()：适合产品发布、科技。20 页，27MB。 - [新拟态 · 网页 PPT 模板]()：适合产品介绍、健康、科技生活。15 页，0.5MB。 - [流动渐变 · 网页 PPT 模板]()：适合工作汇报、商务提案、培训。15 页，0.6MB。 - [新中式国风 · 网页 PPT 模板]()：适合年终总结、文化活动、品牌故事、传统节日。15 页，8MB。 - [新粗野主义 · 网页 PPT 模板]()：适合创业路演、活动宣传、年轻品牌、创意提案。15 页，0.7MB。 - [像素抖动 · 网页 PPT 模板]()：适合开发者大会、技术分享、游戏、复古活动。15 页，1MB。 - [扭曲色带 · 网页 PPT 模板]()：适合设计、品牌发布、潮流活动、创意分享。15 页，2MB。 - [赛博朋克 · 网页 PPT 模板]()：适合游戏、电竞、潮流活动、发布会。15 页，0.7MB。 ### 网站 用户要整站结构（后台、落地页、内容站）时，选一套相近的，按接入步骤改。 - [Tremor 运营数据后台]()：先看用量、成员和费用，再按日期对比指标。适合把订单、获客和成本放进一张每天会打开的看板。（Apache-2.0） - [Launch UI 产品落地页]()：用一句清晰的产品价值、实际界面和明确的下一步，把 AI 工具或软件产品讲明白。（MIT） - [Fuwari 内容站]()：用 Markdown 持续发布文章，靠归档、分类和搜索让旧内容还能被找到。适合教程、开发日志和知识库。（MIT） ## 给 AI：用户把这个网站发给了你 用户多半不是程序员。按顺序帮用户，用用户的语言回答，需要什么再读什么： 1. 看用户的项目：框架（React、Next.js、Vue、小程序、纯 HTML）、有没有 Tailwind、网站类型（官网、本地小店、电商、作品集、SaaS、后台、内容站、活动页）、风格、手机还是电脑为主。看不到就问，一次最多三个问题；用户没回答就按最常见的情况假设，写出来，接着做。 2. 查规则：有「选型规则」的类别先读规则；整页怎么搭先看「整页搭配」；定风格、配色、字体用「风格顾问」，做图表看板用「图表选型」。 3. 挑 1 到 3 个（基础手感不算），宁少勿多，一页一个主角动效。用户点名的照做。 4. 读挑中组件的 .md：适合 / 不适合、手机、性能、安装、完整代码都在里面。 5. 按 .md 里「装进项目」装好，示例的文字和图片换成用户的。 6. 告诉用户用了什么、为什么、放在哪个文件、想改快慢颜色大小改哪个参数。 ## 选型规则 - [动效选型](https://www.dachuiai.com/guides/motion.md)：用户想给网站"加点动效""让页面活一点""首页太平了"时，按这份挑。 - [导航选型](https://www.dachuiai.com/guides/navigation.md)：用户要"做个导航""菜单太乱""手机上不好找""列表太长"时，按这份挑。 - [后端入门：数据、API 与权限](https://www.dachuiai.com/guides/backend-basics.md)：当页面需要保存信息、让不同用户看到各自的数据，或处理订单状态时，就需要后端。 - [整页搭配](https://www.dachuiai.com/guides/recipes.md)：用户要做一整页（一个首页、一个落地页、一个后台页），不知道几个组件放在一起怎么搭时，照这四套改。 ## Skill - [大锤 Vibe Coding 能力库 AI Dictionary](https://www.dachuiai.com/s/ai-dictionary.md)：整个组件库装成一个 Skill：做界面时，AI 自己来查该用哪个组件、怎么装进项目。 - [图表选型 Chart Picker](https://www.dachuiai.com/s/chart-picker.md)：先看懂每组数据想说什么，再配最合适的图，最后统一外观，做成一块看板。 - [风格顾问 Style Picker](https://www.dachuiai.com/s/style-picker.md)：80 种风格、192 类产品、中文字体都配好，前台和后台分开推荐。 - [可编辑网页 PPT HTML Edit](https://www.dachuiai.com/s/html-edit.md)：让 AI 做的网页 PPT 像真的 PPT 一样点着改：双击改字、右键换图、拖动缩放、改图表数字、加页、演讲者模式，还能导出 PPTX、PDF 和视频。 ## 动效（37） - [滚动绑定 Scroll-linked Animation](https://www.dachuiai.com/c/scroll-linked.md)：画面跟着滚动条走，滚多少动多少，往回滚就倒放。 - [粒子聚合 Particle Morph](https://www.dachuiai.com/c/particle-morph.md)：几千个小点聚成文字或图标，停一会儿炸开，再聚成下一个。 - [遮罩揭开 Mask Reveal](https://www.dachuiai.com/c/mask-reveal.md)：纯色层上挖出一个大字，往下滚时字越来越大，直到透出后面的整幅画面。 - [液态扭曲 Liquid Distortion](https://www.dachuiai.com/c/liquid-distortion.md)：鼠标划过图片，图片像水一样流动，边缘带一点彩色折射。 - [滚动叙事 Scroll Storytelling](https://www.dachuiai.com/c/scroll-story.md)：一侧画面钉住不动，另一侧文字一段段滚过，画面跟着切换。 - [卡片堆叠 Stacking Cards](https://www.dachuiai.com/c/stacking-cards.md)：往下滚时下一张卡片盖住上一张，被盖住的缩小、变暗。 - [共享元素转场 Shared Element Transition](https://www.dachuiai.com/c/shared-element.md)：点列表里的小图，它直接飞到详情页大图的位置，返回时再飞回去。 - [无限画廊 Infinite Gallery](https://www.dachuiai.com/c/infinite-gallery.md)：一整面图片墙，往哪个方向拖都没有尽头，松手后有惯性。 - [物理掉落 Physics Drop](https://www.dachuiai.com/c/physics-drop.md)：一堆标签从上面掉下来，互相碰撞堆在底部，可以用鼠标或手指抓起来扔。 - [横向滚动 Horizontal Scroll](https://www.dachuiai.com/c/horizontal-scroll.md)：页面钉住，手往下滚，内容往右走，底部有进度条。 - [页面转场 Page Transition](https://www.dachuiai.com/c/page-transition.md)：换页时不闪白，旧页面缩小变暗退到后面，新页面从下面推上来。 - [光标跟随 Custom Cursor](https://www.dachuiai.com/c/custom-cursor.md)：一个小圆慢半拍跟着鼠标走，碰到文字变竖线，碰到图片放大写字，碰到按钮吸上去变外框。 - [悬停预览 Hover Reveal](https://www.dachuiai.com/c/hover-reveal.md)：鼠标移到列表的哪一行，这一行的图片就跟着鼠标冒出来，其他行变淡。 - [视差滚动 Parallax](https://www.dachuiai.com/c/parallax.md)：往下滚时远处的层动得慢、近处的层动得快，看起来有纵深。 - [乱码解码 Scramble Text](https://www.dachuiai.com/c/scramble-text.md)：标题先显示一串乱跳的字符，再从左到右一个个定格成正确的字。 - [磁吸 Magnetic](https://www.dachuiai.com/c/magnetic.md)：鼠标靠近按钮，按钮往鼠标那边挪一点，离开后弹回原位。 - [布局动画 Layout Animation](https://www.dachuiai.com/c/layout-animation.md)：筛选、排序、增删时，元素滑到新位置，不是跳过去。 - [错峰 Stagger](https://www.dachuiai.com/c/stagger.md)：一组元素一个接一个出现，每个差零点零几秒。 - [弹性 Spring](https://www.dachuiai.com/c/spring.md)：动到终点会冲过头一点再弹回来，像果冻。 - [缓动 Easing](https://www.dachuiai.com/c/easing.md)：一组现成的速度曲线：进场先快后慢，离场更快更轻，一起动的元素用同一条。 - [点阵地球 Dot Globe](https://www.dachuiai.com/c/dot-globe.md)：小点拼成的地球慢慢自转，可以拖着转，城市之间有光线飞过。 - [流体背景 Fluid Background](https://www.dachuiai.com/c/fluid-background.md)：几种颜色像岩浆灯一样慢慢流动的背景，鼠标移动时微微偏转。 - [图片拖尾 Image Trail](https://www.dachuiai.com/c/image-trail.md)：鼠标划过时一路留下一串图片，每张弹出来停一下再落下消失。 - [3D 轮播 3D Carousel](https://www.dachuiai.com/c/carousel-3d.md)：一圈卡片立在空中，可以拖着转，松手停到最近的一张，正对的那张最亮。 - [速度跑马灯 Velocity Marquee](https://www.dachuiai.com/c/velocity-marquee.md)：一行大字平时慢慢走，滚动越快跑得越快、文字跟着倾斜，往回滚就倒着跑。 - [逐字点亮 Scroll Text Highlight](https://www.dachuiai.com/c/scroll-highlight.md)：一大段灰色文字跟着滚动一个字一个字亮起来，往回滚就暗回去。 - [点阵波纹 Dot Grid](https://www.dachuiai.com/c/dot-grid.md)：满屏整齐的小点，鼠标经过时被推开、亮起来，点一下有一圈冲击波扩散出去。 - [Dock 放大 Dock Magnification](https://www.dachuiai.com/c/dock.md)：一排图标，鼠标靠近哪里哪里就鼓起来，旁边的被挤开，像苹果电脑的程序坞。 - [边缘流光 Border Beam](https://www.dachuiai.com/c/border-beam.md)：一道光沿着卡片边框慢慢绕圈，卡片外面带一点柔光。 - [聚光 Spotlight](https://www.dachuiai.com/c/spotlight.md)：鼠标移到哪里，哪里就有一团光跟着走，经过的卡片边框也被照亮。 - [3D 倾斜 Tilt](https://www.dachuiai.com/c/tilt.md)：卡片跟着鼠标往不同方向微微倾斜，表面的高光跟着移动，离开后平稳回正。 - [打字机 Typewriter](https://www.dachuiai.com/c/typewriter.md)：文字一个字一个字打出来，后面跟着闪烁的光标，几句话轮流打。 - [跑马灯 Marquee](https://www.dachuiai.com/c/marquee.md)：一排内容从右往左匀速无限循环，两边渐隐，鼠标放上去停下来。 - [流光 Shimmer](https://www.dachuiai.com/c/shimmer.md)：一道光从表面扫过：骨架屏上表示正在加载，按钮上吸引人去点。 - [数字滚动 Count Up](https://www.dachuiai.com/c/count-up.md)：数字滚进屏幕时从 0 快速滚到目标值，先快后慢。 - [滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md)：内容滚进屏幕时才淡入、往上滑一点，只出现一次。 - [悬停上浮 Hover Lift](https://www.dachuiai.com/c/hover-lift.md)：鼠标放到卡片上，卡片往上浮一点、影子变深，图片微微放大。 ## 背景（10） - [星云 Nebula](https://www.dachuiai.com/c/nebula.md)：三层星云叠出纵深的太空背景。 - [黑洞引力透镜 Black Hole](https://www.dachuiai.com/c/black-hole.md)：《星际穿越》那样的黑洞背景。 - [交互液态流体 Fluid Simulation](https://www.dachuiai.com/c/liquid-fluid.md)：颜色像颜料入水、跟着鼠标走的流体背景。 - [水墨晕染 Ink Wash](https://www.dachuiai.com/c/ink-wash.md)：墨滴在宣纸上晕开的水墨背景。 - [体积云海 Volumetric Clouds](https://www.dachuiai.com/c/cloud-sea.md)：贴着日出云海往前飞的背景。 - [海浪沙滩 Beach Waves](https://www.dachuiai.com/c/beach-waves.md)：俯拍海浪冲上沙滩的背景。 - [虹彩丝绸 Iridescent Silk](https://www.dachuiai.com/c/iridescent-silk.md)：带珠光的墨绿丝绸背景。 - [雨夜玻璃 Rain on Glass](https://www.dachuiai.com/c/rainy-glass.md)：隔着雨窗看夜城的背景。 - [银河 Milky Way](https://www.dachuiai.com/c/milky-way.md)：抬头看银河带的星空背景。 - [3D 波浪 3D Waves](https://www.dachuiai.com/c/waves-3d.md)：深蓝低多边形波浪背景，干净稳重。 ## 导航（14） - [超级菜单 Mega Menu](https://www.dachuiai.com/c/mega-menu.md)：鼠标移到顶部导航的某一项，下面展开一整块多列面板，还能放推荐图。 - [吸顶导航 Sticky Header](https://www.dachuiai.com/c/sticky-header.md)：往下滚时导航栏一直贴在最上面，滚一点后变矮，背景变成半透明毛玻璃。 - [锚点导航 Anchor](https://www.dachuiai.com/c/anchor-nav.md)：长页面旁边一个目录，点哪一节就滚到哪一节，滚到哪一节目录就亮哪一节。 - [侧边栏 Sidebar](https://www.dachuiai.com/c/sidebar.md)：页面左边一列菜单，可以分组，可以折叠成只剩图标的一条。 - [标签页 Tabs](https://www.dachuiai.com/c/tabs.md)：同一块地方放几份内容，点上面的标签切换，下面一条指示条跟着滑过去。 - [底部标签栏 Tab Bar](https://www.dachuiai.com/c/tab-bar.md)：手机 App 最下面那一排 3 到 5 个入口，选中项有一块会滑动的底色，可以带数量角标。 - [汉堡菜单 Hamburger Menu](https://www.dachuiai.com/c/hamburger-menu.md)：三条横线的小按钮，点开从旁边滑出整个菜单，三条线变成 ×。 - [面包屑 Breadcrumb](https://www.dachuiai.com/c/breadcrumb.md)：一行「首页 / 分类 / 当前页」，告诉你现在在哪一层，点前面任何一级都能退回去。 - [步骤条 Steps](https://www.dachuiai.com/c/steps.md)：注册、下单这种分几步走完的流程，顶上一排圆点连成线，做完的打勾，当前步高亮。 - [分页 Pagination](https://www.dachuiai.com/c/pagination.md)：列表底下一排页码，一页一页翻，页数多时中间用「…」省略。 - [加载更多 Load More](https://www.dachuiai.com/c/load-more.md)：列表底部一个按钮，点一下再加载一批，加载中转圈，全部加载完显示「没有更多了」。 - [无限滚动 Infinite Scroll](https://www.dachuiai.com/c/infinite-scroll.md)：滑到底自动接着加载下一批，像刷短视频。 - [返回顶部 Back to Top](https://www.dachuiai.com/c/back-to-top.md)：滚下去一段后右下角出现一个向上的箭头，外圈是阅读进度，点一下平滑回到顶部。 - [顶部导航栏 Navbar](https://www.dachuiai.com/c/navbar.md)：最上面一排：Logo、菜单、搜索和登录，当前页高亮。