Claude UI 设计系统与实现指南：Next.js 聊天界面开发规范与组件库

claude-ui by clownnvd/claude-code-skills

1 周安装量

GitHub

安装命令

npx skills add https://github.com/clownnvd/claude-code-skills --skill claude-ui

UI组件库开发用户体验

🇨🇳中文介绍

Claude UI — 实现索引

来源：PageFlows（2025年7月 — 19个流程，100+张截图）。项目：c:\nextjs_project\pulse-analytics → 在 GitHub 上重命名为 claude-ui。

设计令牌（快速参考）

令牌	值	用途
背景	`#F9F6F0`	页面背景 — 暖奶油色，非白色
表面	`#FFFFFF`	卡片、模态框、聊天气泡
品牌强调色	`#C96A4A`	徽标、发送按钮、新聊天圆点
主要文本	`#0F0F0F`

🇺🇸English

Claude UI — Implementation Index

Source: PageFlows (July 2025 — 19 flows, 100+ screenshots). Project: c:\nextjs_project\pulse-analytics → renamed to claude-ui on GitHub.

Design Tokens (Quick Reference)

Token	Value	Usage
Background	`#F9F6F0`	Page bg — warm cream, NOT white
Surface	`#FFFFFF`	Cards, modals, chat bubbles
Brand accent	`#C96A4A`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

关键规则（常见错误）

错误	正确
用户消息右对齐（`flex justify-end`）	左对齐 — `flex items-start gap-3`
侧边栏有 Anthropic 徽标 / 设置齿轮	无徽标，无齿轮 — 仅限 [≡][+][💬][📁][⊞][ST]
"新聊天"是全宽按钮	它是一个导航项行（珊瑚色圆点 + 文本）
项目徽章是蓝色	蓝绿色 — `bg-[#E8F4F8] text-[#3B82A0]`
响应工具栏悬停时显示	始终可见（非仅悬停显示）
响应工具栏：所有按钮在左侧	`justify-between` — AnthropicMark 在左，复制/👍/👎/重试在右
"Claude 可能会犯错"在聊天输入框下方	每条消息单独显示，右对齐在响应工具栏下方（非全局）
点击聊天标题 → 直接打开重命名模态框	先打开下拉菜单：收藏 / 重命名 / 删除
StyleIcon 是闪电/闪电图标	3个滑块 SVG：`d="M8 6h13M8 12h9m-9 6h5"`
使用 `window.location.href` 进行导航	使用 `<Link href>` 或 `router.push()`
`border-t border-gray-50`（不可见）	使用 `border-[#E0E0E0]`
AnthropicMark 在文件中重复	提取到 `src/components/icons.tsx`
AnthropicMark 使用双 A 字标路径	星形路径：`M12 2L9.5 8.5H3L8.5 12.5L6 19L12 15L18 19L15.5 12.5L21 8.5H14.5L12 2Z`
`bg-black/8` IDE 警告	在 Tailwind v4 中有效 — 编译正确
`pnpm dev` 在 VSCode 中失败（NODE_ENV=production）	在 dev 脚本中添加 `cross-env NODE_ENV=development`

<div className="flex h-screen bg-[#F9F6F0]">
  <Sidebar />          {/* w-12 collapsed / w-64 expanded */}
  <main className="flex-1 flex flex-col overflow-hidden">
    {/* page content */}
  </main>
</div>

src/app/
  page.tsx                  # 登录（分割布局）
  layout.tsx                # 根布局
  (chat)/
    layout.tsx              # 应用外壳（侧边栏 + 主区域）
    new/page.tsx            # 主页 / 聊天
    recents/page.tsx        # 聊天历史
    settings/page.tsx       # 设置选项卡
    artifacts/page.tsx      # 工件列表 + 分割视图
    upgrade/page.tsx        # 账单 / 方案卡片
  (onboarding)/             # 5屏引导流程
src/components/
  sidebar.tsx               # 可折叠侧边栏 + 账户菜单
  chat-input.tsx            # 文本区域 + 工具栏 + 下拉菜单

references/design-tokens.md — 完整令牌表，Tailwind v4 @theme，尺寸规范
references/flows.md — 所有 19 个流程表，导航规则，路由图

references/components/sidebar.md — 折叠/展开状态，账户菜单弹出框
references/components/chat-input.md — 工具栏按钮，StyleIcon SVG，下拉菜单，属性
references/components/messages.md — 用户消息（左），助手消息，响应工具栏，AnthropicMark
references/components/modals.md — 重命名，分享，反馈，删除，删除账户

references/pages/home.md — 空状态英雄区，对话视图，顶部栏，升级横幅
references/pages/recents.md — 聊天卡片（无预览文本），选择模式工具栏
references/pages/settings.md — 6个选项卡，个人资料字段，外观选择器，切换开关
references/pages/login.md — 分割布局，5屏引导流程
references/pages/billing.md — 方案卡片（免费/专业版/高级版），选项卡切换，账单切换
references/pages/artifacts.md — 列表页，分类标签，卡片网格，分割视图

无障碍访问清单

图标按钮 → aria-label
SVG 图标 → aria-hidden="true"
切换开关 → role="switch" + aria-checked
表单输入 → <label htmlFor> 或 aria-label
焦点环 → 在 globals.css 中设置 outline: 2px solid #C96A4A
最小触摸目标 → 44×44px

Tailwind v4 注意事项

@import "tailwindcss" 替换旧的 @tailwind base/components/utilities
在 globals.css 中使用 @theme inline 定义自定义工具类
bg-black/8 = 有效的任意不透明度 — IDE 会警告但编译正确
自定义令牌：bg-cream, bg-brand, text-text-muted, border-border

Critical Rules (Frequent Mistakes)

Bug	Correct
User messages right-aligned (`flex justify-end`)	LEFT-aligned — `flex items-start gap-3`
Sidebar has Anthropic logo / settings gear	NO logo, NO gear — only [≡][+][💬][📁][⊞][ST]
"New chat" is a full-width button	It's a nav item row (coral dot + text)
Projects badge is blue	Teal — `bg-[#E8F4F8] text-[#3B82A0]`
Response toolbar shows on hover	ALWAYS visible (no hover-only)
Response toolbar: all buttons on left	`justify-between` — AnthropicMark LEFT, Copy/👍/👎/Retry RIGHT
"Claude can make mistakes" below chat input	Per-message, right-aligned BELOW response toolbar (not global)
Clicking chat title → Rename modal directly	Opens DROPDOWN first: Star / Rename / Delete
StyleIcon is a bolt/lightning bolt	3 sliders SVG: `d="M8 6h13M8 12h9m-9 6h5"`
`window.location.href` for navigation	Use `<Link href>` or `router.push()`
`border-t border-gray-50` (invisible)	Use `border-[#E0E0E0]`
AnthropicMark duplicated in files	Extract to `src/components/icons.tsx`
AnthropicMark uses double-A wordmark path	Star path: `M12 2L9.5 8.5H3L8.5 12.5L6 19L12 15L18 19L15.5 12.5L21 8.5H14.5L12 2Z`
`bg-black/8` IDE warning	Valid in Tailwind v4 — compiles correctly
`pnpm dev` fails in VSCode (NODE_ENV=production)	Add `cross-env NODE_ENV=development` to dev script

<div className="flex h-screen bg-[#F9F6F0]">
  <Sidebar />          {/* w-12 collapsed / w-64 expanded */}
  <main className="flex-1 flex flex-col overflow-hidden">
    {/* page content */}
  </main>
</div>

src/app/
  page.tsx                  # Login (split layout)
  layout.tsx                # Root layout
  (chat)/
    layout.tsx              # App shell (sidebar + main)
    new/page.tsx            # Home / chat
    recents/page.tsx        # Chat history
    settings/page.tsx       # Settings tabs
    artifacts/page.tsx      # Artifacts list + split view
    upgrade/page.tsx        # Billing / plan cards
  (onboarding)/             # 5-screen onboarding flow
src/components/
  sidebar.tsx               # Collapsible sidebar + account menu
  chat-input.tsx            # Textarea + toolbar + dropdowns

references/design-tokens.md — Full token table, Tailwind v4 @theme, sizing conventions
references/flows.md — All 19 flows table, navigation rules, route map

references/components/sidebar.md — Collapsed/expanded states, account menu popup
references/components/chat-input.md — Toolbar buttons, StyleIcon SVG, dropdowns, props
references/components/messages.md — UserMessage (LEFT), AssistantMessage, ResponseToolbar, AnthropicMark
references/components/modals.md — Rename, Share, Feedback, Delete, DeleteAccount

references/pages/home.md — Empty state hero, conversation view, topbar, upgrade banner
references/pages/recents.md — Chat card (no preview text), select mode toolbar
references/pages/settings.md — 6 tabs, Profile fields, Appearance picker, ToggleSwitch
references/pages/login.md — Split layout, 5-screen onboarding flow
references/pages/billing.md — Plan cards (Free/Pro/Max), tab toggle, billing toggle
references/pages/artifacts.md — List page, category pills, card grid, split view

Accessibility Checklist

Icon buttons → aria-label
SVG icons → aria-hidden="true"
Toggle switches → role="switch" + aria-checked
Form inputs → <label htmlFor> or aria-label
Focus ring → outline: 2px solid #C96A4A in globals.css
Min touch target → 44×44px

@import "tailwindcss" replaces old @tailwind base/components/utilities
@theme inline in globals.css defines custom utility classes
bg-black/8 = valid arbitrary opacity — IDE warns but compiles correctly
Custom tokens: bg-cream, bg-brand, text-text-muted, border-border

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

111,800 周安装

Claude UI 设计系统与实现指南：Next.js 聊天界面开发规范与组件库

🇨🇳中文介绍

Claude UI — 实现索引

设计令牌（快速参考）

🇺🇸English

Claude UI — Implementation Index

Design Tokens (Quick Reference)

相关 Skills

关键规则（常见错误）

应用外壳结构

项目结构

参考目录

设计系统

组件

页面

无障碍访问清单

Tailwind v4 注意事项

Critical Rules (Frequent Mistakes)

App Shell Structure

Project Structure

Reference Directory

Design System

Components

Pages

Accessibility Checklist

Tailwind v4 Notes

最新 Skills