Skip to content

Commit 60f5946

Browse files
AIwork4meAIwork4me
committed
style: EvoClaw 风格对齐
1 parent 4bd9377 commit 60f5946

3 files changed

Lines changed: 415 additions & 14 deletions

File tree

‎docs/WEBSITE_CLONE_WORKFLOW.md‎

Lines changed: 352 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,352 @@
1+
# 网站风格学习与应用流程
2+
3+
> **目标：** 输入对标网站链接 → 自动学习风格 → 应用到产品
4+
> **创建时间：** 2026-03-23
5+
6+
---
7+
8+
## 流程概述
9+
10+
```
11+
用户输入 URL
12+
↓
13+
1. 抓取网站内容
14+
↓
15+
2. 分析设计元素
16+
- 字体（font-family, font-size, line-height）
17+
- 色彩（主色、辅助色、背景色、文字色）
18+
- 间距（padding, margin, gap）
19+
- 圆角（border-radius）
20+
- 阴影（box-shadow）
21+
- 布局（grid, flex）
22+
- 动效（transition, animation）
23+
↓
24+
3. 生成设计 token
25+
- Tailwind 配置
26+
- CSS 变量
27+
↓
28+
4. 应用到产品
29+
- 更新配置文件
30+
- 更新组件样式
31+
↓
32+
5. 验证效果
33+
- 构建
34+
- 部署
35+
- 用户反馈
36+
```
37+
38+
---
39+
40+
## 详细步骤
41+
42+
### Step 1: 抓取网站
43+
44+
**工具：** `web_fetch` + `exec(curl)`
45+
46+
**获取内容：**
47+
```bash
48+
# 获取 HTML
49+
curl -s https://target-site.com > site.html
50+
51+
# 获取 CSS（内联 + 外链）
52+
# 解析 <style> 和 <link rel="stylesheet">
53+
```
54+
55+
**关键信息：**
56+
- `<head>` 中的字体引入
57+
- `<style>` 中的 CSS 规则
58+
- 行内样式 `style="..."`
59+
60+
---
61+
62+
### Step 2: 分析设计元素
63+
64+
#### 2.1 字体
65+
66+
**查找：**
67+
```css
68+
font-family: "Inter", -apple-system, ...
69+
font-size: 16px;
70+
font-weight: 400;
71+
line-height: 1.5;
72+
letter-spacing: -0.01em;
73+
```
74+
75+
**提取：**
76+
- 主字体名称
77+
- 字号范围（最小/最大）
78+
- 字重使用（400/500/600/700）
79+
- 行高规律
80+
- 字距规律
81+
82+
#### 2.2 色彩
83+
84+
**查找：**
85+
```css
86+
/* CSS 变量 */
87+
--color-primary: #6750A4;
88+
--color-bg: #141218;
89+
90+
/* 直接使用 */
91+
color: #E6E1E5;
92+
background: #211F26;
93+
```
94+
95+
**提取：**
96+
- 主色（Primary）
97+
- 背景色（Surface）
98+
- 文字色（On-Surface）
99+
- 边框色（Outline）
100+
- 语义色（Success/Error/Warning）
101+
102+
#### 2.3 间距
103+
104+
**查找：**
105+
```css
106+
padding: 24px;
107+
margin: 16px;
108+
gap: 8px;
109+
```
110+
111+
**提取规律：**
112+
- 基准单位（4px? 8px?）
113+
- 常用值（8/12/16/24/32/48）
114+
- 响应式规律
115+
116+
#### 2.4 圆角
117+
118+
**查找：**
119+
```css
120+
border-radius: 8px;
121+
border-radius: 50%;
122+
```
123+
124+
**提取：**
125+
- 按钮：8px?
126+
- 卡片：12px?
127+
- 大容器：16px?
128+
- 圆形：50%
129+
130+
#### 2.5 阴影
131+
132+
**查找：**
133+
```css
134+
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
135+
```
136+
137+
**提取：**
138+
- 卡片阴影
139+
- 按钮阴影
140+
- 悬浮阴影
141+
- 发光效果
142+
143+
#### 2.6 布局
144+
145+
**查找：**
146+
```css
147+
/* Grid */
148+
grid-template-columns: repeat(3, 1fr);
149+
gap: 24px;
150+
151+
/* Flex */
152+
display: flex;
153+
justify-content: space-between;
154+
```
155+
156+
**提取：**
157+
- 网格列数
158+
- 断点规则
159+
- 对齐方式
160+
161+
#### 2.7 动效
162+
163+
**查找：**
164+
```css
165+
transition: all 0.2s ease;
166+
animation: fadeIn 0.3s;
167+
```
168+
169+
**提取：**
170+
- 时长（100ms/200ms/300ms）
171+
- 缓动函数（ease/linear/cubic-bezier）
172+
- 触发条件（hover/active/load）
173+
174+
---
175+
176+
### Step 3: 生成设计 Token
177+
178+
#### 3.1 Tailwind 配置
179+
180+
```javascript
181+
// tailwind.config.ts
182+
const config = {
183+
theme: {
184+
extend: {
185+
colors: {
186+
// 从对标网站提取的色彩
187+
primary: { DEFAULT: '#6750A4', ... },
188+
surface: { DEFAULT: '#141218', ... },
189+
// ...
190+
},
191+
fontFamily: {
192+
sans: ['Inter', 'Noto Sans SC', ...],
193+
},
194+
spacing: {
195+
// 从对标网站提取的间距
196+
},
197+
borderRadius: {
198+
// 从对标网站提取的圆角
199+
},
200+
boxShadow: {
201+
// 从对标网站提取的阴影
202+
},
203+
},
204+
},
205+
}
206+
```
207+
208+
#### 3.2 CSS 变量
209+
210+
```css
211+
:root {
212+
--font-sans: "Inter", sans-serif;
213+
--color-primary: #6750A4;
214+
--spacing-base: 8px;
215+
--radius-card: 12px;
216+
}
217+
```
218+
219+
---
220+
221+
### Step 4: 应用到产品
222+
223+
#### 4.1 更新配置
224+
225+
1. `tailwind.config.ts` → 设计 token
226+
2. `globals.css` → 基础样式
227+
3. `layout.tsx` → 字体引入
228+
229+
#### 4.2 更新组件
230+
231+
1. 统一使用新的 token
232+
2. 删除硬编码的值
233+
3. 确保一致性
234+
235+
---
236+
237+
### Step 5: 验证效果
238+
239+
1. `npm run build` → 确保构建成功
240+
2. 本地预览 → 检查视觉效果
241+
3. 部署上线 → 用户反馈
242+
243+
---
244+
245+
## 自动化程度
246+
247+
| 步骤 | 自动化 | 需要人工 |
248+
|------|--------|---------|
249+
| 抓取网站 | ✅ 自动 | - |
250+
| 分析设计 | ⚠️ 半自动 | AI 提取，人工确认 |
251+
| 生成 token | ✅ 自动 | - |
252+
| 应用配置 | ✅ 自动 | - |
253+
| 更新组件 | ⚠️ 半自动 | AI 修改，人工检查 |
254+
| 验证效果 | ❌ 手动 | 必须用户反馈 |
255+
256+
---
257+
258+
## 对标网站示例分析
259+
260+
### 示例：Linear.app
261+
262+
**字体：**
263+
- 英文：Inter
264+
- 字号：13-48px
265+
- 行高：1.5
266+
267+
**色彩：**
268+
- 主色：#5E6AD2（紫色）
269+
- 背景：#0A0A0A（深黑）
270+
- 文字：#E5E5E5（浅灰）
271+
272+
**间距：**
273+
- 基准：8px
274+
- 常用：8/16/24/32/48/64
275+
276+
**圆角：**
277+
- 按钮：6px
278+
- 卡片：8px
279+
- 大容器：12px
280+
281+
**阴影：**
282+
- 卡片：0 2px 8px rgba(0,0,0,0.1)
283+
- 悬浮：0 8px 24px rgba(0,0,0,0.2)
284+
285+
**动效：**
286+
- 时长：150-300ms
287+
- 缓动：cubic-bezier(0.4, 0, 0.2, 1)
288+
289+
---
290+
291+
## 使用方法
292+
293+
### 1. 作为 AI Agent 流程
294+
295+
```
296+
用户：学习 https://linear.com，应用到 CEO of One
297+
298+
AI 执行：
299+
1. web_fetch https://linear.com
300+
2. 分析设计元素（字体/色彩/间距...）
301+
3. 生成 tailwind.config.ts
302+
4. 更新 globals.css
303+
5. 修改组件样式
304+
6. npm run build 验证
305+
7. git commit & push
306+
8. 等待用户反馈
307+
```
308+
309+
### 2. 作为可复用 Skill
310+
311+
```bash
312+
# 未来可以做成 OpenClaw skill
313+
/openclaw skill install website-style-clone
314+
315+
# 使用
316+
/style-clone --url https://linear.com --project ceo-of-one
317+
```
318+
319+
---
320+
321+
## 注意事项
322+
323+
### 1. 不要照抄
324+
325+
- 提取**规律**，不是复制代码
326+
- 理解**为什么**这样设计
327+
- 适应自己的产品场景
328+
329+
### 2. 版权问题
330+
331+
- 设计系统（配色/间距/字体）不可版权
332+
- 具体文案/图片/代码受版权保护
333+
- **只学风格，不抄内容**
334+
335+
### 3. 适配调整
336+
337+
- 对标网站可能不适合你的场景
338+
- 需要根据产品特性调整
339+
- **快上快验，持续迭代**
340+
341+
---
342+
343+
## 待优化
344+
345+
- [ ] 自动抓取 CSS 外链文件
346+
- [ ] 自动识别响应式断点
347+
- [ ] 生成对比报告（对标网站 vs 当前网站）
348+
- [ ] 批量应用样式到多个组件
349+
350+
---
351+
352+
*创建时间：2026-03-23*

0 commit comments

Comments
 (0)