登录
下载

Skill UI

浏览并发现 9688+ 精选技能
全部 编程开发 人工智能 设计创意 产品商业 数据科学 市场营销 职场通用 效率工具 硬件工程 语言学习
搜索 组件设计 ，共找到 138 条记录
默认排序 最新上传 最多下载

可重用界面组件模式生成

ui-pattern
sickn33/antigravity-awesome-skills
453
本技能旨在帮助开发者根据现有设计系统（如StyleSeed的原子组件）生成结构化、可复用的UI布局模式。适用于构建需要跨多个页面保持设计一致性和重复使用性的组件，例如卡片列表、数据表、表单区域等。它指导如何从最小的构建块开始，确保组件的动态性和可扩展性，避免重复编写页面特定的标记代码。
查看详情

UI设计系统合规性审核

ui-review
sickn33/antigravity-awesome-skills
439
本技能用于对用户界面代码进行严格的结构化审核，确保其完全符合既定的设计系统规范。它重点检查设计令牌（Design Tokens）、组件可用性、可访问性标准（如颜色对比度和焦点状态）以及移动端用户体验，从而提供带具体修复建议的审核报告。
查看详情

用户流程与导航结构设计

ux-flow
sickn33/antigravity-awesome-skills
205
本技能旨在用户界面组件实现之前，规划完整的用户体验流程（User Flow）。它应用了渐进式披露、中心辐射等主流UX模式，定义用户任务的起点、路径和退出条件。适用于复杂的引导流程、表单填写、结账或多步骤功能设计，确保用户旅程连贯且逻辑清晰。
查看详情

技术设计规范生成器

kiro-spec-design
gotalab/cc-sdd
230
本工具用于生成全面、结构化的技术设计规范。它指导用户系统地完成设计流程，涵盖上下文加载、根据功能类型执行深入发现与分析、应用设计原则进行综合，最终生成边界清晰、结构化的技术设计初稿，确保所有需求都与明确的技术组件相对应。
查看详情

React设计系统代码生成器

rayden-code
sickn33/antigravity-awesome-skills
78
本工具用于使用指定的Rayden UI组件库和Tailwind CSS，生成符合生产标准的React界面代码。它确保生成的代码严格遵守设计系统规范，涵盖了组件使用、设计令牌、属性校验和布局模式。非常适用于搭建仪表盘、登录表单、数据表格等复杂页面，保证界面美观和一致性。
查看详情

设计稿到模块化React组件

react-components
google-labs-code/stitch-skills
489
该技能旨在自动化将视觉设计稿（来自Stitch）转化为高质量、模块化的React和Vite组件。它严格遵循现代前端最佳实践，要求逻辑分离到自定义Hooks，将数据解耦到Mock Data层，并使用TypeScript保证类型安全。流程涵盖了自动化资源获取、样式映射（如Tailwind），并包含严格的验证周期，确保生成代码是可维护、可生产环境使用的。
查看详情

Figma设计到代码生成

anima-hello-world
jeremylongshore/claude-code-plugins-plus-skills
97
本技能利用Anima SDK，能够将Figma设计稿高效转换为生产级别的代码。支持React、Vue、纯HTML等多种主流框架，并集成Tailwind CSS样式。它帮助开发者将设计视觉流转为可用的代码组件，适用于前端开发和设计原型验证。
查看详情

设计到代码系统架构

anima-reference-architecture
jeremylongshore/claude-code-plugins-plus-skills
89
本文档提供了一套完整的“设计到代码”自动化参考架构。它详细规划了从Figma设计源到最终React/Vue代码的整个转换流程，涵盖了Figma API连接、代码生成、组件扫描和后处理（如设计令牌映射）等关键步骤。适用于构建企业级设计系统，实现高效、可维护的自动化设计资产交付。
查看详情

Figma设计到代码自动生成

anima-webhooks-events
jeremylongshore/claude-code-plugins-plus-skills
141
本技能展示了如何使用Figma Webhooks搭建一个事件驱动的“设计到代码”工作流。当Figma设计文件发生版本更新时，系统能够自动捕获事件，并触发Anima服务，实时、自动化地重新生成高质量的组件代码（如React/TypeScript），适用于构建持续集成和设计流程。
查看详情

Figma资产与图标导出工作流

figma-core-workflow-b
jeremylongshore/claude-code-plugins-plus-skills
242
本技能提供了一个完整的工作流，通过Figma REST API从设计文件中批量导出图像、图标和各类资产。它可以将选定的组件或整个画板渲染为高品质的PNG、SVG、JPG或PDF格式。非常适用于构建自动化设计素材流水线、生成文档预览图或批量导出大型图标集。
查看详情

Claude API可观测性日志封装

clade-observability
jeremylongshore/claude-code-plugins-plus-skills
298
这是一个为Claude API设计的日志封装工具，用于实现调用过程的全面可观测性监控。它能自动记录输入/输出Token数、API调用延迟、估算成本和详细错误信息。是构建生产环境稳定、可监控的AI应用的必备组件。
查看详情

Figma到代码自动化生成

anima-ci-integration
jeremylongshore/claude-code-plugins-plus-skills
363
本集成自动化了将Figma设计资产转换为可部署代码的关键流程。它通过GitHub Actions搭建完整的CI/CD流水线，支持定时或手动触发组件生成。适用于设计系统维护和设计交付，确保代码与设计稿的一致性，构建可靠的开发流程。
查看详情
上一页12345678...101112下一页
语言
简体中文
English