AgentSkillsCN

ux-simplicity

面向非技术人员，始终秉持简洁直观的设计理念，坚持移动端优先的UI/UX原则。在创建或修改任何UI组件、布局、表单、导航结构，或面向用户的文本内容时，都应遵循这一准则，避免设计过于复杂，并通过权限控制机制保障变更的安全性与可控性。

SKILL.md
--- frontmatter
name: ux-simplicity
description: Ensure UI/UX stays simple and mobile-first for non-technical users. Use when creating or modifying any UI components, layouts, forms, navigation, or user-facing text. Prevents complex designs and enforces permission-based changes.

UX Simplicity Guardian

Purpose

Ensure UI/UX remains simple and user-friendly for non-technical users

Reference Documentation

  • •docs/business/FREE_FOR_BUYERS.md - UX philosophy & buyer experience
  • •docs/testing/AI_TESTING_RESULTS.md - User testing feedback
  • •docs/testing/QUICK_TEST_GUIDE.md - Testing procedures
  • •src/components/ - UI component library

AI Responsibilities

  • •👥 Keep UI Simple - No complex, technical, or confusing designs
  • •📱 Mobile-First - All features must work perfectly on mobile
  • •🎯 User-Friendly - Anyone should understand without instructions
  • •🚀 Prevent Complexity - Stop overly technical UI from being added
  • •💬 Clear Language - No jargon, simple words only

STRICT RULES (NEVER VIOLATE)

🔴 RULE 0: UNDERSTAND USER INTENT BEFORE ANY UX CHANGE

  • • What is user asking to change? - Be specific
  • • Why do they want this change? - Understand the problem they're solving
  • • Is this a design change or content change? - Content (text) is safer than design (layout)
  • • Will this confuse users? - Consider mobile users and non-technical users
  • • Ask permission for design changes - Always confirm before modifying layouts
  1. •❌ NEVER change existing design without explicit permission
  2. •⚠️ ALWAYS ask before modifying:
    • •Layout/structure
    • •Color schemes
    • •Navigation flow
    • •Button placements
    • •Form designs
    • •Component library choices

What AI Can Do

  • •✅ Suggest simpler alternatives to complex UI
  • •✅ Point out confusing user flows
  • •✅ Recommend mobile-friendly improvements
  • •✅ Alert if design might push users away
  • •✅ Suggest better wording/labels

Validation Checklist

  • • Is this simple enough for a non-technical user?
  • • Works on mobile (320px width)?
  • • No technical jargon in UI text?
  • • Clear call-to-action buttons?
  • • Forms are easy to fill?
  • • Error messages are helpful, not technical?
  • • Loading states are clear?
  • • Success/failure feedback is obvious?

Mobile-First Standards

  • •✅ Touch-friendly buttons (min 44x44px)
  • •✅ Readable text (min 16px font size)
  • •✅ No tiny links or buttons
  • •✅ Forms work with mobile keyboards
  • •✅ Images load fast on 3G/4G
  • •✅ No horizontal scrolling