ui-designer by 404kidwiz/claude-supercode-skills
npx skills add https://github.com/404kidwiz/claude-supercode-skills --skill ui-designer提供全面的 UI 设计专业知识,专注于创建直观、美观且易于访问的用户界面。利用设计系统、交互模式和视觉层次结构,创建精致、实用的界面,平衡美学与功能。
在以下情况调用此技能:
在以下情况请勿调用:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
设计系统范围
├─ 新产品(绿地项目)
│ ├─ 小型初创/MVP(<10 个组件)
│ │ └─ 轻量级组件库
│ │ • 使用现有框架(Radix UI, Headless UI)
│ │ • 使用 Tailwind CSS 设计令牌进行定制
│ │ • 10-15 个核心组件
│ │ • 工作量:1-2 周
│ │
│ ├─ 中型产品(10-30 个组件)
│ │ └─ 自定义设计系统
│ │ • 设计令牌(颜色、字体、间距)
│ │ • 20-30 个带变体的组件
│ │ • 使用 Storybook 进行文档记录
│ │ • 工作量:4-6 周
│ │
│ └─ 企业级/复杂项目(30+ 个组件)
│ └─ 全面设计系统
│ • 完整的设计令牌架构
│ • 50+ 个包含所有状态的组件
│ • 自动化测试(视觉回归)
│ • 治理和贡献模型
│ • 工作量:3-6 个月
│
└─ 多平台(Web + 移动端)
└─ 跨平台设计系统
• 共享设计令牌(JSON)
• 平台特定组件(根据需要)
• 使用设计令牌社区组规范
| 组件 | 所需状态 | 无障碍需求 | 复杂度 |
|---|---|---|---|
| 按钮 | 默认、悬停、激活、聚焦、禁用、加载 | 焦点指示器、aria-label | 低 |
| 输入框 | 默认、聚焦、错误、禁用、已填充 | 标签关联、错误信息 | 中 |
| 下拉菜单 | 关闭、打开、悬停、聚焦、禁用、加载 | 键盘导航(↑↓)、aria-expanded | 高 |
| 模态框 | 关闭、打开中、打开、关闭中、最小化 | 焦点陷阱、Esc 关闭、aria-modal | 高 |
| 提示/警告 | 信息、成功、警告、错误、消失中 | role="alert"、自动播报 | 中 |
| 使用场景 | 对比度比率 | WCAG 等级 |
|---|---|---|
| 正文文本(16px+) | 4.5:1 | AA |
| 大文本(24px+,18px+ 粗体) | 3:1 | AA |
| UI 组件(按钮、输入框) | 3:1 | AA |
| 图形对象(图标、图表) | 3:1 | AA |
| 增强文本对比度 | 7:1 | AAA |
主要工具:
无法直接:
每周安装次数
71
代码仓库
GitHub 星标数
42
首次出现
2026年1月24日
安全审计
安装于
opencode57
codex53
claude-code53
gemini-cli52
cursor49
github-copilot46
Provides comprehensive UI design expertise specializing in creating intuitive, beautiful, and accessible user interfaces. Creates polished, functional interfaces that balance aesthetics with functionality using design systems, interaction patterns, and visual hierarchy.
Invoke this skill when:
Do NOT invoke when:
Design System Scope
├─ New Product (greenfield)
│ ├─ Small startup/MVP (<10 components)
│ │ └─ Lightweight component library
│ │ • Use existing framework (Radix UI, Headless UI)
│ │ • Customize with Tailwind CSS design tokens
│ │ • 10-15 core components
│ │ • Effort: 1-2 weeks
│ │
│ ├─ Medium product (10-30 components)
│ │ └─ Custom design system
│ │ • Design tokens (colors, typography, spacing)
│ │ • 20-30 components with variants
│ │ • Documentation with Storybook
│ │ • Effort: 4-6 weeks
│ │
│ └─ Enterprise/Complex (30+ components)
│ └─ Comprehensive design system
│ • Full design token architecture
│ • 50+ components with all states
│ • Automated testing (visual regression)
│ • Governance and contribution model
│ • Effort: 3-6 months
│
└─ Multi-Platform (web + mobile)
└─ Cross-platform design system
• Shared design tokens (JSON)
• Platform-specific components (where needed)
• Use Design Tokens Community Group spec
| Component | States Required | Accessibility Needs | Complexity |
|---|---|---|---|
| Button | default, hover, active, focus, disabled, loading | Focus indicator, aria-label | Low |
| Input | default, focus, error, disabled, filled | Label association, error message | Medium |
| Dropdown | closed, open, hover, focus, disabled, loading | Keyboard nav (↑↓), aria-expanded | High |
| Modal | closed, opening, open, closing, minimized | Focus trap, Esc to close, aria-modal | High |
| Toast/Alert | info, success, warning, error, dismissing | role="alert", auto-announce | Medium |
| Use Case | Contrast Ratio | WCAG Level |
|---|---|---|
| Body text (16px+) | 4.5:1 | AA |
| Large text (24px+, 18px+ bold) | 3:1 | AA |
| UI components (buttons, inputs) | 3:1 | AA |
| Graphical objects (icons, charts) | 3:1 | AA |
| Enhanced text contrast | 7:1 | AAA |
Primary Tools:
Cannot directly:
Weekly Installs
71
Repository
GitHub Stars
42
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode57
codex53
claude-code53
gemini-cli52
cursor49
github-copilot46
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
45,300 周安装
Spec设计调研技能:AI驱动需求分析,系统化提取未知项并生成研究任务
95 周安装
Playwright 高质量应用截图生成工具 - 一键创建营销级 HiDPI 截图
95 周安装
arch-tsdown-cli:TypeScript CLI项目启动模板,支持ESM、d.ts自动生成与npm可信发布
95 周安装
Confluence 专家指南:空间管理、文档架构、模板与协作知识库搭建
96 周安装
构建完整AI聊天应用指南:Next.js + Neon + AI SDK实现持久化聊天与自动命名
96 周安装
员工手册AI助手:快速解答公司政策、福利、流程问题,提升HR效率
96 周安装