npx skills add https://github.com/agenticsorg/hackathon-tv5 --skill 'UX Designer'专家级 UI/UX 设计技能,帮助创建独特、可访问且经过深思熟虑的界面。此技能强调设计决策协作,摆脱通用模式,构建既突出又保持功能性和可访问性的界面。
关键:设计决策协议
避免通用训练数据集模式:
灵感来源:
视觉趣味策略:
* 识别核心目的并消除干扰
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
* 从复杂性开始,然后有意识地删减,直到达到最简单有效的解决方案
* 每个元素都必须证明其存在的合理性
2. 材质真实性
* 数字材料具有独特属性——拥抱它们
* 按钮应感觉可按下,卡片应感觉有分量
* 动画应反映真实世界的物理特性,同时拥抱数字可能性
* **优先选择无深度的扁平极简设计(无阴影、渐变、玻璃效果)**
3. 执着于细节
* 考虑每个像素、每次交互、每次过渡
* 卓越源于数百个深思熟虑的决策
* 共同营造出一种品质感
4. 连贯的设计语言
* 每个元素都应在视觉上传达其功能
* 元素应感觉是一个统一系统的一部分
* 不应有任何随意感
5. 技术的隐形性
* 最好的技术会消失
* 用户应专注于内容和目标,而非理解界面
有意识的颜色使用:
精致的调色板:
可访问性:
当前风格偏好:
字体选择理念:
字体版本使用:
推荐字体:
排版层次结构:
间距与字距调整:
排版对比:
构图平衡:
网格规范:
gap 的 grid/flex 包装器进行间距控制空间关系:
注意力引导:
有目的的动画: 每个动画都必须服务于功能性目的:
自然物理特性:
微妙克制:
时序指南:
实现:
framer-motion核心 UX 原则:
现代 UX 模式:
导航:
组件库:
@/components/ui 中)import { Button } from "@/components/ui/button";<Button> 优于 <button>)样式引擎:
index.css 中的主题变量@theme 中映射变量(参见 tailwind.config.js)图标:
@phosphor-icons/react 处理按钮和输入框import { Plus } from "@phosphor-icons/react"; <Plus />size 或 weight通知:
sonner 处理 toast 通知import { toast } from 'sonner'加载状态:
间距策略:
gap 的 grid/flex 包装器进行间距控制条件样式:
className={clsx('base-class', { 'active-class': isActive })}流式布局:
媒体查询:
触摸目标:
性能:
核心要求:
实现细节:
tabindex="0"aria-labelrole 属性 * 我们要解决什么问题?
* 用户是谁?他们何时会使用?
* 成功标准是什么?
2. 探索选项:
* 提供 2-3 种替代方案
* 解释每种方案的权衡
* 询问哪个方向更合适
3. 迭代实现:
* 从结构和层次开始
* 逐步添加视觉润色
* 在每个阶段进行测试
4. 验证:
* 使用 playwright MCP 测试视觉变化
* 在不同屏幕尺寸下检查
* 验证可访问性
视觉测试:
可访问性测试:
跨设备测试:
首先提问:
Before I implement this button, I have a few design questions:
1. What's the primary action you want to emphasize?
2. Do you have brand colors in mind, or should I suggest options?
3. What emotion should this button convey? (urgent, calm, playful, professional)
获得批准后,实现:
import { Button } from '@/components/ui/button';
import { ArrowRight } from '@phosphor-icons/react';
<Button className="bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-lg transition-colors duration-200">
Get Started
<ArrowRight className="ml-2" />
</Button>;
首先提问:
For this content hierarchy, I'm thinking:
- Headline: Large, bold, attention-grabbing
- Subheading: Medium, regular weight
- Body: Smaller, optimized for reading
Should we go bold and contemporary, or subtle and refined?
获得批准后,实现:
<div className="space-y-4">
<h1 className="text-5xl font-bold tracking-tight text-slate-900">Headline Here</h1>
<h2 className="text-2xl text-slate-600">Supporting subheading</h2>
<p className="text-base leading-relaxed text-slate-700">
Body text optimized for readability with proper line height.
</p>
</div>
呈现选项:
I'd like to suggest three color directions that break from typical SaaS patterns:
1. **Warm Earth Tones**
- Base: Warm grey (#E8E2DC)
- Accent: Terracotta (#C86E4B)
- For: Organic, trustworthy feel
2. **Cool Midnight**
- Base: Deep navy (#1A2332)
- Accent: Cyan (#4ECDC4)
- For: Modern, tech-forward feel
3. **Soft Pastels**
- Base: Soft pink (#FFE5E5)
- Accent: Sage green (#9DB5A4)
- For: Calm, approachable feel
Which direction feels right for your brand?
❌ 不要:
✅ 要:
更多上下文,请参见:
每周安装次数
0
仓库
GitHub 星标数
22
首次出现
1970年1月1日
安全审计
Expert UI/UX design skill that helps create unique, accessible, and thoughtfully designed interfaces. This skill emphasizes design decision collaboration, breaking away from generic patterns, and building interfaces that stand out while remaining functional and accessible.
CRITICAL: Design Decision Protocol
Avoid Generic Training Dataset Patterns:
Draw Inspiration From:
Visual Interest Strategies:
Simplicity Through Reduction
Material Honesty
Obsessive Detail
Coherent Design Language
Invisibility of Technology
Intentional Color Usage:
Sophisticated Palettes:
Accessibility:
Current Style Preferences:
Font Selection Philosophy:
Font Version Usage:
Recommended Fonts:
Typographic Hierarchy:
Spacing & Kerning:
Typography Contrast:
Compositional Balance:
Grid Discipline:
gap for spacingSpatial Relationships:
Attention Guidance:
Purposeful Animation: Every animation must serve a functional purpose:
Natural Physics:
Subtle Restraint:
Timing Guidelines:
Implementation:
framer-motion sparingly and purposefullyCore UX Principles:
Modern UX Patterns:
Navigation:
Component Library:
@/components/ui)import { Button } from "@/components/ui/button";<Button> over <button>)Styling Engine:
index.css via CSS custom properties@theme (see tailwind.config.js)Icons:
@phosphor-icons/react for buttons and inputsimport { Plus } from "@phosphor-icons/react"; <Plus />size or weight unless requestedNotifications:
sonner for toastsimport { toast } from 'sonner'Loading States:
Spacing Strategy:
gap for spacingConditional Styling:
className={clsx('base-class', { 'active-class': isActive })}Fluid Layouts:
Media Queries:
Touch Targets:
Performance:
Core Requirements:
Implementation Details:
tabindex="0" for custom interactive elementsaria-label for buttons without textrole attributes when semantic HTML isn't sufficientUnderstand Context:
Explore Options:
Implement Iteratively:
Validate:
Visual Testing:
Accessibility Testing:
Cross-Device Testing:
Initial Question to Ask:
Before I implement this button, I have a few design questions:
1. What's the primary action you want to emphasize?
2. Do you have brand colors in mind, or should I suggest options?
3. What emotion should this button convey? (urgent, calm, playful, professional)
After Getting Approval, Implementation:
import { Button } from '@/components/ui/button';
import { ArrowRight } from '@phosphor-icons/react';
<Button className="bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-lg transition-colors duration-200">
Get Started
<ArrowRight className="ml-2" />
</Button>;
Question First:
For this content hierarchy, I'm thinking:
- Headline: Large, bold, attention-grabbing
- Subheading: Medium, regular weight
- Body: Smaller, optimized for reading
Should we go bold and contemporary, or subtle and refined?
Implementation After Approval:
<div className="space-y-4">
<h1 className="text-5xl font-bold tracking-tight text-slate-900">Headline Here</h1>
<h2 className="text-2xl text-slate-600">Supporting subheading</h2>
<p className="text-base leading-relaxed text-slate-700">
Body text optimized for readability with proper line height.
</p>
</div>
Presenting Options:
I'd like to suggest three color directions that break from typical SaaS patterns:
1. **Warm Earth Tones**
- Base: Warm grey (#E8E2DC)
- Accent: Terracotta (#C86E4B)
- For: Organic, trustworthy feel
2. **Cool Midnight**
- Base: Deep navy (#1A2332)
- Accent: Cyan (#4ECDC4)
- For: Modern, tech-forward feel
3. **Soft Pastels**
- Base: Soft pink (#FFE5E5)
- Accent: Sage green (#9DB5A4)
- For: Calm, approachable feel
Which direction feels right for your brand?
❌ Don't:
✅ Do:
For additional context, see:
Weekly Installs
0
Repository
GitHub Stars
22
First Seen
Jan 1, 1970
Security Audits
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
38,200 周安装