diff --git a/tests/steps/xdesign.spec.ts b/tests/steps/xdesign.spec.ts
new file mode 100644
index 0000000..71b5da4
--- /dev/null
+++ b/tests/steps/xdesign.spec.ts
@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('steps 组件xdesign规范', () => {
+  test('横向单链型--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('steps#line-horizontal')
+    const demo = page.locator('#line-horizontal .pc-demo')
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('line-horizontal.png')
+  })
+
+  test('垂直点状型--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('steps#line-dot')
+    const demo = page.locator('#line-dot .pc-demo')
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('line-dot.png')
+  })
+
+  test('尺寸--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('steps#size')
+    const demo = page.locator('#size .pc-demo')
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('size.png')
+  })
+
+  test('特殊样式--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('steps#slot-item-footer')
+    const demo = page.locator('#slot-item-footer .pc-demo')
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('slot-item-footer.png')
+
+    // hover
+    await page
+      .getByText('创建桶（超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题）')
+      .first()
+      .hover()
+    await expect(demo).toHaveScreenshot('slot-item-footer-hover.png')
+  })
+})
diff --git a/tests/steps/xdesign.spec.ts-snapshots/line-dot-chromium-win32.png b/tests/steps/xdesign.spec.ts-snapshots/line-dot-chromium-win32.png
new file mode 100644
index 0000000..9a947a7
Binary files /dev/null and b/tests/steps/xdesign.spec.ts-snapshots/line-dot-chromium-win32.png differ
diff --git a/tests/steps/xdesign.spec.ts-snapshots/line-horizontal-chromium-win32.png b/tests/steps/xdesign.spec.ts-snapshots/line-horizontal-chromium-win32.png
new file mode 100644
index 0000000..37d5580
Binary files /dev/null and b/tests/steps/xdesign.spec.ts-snapshots/line-horizontal-chromium-win32.png differ
diff --git a/tests/steps/xdesign.spec.ts-snapshots/size-chromium-win32.png b/tests/steps/xdesign.spec.ts-snapshots/size-chromium-win32.png
new file mode 100644
index 0000000..3f9f52f
Binary files /dev/null and b/tests/steps/xdesign.spec.ts-snapshots/size-chromium-win32.png differ
diff --git a/tests/steps/xdesign.spec.ts-snapshots/slot-item-footer-chromium-win32.png b/tests/steps/xdesign.spec.ts-snapshots/slot-item-footer-chromium-win32.png
new file mode 100644
index 0000000..dcf8888
Binary files /dev/null and b/tests/steps/xdesign.spec.ts-snapshots/slot-item-footer-chromium-win32.png differ
diff --git a/tests/steps/xdesign.spec.ts-snapshots/slot-item-footer-hover-chromium-win32.png b/tests/steps/xdesign.spec.ts-snapshots/slot-item-footer-hover-chromium-win32.png
new file mode 100644
index 0000000..d40377d
Binary files /dev/null and b/tests/steps/xdesign.spec.ts-snapshots/slot-item-footer-hover-chromium-win32.png differ