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.

← 返回博客返回部落格Back to blogブログへ戻る블로그로Kembali ke blogVề blogRetour au blogVolver al blogZurück zum Blog · 周报动态週報動態Newsニュース뉴스BeritaTin tứcActusNoticiasNews · 2026-10-14 · 2 分钟阅读2 分鐘閱讀2 min read2 分で読めます2 분 읽기2 min bacaan2 phút đọc2 min de lecture2 min de lectura2 Min. Lesezeit

设计周报 2026-10-14：规范文件成为主流設計週報 2026-10-14：規範檔成為主流Weekly roundup, 14 Oct 2026: guideline files go mainstream週刊まとめ 2026/10/14：ガイドラインファイルが主流に주간 정리 2026-10-14: 가이드라인 파일이 대세로Ringkasan mingguan 14 Okt 2026Tổng hợp tuần 14/10/2026: file hướng dẫn thành xu hướngRevue hebdo du 14/10/2026 : les fichiers de guidelines s'imposentResumen semanal 14/10/2026: los archivos de guías se imponenWochenrückblick 14.10.2026: Guideline-Dateien setzen sich durch

Figma 智能体正式可用并支持团队规范，Lovable 取消「先选风格」步骤，Magic Patterns 推出 MagicOS，Chrome 迭代 HTML-in-Canvas。对你的工作流意味着什么。Figma 智慧體正式可用並支援團隊規範，Lovable 取消「先選風格」，Magic Patterns 推出 MagicOS，Chrome 迭代 HTML-in-Canvas。Figma agent GA with team guidelines, Lovable drops its pick-a-look step, Magic Patterns launches MagicOS, Chrome iterates on HTML-in-Canvas. What it means for your workflow.Figmaエージェント正式版、Lovableのルック選択廃止、MagicOS登場、ChromeのHTML-in-Canvas。Figma 에이전트 정식, Lovable 룩 선택 제거, MagicOS 출시, Chrome HTML-in-Canvas.Ejen Figma GA, Lovable buang langkah pilih rupa, MagicOS dilancar, HTML-in-Canvas Chrome.Agent Figma GA, Lovable bỏ bước chọn phong cách, MagicOS ra mắt, Chrome HTML-in-Canvas.Agent Figma en GA, Lovable supprime le choix de style, MagicOS, HTML-in-Canvas dans Chrome.Agente de Figma GA, Lovable quita el paso de estilo, MagicOS, HTML-in-Canvas en Chrome.Figma-Agent GA, Lovable streicht Stilwahl, MagicOS, HTML-in-Canvas in Chrome.

Weekly roundup, 14 Oct 2026: guideline files go mainstream

正文以簡體中文顯示。

本文は英語で表示しています。

본문은 영어로 표시됩니다.

Kandungan dipaparkan dalam bahasa Inggeris.

Nội dung hiển thị bằng tiếng Anh.

Le corps de l’article est en anglais.

El cuerpo del artículo está en inglés.

Der Beitragstext ist auf Englisch.

This week's design-tool news shares one theme: the art brief is moving out of the chat box and into files and canvases that persist. Dates are from each vendor's own announcement.

MagicOS launch post
MagicOS launch post · Screenshot: Magic Patterns (www.magicpatterns.com), captured 2026-10-14. © the original site.

The news

Timeline: Figma agent GA, Lovable change, MagicOS launch
Timeline: Figma agent GA, Lovable change, MagicOS launch · Diagram: original by UI Hub, CC BY 4.0
Art Direction Daily issue on the Lovable change
Art Direction Daily issue on the Lovable change · Screenshot: Art Direction Daily (artdirectiondaily.com), captured 2026-10-14. © the original site.

What to do with it

  1. Write (or tidy) your design guideline file now; three tools in one week started reading one.
  2. Put the style paragraph first in every app-builder prompt.
  3. If you explore many directions, try a canvas tool; if you polish one screen, stay in a single design.

Next week's roundup will be generated from the hub's daily feed and posted here.

AI 提示词AI 提示詞AI promptAIプロンプトAI 프롬프트Prompt AIPrompt cho AIPrompt IAPrompt de IAKI-Prompt

复制给 Claude、Cursor、v0 等 AI 助手，让它按本文的方法处理你的项目。尖括号里的内容换成你自己的。複製給 Claude、Cursor、v0 等 AI 助手，讓它按本文的方法處理你的專案。尖括號裡的內容換成你自己的。Paste this into Claude, Cursor, v0 or another assistant to apply this post to your own project. Replace the parts in angle brackets.Claude・Cursor・v0 などのAIアシスタントに貼り付けると、この記事の方法をあなたのプロジェクトに適用できます。山括弧の部分は自分の内容に置き換えてください。Claude, Cursor, v0 같은 AI 도우미에 붙여 넣으면 이 글의 방법을 내 프로젝트에 적용할 수 있습니다. 꺾쇠괄호 안은 내 내용으로 바꾸세요.Tampal ke Claude, Cursor, v0 atau pembantu lain untuk menggunakan kaedah artikel ini pada projek anda. Gantikan bahagian dalam kurungan sudut.Dán vào Claude, Cursor, v0 hoặc trợ lý khác để áp dụng bài này cho dự án của bạn. Thay phần trong dấu ngoặc nhọn bằng nội dung của bạn.Collez-le dans Claude, Cursor, v0 ou un autre assistant pour appliquer cet article à votre projet. Remplacez les parties entre chevrons.Pégalo en Claude, Cursor, v0 u otro asistente para aplicar este artículo a tu proyecto. Sustituye lo que está entre corchetes angulares.In Claude, Cursor, v0 oder einen anderen Assistenten einfügen, um diesen Beitrag auf dein Projekt anzuwenden. Teile in spitzen Klammern ersetzen.

你是一名资深 UI 工程师。请把文章《设计周报 2026-10-14：规范文件成为主流》（https://ui.incidental.site/blog/weekly-roundup-2026-w42/）的方法用到我的项目上。
核心观点：Figma 智能体正式可用并支持团队规范，Lovable 取消「先选风格」步骤，Magic Patterns 推出 MagicOS，Chrome 迭代 HTML-in-Canvas。对你的工作流意味着什么。
步骤：
1. 读文章，把建议整理成一份具体、可检查的编号清单。
2. 用这份清单检查 <我的页面 / 组件 / 仓库>，每条标注通过或不通过，并写明文件和行号。
3. 用我现有的 token 和组件，小批量修复不通过的项。不要编造 API，以文章链接的官方文档为准。
4. 最后列出待确认的问题和你无法核实的内容。
你是一名資深 UI 工程師。請把文章《設計週報 2026-10-14：規範檔成為主流》（https://ui.incidental.site/blog/weekly-roundup-2026-w42/）的方法用到我的專案上。
核心觀點：Figma 智慧體正式可用並支援團隊規範，Lovable 取消「先選風格」，Magic Patterns 推出 MagicOS，Chrome 迭代 HTML-in-Canvas。
步驟：
1. 讀文章，把建議整理成一份具體、可檢查的編號清單。
2. 用這份清單檢查 <我的頁面 / 元件 / 儲存庫>，每條標註通過或不通過，並寫明檔案和行號。
3. 用我現有的 token 和元件，小批量修復不通過的項目。不要編造 API，以文章連結的官方文件為準。
4. 最後列出待確認的問題和你無法核實的內容。
You are a senior UI engineer. Apply the article “Weekly roundup, 14 Oct 2026: guideline files go mainstream” (https://ui.incidental.site/blog/weekly-roundup-2026-w42/) to my project.
Key idea: Figma agent GA with team guidelines, Lovable drops its pick-a-look step, Magic Patterns launches MagicOS, Chrome iterates on HTML-in-Canvas. What it means for your workflow.
Steps:
1. Read the article and turn its advice into a numbered checklist of concrete, checkable rules.
2. Audit <my page / component / repo> against that checklist; mark each rule PASS or FAIL with file and line.
3. Fix the FAIL items in small batches, using my existing tokens and components. Do not invent APIs; follow the official docs the article links to.
4. Finish with a short list of open questions and anything you could not verify.
あなたはシニアUIエンジニアです。記事「週刊まとめ 2026/10/14：ガイドラインファイルが主流に」（https://ui.incidental.site/blog/weekly-roundup-2026-w42/）の方法を私のプロジェクトに適用してください。
要点：Figmaエージェント正式版、Lovableのルック選択廃止、MagicOS登場、ChromeのHTML-in-Canvas。
手順：
1. 記事を読み、助言を具体的で確認可能な番号付きチェックリストにする。
2. そのチェックリストで <私のページ / コンポーネント / リポジトリ> を監査し、各項目を合格／不合格で示し、ファイルと行番号を書く。
3. 不合格の項目を、既存のトークンとコンポーネントを使って少しずつ修正する。APIを捏造せず、記事がリンクする公式ドキュメントに従う。
4. 最後に未解決の質問と検証できなかった点を挙げる。
당신은 시니어 UI 엔지니어입니다. 글 “주간 정리 2026-10-14: 가이드라인 파일이 대세로”(https://ui.incidental.site/blog/weekly-roundup-2026-w42/)의 방법을 내 프로젝트에 적용해 주세요.
핵심: Figma 에이전트 정식, Lovable 룩 선택 제거, MagicOS 출시, Chrome HTML-in-Canvas.
단계:
1. 글을 읽고 조언을 구체적이고 확인 가능한 번호 목록으로 정리한다.
2. 그 목록으로 <내 페이지 / 컴포넌트 / 저장소>를 점검하고, 항목마다 통과/실패와 파일·줄 번호를 적는다.
3. 실패 항목을 기존 토큰과 컴포넌트로 조금씩 고친다. API를 지어내지 말고 글에 링크된 공식 문서를 따른다.
4. 마지막으로 남은 질문과 확인하지 못한 내용을 정리한다.
Anda jurutera UI kanan. Gunakan kaedah artikel “Ringkasan mingguan 14 Okt 2026” (https://ui.incidental.site/blog/weekly-roundup-2026-w42/) pada projek saya.
Idea utama: Ejen Figma GA, Lovable buang langkah pilih rupa, MagicOS dilancar, HTML-in-Canvas Chrome.
Langkah:
1. Baca artikel dan jadikan nasihatnya senarai semak bernombor yang konkrit dan boleh disemak.
2. Audit <halaman / komponen / repo saya> dengan senarai itu; tandakan setiap peraturan LULUS atau GAGAL dengan fail dan baris.
3. Baiki item GAGAL sedikit demi sedikit menggunakan token dan komponen sedia ada. Jangan reka API; ikut dokumen rasmi yang dipautkan artikel.
4. Akhiri dengan soalan terbuka dan perkara yang tidak dapat disahkan.
Bạn là kỹ sư UI cấp cao. Hãy áp dụng bài viết “Tổng hợp tuần 14/10/2026: file hướng dẫn thành xu hướng” (https://ui.incidental.site/blog/weekly-roundup-2026-w42/) cho dự án của tôi.
Ý chính: Agent Figma GA, Lovable bỏ bước chọn phong cách, MagicOS ra mắt, Chrome HTML-in-Canvas.
Các bước:
1. Đọc bài và biến lời khuyên thành danh sách kiểm tra đánh số, cụ thể, kiểm chứng được.
2. Rà soát <trang / component / repo của tôi> theo danh sách đó; ghi ĐẠT hoặc KHÔNG ĐẠT kèm tệp và dòng.
3. Sửa các mục KHÔNG ĐẠT theo từng đợt nhỏ, dùng token và component sẵn có. Không bịa API; làm theo tài liệu chính thức mà bài viết dẫn tới.
4. Kết thúc bằng các câu hỏi còn mở và những điểm chưa xác minh được.
Tu es ingénieur UI senior. Applique l’article « Revue hebdo du 14/10/2026 : les fichiers de guidelines s'imposent » (https://ui.incidental.site/blog/weekly-roundup-2026-w42/) à mon projet.
Idée clé : Agent Figma en GA, Lovable supprime le choix de style, MagicOS, HTML-in-Canvas dans Chrome.
Étapes :
1. Lis l’article et transforme ses conseils en une liste numérotée de règles concrètes et vérifiables.
2. Audite <ma page / mon composant / mon dépôt> avec cette liste ; indique OK ou KO pour chaque règle, avec fichier et ligne.
3. Corrige les points KO par petits lots, avec mes tokens et composants existants. N’invente pas d’API ; suis la documentation officielle citée par l’article.
4. Termine par les questions ouvertes et ce que tu n’as pas pu vérifier.
Eres un ingeniero de UI sénior. Aplica el artículo “Resumen semanal 14/10/2026: los archivos de guías se imponen” (https://ui.incidental.site/blog/weekly-roundup-2026-w42/) a mi proyecto.
Idea clave: Agente de Figma GA, Lovable quita el paso de estilo, MagicOS, HTML-in-Canvas en Chrome.
Pasos:
1. Lee el artículo y convierte sus consejos en una lista numerada de reglas concretas y comprobables.
2. Audita <mi página / componente / repositorio> con esa lista; marca cada regla como CUMPLE o NO CUMPLE con archivo y línea.
3. Corrige los puntos que no cumplen en lotes pequeños, usando mis tokens y componentes actuales. No inventes APIs; sigue la documentación oficial que enlaza el artículo.
4. Termina con las preguntas abiertas y lo que no pudiste verificar.
Du bist Senior-UI-Engineer. Wende den Artikel „Wochenrückblick 14.10.2026: Guideline-Dateien setzen sich durch“ (https://ui.incidental.site/blog/weekly-roundup-2026-w42/) auf mein Projekt an.
Kernidee: Figma-Agent GA, Lovable streicht Stilwahl, MagicOS, HTML-in-Canvas in Chrome.
Schritte:
1. Lies den Artikel und mach aus den Empfehlungen eine nummerierte Liste konkreter, prüfbarer Regeln.
2. Prüfe <meine Seite / Komponente / mein Repo> anhand dieser Liste; markiere jede Regel mit OK oder FEHLT, mit Datei und Zeile.
3. Behebe die fehlenden Punkte in kleinen Schritten mit meinen vorhandenen Tokens und Komponenten. Erfinde keine APIs; folge der offiziellen Doku, die der Artikel verlinkt.
4. Schließe mit offenen Fragen und dem, was du nicht prüfen konntest.

引用来源引用來源References参考文献참고 자료RujukanNguồn tham khảoRéférencesReferenciasQuellen

  1. Figma's AI agent for product design is now generally available — The Verge
  2. Lovable changelog — Lovable
  3. Introducing MagicOS — Magic Patterns
  4. Lovable cut its pick-a-look step (incl. HTML-in-Canvas) — Art Direction Daily
  5. HTML-in-Canvas explainer — WICG

相关文章相關文章Related posts関連記事관련 글Artikel berkaitanBài liên quanArticles liésArtículos relacionadosÄhnliche Beiträge

工作流工作流Workflowワークフロー워크플로Aliran kerjaQuy trìnhWorkflowFlujo de trabajoWorkflow2026-10-148 分钟阅读8 分鐘閱讀6 min read6 分で読めます6 분 읽기6 min bacaan6 phút đọc6 min de lecture6 min de lectura6 Min. Lesezeit

用 AI 从设计稿到代码：映射到组件，而不是像素用 AI 從設計稿到程式碼：對應到元件，而不是像素Design-to-code with AI: map to your components, not to pixelsAIでデザインからコードへ：ピクセルではなくコンポーネントに対応付けるAI로 디자인→코드: 픽셀이 아니라 컴포넌트에 매핑하라Reka bentuk ke kod dengan AI: petakan ke komponen, bukan pikselTừ thiết kế sang code bằng AI: ánh xạ vào component, không phải pixelDu design au code avec l'IA : mapper vers vos composants, pas des pixelsDe diseño a código con IA: mapea a tus componentes, no a píxelesDesign-to-Code mit KI: auf Komponenten mappen, nicht auf Pixel

像素级导出只会产出一次性代码。通过 MCP 把组件注册表和 token 交给 Agent，让产出复用现有组件。像素級匯出只會產出一次性程式碼。透過 MCP 把元件註冊表和 token 交給 Agent。Pixel-perfect export creates throwaway code. Give the agent your component registry and tokens via MCP so output reuses what you already ship.ピクセル完全な書き出しは使い捨てコードになる。MCPでレジストリとトークンを渡そう。픽셀 퍼펙트 내보내기는 일회용 코드다. MCP로 레지스트리와 토큰을 넘겨라.Eksport piksel sempurna menghasilkan kod pakai buang. Beri registri komponen dan token melalui MCP.Xuất pixel-perfect tạo code dùng một lần. Đưa registry và token qua MCP.L'export au pixel produit du code jetable. Donnez registre et tokens via MCP.Exportar al píxel crea código desechable. Pasa registro y tokens vía MCP.Pixelgenauer Export erzeugt Wegwerfcode. Registry und Tokens per MCP übergeben.

design-to-codeFigma
工具评测工具評測Toolsツール도구AlatCông cụOutilsHerramientasTools2026-10-142 分钟阅读2 分鐘閱讀2 min read2 分で読めます2 분 읽기2 min bacaan2 phút đọc2 min de lecture2 min de lectura2 Min. Lesezeit

Lovable 与 Bolt：当「提示生成界面」变成「提示生成应用」Lovable 與 Bolt：當「提示產生介面」變成「提示產生應用」Lovable and Bolt: when prompt-to-UI becomes prompt-to-appLovableとBolt：プロンプトからUIがアプリになるときLovable과 Bolt: 프롬프트-UI가 프롬프트-앱이 될 때Lovable dan Bolt: apabila prompt-ke-UI menjadi prompt-ke-aplLovable và Bolt: khi prompt-to-UI thành prompt-to-appLovable et Bolt : quand le prompt-to-UI devient prompt-to-appLovable y Bolt: cuando prompt-to-UI se vuelve prompt-to-appLovable und Bolt: wenn Prompt-to-UI zu Prompt-to-App wird

两者都能生成完整应用，于是设计质量要和数据、登录、部署抢注意力。如何不让视觉沦为事后补丁。兩者都能產生完整應用，於是設計品質要和資料、登入、部署搶注意力。如何不讓視覺淪為事後補丁。Both tools build whole apps, so design quality now competes with data, auth and deploys for attention. How to keep the look from being an afterthought.どちらもアプリ全体を作るため、デザイン品質はデータや認証と注意を奪い合う。見た目を後回しにしない方法。둘 다 앱 전체를 만들기에 디자인 품질이 데이터·인증·배포와 경쟁한다. 외관을 뒷전으로 두지 않는 법.Kedua-duanya membina apl penuh; reka bentuk bersaing dengan data dan auth. Cara elak visual jadi hal kemudian.Cả hai dựng app hoàn chỉnh nên thiết kế phải tranh chú ý với dữ liệu, đăng nhập. Cách để giao diện không bị bỏ quên.Les deux construisent des apps entières : le design rivalise avec données et auth. Comment ne pas le reléguer.Ambos construyen apps completas: el diseño compite con datos y auth. Cómo evitar que quede para después.Beide bauen ganze Apps – Design konkurriert mit Daten und Auth. So bleibt die Optik keine Nebensache.

LovableBoltfull-stack
工具评测工具評測Toolsツール도구AlatCông cụOutilsHerramientasTools2026-10-142 分钟阅读2 分鐘閱讀2 min read2 分で読めます2 분 읽기2 min bacaan2 phút đọc2 min de lecture2 min de lectura2 Min. Lesezeit

Figma Make 与 Figma 智能体：AI 搬上画布Figma Make 與 Figma 智慧體：AI 搬上畫布Figma Make and the Figma agent: AI moves onto the canvasFigma MakeとFigmaエージェント：AIがキャンバスへFigma Make와 Figma 에이전트: AI가 캔버스로Figma Make dan ejen Figma: AI pindah ke kanvasFigma Make và agent của Figma: AI lên canvasFigma Make et l'agent Figma : l'IA arrive sur le canevasFigma Make y el agente de Figma: la IA llega al lienzoFigma Make und der Figma-Agent: KI zieht auf die Canvas

Figma Make 把提示变成可交互原型；Figma 智能体自 2026-10-06 正式可用，能读取团队规范文件。为什么规范文件才是关键。Figma Make 把提示變成可互動原型；Figma 智慧體自 2026-10-06 正式可用，能讀取團隊規範檔。為什麼規範檔才是關鍵。Figma Make turns prompts into working prototypes; the Figma agent, generally available since 6 Oct 2026, reads team guideline files. Why the guideline file matters most.Figma Makeはプロンプトを動くプロトタイプに。2026/10/6 GAのエージェントはガイドラインを読む。肝はガイドライン。Figma Make는 프롬프트를 프로토타입으로, 2026-10-06 정식 출시된 에이전트는 가이드라인 파일을 읽는다.Figma Make jadikan prompt prototaip; ejen Figma (GA 6 Okt 2026) membaca fail garis panduan pasukan.Figma Make biến prompt thành prototype; agent Figma (GA 6/10/2026) đọc file hướng dẫn của nhóm.Figma Make transforme des prompts en prototypes ; l'agent (GA le 6/10/2026) lit les guides d'équipe.Figma Make convierte prompts en prototipos; el agente (GA 6/10/2026) lee las guías del equipo.Figma Make macht Prompts zu Prototypen; der Agent (GA 6.10.2026) liest Team-Guidelines.

FigmaFigma Makeagent