《Brainless:复刻AI编码助手终端UI的shadcn组件库》

标签:#前端 #shadcn #React #AI终端UI #ClaudeCode #Codex

总结:
Brainless 是一个 shadcn/ui 组件注册表,提供一套可复用的 React 组件,精准还原 Claude Code、OpenAI Codex 和 Grok 等 AI 编码助手的终端风格界面。开发者可通过 npx shadcn@latest add 一键安装,快速构建具有"Agent 味"的交互界面。

文章要点:
1. 精准还原终端风格:组件库完整复刻了 Claude Code、Codex、Grok 等主流 AI 编码助手的终端界面,包括待办列表、计划展示、思考过程等核心 UI 元素
2. 像素级细节还原:从实际终端截图出发,逐帧对比"已发布"与"捕获"版本,修正了行间距、符号对齐、颜色处理等细节差异,确保视觉体验与真实终端一致
3. shadcn 生态原生支持:作为官方注册表组件,可直接通过 shadcn CLI 安装,与现有项目无缝集成,无需额外配置
4. 开源可扩展:代码托管在 GitHub,开发者可自由查看源码、提交改进,甚至基于其设计思路构建自己的 Agent 风格界面

URL:https://brainless.swerdlow.dev/ brainless
 
 
Back to Top