Repo Caho1/open-claude-ui là một component library React + Tailwind dựng lại giao diện Claude Desktop, kèm theo động cơ animation và một cuốn sổ tay reverse engineering dày hơn 3.000 dòng. Tác giả không đoán mò bằng mắt, mà dùng framework REA (Reverse Engineer Anything) để bóc ASAR, giải obfuscate closure, parse AST tĩnh rồi rút ra các hằng số vật lý, mã màu, bo góc thật từ bundle production.
Vấn đề nó giải quyết khá rõ: ai từng cố clone giao diện Claude hoặc bất kỳ app AI desktop nào đều biết cái khó không nằm ở màu nền hay font chữ. Cái khó là mấy thứ nhỏ như 0.5px hairline trên màn retina, độ cứng của spring khi panel trượt vào, hay cái “chết người” là con trỏ nhảy loạn khi gõ tiếng Trung/Nhật bằng IME, hoặc caret bị animation cướp mất khi đang stream text. Repo này đóng gói đúng những thứ đó thành 30 module độc lập, trong đó 11 component nguyên tử và 19 module/hook xử lý phần vật lý, chuyển động.
Vì sao 1.095 sao trong 2 ngày
Tạo ngày 14/10/2026, cập nhật 16/10/2026, tức là mới 48 tiếng đã lên hơn nghìn sao. Lý do thực tế: Claude Desktop chưa có design system công khai tử tế, còn cộng đồng dev thì vẫn đang dựng chatbot, agent harness, desktop wrapper theo phong cách Anthropic. Ai cũng muốn giao diện “giống thật” mà không phải ngồi đoán từng pixel.
Cái khác biệt so với các repo clone UI khác nằm ở chỗ tác giả đưa ra bằng chứng. Ví dụ brand color là Clay #d97757, hệ surface 4 bậc từ #f5f5f3 đến #ffffff ở light mode và #0b0b0a đến #20201e ở dark, bo góc composer 20px, bubble 18px, panel 10px, button 6/8/10px. Đây là những con số có ghi chú vị trí decompile chứ không phải “tôi thấy nó tròn tròn”.
Danh sách topics cũng đủ để thấy độ sâu kỹ thuật: audioworklet, motion-physics, reverse-engineering, framer-motion, design-system. Không phải repo “CSS đẹp” thông thường.
Cài đặt và xem thử nhanh
Không cần cài gì phức tạp để ngó trước. Repo có sẵn storybook dạng một file HTML offline, mở trực tiếp là xem được toàn bộ component và animation:
open docs/claude-components-storybook.htmlBên trong có toggle sáng/tối cho hệ màu Clay, đủ cấp bậc button, segmented control bo 999px, demo spring bậc 2, attachment tile và trạng thái code copy fade.
Nếu muốn kéo token và pure CSS vào project mà không cần React hay Tailwind:
@import "open-claude-ui/tokens.css";
@import "open-claude-ui/pure.css";Đây là điểm mình thấy đáng giá nhất về mặt kiến trúc. Lớp token và lớp CSS thuần tách khỏi React, nên dùng được trong Vue, Svelte, hay thậm chí nhét vào desktop harness viết bằng Tauri/Electron. Bộ token đầy đủ là 183 cái, kèm attribute [data-cds-scroll-fade] cho hiệu ứng fade khi cuộn mà không cần một dòng JS nào.
Phần React thì import như bình thường. Ví dụ composer:
import { Composer } from 'open-claude-ui';
console.log('Send message:', text)} />Lưu ý đoạn code trên là trích từ README, hơi lược, các bạn xem file gốc trong repo để có props đầy đủ.
Ai nên dùng, dùng khi nào
Đối tượng hợp nhất là dev đang làm desktop app hoặc web app chatbot cho nội bộ, muốn giao diện “kiểu Claude” mà không mất ba tuần tinh chỉnh animation. Cụ thể mấy trường hợp:
- Dựng agent desktop container (Tauri, Electron) cần sidebar DnD, composer có IME guard, model switcher, token meter.
- Làm chatbot có tool calling, cần MCP decision card với state machine ba trạng thái
pending_approval→running→success/error. - Làm gallery media hoặc artifact preview, cần xử lý pan/zoom theo con trỏ, split resizer có dead zone 4px.
- Học cách Anthropic giải các bài toán IME, scroll pin, stream text mà không giật. Mấy cái này đọc manual cũng đủ đáng, kể cả không dùng repo.
Ngược lại, nếu bạn cần UI cho sản phẩm đã có brand riêng thì repo này không dành cho bạn. Đây là bản sao trung thành, không phải bộ khung trung tính.
Ưu điểm và hạn chế
Ưu điểm dễ thấy: MIT license, tài liệu dày và có địa chỉ decompile, adapt sẵn cho AI coding agent (có AGENTS.md, CLAUDE.md, .cursorrules, .github/copilot-instructions.md). Chuyện repo thiết kế sẵn file rule cho Cursor với Claude Code là một hướng đi mình thích, tiết kiệm thời gian prompt.
Hạn chế thì phải nói thẳng vài điểm. Thứ nhất, repo mới ra 2 ngày, chưa có release tag, chưa biết API có ổn định không. TypeScript với 30 module nhưng chưa rõ test coverage thế nào, docs phần code example trong README bị cắt ngắn. Thứ hai, phần âm thanh dùng Web Audio API tổng hợp thuần code, tác giả cố tình không phân phối file .mp3 hay font .ttf độc quyền vì lý do bản quyền, nên muốn đúng 100% âm thanh gốc thì phải tự lo. Thứ ba, tên repo đánh vần “Caho1” chứ không phải “Cah01”, dễ gõ sai link.
Về pháp lý, cần đọc kỹ: repo ghi rõ không phân phối binary độc quyền, nhưng bản chất là reverse engineering giao diện của sản phẩm thương mại Anthropic. MIT áp cho phần code của tác giả, không có nghĩa là bạn được phép dùng nhãn hiệu, font thương mại hay asset thiết kế gốc. Dùng tham khảo và học thì ổn, dùng thẳng vào sản phẩm kiếm tiền thì nên xem lại. Mình không phải luật sư, các bạn tự cân nhắc.
So sánh nhanh
Trên thị trường có shadcn/ui và Radix làm nền tảng component, nhưng hai bên đó hướng tới tính trung lập, không có “chất Claude”. Repo này bù vào khoảng trống ngược lại: có sẵn cái nhìn cụ thể về màu, spring, IME, scroll mask. Nếu bạn đang build bằng shadcn và muốn giữ triết lý đó mà vẫn có giao diện gần Claude, cách thực tế là kéo token CSS từ đây rồi map sang shadcn theme, thay vì thay hẳn.
Còn mình thấy, cái 3.000 dòng manual kia có thể có giá trị lâu dài hơn cả code. Vì giao diện Claude sẽ đổi, nhưng cách Anthropic chọn spring constant, số cửa sổ alpha 7 bậc cho scroll fade, hay cách xử lý caret khi stream text là kiến thức tái sử dụng được ở nhiều project khác.
Repo: Caho1/open-claude-ui (TypeScript, MIT, 1.095 sao tính tới thời điểm viết bài).
