2026-10-16

Open Claude UI: what a REA-backed Claude desktop rebuild actually ships

Offline Claude Design System (CDS) storybook from open-claude-ui: sticky header, section jump nav (Tokens, App Shell, Chat, Controls, Code, Overlays, Motion), and Surface 0–3 plus radius matrix cards. — Self-hosted screenshot of the public offline storybook in Caho1/open-claude-ui (docs/claude-components-storybook.html), captured on 2026-10-16 for rea.run. MIT upstream; clean-room UI library — not Anthropic.

On 2026-10-15 @xulijian1994 (Kxians) posted that someone had nearly peeled the Claude desktop client UI open and published it. The project is Open Claude UI (Caho1/open-claude-ui): a clean-room, MIT recreation of Claude Design System (CDS) tokens, React components, and interaction physics, built with help from REA (Reverse Engineer Anything / rea-agents). This rea.run page is the operator reading: verifiable counts, what to clone, what not to claim, and how REA shows up as a reconstruction toolchain — not as a crack kit. Chinese: /zh/blog/open-claude-ui-rea-case/.

Snapshot numbers (re-verified)

Fetch date for GitHub API and the X API snapshot on this page: 2026-10-16 (UTC+8 lab clock). Counters move; if you cite these rows, keep the date.

Item	Value	Source
Repository	Caho1/open-claude-ui	GitHub
License	MIT	`license.spdx_id`
Stars	736	GitHub API
Forks	172	GitHub API
Open issues	0	GitHub API
Primary language	TypeScript	GitHub API
Created	2026-10-14T14:05:05Z	GitHub API
Pushed (snapshot)	2026-10-15T16:26:41Z	GitHub API
Independent modules in `code-examples/`	30 `.ts`/`.tsx` files	GitHub contents API
Core interaction algorithms named in README	8	README-en.md
Combined CDS manual (`Claude Design System (CDS).full.md`)	3206 lines	raw file line count 2026-10-16
Nine numbered part docs (01–09) line sum	3542 lines	raw file line counts
X discovery post	status 2110590027453669498	@xulijian1994
X created	2026-10-15T04:34:10Z	Post timestamp
X impressions / likes / bookmarks / reposts / replies	12620 / 143 / 149 / 17 / 6	X API snapshot

Stars and likes are discovery signals (/blog/evaluating-rea-claims/). They are not an install SLA and not a license to inspect Anthropic’s shipping binary on your own machine without authorization.

What the repo is (and is not)

Claim	Operator reading
High-fidelity open UI + motion library inspired by Claude desktop	Yes — README frames a clean-room CDS recreation
Official Anthropic product or SDK	No
Ships proprietary Claude fonts / recorded MP3s	No — system font stacks + procedural Web Audio (assets policy)
Uses REA for reverse derivation / ASAR / AST work	Yes — README credits morluto/rea
Drop-in Claude API backend	No — UI/physics modules; you wire your own model host
Permission to reverse a commercial desktop you do not own	No — study this MIT tree; stay inside /compliance/

Offline CDS storybook overview: Surface 0–3 ladder and radius hierarchy from open-claude-ui.

Stack and packaging

Layer	Pin / range named upstream	Notes
React	18+ (peer)	peerDependencies
TypeScript	5.5+	badges / devDependency
Tailwind CSS	3.4+	theme extension in `code-examples/tailwind.config.js`
Framer Motion	11+ (peer ≥10)	layoutId pill control, springs
Electron	listed as devDependency ^31	window host helpers — optional for pure React use
Delivery	copy-paste `code-examples/` + offline HTML storybook	`npm run storybook` opens the HTML file

Topics on the GitHub repo (snapshot): anthropic, audioworklet, claude, design-system, framer-motion, motion-physics, react, reverse-engineering, tailwindcss, ui-components.

Component inventory (30 modules)

README splits the 30 production files into 11 atomic UI pieces and 19 deeper architecture / physics / hook modules. The code-examples/ directory listing matches 30 TypeScript sources (plus cds-theme.css and tailwind.config.js).

Category	Examples (filename)	Why operators care
Atomic controls	`CdsButton.tsx`, `SegmentedControl.tsx`, `StatusIndicators.tsx`, `ConfirmationDialog.tsx`, `AttachmentCard.tsx`	Size/variant ladders, Clay pulse, focus trap
Conversation engine	`ChatComposer.tsx`, `RichComposerWithMentions.tsx`, `ChatMessageBubbles.tsx`, `ThinkingAccordion.tsx`, `ModelSwitcherWithTokenGauge.tsx`, `McpToolDecisionCard.tsx`	IME guard, MCP approval cards, token gauge
Motion / shaders	`ClaudeMotionPresets.ts`, `ScrollFadeContainer.tsx`, `ReasoningAmbientGlow.tsx`	Spring presets, 7-stop scroll fade
Media / artifacts	`MediaLightboxViewer.tsx`, `ArtifactsSplitPaneResizer.tsx`, `StreamingDiffViewer.tsx`, `EpitaxyIframeBridge.tsx`, `ClaudeAudioPlayer.ts`, `LiveMicActivityBars.tsx`	Affline pan/zoom, iframe pointer shield, procedural audio
Desktop topology	`ClaudeDesktopHeader.tsx`, `DraggableSessionList.tsx`, `CoworkAgentCanvas.tsx`, `createClaudeMainWindow.ts`, `ContainerResponsiveBar.tsx`	Vibrancy/titlebar, DnD, Cowork
Hooks	`useClaudeScrollPinning.ts`, `useClaudeRovingFocus.ts`, `useClaudeSharedElementTransition.ts`, `useRateLimitBackoff.ts`	150 ms scroll latch, a11y grid, 429 backoff

Chat core section of the offline storybook: multi-turn session, thinking accordion, attachment cards, composer.

Eight algorithms the README insists on

The valuable part of the X post — and of the README — is not “it looks like Claude.” It is the eight decompiled interaction models:

#	Algorithm (README title)	Operator one-liner
1	7-stop non-linear alpha scroll fade	Quintic-ish stops beat a two-stop linear mask on Retina
2	Mic 8% noise floor + procedural Web Audio	Gate ambient hum; synthesize chimes without MP3 assets
3	CJK IME double-interlock	Block Enter-to-send while `isComposing` / keyCode 229
4	150 ms scroll-pin cooldown + 40 px tolerance	Stop stream output from hijacking upward scroll
5	Cursor-anchored affine pan/zoom	Zoom toward pointer, not viewport center
6	6-band mic bars with gamma 0.7	Compress peaks; keep quiet speech readable
7	Shadow DOM + CSS Grid line-height lock	Keep diff line numbers aligned while streaming
8	Iframe pointer shield + 50/50 spring snap	Resize panes over Artifacts without event capture

Brand Clay called out in docs: #d97757. Surface ladder (light): #f5f5f3 → #ffffff across Surfaces 0–3.

Foundations section: Surface 0–3 micro-contrast and radius hierarchy.

Documentation map

Doc artifact	Lines (2026-10-16 count)	Role
`docs/Claude Design System (CDS).full.md`	3206	Combined manual (matches “3000+ lines” marketing)
`docs/01` … `docs/09` part files	3542 sum	Design tokens → Agent UI guide → Desktop 2.0 notes
`docs/Claude Design System (CDS).md`	115	Short index / pointer
`docs/claude-components-storybook.html`	~183 KB file	Offline interactive preview
`README.md` / `README-en.md`	bilingual entry	ZH default, EN twin

The X post’s inventory (paraphrase, not a rewrite of Anthropic docs): 30 React components, 8 core algorithms, 3000+ lines of reverse-analysis docs across 31 technical sections, Claude-style composer / model switcher / MCP cards, macOS glass, sidebar DnD, Cowork multi-agent UI, plus IME and scroll-hijack edge cases. Keep the post URL when you cite that list.

App shell section of the offline storybook.

Controls section: buttons, segmented pill, status indicators.

How REA fits (moderate, operator view)

REA is the local MCP/CLI that lets a coding agent inspect software you are authorized to analyze and return Evidence plus unknowns (/blog/what-is-rea-reverse-engineer-anything/). Upstream Open Claude UI credits REA for ASAR deconstruction, AST/static analysis, and recovering physical constants from production front-end architecture. On rea.run that maps to a familiar loop:

Authorize the target in writing (own build, open MIT tree, or contract).
Pin rea-agents (teaching pin elsewhere on this site: 6.5.0 / 6.4.0 — see /blog/rea-agents-6-5-0/); run doctor --json.
Prefer Evidence paths over chat vibes (/blog/evaluating-rea-claims/).
Rebuild UI in your repository with your own words and assets — do not paste proprietary blobs.
Keep Hermes / Claude Code / Cursor clients on the documented matrix (/docs/clients/).

npx -y [email protected] doctor --json
# Study the MIT open-claude-ui tree; do not point tools at a vendor binary you may not inspect.

If your goal is “Claude-feeling AI product UI,” start from this MIT library and the CDS manual. If your goal is “rip the shipping Claude.app,” stop — that is outside rea.run’s legal boundary (/faq/legal-boundary/).

Operator checklist: evaluate and adopt

[ ] Read MIT LICENSE and assets/README.md (no proprietary fonts/audio redistributed).
[ ] Clone Caho1/open-claude-ui; open docs/claude-components-storybook.html in a browser (no build required for preview).
[ ] Skim code-examples/ for the 30 modules you actually need (composer ≠ full Cowork).
[ ] Copy only modules you will maintain; pin React / Tailwind / Framer versions in *your* app.
[ ] Re-implement tokens (#d97757, Surfaces 0–3, radii) as design tokens — do not hotlink Anthropic CDN assets.
[ ] For MCP decision cards, wire against your MCP host approvals — UI ≠ authorization.
[ ] If you use REA in a similar clean-room project, keep Evidence + unknowns and a disposable VM for untrusted bins (/blog/rea-agent-security-posture/).
[ ] Cite GitHub + this page’s snapshot date when repeating star/fork counts.

Adoption matrix

Goal	Use	Skip
Pixel-adjacent chat shell	Composer, bubbles, model switcher, scroll fade	Assuming API compatibility with claude.ai
Agent workbench	MCP cards, Cowork canvas patterns, thinking accordion	Treating Cowork topology as a hosted multi-agent SaaS
Motion literacy	Spring presets + 8 algorithm notes	Blindly copying minified vendor CSS
Teaching REA value	README’s REA attribution + your authorized lab	Using stars as proof your host works

Code and artifacts section of the offline storybook.

Overlays section: dialogs and floating layers.

Compliance

Open Claude UI is a third-party MIT project. Not affiliated with Anthropic or morluto.
rea.run is a community guide; footer disclaimer stays low-key — we do not shout “Unofficial” in titles.
Authorized / own / clean-room targets only. No crack, DRM bypass, or unpaid commercial reverse-engineering how-tos (/compliance/, /faq/legal-boundary/).
Self-hosted images under /media/blog/open-claude-ui/ come from the public storybook and logo; no login-walled assets.

Sources

GitHub: Caho1/open-claude-ui (API snapshot 2026-10-16: 736★, 172 forks, MIT)
README-en / README.md feature lists, algorithm section, structure tree
Docs line counts: Claude Design System (CDS).full.md 3206; parts 01–09 sum 3542
X: @xulijian1994 status 2110590027453669498 (created 2026-10-15T04:34:10Z; metrics snapshot above)
REA upstream: morluto/rea · npm rea-agents
On-site: /docs/install/ · /showcase/ · /blog/rea-agents-6-5-0/ · /zh/blog/open-claude-ui-rea-case/

FAQ

Question	Short answer
Can I npm-install a Claude skin and ship it as Claude?	No. MIT modules ≠ Anthropic trademark or product.
Do I need Electron?	Only if you want the desktop host helpers; React modules work in a web shell.
Is the 3000+ line manual the `.full.md`?	3206 lines on the 2026-10-16 fetch of `CDS.full.md`.
Does REA unlock Claude desktop for free?	No. REA inspects targets you may analyze; this case studies an already-published MIT recreation.
Where are the images?	`/media/blog/open-claude-ui/` on this site (storybook screenshots + logo.svg).