快速参考

1. 无障碍访问（关键）

• color-contrast - 普通文本的最小对比度比为 4.5:1
• focus-states - 交互元素上可见的焦点环
• alt-text - 为有意义的图像提供描述性替代文本
• aria-labels - 为纯图标按钮提供 aria-label
• keyboard-nav - Tab 键顺序与视觉顺序一致
• form-labels - 使用带 for 属性的 label 标签

2. 触摸与交互（关键）

• touch-target-size - 最小 44x44px 的触摸目标
• hover-vs-tap - 主要交互使用点击/轻触
• loading-buttons - 异步操作期间禁用按钮
• error-feedback - 在问题附近提供清晰的错误信息
• cursor-pointer - 为可点击元素添加 cursor-pointer

3. 性能（高）

• image-optimization - 使用 WebP、srcset、懒加载
• reduced-motion - 检查 prefers-reduced-motion
• content-jumping - 为异步内容预留空间

4. 布局与响应式（高）

• viewport-meta - width=device-width initial-scale=1
• readable-font-size - 移动端正文文本最小 16px
• horizontal-scroll - 确保内容适应视口宽度
• z-index-management - 定义 z-index 层级（10, 20, 30, 50）

5. 字体排版与颜色（中）

• line-height - 正文文本使用 1.5-1.75 行高
• line-length - 每行限制在 65-75 个字符
• font-pairing - 标题/正文字体风格匹配

6. 动画（中）

• duration-timing - 微交互使用 150-300ms 时长
• transform-performance - 使用 transform/opacity，而非 width/height
• loading-states - 骨架屏或加载指示器

7. 样式选择（中）

• style-match - 样式与产品类型匹配
• consistency - 所有页面使用相同样式
• no-emoji-icons - 使用 SVG 图标，而非表情符号

8. 图表与数据（低）

• chart-type - 图表类型与数据类型匹配
• color-guidance - 使用无障碍调色板
• data-table - 为无障碍访问提供表格替代方案

如何使用

使用下面的 CLI 工具搜索特定领域。

先决条件

检查是否已安装 Python：

python3 --version || python --version

如果未安装 Python，请根据用户的操作系统进行安装：

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

如何使用此技能

当用户请求 UI/UX 工作（设计、构建、创建、实现、审查、修复、改进）时，遵循以下工作流程：

步骤 1：分析用户需求

从用户请求中提取关键信息：

• 产品类型：SaaS、电子商务、作品集、仪表板、落地页等。
• 样式关键词：极简、活泼、专业、优雅、深色模式等。
• 行业：医疗保健、金融科技、游戏、教育等。
• 技术栈：React、Vue、Next.js，或默认使用 html-tailwind

步骤 2：生成设计系统（必需）

始终以 --design-system 开始，以获取包含推理的全面推荐：

python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

此命令：

1. 并行搜索 5 个领域（产品、样式、颜色、落地页、字体排版）
2. 应用 ui-reasoning.csv 中的推理规则以选择最佳匹配
3. 返回完整的设计系统：模式、样式、颜色、字体排版、效果
4. 包含需要避免的反模式

示例：

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

步骤 2b：持久化设计系统（主文件 + 覆盖模式）

要保存设计系统以跨会话进行分层检索，请添加 --persist：

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"

这将创建：

• design-system/MASTER.md — 包含所有设计规则的全局单一事实来源
• design-system/pages/ — 用于存放页面特定覆盖的文件夹

使用页面特定覆盖：

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

这还会创建：

• design-system/pages/dashboard.md — 页面特定的、与主文件不同的规则

分层检索的工作原理：

1. 当构建特定页面（例如，“结账”）时，首先检查 design-system/pages/checkout.md
2. 如果页面文件存在，其规则覆盖主文件规则
3. 如果不存在，则仅使用 design-system/MASTER.md

上下文感知的检索提示：

I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...

步骤 3：补充详细搜索（根据需要）

获取设计系统后，使用领域搜索获取更多细节：

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

何时使用详细搜索：

步骤 4：技术栈指南（默认：html-tailwind）

获取特定于实现的最佳实践。如果用户未指定技术栈，默认使用 html-tailwind。

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

可用技术栈：html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose

搜索参考

可用领域

可用技术栈

示例工作流程

用户请求： "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"

步骤 1：分析需求

• 产品类型：美容/水疗服务
• 样式关键词：优雅、专业、柔和
• 行业：美容/健康
• 技术栈：html-tailwind（默认）

步骤 2：生成设计系统（必需）

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"

输出： 包含模式、样式、颜色、字体排版、效果和反模式的完整设计系统。

步骤 3：补充详细搜索（根据需要）

# 获取动画和无障碍访问的 UX 指南
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

# 如果需要，获取替代字体排版选项
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography

步骤 4：技术栈指南

python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind

然后： 综合设计系统 + 详细搜索并实现设计。

输出格式

--design-system 标志支持两种输出格式：

# ASCII 框（默认）- 最适合终端显示
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - 最适合文档
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

获得更好结果的技巧

1. 关键词要具体 - "healthcare SaaS dashboard" > "app"
2. 多次搜索 - 不同的关键词揭示不同的见解
3. 组合领域 - 样式 + 字体排版 + 颜色 = 完整设计系统
4. 始终检查 UX - 搜索 "animation"、"z-index"、"accessibility" 以查找常见问题
5. 使用技术栈标志 - 获取特定于实现的最佳实践
6. 迭代 - 如果第一次搜索不匹配，尝试不同的关键词

专业 UI 的通用规则

这些是经常被忽视、导致 UI 看起来不专业的问题：

图标与视觉元素

交互与光标

浅色/深色模式对比度

布局与间距

交付前检查清单

在交付 UI 代码之前，验证以下项目：

视觉质量

• 未使用表情符号作为图标（使用 SVG 替代）
• 所有图标来自一致的图标集（Heroicons/Lucide）
• 品牌标志正确（从 Simple Icons 验证）
• 悬停状态不会导致布局偏移
• 直接使用主题颜色（bg-primary），而非 var() 包装器

交互

• 所有可点击元素都有 cursor-pointer
• 悬停状态提供清晰的视觉反馈
• 过渡效果平滑（150-300ms）
• 键盘导航的焦点状态可见

浅色/深色模式

• 浅色模式文本具有足够的对比度（至少 4.5:1）
• 玻璃/透明元素在浅色模式下可见
• 边框在两种模式下都可见
• 交付前测试两种模式

布局

• 浮动元素与边缘有适当的间距
• 没有内容隐藏在固定导航栏后面
• 在 375px、768px、1024px、1440px 下响应式
• 移动端无水平滚动

无障碍访问

• 所有图片都有替代文本
• 表单输入有标签
• 颜色不是唯一的指示器
• 尊重 prefers-reduced-motion

应用蓝图：Claude.ai（学习于 2025 年 7 月 — 19 个流程）

当用户说 "recreate Claude"、"clone Claude UI"、"rebuild Claude"、"tái tạo Claude" 或类似内容时 — 直接使用此蓝图，无需运行搜索脚本。

完整知识库： memory/claude-ui-flows.md 截图： screenshots/flows/ (100+ 张截图)

Claude 设计系统快速参考

Claude 应用外壳结构

// 主布局：侧边栏 + 内容区
<div className="flex h-screen bg-[#F9F6F0]">
  <Sidebar /> {/* w-12 折叠 / w-64 展开 */}
  <main className="flex-1 flex flex-col">
    <TopBar />
    <ChatArea />
    <ChatInput />
  </main>
</div>

聊天输入组件

<div className="border border-gray-200 rounded-xl bg-white p-3 shadow-sm">
  <textarea placeholder="How can I help you today?" />
  <div className="flex items-center justify-between mt-2">
    <div className="flex gap-2">
      <button>+</button> {/* 附件 */}
      <button>⚡</button> {/* 样式 */}
    </div>
    <div className="flex items-center gap-2">
      <span>Claude Sonnet 4 ↓</span>
      <button className="bg-[#C96A4A] text-white rounded-full w-8 h-8">↑</button>
    </div>
  </div>
</div>

主页英雄区

<div className="flex flex-col items-center justify-center flex-1">
  <h1 className="text-3xl font-serif text-gray-900">
    ✳ How was your day, {userName}?
  </h1>
  <ChatInput />
  <div className="flex gap-2 mt-3">
    {["Create","Strategize","Write","Learn","Code"].map(label => (
      <button className="px-3 py-1.5 rounded-full border border-gray-300 text-sm">{label}</button>
    ))}
  </div>
</div>

侧边栏组件

// 折叠状态（仅图标）
<nav className="w-12 flex flex-col items-center py-4 gap-4 border-r border-gray-200">
  <MenuIcon />
  <NewChatButton className="bg-[#C96A4A] rounded-full w-8 h-8" />
  <ChatsIcon />
  <ProjectsIcon />
  <ArtifactsIcon />
  {/* 间隔 */}
  <UserAvatar className="mt-auto" />
</nav>

// 展开状态
<nav className="w-64 flex flex-col py-4 border-r border-gray-200">
  <span className="font-semibold px-4">Claude</span>
  <NewChatButton>New chat</NewChatButton>
  <NavItem>Chats</NavItem>
  <NavItem badge="Upgrade">Projects</NavItem>
  <NavItem>Artifacts</NavItem>
  <Section title="Starred">{starredItems}</Section>
  <Section title="Recents">{recentChats}</Section>
  <UserMenu /> {/* 底部 */}
</nav>

设置页面布局

<div className="flex min-h-screen">
  <aside className="w-48 p-6">
    <h2>Settings</h2>
    <nav>
      {["Profile","Appearance","Account","Privacy","Billing","Connectors"].map(tab => (
        <a className={active === tab ? "font-medium bg-gray-100 rounded" : ""}>{tab}</a>
      ))}
    </nav>
  </aside>
  <main className="flex-1 p-8 max-w-3xl">
    {/* 标签页内容 */}
  </main>
</div>

外观设置

// 颜色模式选择器 — 3 个预览卡片
<div className="grid grid-cols-3 gap-4">
  {["Light","Match system","Dark"].map(mode => (
    <label className="border-2 rounded-xl p-4 cursor-pointer">
      <ModePreview mode={mode} />
      <span>{mode}</span>
    </label>
  ))}
</div>
// 字体选择器 — 3 个选项
<div className="grid grid-cols-3 gap-4">
  {["Default","Match system","Dyslexic friendly"].map(font => (
    <label className="border-2 rounded-xl p-6 text-center cursor-pointer">
      <span className="text-3xl">Aa</span>
      <span>{font}</span>
    </label>
  ))}
</div>

定价页面

// 3 个层级：免费 / 专业版 / 高级版
<div className="grid grid-cols-3 gap-6">
  {plans.map(plan => (
    <div className="border rounded-2xl p-6">
      <PlanIcon />
      <h3>{plan.name}</h3>
      <p className="text-sm text-gray-500">{plan.description}</p>
      <div className="text-3xl font-bold">{plan.price}</div>
      <button className="w-full bg-black text-white rounded-lg py-2 mt-4">{plan.cta}</button>
      <ul className="mt-4 space-y-2">
        {plan.features.map(f => <li className="flex gap-2">✓ {f}</li>)}
      </ul>
    </div>
  ))}
</div>

新手指引流程模式

// 分步进行，每屏一个问题，居中，极简界面
<div className="min-h-screen bg-[#F9F6F0] flex flex-col items-center justify-center">
  <Logo className="mb-8" />
  <div className="max-w-md w-full px-4">
    {/* 步骤 1：姓名 */}
    <p>Before we get started, what should I call you?</p>
    <div className="flex border rounded-lg mt-4">
      <input placeholder="Enter your name" className="flex-1 p-3" />
      <button className="bg-black text-white px-4 rounded-r-lg">→</button>
    </div>
    {/* 步骤 2：主题选择器 */}
    <p>What are you into? Pick three topics.</p>
    <div className="flex flex-wrap gap-2">
      {topics.map(t => <button className="px-4 py-2 border rounded-full">{t}</button>)}
    </div>
    <button className="bg-gray-800 text-white px-6 py-2 rounded-full">Let's go</button>
  </div>
</div>

登录页面

// 分割：左侧 = 表单，右侧 = 演示预览
<div className="min-h-screen grid grid-cols-2">
  <div className="flex flex-col items-center justify-center p-12">
    <Logo />
    <h1 className="text-3xl font-serif">Your ideas, amplified</h1>
    <p className="text-gray-500 mt-2">Privacy-first AI that helps you create in confidence.</p>
    <button className="w-full border rounded-lg py-3 mt-8 flex items-center justify-center gap-2">
      <GoogleIcon /> Continue with Google
    </button>
    <div className="text-center text-gray-400 my-4">OR</div>
    <input type="email" placeholder="Enter your personal or work email" className="w-full border rounded-lg p-3" />
    <button className="w-full bg-black text-white rounded-lg py-3 mt-3">Continue with email</button>
  </div>
  <div className="bg-gray-50 flex items-center justify-center p-12">
    {/* 演示聊天预览 */}
    <DemoChatPreview />
  </div>
</div>

类 Claude AI 应用的关键 UX 规则

1. 暖奶油色背景 #F9F6F0 — 非纯白色
2. 一种品牌色（珊瑚色）— 谨慎用于标志、发送按钮、新建聊天 CTA
3. 黑色主要按钮 — 高对比度，除了品牌色外不使用彩色 CTA
4. 对话式新手引导 — 每屏一个问题，没有冗长的表单
5. 极简侧边栏 — 折叠时仅图标，展开时显示完整标签
6. 个性化问候语 — 在主页标题中包含用户姓名
7. 悬停时显示响应工具栏 — 复制 / 点赞 / 重试 — 默认不显示
8. 分享模态框 — "默认私有" 切换模式
9. 产物分割视图 — 50/50 聊天 + 实时预览
10. 样式选择器 (⚡) — 正常/简洁/解释性/正式 + 自定义

每周安装次数

1

仓库

clownnvd/claude…e-skills

首次出现

今天

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

安装于

zencoder1

amp1

cline1

openclaw1

opencode1

cursor1

Quick Reference

1. Accessibility (CRITICAL)

• color-contrast - Minimum 4.5:1 ratio for normal text
• focus-states - Visible focus rings on interactive elements
• alt-text - Descriptive alt text for meaningful images
• aria-labels - aria-label for icon-only buttons
• keyboard-nav - Tab order matches visual order
• form-labels - Use label with for attribute

2. Touch & Interaction (CRITICAL)

• touch-target-size - Minimum 44x44px touch targets
• hover-vs-tap - Use click/tap for primary interactions
• loading-buttons - Disable button during async operations
• error-feedback - Clear error messages near problem
• cursor-pointer - Add cursor-pointer to clickable elements

3. Performance (HIGH)

• image-optimization - Use WebP, srcset, lazy loading
• reduced-motion - Check prefers-reduced-motion
• content-jumping - Reserve space for async content

4. Layout & Responsive (HIGH)

• viewport-meta - width=device-width initial-scale=1
• readable-font-size - Minimum 16px body text on mobile
• horizontal-scroll - Ensure content fits viewport width
• z-index-management - Define z-index scale (10, 20, 30, 50)

5. Typography & Color (MEDIUM)

• line-height - Use 1.5-1.75 for body text
• line-length - Limit to 65-75 characters per line
• font-pairing - Match heading/body font personalities

6. Animation (MEDIUM)

• duration-timing - Use 150-300ms for micro-interactions
• transform-performance - Use transform/opacity, not width/height
• loading-states - Skeleton screens or spinners

7. Style Selection (MEDIUM)

• style-match - Match style to product type
• consistency - Use same style across all pages
• no-emoji-icons - Use SVG icons, not emojis

8. Charts & Data (LOW)

• chart-type - Match chart type to data type
• color-guidance - Use accessible color palettes
• data-table - Provide table alternative for accessibility

How to Use

Search specific domains using the CLI tool below.

Prerequisites

Check if Python is installed:

python3 --version || python --version

If Python is not installed, install it based on user's OS:

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

How to Use This Skill

When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:

Step 1: Analyze User Requirements

Extract key information from user request:

• Product type : SaaS, e-commerce, portfolio, dashboard, landing page, etc.
• Style keywords : minimal, playful, professional, elegant, dark mode, etc.
• Industry : healthcare, fintech, gaming, education, etc.
• Stack : React, Vue, Next.js, or default to html-tailwind

Step 2: Generate Design System (REQUIRED)

Always start with--design-system to get comprehensive recommendations with reasoning:

python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

This command:

1. Searches 5 domains in parallel (product, style, color, landing, typography)
2. Applies reasoning rules from ui-reasoning.csv to select best matches
3. Returns complete design system: pattern, style, colors, typography, effects
4. Includes anti-patterns to avoid

Example:

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

Step 2b: Persist Design System (Master + Overrides Pattern)

To save the design system for hierarchical retrieval across sessions , add --persist:

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"

This creates:

• design-system/MASTER.md — Global Source of Truth with all design rules
• design-system/pages/ — Folder for page-specific overrides

With page-specific override:

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

This also creates:

• design-system/pages/dashboard.md — Page-specific deviations from Master

How hierarchical retrieval works:

1. When building a specific page (e.g., "Checkout"), first check design-system/pages/checkout.md
2. If the page file exists, its rules override the Master file
3. If not, use design-system/MASTER.md exclusively

Context-aware retrieval prompt:

I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...

Step 3: Supplement with Detailed Searches (as needed)

After getting the design system, use domain searches to get additional details:

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

When to use detailed searches:

Step 4: Stack Guidelines (Default: html-tailwind)

Get implementation-specific best practices. If user doesn't specify a stack, default tohtml-tailwind.

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose

Search Reference

Available Domains

Available Stacks

Example Workflow

User request: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"

Step 1: Analyze Requirements

• Product type: Beauty/Spa service
• Style keywords: elegant, professional, soft
• Industry: Beauty/Wellness
• Stack: html-tailwind (default)

Step 2: Generate Design System (REQUIRED)

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"

Output: Complete design system with pattern, style, colors, typography, effects, and anti-patterns.

Step 3: Supplement with Detailed Searches (as needed)

# Get UX guidelines for animation and accessibility
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

# Get alternative typography options if needed
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography

Step 4: Stack Guidelines

python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind

Then: Synthesize design system + detailed searches and implement the design.

Output Formats

The --design-system flag supports two output formats:

# ASCII box (default) - best for terminal display
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

Tips for Better Results

1. Be specific with keywords - "healthcare SaaS dashboard" > "app"
2. Search multiple times - Different keywords reveal different insights
3. Combine domains - Style + Typography + Color = Complete design system
4. Always check UX - Search "animation", "z-index", "accessibility" for common issues
5. Use stack flag - Get implementation-specific best practices
6. Iterate - If first search doesn't match, try different keywords

Common Rules for Professional UI

These are frequently overlooked issues that make UI look unprofessional:

Icons & Visual Elements

Interaction & Cursor

Light/Dark Mode Contrast

Layout & Spacing

Pre-Delivery Checklist

Before delivering UI code, verify these items:

Visual Quality

• No emojis used as icons (use SVG instead)
• All icons from consistent icon set (Heroicons/Lucide)
• Brand logos are correct (verified from Simple Icons)
• Hover states don't cause layout shift
• Use theme colors directly (bg-primary) not var() wrapper

Interaction

• All clickable elements have cursor-pointer
• Hover states provide clear visual feedback
• Transitions are smooth (150-300ms)
• Focus states visible for keyboard navigation

Light/Dark Mode

• Light mode text has sufficient contrast (4.5:1 minimum)
• Glass/transparent elements visible in light mode
• Borders visible in both modes
• Test both modes before delivery

Layout

• Floating elements have proper spacing from edges
• No content hidden behind fixed navbars
• Responsive at 375px, 768px, 1024px, 1440px
• No horizontal scroll on mobile

Accessibility

• All images have alt text
• Form inputs have labels
• Color is not the only indicator
• prefers-reduced-motion respected

App Blueprint: Claude.ai (Learned July 2025 — 19 Flows)

When user says "recreate Claude", "clone Claude UI", "rebuild Claude", "tái tạo Claude", or similar — use this blueprint directly without running search scripts.

Full knowledge base: memory/claude-ui-flows.md Screenshots: screenshots/flows/ (100+ screens)

Claude Design System Quick Reference

Claude App Shell Structure

// Main layout: sidebar + content
<div className="flex h-screen bg-[#F9F6F0]">
  <Sidebar /> {/* w-12 collapsed / w-64 expanded */}
  <main className="flex-1 flex flex-col">
    <TopBar />
    <ChatArea />
    <ChatInput />
  </main>
</div>

Chat Input Component

<div className="border border-gray-200 rounded-xl bg-white p-3 shadow-sm">
  <textarea placeholder="How can I help you today?" />
  <div className="flex items-center justify-between mt-2">
    <div className="flex gap-2">
      <button>+</button> {/* attach */}
      <button>⚡</button> {/* style */}
    </div>
    <div className="flex items-center gap-2">
      <span>Claude Sonnet 4 ↓</span>
      <button className="bg-[#C96A4A] text-white rounded-full w-8 h-8">↑</button>
    </div>
  </div>
</div>

Home Screen Hero

<div className="flex flex-col items-center justify-center flex-1">
  <h1 className="text-3xl font-serif text-gray-900">
    ✳ How was your day, {userName}?
  </h1>
  <ChatInput />
  <div className="flex gap-2 mt-3">
    {["Create","Strategize","Write","Learn","Code"].map(label => (
      <button className="px-3 py-1.5 rounded-full border border-gray-300 text-sm">{label}</button>
    ))}
  </div>
</div>

Sidebar Component

// Collapsed (icon only)
<nav className="w-12 flex flex-col items-center py-4 gap-4 border-r border-gray-200">
  <MenuIcon />
  <NewChatButton className="bg-[#C96A4A] rounded-full w-8 h-8" />
  <ChatsIcon />
  <ProjectsIcon />
  <ArtifactsIcon />
  {/* spacer */}
  <UserAvatar className="mt-auto" />
</nav>

// Expanded
<nav className="w-64 flex flex-col py-4 border-r border-gray-200">
  <span className="font-semibold px-4">Claude</span>
  <NewChatButton>New chat</NewChatButton>
  <NavItem>Chats</NavItem>
  <NavItem badge="Upgrade">Projects</NavItem>
  <NavItem>Artifacts</NavItem>
  <Section title="Starred">{starredItems}</Section>
  <Section title="Recents">{recentChats}</Section>
  <UserMenu /> {/* bottom */}
</nav>

Settings Layout

<div className="flex min-h-screen">
  <aside className="w-48 p-6">
    <h2>Settings</h2>
    <nav>
      {["Profile","Appearance","Account","Privacy","Billing","Connectors"].map(tab => (
        <a className={active === tab ? "font-medium bg-gray-100 rounded" : ""}>{tab}</a>
      ))}
    </nav>
  </aside>
  <main className="flex-1 p-8 max-w-3xl">
    {/* tab content */}
  </main>
</div>

Appearance Settings

// Color mode picker — 3 preview cards
<div className="grid grid-cols-3 gap-4">
  {["Light","Match system","Dark"].map(mode => (
    <label className="border-2 rounded-xl p-4 cursor-pointer">
      <ModePreview mode={mode} />
      <span>{mode}</span>
    </label>
  ))}
</div>
// Font picker — 3 options
<div className="grid grid-cols-3 gap-4">
  {["Default","Match system","Dyslexic friendly"].map(font => (
    <label className="border-2 rounded-xl p-6 text-center cursor-pointer">
      <span className="text-3xl">Aa</span>
      <span>{font}</span>
    </label>
  ))}
</div>

Pricing Page

// 3 tiers: Free / Pro / Max
<div className="grid grid-cols-3 gap-6">
  {plans.map(plan => (
    <div className="border rounded-2xl p-6">
      <PlanIcon />
      <h3>{plan.name}</h3>
      <p className="text-sm text-gray-500">{plan.description}</p>
      <div className="text-3xl font-bold">{plan.price}</div>
      <button className="w-full bg-black text-white rounded-lg py-2 mt-4">{plan.cta}</button>
      <ul className="mt-4 space-y-2">
        {plan.features.map(f => <li className="flex gap-2">✓ {f}</li>)}
      </ul>
    </div>
  ))}
</div>

Onboarding Flow Pattern

// Step-by-step, one question per screen, centered, minimal chrome
<div className="min-h-screen bg-[#F9F6F0] flex flex-col items-center justify-center">
  <Logo className="mb-8" />
  <div className="max-w-md w-full px-4">
    {/* Step 1: Name */}
    <p>Before we get started, what should I call you?</p>
    <div className="flex border rounded-lg mt-4">
      <input placeholder="Enter your name" className="flex-1 p-3" />
      <button className="bg-black text-white px-4 rounded-r-lg">→</button>
    </div>
    {/* Step 2: Topic picker */}
    <p>What are you into? Pick three topics.</p>
    <div className="flex flex-wrap gap-2">
      {topics.map(t => <button className="px-4 py-2 border rounded-full">{t}</button>)}
    </div>
    <button className="bg-gray-800 text-white px-6 py-2 rounded-full">Let's go</button>
  </div>
</div>

Login Page

// Split: left = form, right = demo preview
<div className="min-h-screen grid grid-cols-2">
  <div className="flex flex-col items-center justify-center p-12">
    <Logo />
    <h1 className="text-3xl font-serif">Your ideas, amplified</h1>
    <p className="text-gray-500 mt-2">Privacy-first AI that helps you create in confidence.</p>
    <button className="w-full border rounded-lg py-3 mt-8 flex items-center justify-center gap-2">
      <GoogleIcon /> Continue with Google
    </button>
    <div className="text-center text-gray-400 my-4">OR</div>
    <input type="email" placeholder="Enter your personal or work email" className="w-full border rounded-lg p-3" />
    <button className="w-full bg-black text-white rounded-lg py-3 mt-3">Continue with email</button>
  </div>
  <div className="bg-gray-50 flex items-center justify-center p-12">
    {/* Demo chat preview */}
    <DemoChatPreview />
  </div>
</div>

Key UX Rules for Claude-like AI Apps

1. Warm cream background #F9F6F0 — NOT pure white
2. One brand color (coral) — used sparingly for logo, send button, new chat CTA
3. Black primary buttons — high contrast, no colored CTAs except brand
4. Conversational onboarding — single question per screen, no long forms
5. Minimal sidebar — icons only when collapsed, full labels when expanded
6. Personalized greeting — include user's name in home screen title
7. Response toolbar on hover — copy / thumbs / retry — don't show by default
8. Share modal — "Private by default" toggle pattern
9. Artifact split view — 50/50 chat + live preview
10. Style selector (⚡) — Normal/Concise/Explanatory/Formal + custom

Weekly Installs

1

Repository

clownnvd/claude…e-skills

First Seen

Today

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

zencoder1

amp1

cline1

openclaw1

opencode1

cursor1