mcpField
G
generic-fullstack-ux-designer

generic-fullstack-ux-designer

github.com/travisjneuman设计与 UI106149 次安装1 天前更新
代码仓库

关于 generic-fullstack-ux-designer

面向使用 Next.js 和 NestJS 构建的全栈应用的 UX 技能，关注渲染、API、身份验证和实时行为如何影响界面状态与用户流程。

主要功能

  1. 01处理服务端渲染与水合状态
  2. 02设计 API 加载和错误恢复
  3. 03适时采用乐观 UI
  4. 04规划表单与身份验证流程
  5. 05选择实时更新模式

适用场景

  1. 01设计 API 调用的加载与错误反馈
  2. 02改进多步骤表单交互
  3. 03规划受保护路由的登录体验
  4. 04为聊天或通知选择更新方式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/travisjneuman/.claude --skill generic-fullstack-ux-designer

安装后在 Claude Code 中输入/generic-fullstack-ux-designer确认已加载。

详细介绍

全栈 UX 设计师

为 Next.js/NestJS 全栈应用提供专业 UX 知识。

扩展自： 通用 UX 设计师 - 阅读基础技能，了解设计思维流程、研究方法、交互模式和评审框架。

全栈 UX 考量

服务端渲染 UX
场景UX 模式
初始页面加载可安全水合的骨架屏
数据获取静态内容使用服务端组件，动态内容使用客户端组件
身份验证受保护路由并提供重定向体验
表单提交渐进增强
安全水合模式
// ✓ Avoid hydration mismatch
function Timestamp({ date }: { date: Date }) {
  const [formatted, setFormatted] = useState("");

  useEffect(() => {
    setFormatted(date.toLocaleString()); // Client-side only
  }, [date]);

  return <span>{formatted || "Loading..."}</span>;
}

API 加载与错误状态

加载状态层级
持续时间模式示例
< 100ms不显示指示器点击按钮
100ms - 1s轻量微调器提交表单
1s - 5s骨架屏获取页面
> 5s进度条上传文件
错误状态设计
API Error → Parse Error → User-Friendly Message → Recovery Action
错误类型用户提示恢复方式
400 验证错误显示字段错误修正后重试
401 未授权“请登录”重定向到登录页
404 未找到“找不到此项目”返回上一页
500 服务端错误“发生错误”重试按钮

乐观 UI 模式

// Show immediate feedback, rollback on error
async function toggleLike(postId: string) {
  // 1. Update UI immediately
  setLiked(true);
  setLikeCount((c) => c + 1);

  try {
    // 2. Call API
    await api.like(postId);
  } catch {
    // 3. Rollback on failure
    setLiked(false);
    setLikeCount((c) => c - 1);
    showToast("Failed to like");
  }
}
何时使用乐观 UI
操作使用乐观 UI？原因
点赞/收藏是风险低、操作常见
添加评论是可以显示待处理状态
删除项目否操作具有破坏性，需要确认
付款否至关重要，必须验证
提交表单视情况而定取决于复杂程度

表单提交 UX

客户端 → 服务端流程
User Input → Client Validation → Submit → Server Validation → Response
     ↓              ↓              ↓              ↓              ↓
  Feedback    Inline errors   Loading...   Field errors    Success/Error
多步骤表单
// Show progress and allow back navigation
<FormStepper
  steps={["Details", "Payment", "Confirm"]}
  currentStep={step}
  onBack={() => setStep((s) => s - 1)}
/>

身份验证 UX

登录流程模式
状态UX
正在加载身份验证全页骨架屏
未登录显示登录表单
正在登录禁用表单并显示微调器
成功重定向并显示提示
出错显示行内错误并保留表单数据
受保护路由模式
// Redirect unauthenticated users
if (!user && !loading) {
  return <Navigate to="/login" state={{ from: location }} />;
}

实时更新

模式使用场景
轮询低频更新（通知）
WebSocket聊天、实时协作
SSE单向服务端更新
在线状态指示器
  • 在线状态圆点
  • “用户正在输入……”提示
  • 协作光标

全栈设计评审

方面问题
加载状态API 调用期间会显示什么？
错误恢复用户能否从错误中恢复？
离线行为没有网络时会发生什么？
身份验证转换登录/登出体验是否顺畅？
数据新鲜度是否清楚标示了过时数据？

另请参阅

评论

支持 Markdown