@design-llm/sketch-ui

手绘风格 React 组件库 — 为产品原型设计而生。

一看就知道是草稿，不是终稿。让产品经理和设计师用手绘风 UI 搭建原型，避免需求评审中的像素级争论。

特性

• 手绘渲染 — 基于 rough.js，所有边框、形状都像手画的
• 手写字体 — 中文使用「今年也要加油鸭」手写体（内置），英文使用 Caveat（Google Fonts 自动加载）
• 20 个组件 — 覆盖原型设计常用场景：表单、布局、导航、反馈
• TypeScript — 完整类型定义，开箱即用
• 零配置 — 导入即用，样式内置，字体自动加载

安装

npm install @design-llm/sketch-ui

快速开始

import { Button, Card, Input, Checkbox } from '@design-llm/sketch-ui'
import '@design-llm/sketch-ui/style.css'

function App() {
  return (
    <Card title="用户注册">
      <Input placeholder="请输入用户名..." />
      <Checkbox>我已阅读用户协议</Checkbox>
      <Button variant="primary">注册 Sign Up</Button>
    </Card>
  )
}

组件列表

通用

| 组件 | 说明 | 关键 Props | |------|------|-----------| | Button | 手绘按钮 | variant: default / primary / success / danger, size: sm / md / lg | | Icon | 手绘 SVG 图标 | type: Search / Home / Settings / Heart / Star / Calendar / User / Email / Tick | | Divider | 手绘分割线 | — |

表单

| 组件 | 说明 | 关键 Props | |------|------|-----------| | Input | 单行输入框 | placeholder, value, onChange | | TextArea | 多行文本域 | placeholder, rows | | Checkbox | 复选框 | checked, onChange | | Radio | 单选框 | checked, name | | Select | 下拉选择器 | options, value, onChange | | Toggle | 开关 | checked, onChange |

数据展示

| 组件 | 说明 | 关键 Props | |------|------|-----------| | Card | 卡片容器 | title | | Badge | 徽标 | variant: default / primary / success / warning / danger | | Tag | 标签 | variant, closable | | Avatar | 头像 | src, name, size | | Table | 表格 | columns, data | | Progress | 进度条 | value, variant |

反馈

| 组件 | 说明 | 关键 Props | |------|------|-----------| | Alert | 提示框 | variant, closable | | Modal | 弹窗 | open, onClose, title | | Spinner | 加载动画 | size |

导航

| 组件 | 说明 | 关键 Props | |------|------|-----------| | Tabs | 标签页 | items, activeKey, onChange | | Breadcrumb | 面包屑 | items |

设计令牌

所有组件使用 CSS 自定义属性，可全局覆盖：

:root {
  --sk-bg: #fffef9;          /* 纸白底色 */
  --sk-stroke: #2c2c2c;      /* 铅笔描边 */
  --sk-primary: #4a90d9;     /* 蓝色彩铅 */
  --sk-success: #5cb85c;     /* 绿色彩铅 */
  --sk-warning: #f0ad4e;     /* 橙色彩铅 */
  --sk-danger: #d9534f;      /* 红色彩铅 */
  --sk-font-size: 18px;      /* 基础字号 */
  --sk-roughness: 1.5;       /* 手绘粗糙度 */
  --sk-stroke-width: 1.8;    /* 描边宽度 */
}

技术栈

| 技术 | 用途 | |------|------| | rough.js | 手绘 SVG 渲染引擎 | | React 18+ | UI 框架 | | TypeScript | 类型系统 | | Vite | 构建工具 |

协议

MIT