Kombai Gallery

技能简介

Kombai Gallery 是 AI 设计工具 Kombai 推出的永久免费 UI 设计灵感库，收录超过 20,000 个精选网页和移动端 UI 设计案例，每个案例均可一键复制 AI 提示词，适用于 Claude Code、Cursor、VS Code 等主流 AI 编程助手。与传统设计灵感库不同，Kombai Gallery 的每个案例页面底部都附有可直接粘贴到 AI 对话框的预填充提示词，用户无需注册账号、无需付费，即可免费使用全部内容。

核心能力

• 20,000+ 精选设计案例：涵盖 13,561 个网页设计案例（登陆页、仪表盘、页脚、注册登录、Hero 等 318 个分类）和大量移动端设计案例，每周持续新增。
• 一键复制 AI 提示词：点击任意设计案例，页面底部提供预填充提示词，可直接复制粘贴到 Claude Code、Cursor、Codex 等 AI 编程助手的对话框中，即时生成对应风格的代码。
• 永久免费无需注册：Gallery 全部内容免费开放，无需创建账号、无需订阅付费，也不与 Kombai 主产品的计费体系绑定。
• 实时设计预览：每个案例都支持在页面内直接预览实际渲染效果，方便用户在决定提示词方向前评估参考价值。
• 跨工具通用：提示词格式兼容 Claude Code、Cursor、VS Code、Antigravity、Trae、Kiro 等主流 AI 编程工具，不绑定特定 IDE。
• 覆盖设计全流程：从完整页面到局部组件，从静态布局到交互动画，从落地页到管理后台，满足前端开发各类场景的视觉参考需求。

安装配置

Kombai Gallery 无需安装任何软件，直接访问 https://kombai.com/gallery 即可使用所有功能。如需将 Gallery 案例的提示词接入 Claude Code，只需打开 Gallery、找到心仪案例、点击底部「Copy Prompt」按钮，然后粘贴到 AI 编程助手的对话框即可，全程无需安装任何插件。如需在 Kombai 主工具内打开案例并自动生成代码，需注册 Kombai 账号（免费版每月 300 积分）。

使用步骤

1. 访问 Kombai Gallery（https://kombai.com/gallery），按分类（Web/Mobile）或关键词搜索设计灵感
2. 点击感兴趣的设计案例，查看完整设计预览
3. 点击案例页面底部的「Copy Prompt」按钮，复制预填充 AI 提示词
4. 打开 Claude Code / Cursor / VS Code 等 AI 编程助手，粘贴提示词
5. AI 根据提示词生成对应风格和结构的代码，全程无需人工干预

适用场景

• 前端开发快速起步：在为新项目选择视觉风格时，通过 Gallery 快速浏览数百种登陆页、仪表盘、表单设计，直接复制提示词生成代码框架。
• AI 编程质量提升：给 AI 编程助手提供具体视觉参考，解决 AI 生成代码「功能正确但视觉平庸」的问题。
• 设计系统参考：浏览组件级设计案例（按钮、卡片、导航栏、定价页等），用于构建内部设计系统时的灵感参考。
• 跨平台适配研究：同时浏览 Web 和 Mobile 设计案例，对比同一功能在不同平台上的设计模式差异。

适用人群

前端开发者、UI 设计师、产品经理以及所有使用 AI 编程助手（Claude Code、Cursor、Codex 等）并希望提升生成代码视觉质量的技术人员。

工作原理

Kombai Gallery 的核心价值在于将设计审美转化为机器可读的提示词文本。每个收录的设计案例都经过人工标注，提取其视觉特征、布局规律和风格关键词，生成结构化的 AI 提示词。当用户将提示词粘贴到 AI 编程助手时，AI 能够理解设计意图并生成符合该风格的代码实现。Kombai 主产品则在此基础上增加了 Figma 转代码的能力，用户可以将 Gallery 中的参考设计导入 Kombai 并转化为实际可用的代码。

官方链接

https://kombai.com/gallery