产品设计与原型制作

帮我调整登录页面的视觉样式:

文件: src/pages/Login.tsx

变更要求:
- 将主色从蓝色 (#3B82F6) 改为紫色 (#8B5CF6)
- 将标题字体从 'Inter' 改为 'Poppins',粗细 600
- 将输入框高度从 40px 改为 48px
- 将按钮圆角从 4px 改为 8px
- 整体间距增加 20%,让布局更透气

保持现有功能不变;仅样式更新。

记住这一点: 我是设计师,编程经验有限,
需要详细解释和较小的增量变更。

我需要创建这个卡片组件的 3 个变体:

[粘贴基础卡片截图]

变体:
1. 默认状态 - 细微阴影,无边框
2. 悬停状态 - 提升阴影,缩放 1.02
3. 激活/选中状态 - 蓝色边框,蓝色强调

生成包含所有三个状态的 React 组件。

这是我的桌面版主区域设计稿:

[粘贴桌面设计稿]

请实现响应式行为:
- 桌面 (1440px+): 2 列布局,图片在右侧
- 平板 (768px-1439px): 2 列布局,较小图片
- 移动端 (< 768px): 单列,图片在文本上方

使用 Tailwind CSS 响应式工具。

为这个按钮组件添加微交互:

[粘贴按钮设计稿]

需要的动画:
- 悬停: 轻微放大 (1.05) 200ms 缓动
- 点击: 快速缩小 (0.95) 然后恢复
- 加载状态: 按钮上的脉冲动画
- 成功: 绿色对勾淡入动画

保持细微和专业。

基于这个设计创建一个可重用的 Alert 组件:

[粘贴 alert 设计稿]

要求:
- 支持 4 种类型: info、success、warning、error
- 每种类型都有适当的图标和配色方案
- 可用 X 按钮关闭
- 可选标题和描述
- 关闭时的平滑淡出动画

生成为带有 props 接口的 TypeScript React 组件。

基于设计评审反馈:

1. 将卡片阴影改得更细微(不透明度降低 50%)
2. 将正文文本字号从 14px 增加到 16px
3. 增加各部分之间的留白(将间距从 16px 增加到 24px)
4. 将 CTA 按钮从绿色改为品牌紫色
5. 使标题在滚动时固定

文件: src/components/ProductCard.tsx

将这个实时页面与我的设计稿对比:

[粘贴设计稿]
[粘贴实现页面截图]

请识别:
1. 颜色差异
2. 间距/内边距不一致
3. 排版不匹配
4. 缺失的设计细节
5. 为任何差异建议修复

我有一个设计令牌文件 (design-tokens.json)。

请更新 src/components/ui/ 中的所有组件
使用这些令牌而不是硬编码值:

- 颜色: 使用 colors.primary、colors.secondary 的令牌
- 间距: 使用 spacing.sm、spacing.md、spacing.lg
- 排版: 使用 typography.heading、typography.body

在切换到基于令牌的样式时保持所有功能。

帮我为我们的设计系统创建组件库:

需要的组件:
- Button (primary、secondary、ghost、danger 变体)
- Input (text、email、password 带验证状态)
- Card (带 header、body、footer 部分)
- Modal (带遮罩、关闭按钮、可定制内容)
- Toast 通知 (success、error、warning、info)

使用 TypeScript 和 Tailwind CSS。每个组件
应该在自己的文件中,带有适当的 props 文档。

审查这个组件的可访问性问题:

文件: src/components/LoginForm.tsx

请检查并修复:
1. 表单输入的适当 ARIA 标签
2. 键盘导航支持
3. 焦点指示器
4. 颜色对比度 (WCAG AA 合规)
5. 屏幕阅读器兼容性

实现修复并解释做了哪些更改。

实现类似 Airbnb 房源卡片的卡片布局:
- 带圆角的图片
- 带快速操作的叠加层
- 标题、评分和价格
- 带提升效果的细微悬停效果