技能 ui-skills
🎨
ui-skills
安全
使用设计约束构建一致的用户界面
AI 代理在不同会话中经常产生不一致的 UI 代码。本技能提供明确的设计约束和模式，确保每次都能生成一致、可访问的界面。
支持: Claude Codex Code(CC)
1
下载技能 ZIP
2
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
3
开启并开始使用
测试它
正在使用“ui-skills”。 使用 ui-skills 模式生成一个卡片组件
预期结果:
一个可重用的 Card 组件，具有一致的内边距、边框半径、阴影令牌，支持 header、body 和 footer 插槽。包含悬停状态和可访问性属性。
正在使用“ui-skills”。 创建一个遵循 ui-skills 约束的模态对话框
预期结果:
一个 Modal 组件，具有焦点陷阱、Escape 键处理、背景点击检测，以及为屏幕阅读器提供的正确 ARIA 角色。
安全审计
安全v1 • 2/25/2026
This skill contains documentation-only content (SKILL.md) with no executable code. Static analysis flagged URLs and patterns that are false positives - the URLs are GitHub repository references in documentation, not network requests. No security risks detected.
1
已扫描文件
23
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude
质量评分
38
架构
100
可维护性
87
内容
50
社区
100
安全
91
规范符合性
你能构建什么
构建设计系统的前端开发者
使用本技能生成遵循既定设计原则和可访问性标准的一致组件模式。
创建 UI 组件的 AI 代理
使 AI 编程助手能够生成符合团队设计约束和模式的 UI 代码。
标准化 UI 开发的初创团队
为没有专职设计资源的小型团队建立共享的 UI 模式词汇。
试试这些提示
生成基础按钮组件
使用 ui-skills 模式，生成一个包含主要、次要和禁用状态的按钮组件。包括可访问性属性和焦点状态。
创建带验证的表单输入
应用 ui-skills 约束创建一个文本输入组件，包含标签、占位符、错误状态和验证消息。遵循 WCAG 指南。
构建响应式导航组件
使用 ui-skills 模式，创建一个适用于桌面端和移动端的导航组件。包括键盘导航和屏幕阅读器支持。
设计带排序的数据表格
应用 ui-skills 约束生成一个带可排序列、行选择和分页的数据表格组件。确保可访问性合规。
最佳实践
- 在生成组件之前始终定义设计令牌（间距、颜色、排版）
- 在开发过程中使用键盘导航和屏幕阅读器测试组件
- 记录组件 props、状态和使用示例以确保团队一致性
避免
- 硬编码颜色值而不是使用设计系统令牌
- 忽略交互元素的焦点状态和键盘导航
- 创建应该拆分为更小单元的过于复杂的组件
常见问题
这个技能支持哪些框架？
本技能专注于基于 React 的组件模式，但设计原则适用于任何前端框架。
这个技能会生成实际的 CSS 代码吗？
不，它提供组件结构和模式。样式应使用您现有的设计系统或 CSS 框架来应用。
如何将这个技能与我现有的设计系统集成？
在生成组件之前，将您的设计令牌（间距、颜色、排版）映射到这个技能的模式中。
我可以自定义可访问性要求吗？
是的，本技能使用 WCAG 作为基准，但您可以在提示中指定额外的要求。
这个技能适合移动优先开发吗？
是的，这些模式支持响应式设计和移动优先方法，并带有适当的约束。
设计模式的更新频率是多少？
这些模式根据社区反馈和 UI 开发中新兴的最佳实践进行演进。