Claude Design System

让你的网页像 Claude 官网一样优雅。 一套基于 Anthropic Claude 设计语言的网页模板库，支持 AI 辅助生成。

---

这是什么？

Claude Design System 是一套高保真网页示例集合，精确还原了 Anthropic Claude 官网的视觉风格——极简黑白、精密排版、暗色模式。

每个页面都是纯 HTML/CSS/JS，零框架依赖，可直接浏览器打开，也可作为 AI 编程的参考模板。

快速开始

# 1. 克隆项目
git clone https://github.com/yourname/claude-design-system.git
cd claude-design-system

# 2. 启动本地预览（自动打开浏览器）
python main.py

# 3. 或直接双击打开任意 HTML 文件
# examples/01-landing-page.html

需要 Python 3.7+。如果没有 Python，直接浏览器打开 examples/ 下的 HTML 文件即可。

页面示例

#	页面	组件覆盖	场景
01	Landing Page	Hero、特性网格、数据统计动画、评价卡片、CTA	产品官网首页
02	Dashboard	侧边栏、统计卡片、图表区、数据表格、活动列表	管理后台
03	Pricing	定价卡片、月/年切换、功能对比表	价格页面
04	Blog Article	排版层级、代码块、引用、推荐卡片	博客/文档
05	FAQ	折叠面板、分类筛选、搜索栏、联系 CTA	帮助中心
06	Sign In	居中表单、输入验证、社交登录、错误提示	登录/注册

给 AI 使用（推荐方式）

将设计规范提供给任何 AI（Claude、GPT、Copilot 等），生成风格一致的网页：

请参考以下设计规范，帮我生成一个「作品集展示页」：

[复制 prompts/claude-style-prompt.md 全文]

需求：Hero 大图 + 作品卡片网格 + 联系表单。使用 Lucide 图标。

规范文件：prompts/claude-style-prompt.md

生成的页面会自动：

• ✅ 使用 Inter 字体（100-800 全字重）
• ✅ 使用 Lucide 图标（stroke-width: 1.5）
• ✅ 标题字重 200/300，正文 400
• ✅ 暖橙色点缀 #D97757
• ✅ 亮色/暗色模式切换
• ✅ 零 emoji、零渐变、零粗阴影
• ✅ 数据数字滚动动画（进入可视区自动触发）

设计核心

属性	亮色模式	暗色模式
主背景	#FFFFFF	#0D0D0D
主文字	#0D0D0D	#F5F5F5
辅助文字	#666666	#999999
强调色	#D97757	#E8916A
卡片圆角	14px	14px
按钮圆角	8px	8px
标题字重	200	200
正文字重	400	400

设计哲学

用视觉的「少」传达内容的「多」

• 去装饰化 — 不用渐变、粗阴影、大面积圆角、华丽动效
• 字体即设计 — 字重对比是唯一的视觉层次来源
• 色彩克制 — 90% 黑/白/灰，10% 暖橙点缀

禁止事项

❌ 禁止	✅ 替代方案
emoji 图标	Lucide Icons
渐变背景	纯色 + 细边框
粗阴影 (blur > 60px)	微弱阴影 (blur ≤ 3px)
多色主题	黑白灰 + 单色点缀
衬线字体（正文）	Inter 无衬线
弹跳/脉冲动画	淡入/上浮/数字滚动

项目结构

claude-design-system/
├── main.py                              ← 本地预览服务器（自动生成索引页）
├── index.html                           ← 自动生成的导航页（运行 main.py 后生成）
├── README.md                            ← 本文件
├── LICENSE                              ← MIT
├── prompts/
│   └── claude-style-prompt.md           ← ★ AI 设计提示词（严格的生成规范）
└── examples/
    ├── 01-landing-page.html             ← 产品落地页（含数字滚动动画）
    ├── 02-dashboard.html                ← 数据仪表盘
    ├── 03-pricing-page.html             ← 定价页面
    ├── 04-blog-article.html             ← 博客文章
    ├── 05-faq-page.html                 ← FAQ 帮助中心
    └── 06-signin-page.html              ← 登录页面

技术栈

• 字体: Google Fonts — Inter (100-800 全字重)
• 图标: Lucide Icons (CDN 加载)
• 依赖: 零 npm 包，零框架，纯 HTML/CSS/JS
• 兼容: 所有现代浏览器（Chrome、Firefox、Safari、Edge）

使用场景

1. 直接参考

打开任意 examples/*.html 文件，查看特定组件的实现：

• 卡片 + 网格 → 01-landing-page.html
• 侧边栏布局 → 02-dashboard.html
• 数据表格 → 02-dashboard.html / 03-pricing-page.html
• 排版层次 → 04-blog-article.html
• 折叠面板 → 05-faq-page.html
• 表单验证 → 06-signin-page.html

2. AI 辅助生成

把 claude-style-prompt.md 扔给 AI，让它帮你生成 Claude 风格的任意页面。

3. 集成到项目

将设计规范复制到你的项目中，作为团队的 UI 设计标准。

数字滚动动画

落地页的数据统计区域自带数字滚动动画：

• 从 0 递增到目标值（easeOutExpo 缓动，1.5 秒）
• IntersectionObserver 监听：滚动到可视区 35% 时自动触发
• 入场淡入 + 上浮 + 微缩放
• 仅运行一次，不会重复触发

在你自己页面的数据卡片上添加：

<div class="stat-value" data-target="10000" data-suffix="K+" data-decimals="0">
  0<span>+</span>
</div>

License

MIT — 自由使用、修改、分发。标注出处即可。

---

_{Made with ❤️ by the open-source community}