搭建可复用的设计系统与组件库
将 UI 组件规范化至设计系统
由 pbakaus
通过自动检测并修复与设计系统的偏差来消除设计不一致性。确保每个组件都使用正确的 tokens、模式和既定约定。
使用 Tailwind CSS 构建设计系统
由 sickn33
创建一致的设计系统既复杂又耗时。此技能提供了使用 Tailwind CSS、设计令牌和内置可访问性构建可扩展组件库的经过验证的模式。
使用设计系统智能生成专业UI/UX设计
由 ZhanlinCui
创建专业的UI/UX设计需要深入了解无障碍性、色彩理论、排版和特定技术栈的模式。本技能提供了一个可搜索的数据库,包含50多种设计风格、配色方案、字体搭配和实施指南,帮助您更快地构建精美的界面。
设计独特的生产级前端界面
由 7Spade
AI生成的前端代码通常千篇一律,缺乏创意特色。本技能指导创建独特、令人难忘的界面,包括大胆的美学选择、规范的排版、统一的色彩主题和精致的视觉细节。
构建 Tailwind 设计系统
由 wshobson
设计系统在没有清晰的令牌和模式的情况下往往会漂移。本技能提供 Tailwind 结构,以标准化代码库中的组件、主题和响应式布局。
使用 AI 指导构建专业 UI/UX 设计
由 sickn33
设计师和开发者难以在各项目中维护一致且易于访问的设计系统。本技能提供全面的设计指南、配色方案、排版建议以及 9 大技术栈的组件模式。
设计可访问的界面和可扩展的设计系统
由 sickn33
团队在产品中常常面临 UI/UX 设计不一致和可访问性合规性的挑战。此技能提供设计系统、用户研究和包容性设计实践的专业指导,帮助创建一致且可访问的界面。
使用 Radix 构建可访问的 UI
由 sickn33
使用 Radix UI 原语创建生产级可访问设计系统。本技能提供无头组件自定义、主题策略和 React 应用程序复合组件架构的模式。
使用 HIG 导航模式设计自适应 Apple 应用布局
由 sickn33
为多 Apple 平台构建应用需要理解复杂的导航模式和布局适配。本技能提供 Apple 官方人机界面指南,涵盖侧边栏、分割视图、标签栏等,确保您的应用遵循平台规范。
将 Anthropic 品牌指南应用于您的工件
由 sickn33
通过 Anthropic 的官方品牌标识,确保您的文档和演示文稿在视觉上保持一致。此技能提供精确的颜色值、排版规范和设计指导,帮助您创建专业外观的工件。
创建一致的UI设计系统
由 davila7
手动创建一致的设计系统需要大量时间,并且经常导致不一致的实现。此工具包自动生成颜色、字体和间距的设计令牌,确保所有组件的视觉和谐,并导出可供开发者使用的代码。
从截图中提取设计规范
由 Cygnusfear
手动从截图和模型中提取设计令牌既耗时又容易出错。此技能使用7步AI流程系统性地提取颜色、字体、间距、组件和无障碍详细信息,生成符合W3C DTCG标准的JSON格式,可直接用于代码生成。
使用 shadcn/ui 模式创建 UI 组件
由 CleanExpo
生成符合设计系统指南的一致、可访问的 UI 组件。确保每个组件的视觉独特性、品牌一致性和可访问性合规。
通过AI指导掌握Tailwind CSS V4
由 Calel33
Tailwind CSS V4通过Oxide引擎和CSS优先配置引入了革命性变化。此技能提供专业指导,帮助您完成迁移、优化性能并构建现代设计系统。
使用 Tailwind CSS 样式化 UI 组件
由 Awais68
构建响应式、可访问的用户界面需要深入了解实用类库和设计模式。本技能提供专业指导,帮助您使用 Tailwind CSS 规范实现移动优先布局、深色模式支持和组件样式设计。