{"_id":"@design-llm/sketch-ui","name":"@design-llm/sketch-ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@design-llm/sketch-ui","version":"0.1.0","description":"手绘风格 React 组件库，为产品原型设计而生 — Hand-drawn sketch-style React components for prototyping","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"},"./style.css":"./dist/index.css"},"sideEffects":["**/*.css"],"scripts":{"dev":"vite","build":"vite build && node scripts/fix-font-path.mjs","lint":"eslint .","preview":"vite preview","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"roughjs":"^4.6.6"},"devDependencies":{"@eslint/js":"^9.39.1","@types/node":"^24.10.1","@types/react":"^19.2.7","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.1","eslint":"^9.39.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.24","globals":"^16.5.0","react":"^19.2.0","react-dom":"^19.2.0","typescript":"~5.9.3","typescript-eslint":"^8.48.0","vite":"^7.3.1","vite-plugin-dts":"^4.5.4"},"keywords":["react","sketch","hand-drawn","prototype","wireframe","ui-components","roughjs","手绘","原型","组件库"],"license":"MIT","homepage":"https://github.com/design-llm/sketch-ui","repository":{"type":"git","url":"git+https://github.com/design-llm/sketch-ui.git"},"_id":"@design-llm/sketch-ui@0.1.0","bugs":{"url":"https://github.com/design-llm/sketch-ui/issues"},"_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-q4+38vuVQ2dAnaPGxkPDsuVP1O/lQB0gs+aMbDef1pIUi8j4YFWKM8NM7syfNU2CIvzzfittLldzO8eBYcFyHQ==","shasum":"f4915ee30c8ec149830610a21290de055731f077","tarball":"https://registry.npmjs.org/@design-llm/sketch-ui/-/sketch-ui-0.1.0.tgz","fileCount":28,"unpackedSize":7607823,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBaIgLMcvBO0gDFr73v+17Yj6a/Htu+b67CQP0ipt5aXAiEA/WZZEubGqBZjsRP79ImkliQA2/T4P/uxHuR5MmOGCDc="}]},"_npmUser":{"name":"cunyu666","email":"minghuazzz@qq.com"},"directories":{},"maintainers":[{"name":"lucy.cl","email":"471394684@qq.com"},{"name":"cunyu666","email":"minghuazzz@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sketch-ui_0.1.0_1772450337248_0.6153447088408956"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-02T11:18:57.183Z","0.1.0":"2026-03-02T11:18:57.499Z","modified":"2026-03-02T11:18:57.694Z"},"maintainers":[{"name":"lucy.cl","email":"471394684@qq.com"},{"name":"cunyu666","email":"minghuazzz@qq.com"}],"description":"手绘风格 React 组件库，为产品原型设计而生 — Hand-drawn sketch-style React components for prototyping","homepage":"https://github.com/design-llm/sketch-ui","keywords":["react","sketch","hand-drawn","prototype","wireframe","ui-components","roughjs","手绘","原型","组件库"],"repository":{"type":"git","url":"git+https://github.com/design-llm/sketch-ui.git"},"bugs":{"url":"https://github.com/design-llm/sketch-ui/issues"},"license":"MIT","readme":"# @design-llm/sketch-ui\n\n**手绘风格 React 组件库** — 为产品原型设计而生。\n\n一看就知道是草稿，不是终稿。让产品经理和设计师用手绘风 UI 搭建原型，避免需求评审中的像素级争论。\n\n## 特性\n\n- **手绘渲染** — 基于 [rough.js](https://roughjs.com/)，所有边框、形状都像手画的\n- **手写字体** — 中文使用「今年也要加油鸭」手写体（内置），英文使用 Caveat（Google Fonts 自动加载）\n- **20 个组件** — 覆盖原型设计常用场景：表单、布局、导航、反馈\n- **TypeScript** — 完整类型定义，开箱即用\n- **零配置** — 导入即用，样式内置，字体自动加载\n\n## 安装\n\n```bash\nnpm install @design-llm/sketch-ui\n```\n\n## 快速开始\n\n```tsx\nimport { Button, Card, Input, Checkbox } from '@design-llm/sketch-ui'\nimport '@design-llm/sketch-ui/style.css'\n\nfunction App() {\n  return (\n    <Card title=\"用户注册\">\n      <Input placeholder=\"请输入用户名...\" />\n      <Checkbox>我已阅读用户协议</Checkbox>\n      <Button variant=\"primary\">注册 Sign Up</Button>\n    </Card>\n  )\n}\n```\n\n## 组件列表\n\n### 通用\n\n| 组件 | 说明 | 关键 Props |\n|------|------|-----------|\n| `Button` | 手绘按钮 | `variant`: default / primary / success / danger, `size`: sm / md / lg |\n| `Icon` | 手绘 SVG 图标 | `type`: Search / Home / Settings / Heart / Star / Calendar / User / Email / Tick |\n| `Divider` | 手绘分割线 | — |\n\n### 表单\n\n| 组件 | 说明 | 关键 Props |\n|------|------|-----------|\n| `Input` | 单行输入框 | `placeholder`, `value`, `onChange` |\n| `TextArea` | 多行文本域 | `placeholder`, `rows` |\n| `Checkbox` | 复选框 | `checked`, `onChange` |\n| `Radio` | 单选框 | `checked`, `name` |\n| `Select` | 下拉选择器 | `options`, `value`, `onChange` |\n| `Toggle` | 开关 | `checked`, `onChange` |\n\n### 数据展示\n\n| 组件 | 说明 | 关键 Props |\n|------|------|-----------|\n| `Card` | 卡片容器 | `title` |\n| `Badge` | 徽标 | `variant`: default / primary / success / warning / danger |\n| `Tag` | 标签 | `variant`, `closable` |\n| `Avatar` | 头像 | `src`, `name`, `size` |\n| `Table` | 表格 | `columns`, `data` |\n| `Progress` | 进度条 | `value`, `variant` |\n\n### 反馈\n\n| 组件 | 说明 | 关键 Props |\n|------|------|-----------|\n| `Alert` | 提示框 | `variant`, `closable` |\n| `Modal` | 弹窗 | `open`, `onClose`, `title` |\n| `Spinner` | 加载动画 | `size` |\n\n### 导航\n\n| 组件 | 说明 | 关键 Props |\n|------|------|-----------|\n| `Tabs` | 标签页 | `items`, `activeKey`, `onChange` |\n| `Breadcrumb` | 面包屑 | `items` |\n\n## 设计令牌\n\n所有组件使用 CSS 自定义属性，可全局覆盖：\n\n```css\n:root {\n  --sk-bg: #fffef9;          /* 纸白底色 */\n  --sk-stroke: #2c2c2c;      /* 铅笔描边 */\n  --sk-primary: #4a90d9;     /* 蓝色彩铅 */\n  --sk-success: #5cb85c;     /* 绿色彩铅 */\n  --sk-warning: #f0ad4e;     /* 橙色彩铅 */\n  --sk-danger: #d9534f;      /* 红色彩铅 */\n  --sk-font-size: 18px;      /* 基础字号 */\n  --sk-roughness: 1.5;       /* 手绘粗糙度 */\n  --sk-stroke-width: 1.8;    /* 描边宽度 */\n}\n```\n\n## 技术栈\n\n| 技术 | 用途 |\n|------|------|\n| [rough.js](https://roughjs.com/) | 手绘 SVG 渲染引擎 |\n| React 18+ | UI 框架 |\n| TypeScript | 类型系统 |\n| Vite | 构建工具 |\n\n## 协议\n\nMIT\n","readmeFilename":"README.md","_rev":"1-85c62223cab1fa22b482cf1a26d4261a"}