UI Hub 是一个每日更新的免费 UI 资源目录，给设计师、前端开发者和做界面的 AI Agent 用：共 2,395 条资源，其中 133 个组件库、1,929 个带明暗预览的组件样式示例，另有设计 skill 与 AI 设计技巧文章。UI Hub 是一個每日更新的免費 UI 資源目錄，給設計師、前端開發者和做介面的 AI Agent 用：共 2,395 條資源，其中 133 個元件庫、1,929 個附明暗預覽的元件樣式示例，另有設計 skill 與 AI 設計技巧文章。UI Hub is a free, daily-updated directory of UI resources for designers, front-end developers and AI agents that build interfaces: 2,395 resources, including 133 component libraries and 1,929 component style demos with light/dark previews, plus design skills and AI design articles.UI Hub は、デザイナー・フロントエンド開発者・UI を作る AI エージェント向けの、毎日更新される無料の UI リソース集です。全 2,395 件（コンポーネントライブラリ 133 件、ライト/ダーク対応のスタイルデモ 1,929 件）に加え、デザインスキルと AI デザイン記事を掲載しています。UI Hub는 디자이너, 프론트엔드 개발자, 인터페이스를 만드는 AI 에이전트를 위한 매일 업데이트되는 무료 UI 리소스 디렉터리입니다. 총 2,395개 리소스(컴포넌트 라이브러리 133개, 라이트/다크 미리보기가 있는 스타일 데모 1,929개)와 디자인 스킬, AI 디자인 글을 제공합니다.UI Hub ialah direktori sumber UI percuma yang dikemas kini setiap hari untuk pereka, pembangun front-end dan ejen AI yang membina antara muka: 2,395 sumber, termasuk 133 pustaka komponen dan 1,929 demo gaya komponen dengan pratonton terang/gelap, serta kemahiran reka bentuk dan artikel reka bentuk AI.UI Hub là danh mục tài nguyên UI miễn phí, cập nhật hằng ngày, dành cho nhà thiết kế, lập trình viên front-end và AI agent dựng giao diện: 2,395 tài nguyên, gồm 133 thư viện component và 1,929 mẫu phong cách component có xem trước sáng/tối, cùng skill thiết kế và bài viết về thiết kế với AI.UI Hub est un annuaire gratuit de ressources UI, mis à jour chaque jour, pour designers, développeurs front-end et agents IA qui construisent des interfaces : 2,395 ressources, dont 133 bibliothèques de composants et 1,929 démos de styles avec aperçus clair/sombre, plus des skills de design et des articles sur le design avec l’IA.UI Hub es un directorio gratuito de recursos de UI, actualizado a diario, para diseñadores, desarrolladores front-end y agentes de IA que construyen interfaces: 2,395 recursos, incluidas 133 bibliotecas de componentes y 1,929 demos de estilos con vista clara/oscura, además de skills de diseño y artículos de diseño con IA.UI Hub ist ein kostenloses, täglich aktualisiertes Verzeichnis von UI-Ressourcen für Designer, Frontend-Entwickler und KI-Agents, die Oberflächen bauen: 2,395 Ressourcen, darunter 133 Komponentenbibliotheken und 1,929 Komponenten-Stildemos mit Hell/Dunkel-Vorschau, dazu Design-Skills und Artikel zu KI-Design.
Agents · GEO · Skill
给 AI Agent 的使用指南給 AI Agent 的使用指南Guide for AI agentsAIエージェント向けガイドAI 에이전트 가이드Panduan untuk ejen AIHướng dẫn cho AI agentGuide pour agents IAGuía para agentes de IALeitfaden für KI-Agents
把本站交给你的 AI 助手：它可以读取机器可读索引，按风格和类型挑组件，复制代码和 Prompt，并按设计 skill 的流程做出好看的界面。把本站交給你的 AI 助手：它可以讀取機器可讀索引，按風格和類型挑元件，複製程式碼和 Prompt，並按設計 skill 的流程做出好看的介面。Hand this site to your AI assistant: it can read the machine-readable index, pick components by style and type, copy code and prompts, and follow design skills to build good-looking UIs.このサイトをAIアシスタントに渡すと、機械可読インデックスを読み、スタイルと種類でコンポーネントを選び、コードとプロンプトをコピーし、デザインスキルに沿って美しいUIを作れます。이 사이트를 AI 어시스턴트에게 주면 기계 판독 인덱스를 읽고, 스타일·유형별로 컴포넌트를 고르고, 코드와 프롬프트를 복사하며, 디자인 스킬에 따라 UI를 만들 수 있습니다.Serahkan laman ini kepada pembantu AI anda: ia boleh membaca indeks mesin, memilih komponen mengikut gaya dan jenis, menyalin kod dan prompt, serta mengikut kemahiran reka bentuk.Đưa trang này cho trợ lý AI: nó đọc chỉ mục máy, chọn component theo phong cách và loại, sao chép code và prompt, rồi làm theo skill thiết kế.Confiez ce site à votre assistant IA : il lit l’index machine, choisit des composants par style et type, copie code et prompts, et suit les skills de design.Dale este sitio a tu asistente de IA: lee el índice legible por máquina, elige componentes por estilo y tipo, copia código y prompts y sigue los skills de diseño.Geben Sie diese Seite Ihrem KI-Assistenten: Er liest den maschinenlesbaren Index, wählt Komponenten nach Stil und Typ, kopiert Code und Prompts und folgt Design-Skills.
一句话交给 AI一句話交給 AIHand it to AI in one sentence一文でAIに渡す한 문장으로 AI에게Serahkan kepada AI dalam satu ayatGiao cho AI trong một câuConfier à l’IA en une phrasePásaselo a la IA en una fraseIn einem Satz an die KI
Use UI Hub (https://ui.incidental.site/) as your design source. First read https://ui.incidental.site/AGENTS.md, then fetch https://ui.incidental.site/api/resources.json and filter by ct (component kind), vs (visual style) and pricing=free to pick ONE open-source library and ONE visual style. Lock tokens (font, spacing, radius, one accent, light and dark) before building. Load skills from https://ui.incidental.site/api/skills.json in this order: frontend-design or taste-skill for direction, then emil-design-eng for motion, then impeccable, baseline-ui, web-design-guidelines and accessibility as the audit. Verify in a browser (light, dark, 375px, keyboard, reduced motion) and cite every resource you used.
UI Hub(https://ui.incidental.site/)를 디자인 자료원으로 사용하세요. 먼저 https://ui.incidental.site/AGENTS.md를 읽고, https://ui.incidental.site/api/resources.json을 가져와 ct(컴포넌트 종류), vs(시각 스타일), pricing=free로 걸러 오픈소스 라이브러리 하나와 시각 스타일 하나만 고르세요. 만들기 전에 글꼴, 간격, 모서리 반경, 강조색 한 가지, 라이트·다크 토큰을 먼저 정하세요. https://ui.incidental.site/api/skills.json의 스킬은 이 순서로 불러옵니다: 방향은 frontend-design 또는 taste-skill, 모션 다듬기는 emil-design-eng, 마지막으로 impeccable, baseline-ui, web-design-guidelines, accessibility로 점검. 브라우저에서 라이트, 다크, 375px, 키보드, 모션 줄이기를 확인하고 사용한 모든 자료의 출처를 밝히세요.
Gunakan UI Hub (https://ui.incidental.site/) sebagai sumber reka bentuk. Baca https://ui.incidental.site/AGENTS.md dahulu, kemudian ambil https://ui.incidental.site/api/resources.json dan tapis mengikut ct (jenis komponen), vs (gaya visual) dan pricing=free untuk memilih SATU pustaka sumber terbuka dan SATU gaya visual. Tetapkan token (fon, jarak, jejari, satu warna aksen, terang dan gelap) sebelum membina. Muatkan kemahiran daripada https://ui.incidental.site/api/skills.json mengikut urutan: frontend-design atau taste-skill untuk hala tuju, emil-design-eng untuk gerakan, kemudian impeccable, baseline-ui, web-design-guidelines dan accessibility untuk audit. Sahkan dalam pelayar (terang, gelap, 375px, papan kekunci, gerakan dikurangkan) dan nyatakan setiap sumber yang digunakan.
Hãy dùng UI Hub (https://ui.incidental.site/) làm nguồn thiết kế. Đọc https://ui.incidental.site/AGENTS.md trước, rồi tải https://ui.incidental.site/api/resources.json và lọc theo ct (loại component), vs (phong cách thị giác) và pricing=free để chọn MỘT thư viện mã nguồn mở và MỘT phong cách. Chốt token (font, khoảng cách, bo góc, một màu nhấn, sáng và tối) trước khi dựng. Nạp skill từ https://ui.incidental.site/api/skills.json theo thứ tự: frontend-design hoặc taste-skill để định hướng, emil-design-eng cho chuyển động, rồi impeccable, baseline-ui, web-design-guidelines và accessibility để rà soát. Kiểm tra trên trình duyệt (sáng, tối, 375px, bàn phím, giảm chuyển động) và ghi nguồn mọi tài nguyên đã dùng.
Utilise UI Hub (https://ui.incidental.site/) comme source de design. Lis d’abord https://ui.incidental.site/AGENTS.md, puis récupère https://ui.incidental.site/api/resources.json et filtre par ct (type de composant), vs (style visuel) et pricing=free pour choisir UNE bibliothèque open source et UN style visuel. Fixe les tokens (police, espacements, rayon, une seule couleur d’accent, clair et sombre) avant de construire. Charge les skills de https://ui.incidental.site/api/skills.json dans cet ordre : frontend-design ou taste-skill pour la direction, emil-design-eng pour le mouvement, puis impeccable, baseline-ui, web-design-guidelines et accessibility pour l’audit. Vérifie dans un navigateur (clair, sombre, 375px, clavier, mouvement réduit) et cite chaque ressource utilisée.
Usa UI Hub (https://ui.incidental.site/) como fuente de diseño. Primero lee https://ui.incidental.site/AGENTS.md, luego obtén https://ui.incidental.site/api/resources.json y filtra por ct (tipo de componente), vs (estilo visual) y pricing=free para elegir UNA librería open source y UN estilo visual. Fija los tokens (fuente, espaciado, radio, un solo color de acento, claro y oscuro) antes de construir. Carga los skills de https://ui.incidental.site/api/skills.json en este orden: frontend-design o taste-skill para la dirección, emil-design-eng para el movimiento y después impeccable, baseline-ui, web-design-guidelines y accessibility como auditoría. Verifica en un navegador (claro, oscuro, 375px, teclado, movimiento reducido) y cita cada recurso usado.
Nutze UI Hub (https://ui.incidental.site/) als Designquelle. Lies zuerst https://ui.incidental.site/AGENTS.md, hol dann https://ui.incidental.site/api/resources.json und filtere nach ct (Komponentenart), vs (visueller Stil) und pricing=free, um EINE Open-Source-Bibliothek und EINEN visuellen Stil zu wählen. Lege Tokens (Schrift, Abstände, Radius, eine Akzentfarbe, hell und dunkel) fest, bevor du baust. Lade die Skills aus https://ui.incidental.site/api/skills.json in dieser Reihenfolge: frontend-design oder taste-skill für die Richtung, emil-design-eng für Bewegung, danach impeccable, baseline-ui, web-design-guidelines und accessibility als Audit. Prüfe im Browser (hell, dunkel, 375px, Tastatur, reduzierte Bewegung) und nenne jede verwendete Quelle.
Use UI Hub (https://ui.incidental.site/) as your design source. First read https://ui.incidental.site/AGENTS.md, then fetch https://ui.incidental.site/api/resources.json and filter by ct (component kind), vs (visual style) and pricing=free to pick ONE open-source library and ONE visual style. Lock tokens (font, spacing, radius, one accent, light and dark) before building. Load skills from https://ui.incidental.site/api/skills.json in this order: frontend-design or taste-skill for direction, then emil-design-eng for motion, then impeccable, baseline-ui, web-design-guidelines and accessibility as the audit. Verify in a browser (light, dark, 375px, keyboard, reduced motion) and cite every resource you used.
安装路径安裝路徑Install pathsインストール先설치 경로Laluan pemasanganĐường dẫn cài đặtChemins d’installationRutas de instalaciónInstallationspfade
← 左右滑动查看整张表 →← 左右滑動查看整張表 →← Swipe to see the full table →← 横にスワイプして表全体を表示 →← 좌우로 밀어 전체 표 보기 →← Leret untuk lihat jadual penuh →← Vuốt ngang để xem cả bảng →← Faites défiler pour voir le tableau →← Desliza para ver la tabla completa →← Wischen, um die ganze Tabelle zu sehen →
.cursor/skills/ui-hub/（单个项目），或把 AGENTS.md 放在仓库根目录.cursor/skills/ui-hub/（單個專案），或把 AGENTS.md 放在倉庫根目錄.cursor/skills/ui-hub/ (per project), or put AGENTS.md in the repo root.cursor/skills/ui-hub/（プロジェクト単位）、またはリポジトリ直下に AGENTS.md.cursor/skills/ui-hub/ (프로젝트별) 또는 저장소 루트에 AGENTS.md.cursor/skills/ui-hub/ (setiap projek), atau letak AGENTS.md di akar repo.cursor/skills/ui-hub/ (theo dự án), hoặc đặt AGENTS.md ở thư mục gốc repo.cursor/skills/ui-hub/ (par projet), ou AGENTS.md à la racine du dépôt.cursor/skills/ui-hub/ (por proyecto), o AGENTS.md en la raíz del repo.cursor/skills/ui-hub/ (pro Projekt) oder AGENTS.md im Repo-Stamm
Codex CLI
~/.codex/skills/ui-hub/SKILL.md
仓库根目录的 AGENTS.md 会被自动读取倉庫根目錄的 AGENTS.md 會被自動讀取AGENTS.md in the repo root is read automaticallyリポジトリ直下の AGENTS.md は自動で読み込まれます저장소 루트의 AGENTS.md는 자동으로 읽힙니다AGENTS.md di akar repo dibaca secara automatikAGENTS.md ở thư mục gốc repo được đọc tự độngAGENTS.md à la racine du dépôt est lu automatiquementAGENTS.md en la raíz del repo se lee automáticamenteAGENTS.md im Repo-Stamm wird automatisch gelesen
能用来做什么能用來做什麼What this is for何に使えるか무엇에 쓰나Untuk apaDùng để làm gìÀ quoi ça sertPara qué sirveWofür das ist
挑选组件库挑選元件庫Pick a component libraryコンポーネントライブラリを選ぶ컴포넌트 라이브러리 고르기Pilih pustaka komponenChọn thư viện componentChoisir une bibliothèque de composantsElegir una librería de componentesKomponentenbibliothek wählen
用 type=library，按框架标签（React / Vue / Svelte）、许可证和 pricing=free 筛选。用 type=library，按框架標籤（React / Vue / Svelte）、許可證和 pricing=free 篩選。Use type=library and filter by framework tag (React, Vue, Svelte), licence and pricing=free.type=library を使い、フレームワークタグ（React・Vue・Svelte）、ライセンス、pricing=free で絞り込みます。type=library로 프레임워크 태그(React, Vue, Svelte), 라이선스, pricing=free를 걸러냅니다.Guna type=library dan tapis mengikut tag rangka kerja (React, Vue, Svelte), lesen dan pricing=free.Dùng type=library và lọc theo thẻ framework (React, Vue, Svelte), giấy phép và pricing=free.Utilise type=library et filtre par framework (React, Vue, Svelte), licence et pricing=free.Usa type=library y filtra por framework (React, Vue, Svelte), licencia y pricing=free.type=library nutzen und nach Framework (React, Vue, Svelte), Lizenz und pricing=free filtern.
找视觉风格找視覺風格Find a visual styleビジュアルスタイルを探す시각 스타일 찾기Cari gaya visualTìm phong cách thị giácTrouver un style visuelEncontrar un estilo visualVisuellen Stil finden
vs 可选 minimal、enterprise、soft、playful、motion、dark-tech、gradient、3d、apple、editorial、brutalist；type=style 会给出每类组件的真实示例。vs 可選 minimal、enterprise、soft、playful、motion、dark-tech、gradient、3d、apple、editorial、brutalist；type=style 會給出每類元件的真實示例。vs can be minimal, enterprise, soft, playful, motion, dark-tech, gradient, 3d, apple, editorial or brutalist; type=style shows real demos for each component.vs には minimal、enterprise、soft、playful、motion、dark-tech、gradient、3d、apple、editorial、brutalist があり、type=style でコンポーネントごとの実例が見られます。vs는 minimal, enterprise, soft, playful, motion, dark-tech, gradient, 3d, apple, editorial, brutalist 중 하나이며, type=style은 컴포넌트별 실제 데모를 보여 줍니다.vs boleh jadi minimal, enterprise, soft, playful, motion, dark-tech, gradient, 3d, apple, editorial atau brutalist; type=style menunjukkan demo sebenar bagi setiap komponen.vs gồm minimal, enterprise, soft, playful, motion, dark-tech, gradient, 3d, apple, editorial, brutalist; type=style hiển thị demo thật cho từng component.vs peut valoir minimal, enterprise, soft, playful, motion, dark-tech, gradient, 3d, apple, editorial ou brutalist ; type=style montre de vraies démos par composant.vs puede ser minimal, enterprise, soft, playful, motion, dark-tech, gradient, 3d, apple, editorial o brutalist; type=style muestra demos reales por componente.vs kann minimal, enterprise, soft, playful, motion, dark-tech, gradient, 3d, apple, editorial oder brutalist sein; type=style zeigt echte Demos je Komponente.
复制组件代码和 Prompt複製元件程式碼和 PromptCopy component code and promptsコンポーネントのコードとプロンプトをコピー컴포넌트 코드와 프롬프트 복사Salin kod komponen dan promptSao chép code component và promptCopier code et promptsCopiar código y promptsCode und Prompts kopieren
打开原站链接查看安装方式和源码；站内每张卡片都有可复制的 AI Prompt。開啟原站連結檢視安裝方式和原始碼；站內每張卡片都有可複製的 AI Prompt。Open the original link for install steps and source; every card on the site has a copyable AI prompt.インストール方法とソースは元サイトのリンクで確認できます。各カードにコピーできるAIプロンプトがあります。설치 방법과 소스는 원본 링크에서 확인하세요. 사이트의 모든 카드에 복사 가능한 AI 프롬프트가 있습니다.Buka pautan asal untuk langkah pemasangan dan kod sumber; setiap kad mempunyai prompt AI yang boleh disalin.Mở liên kết gốc để xem cách cài và mã nguồn; mỗi thẻ trên trang đều có prompt AI để sao chép.Ouvre le lien d’origine pour l’installation et la source ; chaque carte propose un prompt IA copiable.Abre el enlace original para la instalación y el código; cada tarjeta tiene un prompt de IA copiable.Originallink für Installation und Quellcode öffnen; jede Karte hat einen kopierbaren KI-Prompt.
加载设计 skill載入設計 skillLoad design skillsデザインスキルを読み込む디자인 스킬 불러오기Muatkan kemahiran reka bentukNạp skill thiết kếCharger les skills de designCargar skills de diseñoDesign-Skills laden
api/skills.json 列出了 29 个 Agent skill 和推荐的调用顺序。api/skills.json 列出了 29 個 Agent skill 和推薦的呼叫順序。api/skills.json lists 29 agent skills and the order to run them.api/skills.json に 29 個のスキルと実行順序があります。api/skills.json에 29개 스킬과 실행 순서가 있습니다.api/skills.json menyenaraikan 29 kemahiran ejen dan urutan menjalankannya.api/skills.json liệt kê 29 skill và thứ tự chạy.api/skills.json liste 29 skills et l’ordre d’exécution.api/skills.json enumera 29 skills y el orden de uso.api/skills.json listet 29 Skills und ihre Reihenfolge.
审查界面審查介面Audit a UIUIを監査するUI 점검Audit UIRà soát giao diệnAuditer une interfaceAuditar una interfazUI prüfen
用 impeccable、baseline-ui、web-design-guidelines、accessibility 检查草稿，再到浏览器里验证。用 impeccable、baseline-ui、web-design-guidelines、accessibility 檢查草稿，再到瀏覽器裡驗證。Run impeccable, baseline-ui, web-design-guidelines and accessibility against the draft, then verify in a browser.impeccable・baseline-ui・web-design-guidelines・accessibility で下書きを点検し、ブラウザで確認します。impeccable, baseline-ui, web-design-guidelines, accessibility로 초안을 점검한 뒤 브라우저에서 확인합니다.Jalankan impeccable, baseline-ui, web-design-guidelines dan accessibility pada draf, kemudian sahkan dalam pelayar.Chạy impeccable, baseline-ui, web-design-guidelines và accessibility trên bản nháp, rồi kiểm tra trên trình duyệt.Passe le brouillon dans impeccable, baseline-ui, web-design-guidelines et accessibility, puis vérifie dans un navigateur.Pasa el borrador por impeccable, baseline-ui, web-design-guidelines y accessibility y verifica en un navegador.Entwurf mit impeccable, baseline-ui, web-design-guidelines und accessibility prüfen, dann im Browser kontrollieren.
工作流程工作流程Workflowワークフロー워크플로Aliran kerjaQuy trìnhFlux de travailFlujo de trabajoAblauf
获取 api/resources.json，按 ct、vs、pricing=free 筛选獲取 api/resources.json，按 ct、vs、pricing=free 篩選Fetch api/resources.json and filter by ct, vs and pricing=freeapi/resources.json を取得し、ct・vs・pricing=free で絞り込むapi/resources.json을 가져와 ct, vs, pricing=free로 필터Ambil api/resources.json dan tapis mengikut ct, vs dan pricing=freeTải api/resources.json và lọc theo ct, vs, pricing=freeRécupérer api/resources.json et filtrer par ct, vs et pricing=freeObtener api/resources.json y filtrar por ct, vs y pricing=freeapi/resources.json holen und nach ct, vs und pricing=free filtern
选一个定方向的 skill（frontend-design 或 taste-skill），并定下 token選一個定方向的 skill（frontend-design 或 taste-skill），並定下 tokenPick one direction skill (frontend-design or taste-skill) and lock tokens方向性スキルを1つ選び（frontend-design か taste-skill）、トークンを確定방향 스킬 하나(frontend-design 또는 taste-skill)를 고르고 토큰 확정Pilih satu kemahiran hala tuju (frontend-design atau taste-skill) dan tetapkan tokenChọn một skill định hướng (frontend-design hoặc taste-skill) và chốt tokenChoisir un skill de direction (frontend-design ou taste-skill) et fixer les tokensElegir un skill de dirección (frontend-design o taste-skill) y fijar tokensEinen Richtungs-Skill wählen (frontend-design oder taste-skill) und Tokens festlegen
代码用 type=library，外观参考 type=style 示例；安装和源码看原站程式碼用 type=library，外觀參考 type=style 示例；安裝和原始碼看原站Use type=library for code and type=style demos for the look; open the original linkコードは type=library、見た目は type=style の実例。元サイトを開く코드는 type=library, 외형은 type=style 데모 참고. 원본 링크 열기Guna type=library untuk kod dan demo type=style untuk rupa; buka pautan asalCode lấy từ type=library, giao diện tham khảo demo type=style; mở liên kết gốctype=library pour le code, démos type=style pour le rendu ; ouvrir le lien d’originetype=library para el código y demos type=style para el aspecto; abrir el enlace originaltype=library für Code, type=style-Demos für die Optik; Originallink öffnen
从卡片的 Prompt 出发，补上布局、状态、真实内容和“避免”清单從卡片的 Prompt 出發，補上佈局、狀態、真實內容和“避免”清單Start from the card prompt; add layout, states, real content and an avoid listカードのプロンプトを起点に、レイアウト・状態・実データ・避けることを追加카드 프롬프트에서 시작해 레이아웃, 상태, 실제 콘텐츠, 피할 것 목록 추가Mula daripada prompt kad; tambah susun atur, keadaan, kandungan sebenar dan senarai elakBắt đầu từ prompt của thẻ; thêm bố cục, trạng thái, nội dung thật và danh sách cần tránhPartir du prompt de la carte ; ajouter mise en page, états, vrai contenu et liste à éviterPartir del prompt de la tarjeta; añadir diseño, estados, contenido real y lista de cosas a evitarVom Karten-Prompt ausgehen; Layout, Zustände, echte Inhalte und Vermeiden-Liste ergänzen
用 emil-design-eng 打磨动效；用 impeccable、baseline-ui、web-design-guidelines、accessibility 审查用 emil-design-eng 打磨動效；用 impeccable、baseline-ui、web-design-guidelines、accessibility 審查Polish motion with emil-design-eng; audit with impeccable, baseline-ui, web-design-guidelines, accessibilityemil-design-eng で動きを磨き、impeccable・baseline-ui・web-design-guidelines・accessibility で監査emil-design-eng로 모션 다듬기, impeccable·baseline-ui·web-design-guidelines·accessibility로 점검Gilap gerakan dengan emil-design-eng; audit dengan impeccable, baseline-ui, web-design-guidelines, accessibilityTrau chuốt chuyển động bằng emil-design-eng; rà soát bằng impeccable, baseline-ui, web-design-guidelines, accessibilityPeaufiner le mouvement avec emil-design-eng ; auditer avec impeccable, baseline-ui, web-design-guidelines, accessibilityPulir el movimiento con emil-design-eng; auditar con impeccable, baseline-ui, web-design-guidelines, accessibilityBewegung mit emil-design-eng verfeinern; Audit mit impeccable, baseline-ui, web-design-guidelines, accessibility
在浏览器验证亮色、暗色、375px、键盘和减少动效；注明引用的资源在瀏覽器驗證亮色、暗色、375px、鍵盤和減少動效；註明引用的資源Verify light, dark, 375px, keyboard and reduced motion; cite resourcesライト・ダーク・375px・キーボード・モーション軽減を確認し、出典を記載라이트·다크·375px·키보드·모션 줄이기 확인, 출처 표기Sahkan terang, gelap, 375px, papan kekunci dan gerakan dikurangkan; nyatakan sumberKiểm tra sáng, tối, 375px, bàn phím, giảm chuyển động; ghi nguồnVérifier clair, sombre, 375px, clavier et mouvement réduit ; citer les sourcesVerificar claro, oscuro, 375px, teclado y movimiento reducido; citar fuentesHell, dunkel, 375px, Tastatur und reduzierte Bewegung prüfen; Quellen nennen
做一个深色 SaaS 定价页做一個深色 SaaS 定價頁Build a dark SaaS pricing pageダークな SaaS 料金ページを作る다크 SaaS 가격 페이지 만들기Bina halaman harga SaaS gelapLàm trang bảng giá SaaS tông tốiCréer une page de tarifs SaaS sombreCrear una página de precios SaaS oscuraDunkle SaaS-Preisseite bauen
查找参考查找參考Find references参考を探す레퍼런스 찾기Cari rujukanTìm tham khảoTrouver des référencesBuscar referenciasReferenzen finden
curl -s https://ui.incidental.site/api/resources.json | jq '.items[] | select(.type=="library" and .pricing=="free" and (.tags|index("React")) and ((.ct//[]) | index("card") or index("button") or index("layout"))) | {name,url}'
选用组件選用元件Pick componentsコンポーネントを選ぶ컴포넌트 선택Pilih komponenChọn thành phầnChoisir les composantsElegir componentesKomponenten wählen
shadcn/ui基础组件基礎元件base components基本コンポーネント기본 컴포넌트komponen asascomponent nềncomposants de basecomponentes baseBasiskomponentenshadcn/ui Blocks定价区块定價區塊pricing section料金セクション가격 섹션bahagian hargaphần bảng giásection tarifssección de preciosPreisbereichRadix Primitives底层交互底層互動underneath土台のプリミティブ하부 프리미티브lapisan bawahlớp nền tương tácen dessousdebajodarunterMagic UI Number Ticker唯一的点睛动效唯一的點睛動效the one accent moment唯一のアクセント演出단 하나의 포인트 효과satu-satunya detik aksenđiểm nhấn duy nhấtle seul moment d’accentel único momento de acentoder eine Akzentmoment
设计 token設計 tokenDesign tokensデザイントークン디자인 토큰Token reka bentukDesign tokenTokens de designTokens de diseñoDesign-Tokens
按顺序加载 skill依序載入 skillSkills, in orderスキルの順番스킬 순서Kemahiran, mengikut urutanSkill theo thứ tựSkills, dans l’ordreSkills, en ordenSkills der Reihe nach
taste-skill定方向定方向set the direction方向性を決める방향 설정tetapkan hala tujuđịnh hướngfixer la directionfijar la direcciónRichtung festlegen
emil-design-eng开关和悬停动效，不超过 200ms，ease-out開關和懸停動效，不超過 200ms，ease-outtoggle and hover motion, 200ms or less, ease-outトグルとホバーの動き、200ms以内、ease-out토글·호버 모션, 200ms 이하, ease-outgerakan togol dan hover, 200ms atau kurang, ease-outchuyển động toggle và hover, tối đa 200ms, ease-outmouvement toggle et survol, 200ms max, ease-outmovimiento de toggle y hover, 200ms o menos, ease-outToggle- und Hover-Bewegung, höchstens 200ms, ease-out
上线前检查上線前檢查Check before shipping公開前チェック출시 전 점검Semak sebelum terbitKiểm tra trước khi phát hànhÀ vérifier avant de publierComprobar antes de publicarVor dem Livegang prüfen
月付 / 年付切换可以用键盘操作月付 / 年付切換可以用鍵盤操作Monthly / annual toggle works with the keyboard月額／年額の切り替えがキーボードで操作できる월간/연간 토글을 키보드로 조작 가능Togol bulanan / tahunan berfungsi dengan papan kekunciNút chuyển tháng / năm dùng được bằng bàn phímLe bouton mensuel / annuel marche au clavierEl cambio mensual / anual funciona con tecladoMonat/Jahr-Umschalter per Tastatur bedienbar
每个 CTA 按钮都有清晰的焦点框每個 CTA 按鈕都有清晰的焦點框Visible focus ring on every CTAすべてのCTAにフォーカスリングが見える모든 CTA에 포커스 링 표시Cincin fokus kelihatan pada setiap CTAMọi CTA đều có viền focus rõAnneau de focus visible sur chaque CTAAnillo de foco visible en cada CTASichtbarer Fokusring an jedem CTA
次要文字对比度达到 4.5:1次要文字對比度達到 4.5:1Muted text reaches 4.5:1 contrast補助テキストのコントラストが4.5:1以上보조 텍스트 대비 4.5:1 이상Teks lembut mencapai kontras 4.5:1Chữ phụ đạt độ tương phản 4.5:1Le texte secondaire atteint un contraste de 4,5:1El texto secundario alcanza contraste 4,5:1Gedämpfter Text erreicht Kontrast 4,5:1
375px 手机上价格档位竖向排列375px 手機上價格檔位豎向排列At 375px the tiers stack vertically375pxでプランが縦に並ぶ375px에서 요금제가 세로로 쌓임Pada 375px pakej tersusun menegakỞ 375px các gói xếp dọcÀ 375px les offres s’empilentA 375px los planes se apilanBei 375px stapeln sich die Tarife
开启“减少动效”后数字滚动关闭開啟“減少動效”後數字滾動關閉Reduced motion turns the ticker offモーション軽減で数字アニメが止まる모션 줄이기 시 숫자 애니메이션 꺼짐Gerakan dikurangkan mematikan tickerGiảm chuyển động sẽ tắt hiệu ứng sốLe mouvement réduit coupe le compteurMovimiento reducido apaga el contadorReduzierte Bewegung schaltet den Ticker ab
亮色主题同样好看亮色主題同樣好看Light theme still looks rightライトテーマでも崩れない라이트 테마도 정상Tema terang tetap kemasGiao diện sáng vẫn ổnLe thème clair reste correctEl tema claro sigue bienHelles Theme sieht weiterhin gut aus
做一个精致但克制的首屏做一個精緻但剋制的首屏Add a fancy but restrained landing hero上品で控えめなヒーローを作る세련되지만 절제된 히어로 만들기Tambah hero yang menarik tetapi terkawalLàm phần hero đẹp nhưng tiết chếCréer un hero soigné mais sobreCrear un hero vistoso pero sobrioEleganten, aber zurückhaltenden Hero bauen
查找参考查找參考Find references参考を探す레퍼런스 찾기Cari rujukanTìm tham khảoTrouver des référencesBuscar referenciasReferenzen finden
curl -s https://ui.incidental.site/api/resources.json | jq '.items[] | select((.type=="effect" or .type=="library") and .pricing=="free" and ((.vs//[])|index("motion")) and ((.ct//[])|index("background"))) | {name,url}'
选用组件選用元件Pick componentsコンポーネントを選ぶ컴포넌트 선택Pilih komponenChọn thành phầnChoisir les composantsElegir componentesKomponenten wählen
Aceternity Spotlight二选一二選一pick one of these twoどちらか1つ둘 중 하나pilih satu daripada duachọn một trong hail’un ou l’autreelige uno de los doseins von beidenMagic UI Beams或者用这个或者用這個or this oneまたはこちら또는 이것atau yang inihoặc cái nàyou celui-cio esteoder diesesMotion只做入场动画只做入場動畫entrance only登場アニメのみ등장 애니메이션만animasi masuk sahajachỉ hiệu ứng xuất hiệnentrée uniquementsolo entradanur Einstieg
整页只放一个特效。整頁只放一個特效。Only one effect on the whole page.ページ全体で効果は1つだけ。페이지 전체에 효과는 하나만.Hanya satu kesan untuk seluruh halaman.Cả trang chỉ một hiệu ứng.Un seul effet sur toute la page.Un solo efecto en toda la página.Nur ein Effekt auf der ganzen Seite.
按顺序加载 skill依序載入 skillSkills, in orderスキルの順番스킬 순서Kemahiran, mengikut urutanSkill theo thứ tựSkills, dans l’ordreSkills, en ordenSkills der Reihe nach
frontend-design定方向定方向set the direction方向性を決める방향 설정tetapkan hala tujuđịnh hướngfixer la directionfijar la direcciónRichtung festlegen
emil-design-eng打磨动效打磨動效motion polish動きを磨く모션 다듬기gilap gerakantrau chuốt chuyển độngpeaufiner le mouvementpulir el movimientoBewegung verfeinern
上线前检查上線前檢查Check before shipping公開前チェック출시 전 점검Semak sebelum terbitKiểm tra trước khi phát hànhÀ vérifier avant de publierComprobar antes de publicarVor dem Livegang prüfen
LCP 小于 2.5 秒LCP 小於 2.5 秒LCP under 2.5sLCPが2.5秒未満LCP 2.5초 미만LCP bawah 2.5sLCP dưới 2,5 giâyLCP sous 2,5 sLCP por debajo de 2,5 sLCP unter 2,5 s
系统开启减少动效时特效暂停系統開啟減少動效時特效暫停Effect pauses when reduced motion is onモーション軽減時に効果が止まる모션 줄이기 시 효과 정지Kesan berhenti apabila gerakan dikurangkanHiệu ứng dừng khi bật giảm chuyển độngL’effet s’arrête en mouvement réduitEl efecto se pausa con movimiento reducidoEffekt pausiert bei reduzierter Bewegung
亮暗两种主题下文字都清晰可读亮暗兩種主題下文字都清晰可讀Text stays readable over the effect in both themes両テーマで効果の上の文字が読める두 테마 모두에서 텍스트가 읽힘Teks kekal jelas dalam kedua-dua temaChữ vẫn dễ đọc trên hiệu ứng ở cả hai chế độLe texte reste lisible dans les deux thèmesEl texto se lee bien en ambos temasText bleibt in beiden Themes lesbar
审查一个现有的后台仪表盘審查一個現有的後臺儀表盤Audit an existing admin dashboard既存の管理ダッシュボードを監査する기존 관리자 대시보드 점검Audit papan pemuka admin sedia adaRà soát dashboard quản trị có sẵnAuditer un tableau de bord admin existantAuditar un panel de administración existenteBestehendes Admin-Dashboard prüfen
查找参考查找參考Find references参考を探す레퍼런스 찾기Cari rujukanTìm tham khảoTrouver des référencesBuscar referenciasReferenzen finden
curl -s https://ui.incidental.site/api/resources.json | jq '[.items[] | select(.type=="style" and ((.vs//[])|index("enterprise")) and ((.ct//[]) | index("table") or index("nav") or index("form")))] | .[:20] | map({name,libName,page})'
按顺序加载 skill依序載入 skillSkills, in orderスキルの順番스킬 순서Kemahiran, mengikut urutanSkill theo thứ tựSkills, dans l’ordreSkills, en ordenSkills der Reihe nach
redesign-skill找出问题找出問題find the problems問題を洗い出す문제 찾기cari masalahtìm vấn đềtrouver les problèmesencontrar los problemasProbleme finden
baseline-ui补齐基础補齊基礎fix the basics基本を整える기본 정리betulkan asassửa phần cơ bảncorriger les basesarreglar lo básicoGrundlagen beheben
accessibility无障碍检查無障礙檢查accessibility passアクセシビリティ確認접근성 점검semakan kebolehcapaiankiểm tra khả năng tiếp cậnpasse accessibilitérevisión de accesibilidadBarrierefreiheit prüfen
web-quality-audit最终评分最終評分final score最終スコア최종 점수skor akhirchấm điểm cuốinote finalepuntuación finalAbschlussnote
上线前检查上線前檢查Check before shipping公開前チェック출시 전 점검Semak sebelum terbitKiểm tra trước khi phát hànhÀ vérifier avant de publierComprobar antes de publicarVor dem Livegang prüfen
表头滚动时吸顶表頭滾動時吸頂Table header stays sticky表のヘッダーが固定される표 헤더 고정Pengepala jadual kekal melekatTiêu đề bảng luôn dính trên cùngL’en-tête du tableau reste colléLa cabecera de la tabla queda fijaTabellenkopf bleibt fixiert
表格行能用键盘聚焦表格行能用鍵盤聚焦Rows can be focused with the keyboard行にキーボードでフォーカスできる행을 키보드로 포커스 가능Baris boleh difokus dengan papan kekunciCó thể focus hàng bằng bàn phímLes lignes sont focalisables au clavierLas filas se enfocan con tecladoZeilen per Tastatur fokussierbar
有空状态、加载中和出错状态有空狀態、載入中和出錯狀態Empty, loading and error states exist空・読み込み中・エラーの状態がある빈 상태·로딩·오류 상태 존재Ada keadaan kosong, memuat dan ralatCó trạng thái trống, đang tải và lỗiÉtats vide, chargement et erreur présentsHay estados vacío, cargando y errorLeer-, Lade- und Fehlerzustände vorhanden
点击区域至少 24px點選區域至少 24pxClick targets are at least 24pxタップ領域は24px以上클릭 영역 최소 24pxSasaran klik sekurang-kurangnya 24pxVùng bấm tối thiểu 24pxCibles cliquables d’au moins 24pxÁreas de clic de al menos 24pxKlickziele mindestens 24px
暗色模式和亮色模式一致暗色模式和亮色模式一致Dark mode matches light modeダークモードがライトと同等다크 모드가 라이트와 동일Mod gelap sepadan dengan mod terangChế độ tối tương đương chế độ sángLe mode sombre égale le mode clairEl modo oscuro iguala al claroDunkelmodus entspricht Hellmodus
免费、带对话框的 React 组件库免費、帶對話方塊的 React 元件庫Free React libraries with dialogsダイアログを含む無料の React ライブラリ다이얼로그가 있는 무료 React 라이브러리Pustaka React percuma dengan dialogThư viện React miễn phí có dialogBibliothèques React gratuites avec dialoguesLibrerías React gratuitas con diálogosKostenlose React-Bibliotheken mit Dialogen
curl -s https://ui.incidental.site/api/resources.json | jq '.items[] | select(.type=="library" and .pricing=="free" and (.ct//[]|index("dialog")) and (.tags|index("React"))) | {name,url}'
暗黑科技风的卡片示例暗黑科技風的卡片示例Dark-tech style demos for cardsダークテック風のカード実例다크 테크 스타일 카드 데모Demo kad gaya dark-techDemo thẻ phong cách dark-techDémos de cartes style dark-techDemos de tarjetas estilo dark-techKarten-Demos im Dark-Tech-Stil
curl -s https://ui.incidental.site/api/resources.json | jq '[.items[] | select(.type=="style" and (.vs//[]|index("dark-tech")) and (.ct|index("card")))] | .[:10] | map({name,libName,page})'
统计每种视觉风格的条目数統計每種視覺風格的條目數Count items per visual styleビジュアルスタイルごとの件数시각 스타일별 항목 수Kira item mengikut gaya visualĐếm mục theo phong cáchCompter les éléments par styleContar elementos por estiloEinträge je Stil zählen
fetch（JS）：免费的动效类资源fetch（JS）：免費的動效類資源fetch (JS): free motion effectsfetch（JS）：無料のモーション効果fetch (JS): 무료 모션 효과fetch (JS): kesan gerakan percumafetch (JS): hiệu ứng chuyển động miễn phífetch (JS) : effets de mouvement gratuitsfetch (JS): efectos de movimiento gratuitosfetch (JS): kostenlose Motion-Effekte
本周新增本週新增New this week今週の新着이번 주 신규Baharu minggu iniMới trong tuầnNouveautés de la semaineNovedades de la semanaNeu diese Woche
curl -s https://ui.incidental.site/api/resources.json | jq --arg d "$(date -u -d '7 days ago' +%F)" '.items[] | select(.added and .added >= $d) | {name,url,added}'
风格选择表風格選擇表Style decision tableスタイル選択表스타일 결정표Jadual keputusan gayaBảng chọn phong cáchTable de choix de styleTabla de decisión de estiloStil-Entscheidungstabelle
← 左右滑动查看整张表 →← 左右滑動查看整張表 →← Swipe to see the full table →← 横にスワイプして表全体を表示 →← 좌우로 밀어 전체 표 보기 →← Leret untuk lihat jadual penuh →← Vuốt ngang để xem cả bảng →← Faites défiler pour voir le tableau →← Desliza para ver la tabla completa →← Wischen, um die ganze Tabelle zu sehen →
开发者工具 / SaaS開發者工具 / SaaSDeveloper tool / SaaS開発者ツール / SaaS개발자 도구 / SaaSAlat pembangun / SaaSCông cụ dev / SaaSOutil dev / SaaSHerramienta dev / SaaSEntwickler-Tool / SaaS
minimal · dark-tech
shadcn/ui, Radix, Origin UI
一个强调色，数字等宽，表格紧凑一個強調色，數字等寬，表格緊湊One accent, tabular numbers, dense tablesアクセント1色、等幅数字、密度の高い表강조색 하나, 고정폭 숫자, 촘촘한 표Satu aksen, nombor tabular, jadual padatMột màu nhấn, số đều độ rộng, bảng dàyUn accent, chiffres tabulaires, tableaux densesUn acento, números tabulares, tablas densasEin Akzent, tabellarische Ziffern, dichte Tabellen
企业后台企業後臺Enterprise admin業務管理画面엔터프라이즈 관리자Admin perusahaanTrang quản trị doanh nghiệpBack-office entreprisePanel empresarialEnterprise-Admin
enterprise
Ant Design, Mantine, MUI X, AG Grid
信息密度、键盘操作、数据状态資訊密度、鍵盤操作、資料狀態Density, keyboard, data states情報密度、キーボード、データ状態밀도, 키보드, 데이터 상태Kepadatan, papan kekunci, keadaan dataMật độ, bàn phím, trạng thái dữ liệuDensité, clavier, états de donnéesDensidad, teclado, estados de datosDichte, Tastatur, Datenzustände
圆角、暖色、轻动效圓角、暖色、輕動效Rounded, warm colour, light motion角丸、暖色、軽い動き둥근 모서리, 따뜻한 색, 가벼운 모션Bulat, warna hangat, gerakan ringanBo tròn, màu ấm, chuyển động nhẹArrondi, couleurs chaudes, mouvement légerRedondeado, color cálido, movimiento ligeroRund, warme Farben, leichte Bewegung
营销 / 发布页營銷 / 釋出頁Marketing / launch pageマーケティング / ローンチページ마케팅 / 출시 페이지Pemasaran / halaman pelancaranMarketing / trang ra mắtMarketing / page de lancementMarketing / página de lanzamientoMarketing / Launch-Seite
motion · gradient
Magic UI, Aceternity, Tailark
首屏只放一个特效，字体有力首屏只放一個特效，字型有力One hero effect, strong typeヒーローの効果は1つ、力強い文字히어로 효과 하나, 강한 타이포Satu kesan hero, tipografi kuatMột hiệu ứng hero, chữ mạnhUn seul effet hero, typo affirméeUn efecto en el hero, tipografía fuerteEin Hero-Effekt, starke Typo
衬线标题，行宽 60–75 字符襯線標題，行寬 60–75 字元Serif display, measure 60–75chセリフ見出し、行長60〜75字세리프 제목, 줄 길이 60–75자Tajuk serif, lebar baris 60–75 aksaraTiêu đề serif, độ dài dòng 60–75 ký tựTitres serif, ligne de 60 à 75 caractèresTítulos serif, línea de 60–75 caracteresSerif-Titel, Zeilenlänge 60–75 Zeichen
类 Apple 产品類 Apple 產品Apple-like productApple 風プロダクトApple 스타일 제품Produk gaya AppleSản phẩm kiểu AppleProduit façon AppleProducto estilo AppleApple-artiges Produkt
apple · glass (sparingly)
Radix, Motion, Vaul
弹簧动效，模糊只用在外框彈簧動效，模糊只用在外框Springs, blur only on chromeスプリング、ぼかしは外枠だけ스프링 모션, 블러는 크롬에만Spring, kabur hanya pada bingkaiSpring, chỉ làm mờ phần khungRessorts, flou seulement sur le chromeMuelles, desenfoque solo en el marcoFedern, Blur nur am Rahmen
有个性的独立产品有個性的獨立產品Characterful indie個性派インディー개성 있는 인디Indie berkarakterSản phẩm indie cá tínhIndé avec du caractèreIndie con carácterCharaktervolles Indie
brutalist · retro
neobrutalism, RetroUI, 8bitcn
粗边框、硬阴影，依然无障碍粗邊框、硬陰影，依然無障礙Thick borders, hard shadows, still accessible太い枠線と硬い影、でもアクセシブル두꺼운 테두리, 강한 그림자, 그래도 접근 가능Sempadan tebal, bayang keras, tetap mudah diaksesViền dày, bóng cứng, vẫn dễ tiếp cậnBordures épaisses, ombres dures, toujours accessibleBordes gruesos, sombras duras, aún accesibleDicke Ränder, harte Schatten, trotzdem barrierefrei
该做 / 别做該做 / 別做Do / Don’tやる / やらない할 것 / 하지 말 것Buat / JanganNên / Không nênÀ faire / À éviterHacer / No hacerTun / Lassen
✓ 该做該做Doやる할 것BuatNênÀ faireHacerTun
每个产品只选一个组件库、一种视觉风格每個產品只選一個元件庫、一種視覺風格Pick ONE library and ONE visual style per productプロダクトごとにライブラリもスタイルも1つだけ제품마다 라이브러리와 시각 스타일은 하나씩Pilih SATU pustaka dan SATU gaya bagi setiap produkMỗi sản phẩm chỉ một thư viện và một phong cáchUNE bibliothèque et UN style par produitUNA librería y UN estilo por productoEINE Bibliothek und EIN Stil pro Produkt
先定 token（CSS 变量），再做页面先定 token（CSS 變數），再做頁面Lock tokens (CSS variables) before pagesページより先にトークン（CSS変数）を決める페이지보다 토큰(CSS 변수)을 먼저 확정Tetapkan token (pemboleh ubah CSS) sebelum halamanChốt token (biến CSS) trước khi làm trangFixer les tokens (variables CSS) avant les pagesFijar tokens (variables CSS) antes de las páginasTokens (CSS-Variablen) vor den Seiten festlegen
上线代码优先选免费、宽松许可证的资源上線程式碼優先選免費、寬鬆許可證的資源Prefer pricing=free and permissive licences for shipped code出荷するコードは無料かつ寛容なライセンスを優先배포 코드는 무료·관대한 라이선스 우선Utamakan percuma dan lesen permisif untuk kod produksiƯu tiên miễn phí và giấy phép thoáng cho code phát hànhPrivilégier gratuit et licences permissives pour le code livréPreferir gratis y licencias permisivas para el código publicadoFür ausgelieferten Code kostenlos und permissive Lizenzen bevorzugen
用 type=style 示例对齐具体外观用 type=style 示例對齊具體外觀Use type=style demos to match a concrete looktype=style の実例で見た目を合わせるtype=style 데모로 구체적인 외형 맞추기Guna demo type=style untuk padankan rupaDùng demo type=style để khớp giao diện cụ thểS’aligner sur des démos type=style concrètesUsar demos type=style para un aspecto concretotype=style-Demos für einen konkreten Look nutzen
每页最多一个首屏特效每頁最多一個首屏特效At most one hero effect per page1ページにつきヒーロー効果は最大1つ페이지당 히어로 효과는 최대 하나Paling banyak satu kesan hero setiap halamanTối đa một hiệu ứng hero mỗi trangAu plus un effet hero par pageComo máximo un efecto hero por páginaHöchstens ein Hero-Effekt pro Seite
验证亮色、暗色、375px、键盘和减少动效驗證亮色、暗色、375px、鍵盤和減少動效Verify light, dark, 375px, keyboard and reduced motionライト・ダーク・375px・キーボード・モーション軽減を確認라이트·다크·375px·키보드·모션 줄이기 확인Sahkan terang, gelap, 375px, papan kekunci, gerakan dikurangkanKiểm tra sáng, tối, 375px, bàn phím, giảm chuyển độngVérifier clair, sombre, 375px, clavier, mouvement réduitVerificar claro, oscuro, 375px, teclado, movimiento reducidoHell, dunkel, 375px, Tastatur, reduzierte Bewegung prüfen
在 PR 里注明引用的资源（名称和链接）在 PR 裡註明引用的資源（名稱和連結）Cite resources (name and URL) in your PRPRに使ったリソース（名前とURL）を記載PR에 사용한 자료(이름과 URL) 표기Nyatakan sumber (nama dan URL) dalam PRGhi nguồn (tên và URL) trong PRCiter les ressources (nom et URL) dans la PRCitar recursos (nombre y URL) en el PRQuellen (Name und URL) im PR nennen
✕ 别做別做Don’tやらない하지 말 것JanganKhông nênÀ éviterNo hacerLassen
在一个界面里混用三个组件库在一個介面裡混用三個元件庫Mix three component libraries in one UI1つのUIに3つのライブラリを混ぜる한 UI에 라이브러리 세 개 섞기Campur tiga pustaka dalam satu UITrộn ba thư viện trong một giao diệnMélanger trois bibliothèques dans une UIMezclar tres librerías en una interfazDrei Bibliotheken in einer UI mischen
复制付费 / Pro 源码，或盗链预览图複製付費 / Pro 原始碼，或盜鏈預覽圖Copy paid or Pro source, or hotlink preview images有料・Proのソースをコピーしたり、プレビュー画像を直リンクする유료/Pro 소스 복사 또는 미리보기 이미지 핫링크Salin kod berbayar/Pro atau pautan terus imej pratontonSao chép mã trả phí/Pro hoặc hotlink ảnh xem trướcCopier du code payant/Pro ou hotlinker des aperçusCopiar código de pago/Pro o enlazar directamente imágenesBezahlten/Pro-Code kopieren oder Vorschaubilder hotlinken
渐变、玻璃、发光叠在一起漸變、玻璃、發光疊在一起Stack gradients, glass and glow togetherグラデーション・ガラス・発光を重ねる그라디언트·글래스·글로우를 겹치기Tindan gradien, kaca dan cahaya bersamaChồng gradient, kính và phát sáng lên nhauEmpiler dégradés, verre et lueursApilar degradados, cristal y brilloVerläufe, Glas und Glow stapeln
用可点击的 div，或去掉焦点框用可點選的 div，或去掉焦點框Use clickable divs or remove focus outlinesクリックできる div を使う、フォーカス枠を消す클릭 가능한 div 사용 또는 포커스 윤곽 제거Guna div boleh klik atau buang garis fokusDùng div bấm được hoặc bỏ viền focusUtiliser des div cliquables ou retirer le focusUsar divs clicables o quitar el foco visibleKlickbare divs nutzen oder Fokusrahmen entfernen
给高频操作加动效，或界面动效超过约 300ms給高頻操作加動效，或介面動效超過約 300msAnimate frequent actions or exceed about 300ms in UI頻繁な操作にアニメーション、またはUIで約300ms超잦은 동작에 애니메이션, 또는 UI 모션 약 300ms 초과Animasikan tindakan kerap atau melebihi kira-kira 300msTạo hiệu ứng cho thao tác thường xuyên hoặc quá ~300msAnimer les actions fréquentes ou dépasser ~300msAnimar acciones frecuentes o pasar de ~300msHäufige Aktionen animieren oder über ~300ms gehen
只看截图下结论，一定要打开原站只看截圖下結論，一定要開啟原站Trust a screenshot; always open the original linkスクリーンショットを鵜呑みにする。必ず元サイトを開く스크린샷만 믿기. 항상 원본을 열 것Percaya tangkapan skrin sahaja; sentiasa buka pautan asalTin vào ảnh chụp; luôn mở liên kết gốcSe fier à une capture ; toujours ouvrir l’originalFiarse de una captura; abre siempre el originalEinem Screenshot trauen; immer das Original öffnen
编造许可证或联盟链接編造許可證或聯盟連結Invent licences or affiliate linksライセンスやアフィリエイトリンクを捏造する라이선스나 제휴 링크를 지어내기Mereka lesen atau pautan afiliasiBịa giấy phép hoặc link tiếp thịInventer des licences ou liens d’affiliationInventar licencias o enlaces de afiliadoLizenzen oder Affiliate-Links erfinden
设计与 UI 工程 skill設計與 UI 工程 skillDesign & UI engineering skillsデザイン & UIエンジニアリング スキル디자인 & UI 엔지니어링 스킬Kemahiran reka bentuk & kejuruteraan UISkill thiết kế & kỹ thuật UISkills design & ingénierie UISkills de diseño e ingeniería UIDesign- & UI-Engineering-Skills
accessibility · design
Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make
baseline-ui · design
Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.
composition-patterns · engineering-ui
React composition patterns that scale. Use when refactoring components with
emil-design-eng · design
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
frontend-design · design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defau
impeccable · design
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers we
iterate-until-verified · engineering-ui
Apply a prompt-agnostic execution and verification loop to any substantial task while preserving the original request. Use when the user asks to fan out work, use subagents or independent reviewers, l
performance · engineering-ui
Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "
playwright-cli · engineering-ui
Automate browser interactions, test web pages and work with Playwright tests.
react-best-practices · engineering-ui
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patter
redesign-skill · design
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS
taste-skill · design
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design system
web-design-guidelines · design
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
web-quality-audit · design
Run an evidence-led web quality audit covering performance, accessibility, SEO, best practices, and agentic browsing. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "
webapp-testing · engineering-ui
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser l
FAQ
UI Hub 是什么？UI Hub 是什麼？What is UI Hub?UI Hubとは？UI Hub란?Apakah UI Hub?UI Hub là gì?Qu’est-ce que UI Hub ?¿Qué es UI Hub?Was ist UI Hub?
一个免费的精选目录，收录 2395 个公开 UI 资源：133 个组件库、1929 个带亮/暗截图的组件风格示例、68 个给 AI Agent 的设计 skill，以及特效、模板、规范和教程。只链接原站，不托管付费源码。一個免費的精選目錄，收錄 2395 個公開 UI 資源：133 個元件庫、1929 個帶亮/暗截圖的元件風格示例、68 個給 AI Agent 的設計 skill，以及特效、模板、規範和教程。只連結原站，不託管付費原始碼。A free, curated directory of 2395 public UI resources: 133 component libraries, 1929 component style demos with light and dark screenshots, 68 design skills for AI agents, plus effects, templates, specs and tutorials. It links to original sites and never hosts paid source code.2395 件の公開UIリソースを集めた無料ディレクトリです。コンポーネントライブラリ 133 件、ライト／ダークのスクリーンショット付きスタイル実例 1929 件、AIエージェント向けデザインスキル 68 件のほか、エフェクト、テンプレート、仕様、チュートリアルを収録。元サイトにリンクするだけで、有料ソースはホストしません。2395개의 공개 UI 자료를 모은 무료 디렉터리입니다. 컴포넌트 라이브러리 133개, 라이트·다크 스크린샷이 있는 스타일 데모 1929개, AI 에이전트용 디자인 스킬 68개와 효과, 템플릿, 명세, 튜토리얼을 담았습니다. 원본 사이트로 링크할 뿐 유료 소스는 호스팅하지 않습니다.Direktori percuma 2395 sumber UI awam: 133 pustaka komponen, 1929 demo gaya komponen dengan tangkapan skrin terang dan gelap, 68 kemahiran reka bentuk untuk ejen AI, serta kesan, templat, spesifikasi dan tutorial. Ia memaut ke laman asal dan tidak mengehos kod berbayar.Danh mục miễn phí gồm 2395 tài nguyên UI công khai: 133 thư viện component, 1929 demo phong cách có ảnh sáng và tối, 68 skill thiết kế cho AI agent, cùng hiệu ứng, template, quy chuẩn và hướng dẫn. Chỉ liên kết về trang gốc, không lưu mã trả phí.Un annuaire gratuit de 2395 ressources UI publiques : 133 bibliothèques de composants, 1929 démos de style avec captures claires et sombres, 68 skills de design pour agents IA, plus effets, modèles, specs et tutoriels. Il renvoie vers les sites d’origine et n’héberge jamais de code payant.Un directorio gratuito de 2395 recursos UI públicos: 133 librerías de componentes, 1929 demos de estilo con capturas claras y oscuras, 68 skills de diseño para agentes de IA, además de efectos, plantillas, especificaciones y tutoriales. Enlaza a los sitios originales y nunca aloja código de pago.Ein kostenloses Verzeichnis mit 2395 öffentlichen UI-Ressourcen: 133 Komponentenbibliotheken, 1929 Stil-Demos mit hellen und dunklen Screenshots, 68 Design-Skills für KI-Agents, dazu Effekte, Vorlagen, Specs und Tutorials. Es verlinkt auf die Originale und hostet keinen kostenpflichtigen Code.
怎么找到某种风格的组件？怎麼找到某種風格的元件？How do I find a component in a given style?特定スタイルのコンポーネントを探すには？특정 스타일의 컴포넌트는 어떻게 찾나요?Bagaimana mencari komponen gaya tertentu?Tìm component theo phong cách thế nào?Comment trouver un composant d’un style donné ?¿Cómo encuentro un componente de cierto estilo?Wie finde ich eine Komponente in einem Stil?
获取 api/resources.json，按 ct（组件类型，比如 dialog）和 vs（视觉风格，比如 minimal 或 motion）筛选。type="style" 是带组件库名和页面链接的具体示例；type="library" 是完整组件库。獲取 api/resources.json，按 ct（元件型別，比如 dialog）和 vs（視覺風格，比如 minimal 或 motion）篩選。type="style" 是帶元件庫名和頁面連結的具體示例；type="library" 是完整元件庫。Fetch api/resources.json and filter by ct (component kind, e.g. dialog) and vs (visual style, e.g. minimal or motion). type="style" entries are concrete demos with a library name and page link; type="library" entries are whole libraries.api/resources.json を取得し、ct（例：dialog）と vs（例：minimal や motion）で絞り込みます。type="style" はライブラリ名とページリンク付きの具体例、type="library" はライブラリ全体です。api/resources.json을 가져와 ct(예: dialog)와 vs(예: minimal, motion)로 필터하세요. type="style"은 라이브러리 이름과 페이지 링크가 있는 구체적 데모, type="library"는 라이브러리 전체입니다.Ambil api/resources.json dan tapis mengikut ct (cth. dialog) dan vs (cth. minimal atau motion). type="style" ialah demo konkrit dengan nama pustaka dan pautan; type="library" ialah pustaka penuh.Tải api/resources.json rồi lọc theo ct (ví dụ dialog) và vs (ví dụ minimal hoặc motion). type="style" là demo cụ thể kèm tên thư viện và link; type="library" là cả thư viện.Récupère api/resources.json et filtre par ct (ex. dialog) et vs (ex. minimal ou motion). type="style" désigne des démos concrètes avec nom de bibliothèque et lien ; type="library" des bibliothèques entières.Obtén api/resources.json y filtra por ct (p. ej. dialog) y vs (p. ej. minimal o motion). type="style" son demos concretas con nombre de librería y enlace; type="library" son librerías completas.api/resources.json holen und nach ct (z. B. dialog) und vs (z. B. minimal oder motion) filtern. type="style" sind konkrete Demos mit Bibliotheksname und Link, type="library" ganze Bibliotheken.
做好看的界面该用哪些 skill？做好看的介面該用哪些 skill？Which skills should an agent use for good UI?良いUIにはどのスキルを使う？좋은 UI를 위해 어떤 스킬을 쓰나요?Kemahiran apa untuk UI yang baik?Nên dùng skill nào để có UI đẹp?Quels skills pour une bonne UI ?¿Qué skills usar para una buena UI?Welche Skills für gute UI?
先用一个定方向的 skill（frontend-design 或 taste-skill），再用 emil-design-eng 打磨动效和交互，最后用 impeccable、baseline-ui、web-design-guidelines、accessibility 审查。详见 api/skills.json。先用一個定方向的 skill（frontend-design 或 taste-skill），再用 emil-design-eng 打磨動效和互動，最後用 impeccable、baseline-ui、web-design-guidelines、accessibility 審查。詳見 api/skills.json。One direction skill (frontend-design or taste-skill), emil-design-eng for motion and interaction polish, then impeccable, baseline-ui, web-design-guidelines and accessibility as an audit pass. See api/skills.json.方向性スキル（frontend-design か taste-skill）を1つ、動きとインタラクションは emil-design-eng、最後に impeccable・baseline-ui・web-design-guidelines・accessibility で監査。詳細は api/skills.json。방향 스킬 하나(frontend-design 또는 taste-skill), 모션과 인터랙션은 emil-design-eng, 마지막으로 impeccable, baseline-ui, web-design-guidelines, accessibility로 점검. api/skills.json 참고.Satu kemahiran hala tuju (frontend-design atau taste-skill), emil-design-eng untuk gerakan, kemudian impeccable, baseline-ui, web-design-guidelines dan accessibility untuk audit. Lihat api/skills.json.Một skill định hướng (frontend-design hoặc taste-skill), emil-design-eng cho chuyển động, rồi impeccable, baseline-ui, web-design-guidelines và accessibility để rà soát. Xem api/skills.json.Un skill de direction (frontend-design ou taste-skill), emil-design-eng pour le mouvement, puis impeccable, baseline-ui, web-design-guidelines et accessibility en audit. Voir api/skills.json.Un skill de dirección (frontend-design o taste-skill), emil-design-eng para el movimiento y luego impeccable, baseline-ui, web-design-guidelines y accessibility como auditoría. Ver api/skills.json.Ein Richtungs-Skill (frontend-design oder taste-skill), emil-design-eng für Bewegung, dann impeccable, baseline-ui, web-design-guidelines und accessibility als Audit. Siehe api/skills.json.
可以复制代码吗？可以複製程式碼嗎？Can I copy the code?コードはコピーできる？코드를 복사해도 되나요?Bolehkah saya salin kod?Tôi có được sao chép code không?Puis-je copier le code ?¿Puedo copiar el código?Darf ich den Code kopieren?
开源组件库按各自许可证（MIT、Apache-2.0 等）使用，卡片上有原站链接。付费档（标记为 paid / freemium）必须向原作者购买。開源元件庫按各自許可證（MIT、Apache-2.0 等）使用，卡片上有原站連結。付費檔（標記為 paid / freemium）必須向原作者購買。Open-source libraries can be used under their own licences (MIT, Apache-2.0 and so on); each card links to the original. Paid tiers (marked paid or freemium) must be bought from the original vendor.オープンソースは各ライセンス（MIT、Apache-2.0 など）に従って使えます。カードに元サイトのリンクがあります。有料プラン（paid / freemium）は提供元から購入してください。오픈소스는 각 라이선스(MIT, Apache-2.0 등)에 따라 쓸 수 있고 카드에 원본 링크가 있습니다. 유료 등급(paid / freemium)은 원 제작사에서 구매해야 합니다.Pustaka sumber terbuka boleh digunakan mengikut lesen masing-masing (MIT, Apache-2.0 dsb.); setiap kad memaut ke asal. Peringkat berbayar (paid atau freemium) mesti dibeli daripada penjual asal.Thư viện mã nguồn mở dùng theo giấy phép riêng (MIT, Apache-2.0…); mỗi thẻ có link gốc. Gói trả phí (paid hoặc freemium) phải mua từ nhà cung cấp gốc.Les bibliothèques open source s’utilisent selon leur licence (MIT, Apache-2.0, etc.) ; chaque carte renvoie à l’original. Les offres payantes (paid ou freemium) s’achètent chez l’éditeur.Las librerías open source se usan según su licencia (MIT, Apache-2.0, etc.); cada tarjeta enlaza al original. Los planes de pago (paid o freemium) se compran al proveedor original.Open-Source-Bibliotheken gelten unter ihrer Lizenz (MIT, Apache-2.0 usw.); jede Karte verlinkt das Original. Bezahlstufen (paid oder freemium) beim Anbieter kaufen.
多久更新一次？多久更新一次？How often is it updated?更新頻度は？얼마나 자주 업데이트되나요?Berapa kerap dikemas kini?Bao lâu cập nhật một lần?À quelle fréquence est-ce mis à jour ?¿Cada cuánto se actualiza?Wie oft wird aktualisiert?
每天由 GitHub Actions 自动从 GitHub、awesome-shadcn-ui 和 Hacker News 加入新的 UI 仓库和工具，不会删除旧条目。最近更新：2026-10-15 15:17 UTC。每天由 GitHub Actions 自動從 GitHub、awesome-shadcn-ui 和 Hacker News 加入新的 UI 倉庫和工具，不會刪除舊條目。最近更新：2026-10-15 15:17 UTC。Daily, via a GitHub Actions job that adds new UI repositories and tools from GitHub, awesome-shadcn-ui and Hacker News. Nothing is deleted. Last update: 2026-10-15 15:17 UTC.毎日 GitHub Actions が GitHub、awesome-shadcn-ui、Hacker News から新しいUIリポジトリとツールを追加します。削除はしません。最終更新：2026-10-15 15:17 UTC。매일 GitHub Actions가 GitHub, awesome-shadcn-ui, Hacker News에서 새 UI 저장소와 도구를 추가합니다. 삭제는 없습니다. 최근 업데이트: 2026-10-15 15:17 UTC.Setiap hari melalui GitHub Actions yang menambah repositori dan alat UI baharu dari GitHub, awesome-shadcn-ui dan Hacker News. Tiada yang dipadam. Kemas kini terakhir: 2026-10-15 15:17 UTC.Hằng ngày, GitHub Actions thêm repo và công cụ UI mới từ GitHub, awesome-shadcn-ui và Hacker News. Không xóa gì. Cập nhật gần nhất: 2026-10-15 15:17 UTC.Chaque jour, une tâche GitHub Actions ajoute de nouveaux dépôts et outils UI depuis GitHub, awesome-shadcn-ui et Hacker News. Rien n’est supprimé. Dernière mise à jour : 2026-10-15 15:17 UTC.A diario, una tarea de GitHub Actions añade repositorios y herramientas UI nuevos desde GitHub, awesome-shadcn-ui y Hacker News. No se borra nada. Última actualización: 2026-10-15 15:17 UTC.Täglich fügt ein GitHub-Actions-Job neue UI-Repos und Tools aus GitHub, awesome-shadcn-ui und Hacker News hinzu. Nichts wird gelöscht. Letztes Update: 2026-10-15 15:17 UTC.