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 · 工作流工作流Workflowワークフロー워크플로Aliran kerjaQuy trìnhWorkflowFlujo de trabajoWorkflow · 2026-10-14 · 7 分钟阅读7 分鐘閱讀6 min read6 分で読めます6 분 읽기6 min bacaan6 phút đọc6 min de lecture6 min de lectura6 Min. Lesezeit

写 UI 提示词:写规格,不要写愿望寫 UI 提示詞:寫規格,不要寫願望Prompting for UI: write specs, not wishesUIのためのプロンプト:願望ではなく仕様を書くUI 프롬프트: 소원 말고 명세를 써라Prompt untuk UI: tulis spesifikasi, bukan hasratViết prompt cho UI: viết đặc tả, đừng viết mong muốnPrompts pour l'UI : écrire des specs, pas des souhaitsPrompts para UI: escribe especificaciones, no deseosPrompts für UI: Spezifikationen statt Wünsche

"现代、简洁"对模型毫无信息量。要写清布局、token、状态、真实内容和禁区。「現代、簡潔」對模型毫無資訊量。要寫清佈局、token、狀態、真實內容和禁區。"Modern and clean" means nothing to a model. Name layout, tokens, states, content and what to avoid.「モダンでクリーン」はモデルに何も伝えない。レイアウト、トークン、状態、内容、禁止事項を書く。"모던하고 깔끔하게"는 의미가 없다. 레이아웃, 토큰, 상태, 콘텐츠, 금지 사항을 적어라."Moden dan bersih" tiada makna. Nyatakan susun atur, token, keadaan, kandungan dan larangan."Hiện đại, gọn gàng" chẳng nói gì. Hãy nêu bố cục, token, trạng thái, nội dung và điều cấm.« Moderne et épuré » ne dit rien. Précisez mise en page, tokens, états, contenu et interdits."Moderno y limpio" no dice nada. Indica layout, tokens, estados, contenido y prohibiciones.„Modern und clean“ sagt nichts. Nenne Layout, Tokens, Zustände, Inhalt und Verbote.

Prompting for UI: write specs, not wishes

正文以簡體中文顯示。

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

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

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.

A UI prompt is a tiny design spec. The model fills every gap you leave with its defaults, and defaults are clichés: a centred hero, three feature cards, a purple-to-blue gradient, emoji as icons. A prompt that says "modern and clean" leaves every gap open. This post shows how to close them with a fixed structure, how to iterate without starting over, and which mistakes waste the most rounds.

A six-line UI prompt template: goal, layout, tokens, states, content, avoid
A six-line UI prompt template: goal, layout, tokens, states, content, avoid · Diagram: original by UI Hub, CC BY 4.0

Why "make it modern" fails

Language models predict the most likely continuation. For UI, the most likely continuation is the average of thousands of landing pages. Adjectives like modern, clean or premium do not narrow that average, because every template on the web claims all three. What narrows it is information the model cannot guess: your audience, your content, your tokens, your states, and the things you refuse.

Anthropic's prompt-engineering guide makes the same point in general terms: be clear and direct, give context, and say what the output is for. Vercel's v0 docs add the UI-specific version: describe the layout, name the components and give real content.

The six-slot template

Goal: pricing page for a dev tool, 3 tiers, annual/monthly toggle
Layout: 12-col grid, max 1200px; tiers in one row at >= 900px, stacked below
Tokens: Geist; body 14/20; radius 10; one accent #2563eb; neutral greys only
States: hover, focus-visible ring, selected tier, loading on the CTA, disabled
Content: use the copy below verbatim (no lorem); prices 0 / 19 / 49 USD
Avoid: gradient text, glassmorphism, emoji icons, everything centred, drop shadows > 8px
Vercel Web Interface Guidelines page
Vercel Web Interface Guidelines page · Screenshot: Vercel (vercel.com), captured 2026-10-14. © the original site.

Each slot answers one question the model would otherwise answer with a default:

  1. Goal — what the screen is for and the one thing it must do. Keep it to one line.
  2. Layout — grid, max width, breakpoints and what happens below them. "Responsive" is not a layout.
  3. Tokens — font, type scale, radius, colour. One accent colour is a constraint the model respects surprisingly well.
  4. States — hover, focus, selected, loading, empty, error, disabled. Screenshots never show states, so models skip them unless asked.
  5. Content — paste real copy. Placeholder text hides overflow, wrapping and hierarchy problems that real headlines expose immediately.
  6. Avoid — a short refuse-list. This is the slot that most changes the look.

A worked example, step by step

Step 1: write the brief. Before the six slots, write two sentences about the audience: "Solo developers comparing three plans on a phone during a commute. They care about the limits table more than the hero." This decides density and what goes above the fold.

Step 2: ask for variants, not a page. The first message should ask for three deliberately different directions, for example "A: editorial, serif headings; B: dense table-first; C: card-based with a toggle". Diversity is cheap for the model and expensive for you to imagine.

Step 3: pick one and critique in named problems. "Make it better" produces random change. Named problems produce targeted change:

Keep variant B. Fix only these:
1. Line length in the FAQ is ~95ch; cap at 68ch.
2. Two accent colours compete (blue CTA, green badge). Use the accent for the CTA only.
3. The selected tier has no visible focus ring when tabbing.
4. Prices are not tabular; use font-variant-numeric: tabular-nums.
Do not change anything else.

Step 4: lock decisions. When a decision is good, move it out of the chat into a file the agent reads every time (a DESIGN.md or token file). Otherwise the next session starts from the average again.

Pitfalls that waste the most rounds

Slot values for three common screens

The template stays the same; what changes is which slots carry the weight. Three examples we reuse:

DATA TABLE
Layout: full width inside a 1280px shell; sticky header; first column sticky on < 768px
Tokens: 13/18 table text; tabular-nums; row height 40; zebra off; 1px dividers
States: sorted column, row hover, row selected (checkbox), loading skeleton rows, empty, error with retry
Content: 8 real rows incl. one 60-char name and one negative number
Avoid: cards on mobile (keep the table, scroll horizontally), icons in every cell
EMPTY STATE
Goal: first-run screen for a project list with zero projects
Layout: centred block max 420px; illustration optional, max 160px tall
Content: one-line headline, one sentence of help, one primary action, one docs link
Avoid: three CTAs, jokes, stock 3D illustrations
SETTINGS FORM
Layout: label column 200px + field column at >= 768px; single column below
States: dirty (unsaved) bar, inline validation on blur, saving, saved toast, server error per field
Avoid: modal dialogs for each setting, auto-save without feedback

Notice that the data table spends its words on states and content, the empty state on content and restraint, and the form on states. When a prompt fails, check which slot that screen depends on and whether you left it to the default.

How to tell if a prompt is done

A useful test: hand the prompt to a colleague and ask them to sketch the screen in two minutes. If they ask "what colour?", "what happens on mobile?" or "what does the button say?", the model would have guessed too. Every question they ask is a slot you have not filled. A second test: could you reject the output using only the prompt? If "it looks off" is your only objection, the prompt has no checkable rules, and the next round will be a lottery.

Keeping reusable prompts

Keep one prompt per component type (pricing, settings form, data table, empty state) in your repo. Each one is the six slots with your tokens already filled in, so a new screen only needs Goal and Content. UI Hub's component cards include a copyable prompt you can start from, and the AI prompt block at the end of this post is a ready-made reviewer prompt.

Rauno Freiberg’s interface guidelines
Rauno Freiberg’s interface guidelines · Screenshot: Rauno Freiberg (interfaces.rauno.me), captured 2026-10-14. © the original site.

Checklist

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 工程师,负责在提示词发给生成器(v0、Claude、Cursor、Lovable)之前做走查。
把我的提示词改写成六格:目标、布局、Token、状态、内容、禁止。
规则:
- 把所有形容词(现代、简洁、高级)换成具体数值:px、比例、色值、字体、圆角。
- 布局必须写明最大宽度、网格,以及每个断点以下怎么变。
- 状态按需包含 hover、focus-visible、加载、空、错误、禁用。
- 内容必须是真实文案;如果我没给,就问我要,不要自己编。
- 禁止列出 4 到 6 条禁用样式(如文字渐变、玻璃拟态、emoji 图标、全部居中)。
- 第一轮要求 3 个刻意不同的变体。
输出:先用代码块给出改写后的提示词,再列出你填不了的空白,以及每一项需要我回答的问题。
我的提示词:
<粘贴在这里>
你是一名资深 UI 工程师,负责在提示词发给生成器(v0、Claude、Cursor、Lovable)之前做走查。
把我的提示词改写成六格:目标、布局、Token、状态、内容、禁止。
规则:
- 把所有形容词(现代、简洁、高级)换成具体数值:px、比例、色值、字体、圆角。
- 布局必须写明最大宽度、网格,以及每个断点以下怎么变。
- 状态按需包含 hover、focus-visible、加载、空、错误、禁用。
- 内容必须是真实文案;如果我没给,就问我要,不要自己编。
- 禁止列出 4 到 6 条禁用样式(如文字渐变、玻璃拟态、emoji 图标、全部居中)。
- 第一轮要求 3 个刻意不同的变体。
输出:先用代码块给出改写后的提示词,再列出你填不了的空白,以及每一项需要我回答的问题。
我的提示词:
<粘贴在这里>
You are a senior UI engineer reviewing a UI prompt before it is sent to a generator (v0, Claude, Cursor, Lovable).
Rewrite my prompt into six slots: Goal, Layout, Tokens, States, Content, Avoid.
Rules:
- Replace every adjective (modern, clean, premium) with a concrete value: px, ratio, colour hex, font, radius.
- Layout must state max width, grid and what happens below each breakpoint.
- States must include hover, focus-visible, loading, empty, error and disabled where relevant.
- Content must be real copy; if I gave none, ask me for it instead of inventing it.
- Avoid must list 4–6 banned patterns (e.g. gradient text, glassmorphism, emoji icons, centred everything).
- Ask for 3 deliberately different variants in the first round.
Output: the rewritten prompt in a code block, then a list of the gaps you could not fill and the question I must answer for each.
My prompt:
<paste here>
You are a senior UI engineer reviewing a UI prompt before it is sent to a generator (v0, Claude, Cursor, Lovable).
Rewrite my prompt into six slots: Goal, Layout, Tokens, States, Content, Avoid.
Rules:
- Replace every adjective (modern, clean, premium) with a concrete value: px, ratio, colour hex, font, radius.
- Layout must state max width, grid and what happens below each breakpoint.
- States must include hover, focus-visible, loading, empty, error and disabled where relevant.
- Content must be real copy; if I gave none, ask me for it instead of inventing it.
- Avoid must list 4–6 banned patterns (e.g. gradient text, glassmorphism, emoji icons, centred everything).
- Ask for 3 deliberately different variants in the first round.
Output: the rewritten prompt in a code block, then a list of the gaps you could not fill and the question I must answer for each.
My prompt:
<paste here>
You are a senior UI engineer reviewing a UI prompt before it is sent to a generator (v0, Claude, Cursor, Lovable).
Rewrite my prompt into six slots: Goal, Layout, Tokens, States, Content, Avoid.
Rules:
- Replace every adjective (modern, clean, premium) with a concrete value: px, ratio, colour hex, font, radius.
- Layout must state max width, grid and what happens below each breakpoint.
- States must include hover, focus-visible, loading, empty, error and disabled where relevant.
- Content must be real copy; if I gave none, ask me for it instead of inventing it.
- Avoid must list 4–6 banned patterns (e.g. gradient text, glassmorphism, emoji icons, centred everything).
- Ask for 3 deliberately different variants in the first round.
Output: the rewritten prompt in a code block, then a list of the gaps you could not fill and the question I must answer for each.
My prompt:
<paste here>
You are a senior UI engineer reviewing a UI prompt before it is sent to a generator (v0, Claude, Cursor, Lovable).
Rewrite my prompt into six slots: Goal, Layout, Tokens, States, Content, Avoid.
Rules:
- Replace every adjective (modern, clean, premium) with a concrete value: px, ratio, colour hex, font, radius.
- Layout must state max width, grid and what happens below each breakpoint.
- States must include hover, focus-visible, loading, empty, error and disabled where relevant.
- Content must be real copy; if I gave none, ask me for it instead of inventing it.
- Avoid must list 4–6 banned patterns (e.g. gradient text, glassmorphism, emoji icons, centred everything).
- Ask for 3 deliberately different variants in the first round.
Output: the rewritten prompt in a code block, then a list of the gaps you could not fill and the question I must answer for each.
My prompt:
<paste here>
You are a senior UI engineer reviewing a UI prompt before it is sent to a generator (v0, Claude, Cursor, Lovable).
Rewrite my prompt into six slots: Goal, Layout, Tokens, States, Content, Avoid.
Rules:
- Replace every adjective (modern, clean, premium) with a concrete value: px, ratio, colour hex, font, radius.
- Layout must state max width, grid and what happens below each breakpoint.
- States must include hover, focus-visible, loading, empty, error and disabled where relevant.
- Content must be real copy; if I gave none, ask me for it instead of inventing it.
- Avoid must list 4–6 banned patterns (e.g. gradient text, glassmorphism, emoji icons, centred everything).
- Ask for 3 deliberately different variants in the first round.
Output: the rewritten prompt in a code block, then a list of the gaps you could not fill and the question I must answer for each.
My prompt:
<paste here>
You are a senior UI engineer reviewing a UI prompt before it is sent to a generator (v0, Claude, Cursor, Lovable).
Rewrite my prompt into six slots: Goal, Layout, Tokens, States, Content, Avoid.
Rules:
- Replace every adjective (modern, clean, premium) with a concrete value: px, ratio, colour hex, font, radius.
- Layout must state max width, grid and what happens below each breakpoint.
- States must include hover, focus-visible, loading, empty, error and disabled where relevant.
- Content must be real copy; if I gave none, ask me for it instead of inventing it.
- Avoid must list 4–6 banned patterns (e.g. gradient text, glassmorphism, emoji icons, centred everything).
- Ask for 3 deliberately different variants in the first round.
Output: the rewritten prompt in a code block, then a list of the gaps you could not fill and the question I must answer for each.
My prompt:
<paste here>
You are a senior UI engineer reviewing a UI prompt before it is sent to a generator (v0, Claude, Cursor, Lovable).
Rewrite my prompt into six slots: Goal, Layout, Tokens, States, Content, Avoid.
Rules:
- Replace every adjective (modern, clean, premium) with a concrete value: px, ratio, colour hex, font, radius.
- Layout must state max width, grid and what happens below each breakpoint.
- States must include hover, focus-visible, loading, empty, error and disabled where relevant.
- Content must be real copy; if I gave none, ask me for it instead of inventing it.
- Avoid must list 4–6 banned patterns (e.g. gradient text, glassmorphism, emoji icons, centred everything).
- Ask for 3 deliberately different variants in the first round.
Output: the rewritten prompt in a code block, then a list of the gaps you could not fill and the question I must answer for each.
My prompt:
<paste here>
You are a senior UI engineer reviewing a UI prompt before it is sent to a generator (v0, Claude, Cursor, Lovable).
Rewrite my prompt into six slots: Goal, Layout, Tokens, States, Content, Avoid.
Rules:
- Replace every adjective (modern, clean, premium) with a concrete value: px, ratio, colour hex, font, radius.
- Layout must state max width, grid and what happens below each breakpoint.
- States must include hover, focus-visible, loading, empty, error and disabled where relevant.
- Content must be real copy; if I gave none, ask me for it instead of inventing it.
- Avoid must list 4–6 banned patterns (e.g. gradient text, glassmorphism, emoji icons, centred everything).
- Ask for 3 deliberately different variants in the first round.
Output: the rewritten prompt in a code block, then a list of the gaps you could not fill and the question I must answer for each.
My prompt:
<paste here>

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

  1. Web Interface Guidelines — Vercel
  2. Web Interface Guidelines (interfaces.rauno.me) — Rauno Freiberg
  3. v0 Documentation — Vercel
  4. Refactoring UI — Adam Wathan & Steve Schoger
  5. Prompt engineering overview — Anthropic

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

工作流工作流Workflowワークフロー워크플로Aliran kerjaQuy trìnhWorkflowFlujo de trabajoWorkflow2026-10-142 分钟阅读2 分鐘閱讀2 min read2 分で読めます2 분 읽기2 min bacaan2 phút đọc2 min de lecture2 min de lectura2 Min. Lesezeit

AI 辅助 UI 设计:一条不丢审美的工作流AI 輔助 UI 設計:一條不丟審美的工作流AI-assisted UI design: a workflow that keeps taste in the loopAI支援UIデザイン:センスを手放さないワークフローAI 보조 UI 디자인: 취향을 잃지 않는 워크플로Reka bentuk UI berbantu AI: aliran kerja yang mengekalkan cita rasaThiết kế UI có AI hỗ trợ: quy trình giữ được gu thẩm mỹDesign d'UI assisté par l'IA : un flux qui garde le goût dans la boucleDiseño de UI asistido por IA: un flujo que mantiene el criterioKI-gestütztes UI-Design: ein Workflow, der Geschmack im Spiel hält

生成器快但平庸。把活拆开:人定方向和约束,AI 铺变体,人来挑选和打磨。生成器快但平庸。把活拆開:人定方向和約束,AI 鋪變體,人來挑選和打磨。Generators are fast but average. Split the job: humans set direction and constraints, AI explores variants, humans curate and polish.生成ツールは速いが平均的。方向と制約は人、バリエーションはAI、選別と仕上げは人。생성기는 빠르지만 평범하다. 방향과 제약은 사람, 변형은 AI, 선별과 다듬기는 사람.Penjana pantas tetapi biasa. Manusia tetapkan hala, AI teroka variasi, manusia pilih dan gilap.Công cụ sinh nhanh nhưng tầm thường. Người định hướng, AI khám phá biến thể, người chọn lọc và hoàn thiện.Rapides mais moyens : l'humain fixe la direction, l'IA explore, l'humain sélectionne et peaufine.Rápidos pero promedio: el humano fija la dirección, la IA explora, el humano elige y pule.Schnell, aber durchschnittlich: Mensch gibt Richtung vor, KI exploriert, Mensch kuratiert und poliert.

workflowAI
工作流工作流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
Agent 上下文Agent 上下文Agent contextエージェント文脈에이전트 컨텍스트Konteks ejenNgữ cảnh agentContexte agentContexto de agentesAgent-Kontext2026-10-147 分钟阅读7 分鐘閱讀6 min read6 分で読めます6 분 읽기6 min bacaan6 phút đọc6 min de lecture6 min de lectura6 Min. Lesezeit

教 Agent 审美:设计 skill 如何去掉 AI 味教 Agent 審美:設計 skill 如何去掉 AI 味Teaching agents taste: how design skills de-slop AI interfacesエージェントにセンスを教える:デザインスキルでAIっぽさを消す에이전트에게 취향 가르치기: 디자인 스킬로 AI 티 없애기Mengajar ejen cita rasa: kemahiran reka bentuk membuang rupa "AI"Dạy agent gu thẩm mỹ: skill thiết kế xoá "mùi AI"Apprendre le goût aux agents : les skills de design contre l'UI génériqueEnseñar criterio a los agentes: skills de diseño contra la UI genéricaAgenten Geschmack beibringen: Design-Skills gegen generische KI-UIs

frontend-design、taste-skill、impeccable 等 skill 把设计观点打包成文件,Agent 按需加载。这里讲怎么组合。frontend-design、taste-skill、impeccable 等 skill 把設計觀點打包成檔案,Agent 按需載入。Skills like frontend-design, taste-skill and impeccable package opinions as files agents load on demand. Here is how to combine them.frontend-design、taste-skill、impeccableなどは設計の意見をファイル化したもの。組み合わせ方を解説。frontend-design, taste-skill, impeccable 같은 스킬은 디자인 관점을 파일로 담는다. 조합법.Kemahiran seperti frontend-design, taste-skill dan impeccable membungkus pendapat reka bentuk. Cara menggabungkannya.Các skill như frontend-design, taste-skill, impeccable đóng gói quan điểm thiết kế. Cách kết hợp.frontend-design, taste-skill, impeccable : des opinions de design en fichiers. Comment les combiner.frontend-design, taste-skill, impeccable: opiniones de diseño en archivos. Cómo combinarlas.frontend-design, taste-skill, impeccable: Design-Meinungen als Dateien. So kombiniert man sie.

skillstaste