前端设计工作流指南

前端设计中的常见挑战

在开发现代 Web 界面时，团队经常面临布局混乱、主题样式维护困难、交互效果生硬等问题。传统前端设计缺乏结构化指导，容易导致组件风格不统一、代码冗余，以及响应式和可访问性支持不足。例如，随意使用通用蓝色（如 #007bff）会让界面显得过时，而动画时长随意设定则影响用户体验流畅性。

技能的核心工作流程

该技能提供了一套从规划到实现的完整前端设计方法，重点覆盖四个关键步骤：

1. 布局设计：在编码前，使用 ASCII 线框图草绘组件结构，确保逻辑清晰。
2. 主题设计：定义颜色、字体、间距和阴影。推荐使用 oklch() 进行现代色彩定义，并设置语义化变量（如 --primary）。字体从 Google Fonts 中选择（如 Inter、JetBrains Mono），间距基于 0.25rem 基础单位，阴影保持细微。
3. 动画设计：规划微交互和过渡效果，例如入口动画（300-500ms，ease-out）、悬停状态（150-200ms）。
4. 实现：生成实际代码，集成 Tailwind CSS 进行样式管理，使用 Flowbite 组件库，Lucide 图标，以及 Unsplash 等真实占位图服务。

此外，技能强调响应式设计（移动优先）和可访问性（语义 HTML、ARIA 标签、键盘导航）。主题模式如现代暗色模式、Neo-Brutalism 和 Glassmorphism 提供了设计参考，组件设计提示（如卡片、按钮、表格）确保界面细节到位。

适用边界与注意事项

该技能主要适用于创建 UI 组件、落地页、仪表板等前端设计工作。它依赖 Tailwind CSS 和 Flowbite 等工具链，开发者需具备相关技术基础。对于复杂动画或后端集成，可能需要额外定制。技能不涉及安装命令或商业推广，纯粹聚焦设计流程和实现规范。