1. Thành phần đã tạo
Sau khi chạy CLI, các file sau sẽ được tạo trong thư mục output/:
📄
design-system.html
Tài liệu thiết kế đầy đủ
🎨
design-system.css
Design Tokens (CSS variables)
⚛️
components/
React components (Button, Card, Input...)
📱
Dashboard.tsx
File mẫu hoàn chỉnh
2. Các bước tích hợp
1
Copy tài liệu vào dự án
Bash
# 1. Copy file CSS vào thư mục styles
cp output/design-system.css path/to/your/src/styles/
# 2. Copy bộ component vào thư mục components
cp -r output/components/* path/to/your/src/components/2
Import CSS Toàn cục
Trong file entry của ứng dụng (thường là App.tsx hoặc main.tsx):
TypeScript
import './styles/design-system.css';3
Sử dụng Component
TSX
import { Button, Card, Input } from './components';
function MyApp() {
return (
<Card variant="elevated">
<h1 style={{ color: 'var(--semi-color-primary)' }}>
Chào mừng
</h1>
<Input placeholder="Nhập tên..." />
<Button variant="primary">Lưu ngay</Button>
</Card>
);
}3. Quản lý Design Tokens
Dữ liệu của bạn sử dụng Semi Design Architecture. Sử dụng trực tiếp các biến CSS để đảm bảo đồng bộ:
🎨
--semi-color-primary
Màu thương hiệu
📐
--semi-border-radius-medium
Bo góc
↔️
--semi-spacing-base
Khoảng cách
Ví dụ sử dụng Tokens
CSS
.my-component {
background-color: var(--semi-color-bg-1);
color: var(--semi-color-text-0);
padding: var(--semi-spacing-base);
border-radius: var(--semi-border-radius-medium);
border: 1px solid var(--semi-color-border);
}🚀 Chúc bạn code vui vẻ!
Bắt đầu tạo design system cho dự án của bạn ngay hôm nay.