Claws · 包晴天 海外版 · prototype

Counsel without borders.

Four surfaces, one product. China-mainland clients hire US & Japan lawyers (King & Wood Tokyo / NY / Silicon Valley) through an AI-led consultation, purchase a service, then collaborate in a shared project workspace. Lawyers work inside the AI WorkDeck IDE — a three-panel workbench powered by Bu Er, our legal AI agent.

🎬 Each surface has its own Play tour button. Click to auto-play through the flow · click the demo at any time to take control · resume from where you left off.

30 · iOS client 16 · iOS lawyer 8 · Web lawyer + IDE 8 · Web client updated 2026-05-19
01 Client · iOS 02 Lawyer · iOS 03 Lawyer · Web + IDE 04 Client · Web 62 Flat key-page grid ↓
Surface · 01

01 / 04Client · iOS

The full client mobile journey — start at onboarding, get matched to a K&W lawyer, book, collaborate, then try the AI features (Contract Review, Overseas Setup Report) and browse the content + services tabs.

Auto-tour · 16 steps · ~50 s — / 16
Click the phone to take control

Path

  1. client-onboarding — welcome / jurisdiction
  2. consult-ai — describe matter
  3. search-lawyers — matched K&W lawyers
  4. lawyer-filter — refine 11 dimensions
  5. lawyer-profile — Yuki Tanaka
  6. lawyer-reviews — 5-axis radar breakdown
  7. product-purchase — service detail
  8. checkout — Apple Pay
  9. project-started — workspace opens
  10. im-chat — privileged thread
  11. discover — lawyer notes feed
  12. note-detail — read a note
  13. services-mall — platform services
  14. contract-upload — AI contract review
  15. contract-result — AI redlines
  16. overseas-report — premium playbook
  17. client-me — my account
Open standalone ↗
Click to take control
Surface · 02

02 / 04Lawyer · iOS

The lawyer mobile app — onboarding (bar admission verification → K&W identity → approval) → daily ops (inbox · projects · calendar) → income (wallet · payouts).

Auto-tour · 14 steps · ~45 s — / 14
Click the phone to take control

Path

  1. lawyer-onboard-profile — bar info
  2. lawyer-onboard-cred — credential upload
  3. lawyer-onboard-review — approval pending
  4. lawyer-inbox — client triage
  5. lawyer-projects — project queue
  6. lawyer-project-detail — open a matter
  7. im-chat — reply to client
  8. call-incoming — client calls
  9. video-call — live consult
  10. lawyer-products — my services
  11. lawyer-product-editor — edit service
  12. lawyer-notes — my notes
  13. lawyer-calendar — week agenda
  14. lawyer-wallet — earnings + payouts
  15. lawyer-me — account
Open standalone ↗
Click to take control
Surface · 03 · flagship

03 / 04Lawyer · Web with AI WorkDeck IDE

The lawyer's primary workbench. A VS Code-style three-panel IDE: project tree (left), Office-integrated editor (center) with inline AI redlines, and the Bu Er AI agent (right) with Chat / Skills / Sources tabs.

"事不二做、人无二过" — Bu Er, the agent that learns the lawyer's house style and never repeats a mistake. Skill Marketplace turns capabilities into installable extensions; MCP Servers connect Bu Er to live data (Westlaw, e-Gov JP, EDGAR, 裁判文书网).

Auto-tour · 8 steps · ~25 s — / 8
Click the demo to take control

Path

  1. signin — lawyer login
  2. projects-dashboard — pick a matter
  3. workdeck — three-panel IDE opens
  4. skill-marketplace — install a Skill
  5. mcp-servers — connect data sources
  6. inbox — client messages
  7. calendar — Bu Er focus time
  8. me — bar admissions / skills
  9. workdeck — back to drafting
Open WorkDeck ↗ From signin ↗
workdeck.claws.com/signin
Click to take control
Surface · 04

04 / 04Client · Web

The desktop client — for in-house counsel / GC users at mainland-China companies managing multiple active matters. Same lawyer-matching engine, but a real desk-screen workspace.

The shared project workspace mirrors what the lawyer is doing in WorkDeck: clients see the lawyer's finished deliverables, never the AI workshop floor — the asymmetry is the product.

Auto-tour · 7 steps · ~22 s — / 7
Click the demo to take control

Path

  1. signin — client login
  2. home — AI consult + tiles
  3. find-lawyer — filter + results
  4. lawyer-profile — 5-axis radar
  5. checkout — purchase
  6. projects — matter list
  7. project-workspace — shared with lawyer
  8. me — account
Open standalone ↗
claws.com/signin
Click to take control

Key pages — every screen, flat.

No version sectioning. Click any thumbnail to open the screen in a new tab. The live demos above use the same files, so changes here propagate everywhere.

Client · iOS30
Lawyer · iOS16
Lawyer · Web + IDE8
Client · Web8
Client onboarding
3-step welcome · jurisdiction
Auth
AI consult — chat
Tiffany AI dot · cross-border prompt
AI
AI consult — empty
First-time hero · example prompts
AI
Services mall
Featured products · platform-first
Tab
Discover
Lawyer notes · waterfall · going-abroad rail
Tab
Note detail
Edge-to-edge hero · AI 3-line summary
AI
Find lawyer
Filter chips · 4-lawyer results
Lawyer filter
11 sections · live match counter
Lawyer profile
Yuki Tanaka · radar · services
K&W
Lawyer reviews
5-axis breakdown · individual reviews
Saved lawyers
Bookmarked profiles
Product purchase
Service detail · price tiers
Checkout
Apple Pay · JPY + USD/EUR
Project started
Receipt · privacy notice
Client project detail
Status · timeline · files
IM chat
Sendbird · privileged · system events
Call · incoming
Lawyer ringing screen
Video call
Live consultation
Contract — upload
Drop zone · privacy
AI
Contract — AI redlines
Severity chips · escalate to lawyer
AI
Overseas — intake
Destination + business
Overseas — step 1
Identity · jurisdiction
Overseas — step 3
Risk & constraints
Overseas — step 4
Review & submit
Overseas — processing
Multi-agent progress
AI
Overseas — final report
Setup playbook · CTA to K&W
Premium
Client me
Account · settings · projects
Tab
Notifications
Activity timeline
Refund request
Privilege-safe reason picker
Review & rating
Private to Claws
Lawyer onboard — profile
Bar info · K&W signup
Auth
Lawyer onboard — credentials
Document upload
Auth
Lawyer onboard — review
Approval pending state
Auth
Lawyer inbox
Multi-thread conversation triage
Tab
Lawyer projects
Stats strip · urgent / open / closed
Tab
Lawyer project detail
Client · SLA · attachments
Lawyer calendar
Day agenda · consults
IM chat
Bidirectional thread
Call · incoming
From client
Video call
Consultation in progress
Lawyer products
My services list
Product editor
Service · pricing · SLA
Lawyer notes
My published notes
Note editor
Compose · attachments
Lawyer me
Account · settings
Tab
Lawyer wallet
Earnings · Stripe payouts
Sign in
Email + password · K&W SSO
Auth
Projects dashboard
Active · awaiting client · completed
AI WorkDeck IDE
3-panel · Bu Er · Office editor
Flagship
Skill marketplace
9 skills · contract review · cite-check
AI
MCP servers
Westlaw · e-Gov · 裁判文书 · EDGAR
AI
Inbox
Conv. list · open in WorkDeck
Calendar
Week view · Bu Er focus blocks
Lawyer account
Bar admissions · skills · privacy
Sign in
Split brand panel · email + phone
Auth
Home
AI consult hero · service tiles
AI
Find a lawyer
Filter sidebar · 2-col results
Lawyer profile
5-axis SVG radar · services
K&W
Checkout
JPY primary · CNY/USD · Apple Pay
Projects list
6 cards · status tabs · progress
Project workspace
File tree + chat · shared with lawyer
Flagship
Account
Profile · privacy · sign out
Claws · prototype · prototype/ = static HTML; no build step. Tokens in assets/claws.css, runtime in assets/claws-init.js.
Brand Claws · 包晴天 海外版 · 主席 + Morris · visual system locked 2026-05-19 · code-name BQT_Global.