开源产品与代码仓库

92 个

UI/UX 设计与原型同赛道商业产品 →领域行情 →首屏与设计风格 →

开源项目 · 按 Stars
项目Stars操作
Real-time Colors帮助用户在真实网页效果中预览颜色和字体搭配，并导出配色方案的工具。74
Preview.js供开发者在 IDE 中即时预览 React 组件和 Storybook 故事的工具。53
Font TesterCOSS浏览器扩展，帮助需要选择网站字体的用户在任意网页上实时预览、比较字体并测试自定义字体。53
Frame0MCP面向需要设计应用界面的用户，提供手绘风格线框图、交互原型和图表制作，并支持借助 AI 从文字或图片生成线框图及代码。46
PagedrawCOSS帮助开发者和设计师将 UI 设计或 Sketch、Figma mockup 转换为 React 组件代码。39
Open Chakra用于 Chakra UI 的 React JSX 可视化编辑器，可通过拖放组件生成代码。38
DesignsystemchecklistDesign System Checklist 是一份帮助设计系统从业者规划、构建和发展设计系统的开源清单。36
GeomanCOSS为使用 Leaflet、MapLibre 或 Mapbox 的开发团队提供地图地理数据绘制与编辑功能库。34
Scriptui用于设计 ScriptUI 对话框并将其导出为 JavaScript 的网页应用。32
DoopMCP供个人和团队使用的协作设计画布，让 AI 智能体通过 MCP 与人类共同设计、编辑和审核作品。31
Pattern Lab已归档的前端工作环境，帮助设计系统团队构建、查看、测试和展示 UI 组件。31
Glow UICOSS面向设计师和开发者的 Figma UI 套件与设计系统，提供组件、变量、图标、模板及线框设计功能。27
Design Lint供设计师在 Figma 中检查并修复设计错误、保持设计一致性的免费插件。26
Vue Design System开源工具，帮助团队使用 Vue.js 构建 UI 设计系统。22
QuickMock免费的开源线框图工具，帮助用户快速为项目创建基础线框图、勾勒想法并整理思路。20
WireMD面向开发者和设计师的文本优先 UI 设计工具，可用 Markdown 创建线框图和界面原型。19
Layers为产品设计师提供可在 AI 工具中运行的技能，帮助他们系统地梳理产品设计决策。17
RetuneMCP桌面工具，让开发者在浏览器中可视化调整应用元素，并将结构化修改交给 AI 编程工具写入代码。16
tastemakerCOSS为编程智能体提供设计流程的本地技能，通过参考研究、对比度校验、真实素材和跨项目偏好记忆改善界面设计。15
Tokenbase帮助设计系统使用者创建、管理和分发设计令牌。15
Stylify Me帮助设计师快速了解网站的风格指南12
Spirit面向设计师和开发者的网页动画制作工具，可连接网页实时编辑关键帧动画并导出播放，但网站已宣布停止服务。8
WhoCanUse这是一款网页颜色对比度检测工具，帮助使用者了解颜色组合对不同视力障碍人群的影响，并提供无障碍评级和情境模拟。7
ux-skillMCPuxskill 为使用 AI 编程工具的开发者在本地生成符合品牌的设计系统，并通过无障碍检查和设计规则检查减少模板化界面。7
CSS Type StudioCOSS网页工具，帮助用户调整和预览 HTML 排版、字体及高级 CSS 字体属性，并保存和分享设计。6
Xiaopiu即时原型为产品经理和交互设计师提供云端原型设计、产品文档创作与团队实时协作功能，计划于2026年12月1日停止服务。5
FlaudeMCP面向产品设计师、创始人和设计型开发者的 Figma 插件，可用 Claude 在画布上设计界面，并将真实应用屏幕和流程复制为可编辑图层。5
ColororacleColor Oracle 是面向设计人员的免费色盲模拟器，可在 Windows、Mac 和 Linux 上实时展示常见色觉障碍人群看到的画面。5
Handle Extension为产品设计师和设计工程师提供可视化工具，通过 Chrome 扩展和 macOS 应用配合现有编码代理，直接在真实产品代码中设计、调整并落实界面变更。5
Styleguides精选的网站风格指南目录4
第 2 / 4 页 · 当前展示 31–60 / 共 92 个开源项目