# 大锤 Vibe Coding 能力库 AI Dictionary

> 整个组件库装成一个 Skill：做界面时，AI 自己来查该用哪个组件、怎么装进项目；风格顾问和图表选型也从这里进。

[全部组件和流程](https://www.dachuiai.com/llms.txt)

## 给 AI：用户把这个 Skill 发给了你

下面「全文」就是做法，按它一步步做：它要你先问的先问，要你先给方案的先给方案，用户点头了再写代码。
网站上教用户的用法：用 Claude 的下载安装包装一次；用别的 AI，复制全部发过去，再说你想做什么。

## 下载

- [下载 SKILL.md](https://www.dachuiai.com/skills/ai-dictionary/SKILL.md)
- [Claude 安装包](https://www.dachuiai.com/skills/ai-dictionary/ai-dictionary.skill)：用 Claude 的可以直接安装

## 全文

---
name: ai-dictionary
description: 做网页、App 界面时使用：要加动效、导航、聊天框、按钮效果，或者想让页面好看一点、高级一点、现代一点、不那么死板，先到「大锤 Vibe Coding 能力库」查该用哪个现成组件，再把代码装进项目；定风格配色、做图表看板也从这里进。用户说"加点动效""首页太平了""做个导航""做个看板""换个风格"，或者提到 大锤 Vibe Coding 能力库、组件库，哪怕没点名要用组件，也用它。
---

# 大锤 Vibe Coding 能力库

开源免费（MIT）的组件和 Skill 网站：<https://www.dachuiai.com/>

里面每个组件都是一个 React + Tailwind CSS v4 文件，带着「什么时候用、什么时候别用、手机上怎么样、怎么装」。网站一直在加新组件，所以每次都去网站上查最新的，不要凭记忆写。

## 按需读，别一次全读

1. **目录**（先读它，一页）：<https://www.dachuiai.com/llms.txt>。所有类别、选型规则、每个组件一行说明。
2. **选型规则**：目录里列着的 `guides/<类别>.md`，只读这次用得上的那一类。
3. **组件说明**：挑中哪个读哪个，`c/<组件>.md`，安装方法和完整代码都在里面。
4. **组件原文**：`code/<文件名>`。能跑命令就用 `curl -fsSL -o` 下载，比手抄准。

网站打不开时告诉用户，请用户在浏览器里打开 <https://www.dachuiai.com/>，在组件页点「复制给 AI」或把代码复制过来。

## 先分流

- **定整体风格、配色、字体**，或者用户嫌"不好看""没有高级感"，但页面风格还没定：先走「风格顾问」，读 <https://www.dachuiai.com/s/style-picker.md>，按它的步骤做。装了 style-picker Skill 就直接用它。
- **做图表、数据看板、报表**：走「图表选型」，读 <https://www.dachuiai.com/s/chart-picker.md>。装了 chart-picker Skill 就直接用它。
- **加动效**：读目录，再读动效选型规则 `guides/motion.md`。
- **做导航、菜单，或者列表太长要翻页**：读目录，再读导航选型规则 `guides/navigation.md`。
- **挑选网页组件**：读目录，按组件说明里的适合 / 不适合挑。
- **整页怎么搭**（一个首页、一个落地页、一个后台页要用哪几个）：先看整页搭配 `guides/recipes.md`。
- **想自己动手改 AI 做的网页 PPT**（改字、换图、改图表数字、导出 PPTX）：用「可编辑网页 PPT」Skill，读 <https://www.dachuiai.com/s/html-edit.md>。它要先装进能在电脑上运行程序的 AI 工具。

风格定了再加组件。风格和动效都要时，先风格，后动效。

## 流程

1. **看项目。** 框架（React、Next.js、Vue、小程序、纯 HTML）、有没有 Tailwind、网站类型（官网、本地小店、电商、作品集、SaaS、后台、内容站、活动页）、深色还是浅色、手机还是电脑为主。能看项目文件就自己看，看不到再问，一次最多三个问题；用户没回答就按最常见的情况假设，写出来，接着做。
2. **挑。** 按选型规则挑 1 到 3 个（基础手感不算），宁少勿多，一页一个主角动效。用户点名要的照做；觉得不合适，做完再提一句建议。
3. **装。** 按组件说明里「装进项目」装好，示例里的文字和图片换成用户自己的，保留 `prefers-reduced-motion` 的处理。不是 React 就照着做法改写，时长、曲线、参数不变。
4. **交代。** 告诉用户用了什么（中文名加英文名）、为什么选它、放在哪个文件、想改快慢颜色大小改哪个参数，以及哪些地方故意没加。

## 模板

拿来就能改的成品，读 [模板目录](https://www.dachuiai.com/templates/index.md)：要做演示、汇报、路演，挑一套网页 PPT，下载一个 HTML 就能用，要点着改就配合「可编辑网页 PPT」Skill；要整站结构（后台、落地页、内容站），挑一套网站模板，读它的接入说明，按固定版本核对代码和许可证。