@lmy54321/design-system 1.1.3 → 1.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10,6 +10,34 @@ provider:
|
|
|
10
10
|
|
|
11
11
|
本项目使用团队设计系统 `@lmy54321/design-system`，所有 UI 开发必须优先使用该组件库。
|
|
12
12
|
|
|
13
|
+
## 用户画像与交互原则
|
|
14
|
+
|
|
15
|
+
> **核心原则：本设计系统的目标用户是纯设计师，没有编程背景。**
|
|
16
|
+
|
|
17
|
+
### 必须遵守的交互规范
|
|
18
|
+
|
|
19
|
+
1. **完全可视化操作** — 所有功能必须通过界面点击完成，禁止要求用户输入命令行指令
|
|
20
|
+
2. **零代码门槛** — 不要让用户手动编辑代码文件、配置文件或 JSON
|
|
21
|
+
3. **直观的交互方式** — 优先使用拖拽、点击、下拉选择等图形化操作
|
|
22
|
+
4. **友好的文案** — 避免技术术语（如 "npm"、"diff"、"merge"），使用设计师能理解的语言
|
|
23
|
+
|
|
24
|
+
### AI 生成代码时的注意事项
|
|
25
|
+
|
|
26
|
+
- 当需要文件操作时，**自动完成**，不要告诉用户去执行命令
|
|
27
|
+
- 当遇到冲突或选择时，**提供可视化界面**让用户点击选择，而非要求手动操作
|
|
28
|
+
- 当解释功能时，**用界面截图或示意图**而非代码片段
|
|
29
|
+
- 错误提示要**友好清晰**，告诉用户如何通过界面解决，而非给出技术排查步骤
|
|
30
|
+
|
|
31
|
+
### 禁止的交互方式
|
|
32
|
+
|
|
33
|
+
| 禁止 | 替代方案 |
|
|
34
|
+
|------|----------|
|
|
35
|
+
| 要求用户运行命令行指令 | AI 自动执行，或提供一键操作按钮 |
|
|
36
|
+
| 要求用户手动对比代码差异 | 提供可视化对比界面 |
|
|
37
|
+
| 要求用户手动编辑配置文件 | 提供设置面板，点击切换选项 |
|
|
38
|
+
| 输出大段代码让用户复制粘贴 | AI 直接写入文件，用户只需确认 |
|
|
39
|
+
| 使用技术术语解释问题 | 用通俗语言 + 图示说明 |
|
|
40
|
+
|
|
13
41
|
## 可用组件清单
|
|
14
42
|
|
|
15
43
|
生成 UI 代码时，**必须优先**从以下组件中选用，禁止重复造轮子：
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: 当用户说"初始化项目"、"新建项目"、"搭建项目"、"项目初始化"时触发，自动完成 React + Vite + 团队设计系统的完整初始化。
|
|
3
|
+
alwaysApply: false
|
|
4
|
+
enabled: true
|
|
5
|
+
updatedAt: 2026-03-02T10:03:20.525Z
|
|
6
|
+
provider:
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# 项目一键初始化流程
|
|
10
|
+
|
|
11
|
+
当用户说「初始化项目」「新建项目」「搭建项目」时，按以下步骤自动执行，**无需用户确认每一步**：
|
|
12
|
+
|
|
13
|
+
## 环境要求
|
|
14
|
+
|
|
15
|
+
- **Node.js >= 18**（Vite 5+ 和 Tailwind CSS 4 均要求 Node 18 以上）
|
|
16
|
+
|
|
17
|
+
## 自动执行步骤
|
|
18
|
+
|
|
19
|
+
### 1. 创建 React + Vite 项目
|
|
20
|
+
```bash
|
|
21
|
+
npm create vite@latest . -- --template react-ts
|
|
22
|
+
```
|
|
23
|
+
如果当前目录已有 package.json，则跳过此步。
|
|
24
|
+
|
|
25
|
+
### 2. 安装依赖
|
|
26
|
+
```bash
|
|
27
|
+
npm install
|
|
28
|
+
npm install @lmy54321/design-system
|
|
29
|
+
npm install tailwindcss @tailwindcss/vite
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### 3. 同步设计系统 AI 规则
|
|
33
|
+
将 npm 包中附带的 CodeBuddy 规则文件复制到项目的 `.codebuddy/rules/` 目录，确保 AI 辅助开发时能识别组件库规范：
|
|
34
|
+
```bash
|
|
35
|
+
mkdir -p .codebuddy/rules
|
|
36
|
+
cp node_modules/@lmy54321/design-system/.codebuddy/rules/design-system.mdc .codebuddy/rules/design-system.mdc
|
|
37
|
+
cp node_modules/@lmy54321/design-system/.codebuddy/rules/init-project.mdc .codebuddy/rules/init-project.mdc
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
> **说明：** 规则文件随 npm 包版本同步发布，每次升级设计系统版本后应重新执行此复制命令以获取最新规范。`init-project.mdc` 也会被复制，这样项目后续可以再次执行初始化或帮助其他同事同步规则。
|
|
41
|
+
|
|
42
|
+
### 4. 配置 Vite（添加 Tailwind 插件）
|
|
43
|
+
修改 `vite.config.ts`：
|
|
44
|
+
```ts
|
|
45
|
+
import { defineConfig } from 'vite'
|
|
46
|
+
import react from '@vitejs/plugin-react'
|
|
47
|
+
import tailwindcss from '@tailwindcss/vite'
|
|
48
|
+
|
|
49
|
+
export default defineConfig({
|
|
50
|
+
plugins: [react(), tailwindcss()],
|
|
51
|
+
})
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### 5. 配置入口样式
|
|
55
|
+
将 `src/index.css` 内容替换为：
|
|
56
|
+
```css
|
|
57
|
+
@import "@lmy54321/design-system/styles";
|
|
58
|
+
|
|
59
|
+
@source "../src";
|
|
60
|
+
@source "../node_modules/@lmy54321/design-system/dist";
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
> **注意：** 不要在 `src/index.css` 中单独写 `@import "tailwindcss"`，设计系统的样式文件内部已包含 Tailwind 初始化，重复导入会导致样式冲突。
|
|
64
|
+
> `src/main.tsx` 中也不需要通过 JS 导入样式（不需要 `import '@lmy54321/design-system/styles'`），CSS 的 `@import` 已经处理了。
|
|
65
|
+
|
|
66
|
+
### 6. 清理 Vite 默认模板
|
|
67
|
+
- 清空 `src/App.css` 的内容
|
|
68
|
+
- 将 `src/App.tsx` 替换为一个简单的欢迎页面，使用设计系统组件：
|
|
69
|
+
```tsx
|
|
70
|
+
import { Btn, IconFont } from '@lmy54321/design-system'
|
|
71
|
+
|
|
72
|
+
function App() {
|
|
73
|
+
return (
|
|
74
|
+
<div style={{ minHeight: '100dvh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16, fontFamily: 'var(--font-family-sans)' }}>
|
|
75
|
+
<IconFont name="map-location" size="48px" />
|
|
76
|
+
<h1 style={{ fontSize: 24, fontWeight: 600 }}>项目已就绪</h1>
|
|
77
|
+
<p style={{ fontSize: 14, color: 'rgba(0,0,0,0.42)' }}>设计系统已加载，可以开始创建页面了</p>
|
|
78
|
+
<Btn variant="primary" label="开始" />
|
|
79
|
+
</div>
|
|
80
|
+
)
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export default App
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### 7. 启动开发服务器
|
|
87
|
+
```bash
|
|
88
|
+
npm run dev
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### 8. 完成后告诉用户
|
|
92
|
+
告诉用户：「项目已初始化完成，设计系统已加载。你可以直接描述你想要的页面，比如：做一个地图首页 / 做一个搜索页面 / 做一个 POI 列表页。」
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lmy54321/design-system",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.4",
|
|
4
4
|
"description": "A comprehensive React component library and design system based on Tailwind CSS and Motion.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -12,13 +12,14 @@
|
|
|
12
12
|
"require": "./dist/index.js"
|
|
13
13
|
},
|
|
14
14
|
"./styles": "./styles/globals.css",
|
|
15
|
-
"./rules/*": "
|
|
15
|
+
"./rules/*": "./.codebuddy/rules/*"
|
|
16
16
|
},
|
|
17
17
|
"sideEffects": false,
|
|
18
18
|
"files": [
|
|
19
19
|
"dist",
|
|
20
20
|
"styles",
|
|
21
|
-
"rules"
|
|
21
|
+
".codebuddy/rules/design-system.mdc",
|
|
22
|
+
".codebuddy/rules/init-project.mdc"
|
|
22
23
|
],
|
|
23
24
|
"scripts": {
|
|
24
25
|
"dev": "vite",
|
|
@@ -38,6 +39,7 @@
|
|
|
38
39
|
"clsx": "^2.1.0",
|
|
39
40
|
"lucide-react": "^0.330.0",
|
|
40
41
|
"motion": "^12.0.0",
|
|
42
|
+
"react-router-dom": "^7.13.1",
|
|
41
43
|
"tailwind-merge": "^2.2.1",
|
|
42
44
|
"tdesign-icons-react": "^0.6.2"
|
|
43
45
|
},
|