Claude Code 写界面总”感觉不对”？这个 UX 审计 Skill 帮你找出 Nielsen 10条问题

Claude Code 写前端越来越快，但有个坑你肯定踩过——AI 生成的界面视觉上挺好看，用起来却”总觉得哪里不对”，说不出个所以然。

比如：表单填到一半不知道点了啥、按钮按了没反馈、返回键找不到、一步步操作完才发现某一步其实是错的……这些不是视觉问题，是交互体验的可用性灾难。

design-ux：把你的界面交给 Nielsen 的镜子照一照

这个 Skill 用的是 Nielsen Norman 提出的”10 条可用性启发式评估法”——业界用了 30 年的经典框架，给每个界面打 A+ 到 F 的综合评分。

它审计的是渲染后的真实界面，不是代码审查，也不是视觉美感打分。关注的是：用户能不能顺利完成目标操作？

10 条核心检查项（每条都要过）

• 系统状态可见性：每个操作有没有反馈？加载有没有骨架屏？进度有没有提示？
• 真实世界匹配：图标、文字用不用用户的语言？有没有奇怪的术语？
• 用户掌控自由：一键返回/撤销？危险操作有没有二次确认？
• 一致性与标准：相同操作是否外观一致？平台规范有没有遵循？
• 错误预防：无效状态有没有从源头拦截？破坏性按钮是否醒目？
• 记忆 vs 识别：选项是否可见而不是靠记忆？有没有instruction wall？
• 灵活性和效率：新手有默认引导？高手有快捷键？
• 美学与简洁：信息层次是否清晰？有没有多余元素干扰？
• 帮助用户从错误中恢复：错误提示有没有说清楚”哪里错了+怎么改”？
• 帮助和文档：空状态有没有引导？新功能有没有 onboarding？

输出格式：分级报告，直接可操作

审计完会给你一份结构化报告：

• 综合评分：A+ 到 F，一目了然
• 关键阻塞问题（Blocker）：必须修，不修用户会迷路或出错）
• 重要问题（Major）：影响体验，建议修）
• 轻微问题（Minor）：锦上添花）
• 具体修复建议：每条问题都给出明确改法，对应到具体 UI 元素

谁该用？

• 用 Claude Code 写前端的开发者，发版前过一遍
• 产品经理/UX 设计师，快速做可用性初筛
• AI 代码工具用户，弥补”生成界面好看但不实用”的短板

怎么装

一行命令搞定：

npx skills add sickn33/agentic-awesome-skills --skill "design-ux" -g -a claude-code -y

或者手动把 SKILL.md 拖到项目 .claude/skills/design-ux/ 目录下，重启 Claude Code 即可。

一句话定位

design-ux = Nielsen 10条启发式 × AI 界面审计，专注”能不能用”，不 care “好不好看”。

跟 design-system（管视觉一致性）和 design-spatial（管空间布局）是同门三兄弟，各管一摊。这个专门治”看起来没问题，用起来哪哪都不对”的界面病。

GitHub：https://github.com/connerkward/ckw-design-skill
MIT 协议 · Conner K Ward

GitHub: https://github.com/connerkward/ckw-design-skill