grill-with-docs:适合研发项目、已有代码库、需要沉淀术语和关键决策。它会一边追问,一边把稳定术语写进CONTEXT.md,把难逆转的决策写成 ADR。
这是一个非常专业的软件工程术语!。
ADR 是一个缩写(Acronym),它的全称是: Architecture Decision Record (架构决策记录)
如果说代码是项目的“骨骼”(它展示了系统_是什么样子的_),那么 ADR 就是项目的“记忆和思考过程”(它解释了系统_为什么会变成这样_)。
在大型、复杂的研发项目中,决策的累积是非常巨大的。一个看似简单的选择(比如使用 SQL 而不是 NoSQL)背后,可能牵涉到性能、成本、团队熟悉度、扩展性等数十个因素的权衡(Trade-offs)。
ADR 的核心价值在于:它将“临时的脑子里的想法”固化成了“永久的项目知识”。
当项目发生以下情况时,ADR 就变得至关重要了:
一个典型的 ADR 通常是一个简短的文档(Markdown 文件),但它必须包含特定的要素:
ADR-005: Use PostgreSQL for Primary Database
grill-with-docs... 把难逆转的决策写成 ADR。
在这个场景中,grill-with-docs 这个工具(它的功能是“提问+文档化”)做的事情是:
grill)来挖掘出项目中的一些关键选择。假设你在和一个技术负责人聊项目,他回答了:“我们决定用微服务架构来拆分订单、支付和库存这三个模块。”
CONTEXT.md 中 (稳定术语): 你可能只记录:“✅ _使用微服务架构_”。(这是一个事实)你看,ADR 不仅仅是一个标签,它是一份承载了项目智慧的完整历史文档!
先对齐:本轮只解释两个概念:npm UI 组件库 和 Tailwind 项目
npm UI 组件库 是指:通过 npm 安装到前端项目里的 UI 组件包。
比如:
npm install antd
npm install @mui/material
npm install mantine
安装后,你在代码里直接引用组件:
import { Button } from "antd"
export function Page() {
return <Button>保存</Button>
}
这里的 Button、Dialog、Table、Form 就是别人库里封装好的 UI 组件。你主要通过参数、主题配置、CSS 覆盖来定制它。典型例子有 Ant Design、MUI、Chakra UI、Mantine。
Tailwind 项目 是指:项目主要用 Tailwind CSS 来写样式。
普通 CSS 可能这样写:
.button {
padding: 8px 16px;
border-radius: 6px;
background: black;
color: white;
}
Tailwind 写法通常是直接在元素上写工具类:
<button className="px-4 py-2 rounded-md bg-black text-white">
保存
</button>
其中:
px-4 表示左右内边距py-2 表示上下内边距rounded-md 表示中等圆角bg-black 表示黑色背景text-white 表示白色文字所以,Tailwind 项目 不是一种特殊 App,而是一个使用 Tailwind CSS 作为主要样式方案的前端项目。
两者区别很简单:
npm UI 组件库 给你的是“现成组件”。
Tailwind 项目 说的是“这个项目怎么写样式”。
shadcn/ui 比较特别:它通常用在 Tailwind 项目里,但它不像传统 npm UI 组件库那样只让你 import 包里的组件,而是把组件源码复制进你的项目,让你自己拥有和修改。
-
- 01:49:14 视频中提到的AI工具hand-drawn-styles的GitHub地址是:https://github.com/threerocks/hand-drawn-styles