Abstraction是什么
Abstraction 是一个专注于设计开发协作的 SVG 插图生成平台。它允许用户通过简单的配置或选择，快速创建与品牌视觉规范（颜色、风格、主题）一致的矢量插图，并一键将其转换为可复用的 React 组件代码。无需手动绘制或额外转换，即可将插图无缝集成到前端项目中。
核心优势
- 品牌一致性：支持自定义调色板、线条样式和元素库，确保所有插图遵循同一视觉语言。
- 开发友好导出：直接输出 React 组件（JSX/TSX），附带类型定义和样式属性，减少手动封装工作。
- 免设计门槛：无需专业设计工具知识，通过预设模板或简单参数即可生成专业级插图。
- 轻量与可缩放：SVG 格式保证清晰度与文件大小优化，适合响应式应用。
适用人群
| 角色 | 使用场景 |
|---|---|
| 前端开发者 | 快速获取可直接调用的插图组件，避免从 Figma 手动导出和转换。 |
| UI/UX 设计师 | 批量生成统一风格的占位图或装饰元素，交付给开发时无需额外沟通。 |
| 产品经理 | 在原型或演示阶段快速添加视觉素材，保证演示效果。 |
工作流程
- 选择模板或从头创建：从内置图库挑选基础插图，或从空白画布开始。
- 调整品牌属性：修改颜色、描边宽度、圆角等参数，实时预览变化。
- 添加或删除元素：通过拖拽或属性面板增减图形、图标或文本。
- 导出组件：选择“导出为 React”，下载包含完整代码的
.tsx文件，或复制代码直接粘贴到项目中。
导出能力
- 支持框架：React（含 TypeScript 类型）、Vue（可选），以及原生 SVG 代码。
- 代码结构：每个组件包含默认 props（如
className、style、size），可被外部灵活覆盖。 - 依赖零额外：生成的组件不依赖任何第三方库，仅使用 React 基本元素（
svg、path、g等）。