Craft UI演示
Craft UI Hand-drawn Design System / 手绘风格组件库完整展示
Typography 排版
Heading 1 一级标题
Heading 2 二级标题
Heading 3 三级标题
Heading 4 四级标题
Heading 5 五级标题
This is body text for a blog article. Good typography is the foundation of readability. 这是博客文章的正文文本。好的排版是可读性的基础，让读者能够专注于内容本身。
Secondary text with lighter weight. 次要文本使用较浅的颜色。
Small / Caption text 小号说明文字 — used for dates, metadata, footnotes.
Notation 文本标注
Blockquote 引用
"The best design is the one you don't notice."
"最好的设计是你注意不到的设计。"
"简约不是少，而是没有多余。足够也不是多，而是刚好你需要。"
Lists 列表
Unordered 无序列表
- First item 第一项
- Second item 第二项
- Nested child 嵌套子项
- Another child 另一个子项
- Third item 第三项
Ordered 有序列表
- Setup project 初始化项目
- Install dependencies 安装依赖
- Write components 编写组件
- Deploy 部署上线
Checklist 任务列表
- Design system 设计系统
- Typography 排版体系
- Components 组件开发
- Dark mode 暗色模式
- Accessibility 无障碍适配
Code 代码
Inline code: use const greeting = "Hello" to declare a variable. 行内代码：使用 npm install 安装依赖。
function greet(name) {
const message = `Hello, ${name}!`;
console.log(message);
return message;
}
// 调用示例 Usage example
greet('World');.hand-drawn-card {
background: #fffdf7;
border: 2px solid #3d3229;
filter: url(#hand-drawn);
border-radius: 3px;
transition: transform 0.3s ease;
}
.hand-drawn-card:hover {
transform: translateY(-4px) rotate(0.5deg);
} const config = {
- theme: 'default',
+ theme: 'hand-drawn',
lang: 'zh-CN',
- wobble: 0,
+ wobble: 0.5,
};Callouts 提示框
This is an informational callout for helpful tips. 这是一条信息提示，用于展示有用的小贴士。
Be careful with this operation. 请注意，此操作需要谨慎。
Operation completed successfully! 操作已成功完成！
Something went wrong, please try again. 出了点问题，请重试。
A side note for additional context. 一条补充说明，提供更多背景信息。
Tags & Badges 标签
Table 表格
| Component 组件 | Status 状态 | Description 描述 |
|---|---|---|
| Typography 排版 | Done 完成 | Headings, body, links 标题、正文、链接 |
| Code Block 代码块 | Done 完成 | Syntax highlight, inline code 语法高亮、行内代码 |
| Callout 提示 | Done 完成 | Info, warning, error, success 信息、警告、错误、成功 |
| Dark Mode 暗色 | WIP | Theme toggle 主题切换 |
Modal 弹窗
Toast 轻提示
Tooltip 提示气泡
Accordion 折叠面板
Craft UI is a hand-drawn style design system for blogs, built with pure CSS, JS, and SVG. No frameworks needed.
Craft UI 是一套手绘风格的博客设计系统，使用纯 CSS、JS 和 SVG 构建，无需任何框架。
We use SVG filters (feTurbulence + feDisplacementMap) to create the wobble effect on borders and shapes.
我们使用 SVG 滤镜来为边框和图形创建抖动效果。
Yes! Use the theme panel on the right to change primary colors, background, wobble intensity, and more.
当然可以！使用右侧的主题面板即可更换主色调、背景色、抖动强度等。
Progress 进度条
Keyboard 键盘快捷键
Press Ctrl + C to copy 复制
Press Ctrl + V to paste 粘贴
Press Ctrl + Z to undo 撤销
Press ⌘ Cmd + Shift + P to open command palette 打开命令面板
Press Esc to close 关闭
Breadcrumb 面包屑
Pagination 分页
Avatar & Image 头像与图片
Dividers 分割线
Straight 直线
Wave 波浪
Dashed 虚线
Dots 点线
Stars 星星
Ornamental 装饰线
Buttons 按钮
Cards 卡片
Sketchy Borders 手绘边框
Every border wobbles slightly, mimicking real hand-drawn strokes. 每条边框都会轻微抖动，模拟真实的手绘笔触。
SVG Filters 滤镜效果
Pencil textures and ink bleeding effects via SVG filter chains. 通过SVG滤镜链实现铅笔纹理和墨水晕染效果。
Animations 动画
Float, swing, twinkle and squiggly motion effects for lively pages. 浮动、摇摆、闪烁和抖动动效，让页面充满活力。
Social Icons 社交图标