Claude Code · Tablet UI · 10 Concept Designs

Single-document mockups for a custom Claude Code interface tuned to the Samsung Galaxy Tab S10 Ultra (14.6″, 2960×1848, 16:10 landscape). Every concept uses the same three-pane layout: file tree on the left, slash-command + keyboard-shortcut helper above the chat/terminal in the centre, and a live project preview on the right.

aspect: 16:10 · grid: 230px tree · flex centre · 360px preview · 10 themes
accent / interactive chrome / borders chips / surfaces
01Midnight Terminalclassic dev · GitHub dark
~/projects/notion-clone · main · claude-opus-4-7 ● connectedtokens 14.2k

Workspace

  • notion-clone
    • src
      • App.tsx
      • editor.ts
      • db.ts
    • tests
    • package.json
    • tsconfig.json
    • README.md
Slash Commands
/clear/compact/init /review/agents/mcp /model/cost/resume
Keyboard
Ctrl+C cancel Ctrl+R retry Esc×2 history Shift+Tab mode ! bash # memorize
refactor App.tsx into a Sidebar + Editor + StatusBar component split
▸ Read App.tsx (412 lines) ▸ Plan accepted
Splitting into src/components/Sidebar.tsx, Editor.tsx, and StatusBar.tsx. Routing state stays at App level. Want me to keep the existing Tailwind classes 1:1 or normalise spacing tokens while we're in there?
Ask Claude or type / for commands…
localhost:3000↻
Notion Clone — Dashboard
Live HMR preview · build #284 · 312ms
main● 3 stagednode 22.4opus-4-7 · 1M ctx14.2k / 200k
02Aurora Glassglassmorphism · gradient
notion-clone · aurora workspace opus-4-7live

Files

  • src
    • App.tsx
    • editor.ts
    • db.ts
  • public
  • package.json
  • README.md
Quick Commands
/clear/compact/agents /review/model/mcp /init
Shortcuts
Ctrl+CCtrl+R Esc×2Shift+Tab ! bash# memo
add a glassy command palette to Sidebar
▸ scanning components
I'll add a CommandPalette component with backdrop-blur, ⌘K binding, and fuzzy search over pages. It will mount inside Sidebar but float as a portal so the blur doesn't get clipped.
Speak to Claude…
localhost:3000/dashboard
Live Preview
Sidebar · Editor · StatusBar mounted
auroraopus-4-714.2k
03Solar Flaresolarized · paper · warm
notion-clone · main opus-4-7

Project

  • src
    • App.tsx
    • editor.ts
    • db.ts
  • tests
  • package.json
  • README.md
Slash Commands
/clear/compact/agents /review/model/mcp /cost/resume
Keys
Ctrl+CCtrl+R Esc×2Shift+Tab !#
walk me through the data flow in editor.ts
editor.ts exposes a useEditor hook that fans out to db.ts for persistence and to App.tsx for global page state. Edits stream through a debounced setter; persistence is optimistic with a rollback queue.
Ask Claude…
localhost:3000
Notion Clone
Warm paper preview · readable in sunlight
mainopus-4-79.8k
04Neon Cybercyberpunk · magenta + cyan
// notion-clone · jack-in netrunner14.2k

// nodes

  • src
    • App.tsx
    • editor.ts
    • db.ts
  • tests
  • package.json
// commands
/clear/compact/agents /review/model/mcp /init
// keys
Ctrl+CCtrl+R Esc×2Shift+Tab ! bash# mem
scan App.tsx for memory leaks
▸ static analysis · 0 confirmed leaks
Two suspicious effects in App.tsx — the resize listener doesn't unbind on unmount, and the websocket retains a closure over setPages. Patching now.
> jack in…
//localhost:3000
// preview
grid online · 60fps · hmr connected
// onlineopus-4-714.2k / 1M
05Forest Calmsage · serif · low-stim
notion-clone · main opus-4-7

Workspace

  • src
    • App.tsx
    • editor.ts
    • db.ts
  • tests
  • package.json
Commands
/clear/compact/agents /review/model/mcp
Shortcuts
Ctrl+CCtrl+R Esc×2Shift+Tab !#
summarise the editor architecture in plain language
The editor is a tree of blocks. Each block holds its own content and renderer; the parent only owns ordering and selection. Persistence is debounced and offline-first.
Take your time…
localhost:3000
Quiet Preview
Reduced motion · soft contrast
mainopus-4-79.1k
06Material YouM3 · pill chips · rounded
notion-clone · main opus-4-714.2k

Files

  • src
    • App.tsx
    • editor.ts
    • db.ts
  • tests
  • package.json
Slash
/clear/compact/agents /review/model/mcp /init
Keys
Ctrl+CCtrl+R Esc×2Shift+Tab !#
What's the cleanest way to add dark mode?
Use a data-theme attribute on <html>, plus CSS variables. Persist with localStorage and react via a tiny useTheme hook. I can wire it in across Sidebar, Editor, and StatusBar in one pass.
Message Claude…
localhost:3000
Preview · Light
Material 3 surfaces · 24dp radius
mainopus-4-714.2k
07Retro CRTphosphor green · scanlines
CLAUDE-CODE v1.0 :: /home/dev/notion-clone ONLINE

FILES

  • SRC
    • APP.TSX
    • EDITOR.TS
    • DB.TS
  • TESTS
  • PACKAGE.JSON
:: SLASH ::
/CLEAR/COMPACT/AGENTS /REVIEW/MODEL/MCP /INIT
:: KEYS ::
CTRL+CCTRL+R ESC×2SHIFT+TAB !#
[12:04]> ANALYZE APP.TSX
[12:04]▸ READING 412 LINES…
[12:04]▸ FOUND 3 SUSPECT EFFECTS. PROPOSING PATCH.
> _
LOCALHOST:3000
PREVIEW
PIXEL RENDER · 80×24 GRID
READYOPUS-4-714.2K
08Mono Minimalbrutalist · zero radius
notion-clone / main opus-4-714.2k

Files

  • src
    • App.tsx
    • editor.ts
    • db.ts
  • tests
  • package.json
Slash
/clear/compact/agents /review/model/mcp /init
Keys
Ctrl+CCtrl+R Esc×2Shift+Tab !#
explain like i'm new to react
React turns a function of state into a tree of UI. Your App.tsx is one such function. When state changes, the function reruns and React figures out what really needs to redraw.
Message…
localhost:3000
Preview
Pure structure · no decoration
mainopus-4-714.2k
09Sunset Vaporvaporwave · pink gradient
notion-clone ⋆˖ aesthetic mode opus-4-7live

★ Files

  • src
    • App.tsx
    • editor.ts
    • db.ts
  • tests
  • package.json
★ Slash
/clear/compact/agents /review/model/mcp /init
★ Keys
Ctrl+CCtrl+R Esc×2Shift+Tab !#
give the dashboard a vaporwave skin
Adding a sunset gradient header, magenta accent, and a chrome-grid footer. I'll keep the dashboard semantics intact — only theme tokens change.
tell Claude…
localhost:3000
Preview ✦
Pink horizon · neon grid floor
mainopus-4-714.2k
10Nordic IceNord · cool · professional
notion-clone · main · claude-opus-4-7 14.2k / 1M

Workspace

  • src
    • App.tsx
    • editor.ts
    • db.ts
  • tests
  • package.json
  • tsconfig.json
Slash Commands
/clear/compact/agents /review/model/mcp /init/cost
Keyboard
Ctrl+C cancel Ctrl+R retry Esc×2 history Shift+Tab mode ! bash # memorize
run the test suite and summarise failures
▸ vitest · 142 tests · 3 failures
Three failures, all in editor.test.ts and all related to a recent change in block ordering. Want me to repair them or revert the ordering change?
Message Claude or / to choose a command…
localhost:3000
Notion Clone
Build #284 · 312ms · HMR connected
main● 3 stagedopus-4-7 · 1M ctx14.2k / 200k