Claude 与 Cursor 的设计技能：SKILL.md、rules 和 AGENTS.mdClaude 與 Cursor 的設計技能：SKILL.md、rules 和 AGENTS.mdDesign skills for Claude and Cursor: SKILL.md, rules and AGENTS.mdClaudeとCursorのデザインスキル：SKILL.md・rules・AGENTS.mdClaude와 Cursor의 디자인 스킬: SKILL.md, rules, AGENTS.mdKemahiran reka bentuk untuk Claude dan CursorSkill thiết kế cho Claude và Cursor: SKILL.md, rules, AGENTS.mdCompétences design pour Claude et CursorSkills de diseño para Claude y CursorDesign-Skills für Claude und Cursor
三种文件格式，一个思路：智能体在相关时加载的持久指令。怎样写一个真正改变产出的设计技能，附模板。三種檔案格式，一個思路：智慧體在相關時載入的持久指令。怎樣寫一個真正改變產出的設計技能，附範本。Three file formats, one idea: durable instructions an agent loads when relevant. How to write a design skill that changes output, with a template.3つの形式、1つの考え方。出力を変えるデザインスキルの書き方とテンプレート。세 가지 형식, 하나의 아이디어. 출력을 바꾸는 디자인 스킬 작성법과 템플릿.Tiga format fail, satu idea. Cara menulis kemahiran reka bentuk, dengan templat.Ba định dạng, một ý tưởng. Cách viết skill thiết kế thật sự thay đổi kết quả, kèm mẫu.Trois formats, une idée. Comment écrire une compétence design efficace, avec modèle.Tres formatos, una idea. Cómo escribir un skill de diseño eficaz, con plantilla.Drei Formate, eine Idee. So schreibt man einen wirksamen Design-Skill, mit Vorlage.
正文以簡體中文顯示。
本文は英語で表示しています。
본문은 영어로 표시됩니다.
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.
Anthropic's Agent Skills are folders with a SKILL.md file: YAML front matter (a name and a description) followed by instructions, optionally with scripts and assets. The agent sees the descriptions and loads a skill's full body only when it is relevant. Cursor offers project rules in .cursor/rules, and many coding agents read an AGENTS.md at the repo root. Different files, same idea: durable, scoped instructions.
What makes a design skill work
- A precise description, because it decides when the skill loads ("Use when building or restyling web UI").
- Bans before wishes. Models respond well to a short list of things never to do (text gradients, emoji icons, centred paragraphs, more than one accent).
- Concrete values: tokens, scales, a reference to the token file.
- A verification step: "render in a browser at 390px and 1440px, light and dark, before saying done".
A template
---
name: house-ui
description: Use when creating or restyling any web page or component.
---
1. Load tokens from styles/tokens.css. Never hard-code colour/spacing.
2. Type: Instrument Serif display, Geist UI, scale 1.25.
3. Never: text gradients, emoji icons, glassmorphism stacks.
4. One signature effect per page (see /kb/ house style).
5. Verify in a browser: 390/1440px, light/dark, keyboard focus.
Where to find good ones
Anthropic's public skills repository includes a frontend-design skill; community skills such as taste-skill and impeccable focus on aesthetics. Our encyclopedia indexes the ones we use, with full text where the licence allows.
Anthropic 的 Agent Skills 是带 SKILL.md 文件的文件夹：开头是 YAML 元数据（名称和描述），后面是指令，可以附带脚本和素材。智能体先看到所有描述，只有相关时才加载完整内容。Cursor 提供放在 .cursor/rules 里的项目规则，很多编程智能体会读取仓库根目录的 AGENTS.md。文件不同，思路一样：持久、有作用范围的指令。
好的设计技能有什么特点
- 描述要精确，因为它决定什么时候加载（「在构建或改造网页界面时使用」）。
- 先写禁令，再写愿望。模型对简短的「绝不做」清单反应很好（渐变文字、emoji 图标、段落居中、多于一个强调色）。
- 具体数值：Token、阶梯、指向 Token 文件的引用。
- 验证步骤：「宣布完成前，在浏览器里以 390px 和 1440px、亮色和暗色渲染检查」。
模板
---
name: house-ui
description: Use when creating or restyling any web page or component.
---
1. Load tokens from styles/tokens.css. Never hard-code colour/spacing.
2. Type: Instrument Serif display, Geist UI, scale 1.25.
3. Never: text gradients, emoji icons, glassmorphism stacks.
4. One signature effect per page (see /kb/ house style).
5. Verify in a browser: 390/1440px, light/dark, keyboard focus.去哪找好的技能
Anthropic 的公开 skills 仓库里有 frontend-design 技能；社区的 taste-skill、impeccable 等专注审美。本站百科收录了我们在用的技能，许可证允许的附全文。
Anthropic's Agent Skills are folders with a SKILL.md file: YAML front matter (a name and a description) followed by instructions, optionally with scripts and assets. The agent sees the descriptions and loads a skill's full body only when it is relevant. Cursor offers project rules in .cursor/rules, and many coding agents read an AGENTS.md at the repo root. Different files, same idea: durable, scoped instructions.
What makes a design skill work
- A precise description, because it decides when the skill loads ("Use when building or restyling web UI").
- Bans before wishes. Models respond well to a short list of things never to do (text gradients, emoji icons, centred paragraphs, more than one accent).
- Concrete values: tokens, scales, a reference to the token file.
- A verification step: "render in a browser at 390px and 1440px, light and dark, before saying done".
A template
---
name: house-ui
description: Use when creating or restyling any web page or component.
---
1. Load tokens from styles/tokens.css. Never hard-code colour/spacing.
2. Type: Instrument Serif display, Geist UI, scale 1.25.
3. Never: text gradients, emoji icons, glassmorphism stacks.
4. One signature effect per page (see /kb/ house style).
5. Verify in a browser: 390/1440px, light/dark, keyboard focus.Where to find good ones
Anthropic's public skills repository includes a frontend-design skill; community skills such as taste-skill and impeccable focus on aesthetics. Our encyclopedia indexes the ones we use, with full text where the licence allows.
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 工程师。请把文章《Claude 与 Cursor 的设计技能：SKILL.md、rules 和 AGENTS.md》（https://ui.incidental.site/blog/claude-cursor-design-skills/）的方法用到我的项目上。
核心观点：三种文件格式，一个思路：智能体在相关时加载的持久指令。怎样写一个真正改变产出的设计技能，附模板。
步骤：
1. 读文章，把建议整理成一份具体、可检查的编号清单。
2. 用这份清单检查 <我的页面 / 组件 / 仓库>，每条标注通过或不通过，并写明文件和行号。
3. 用我现有的 token 和组件，小批量修复不通过的项。不要编造 API，以文章链接的官方文档为准。
4. 最后列出待确认的问题和你无法核实的内容。你是一名資深 UI 工程師。請把文章《Claude 與 Cursor 的設計技能：SKILL.md、rules 和 AGENTS.md》（https://ui.incidental.site/blog/claude-cursor-design-skills/）的方法用到我的專案上。
核心觀點：三種檔案格式，一個思路：智慧體在相關時載入的持久指令。怎樣寫一個真正改變產出的設計技能，附範本。
步驟：
1. 讀文章，把建議整理成一份具體、可檢查的編號清單。
2. 用這份清單檢查 <我的頁面 / 元件 / 儲存庫>，每條標註通過或不通過，並寫明檔案和行號。
3. 用我現有的 token 和元件，小批量修復不通過的項目。不要編造 API，以文章連結的官方文件為準。
4. 最後列出待確認的問題和你無法核實的內容。You are a senior UI engineer. Apply the article “Design skills for Claude and Cursor: SKILL.md, rules and AGENTS.md” (https://ui.incidental.site/blog/claude-cursor-design-skills/) to my project.
Key idea: Three file formats, one idea: durable instructions an agent loads when relevant. How to write a design skill that changes output, with a template.
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エンジニアです。記事「ClaudeとCursorのデザインスキル：SKILL.md・rules・AGENTS.md」（https://ui.incidental.site/blog/claude-cursor-design-skills/）の方法を私のプロジェクトに適用してください。
要点：3つの形式、1つの考え方。出力を変えるデザインスキルの書き方とテンプレート。
手順：
1. 記事を読み、助言を具体的で確認可能な番号付きチェックリストにする。
2. そのチェックリストで <私のページ / コンポーネント / リポジトリ> を監査し、各項目を合格／不合格で示し、ファイルと行番号を書く。
3. 不合格の項目を、既存のトークンとコンポーネントを使って少しずつ修正する。APIを捏造せず、記事がリンクする公式ドキュメントに従う。
4. 最後に未解決の質問と検証できなかった点を挙げる。당신은 시니어 UI 엔지니어입니다. 글 “Claude와 Cursor의 디자인 스킬: SKILL.md, rules, AGENTS.md”(https://ui.incidental.site/blog/claude-cursor-design-skills/)의 방법을 내 프로젝트에 적용해 주세요.
핵심: 세 가지 형식, 하나의 아이디어. 출력을 바꾸는 디자인 스킬 작성법과 템플릿.
단계:
1. 글을 읽고 조언을 구체적이고 확인 가능한 번호 목록으로 정리한다.
2. 그 목록으로 <내 페이지 / 컴포넌트 / 저장소>를 점검하고, 항목마다 통과/실패와 파일·줄 번호를 적는다.
3. 실패 항목을 기존 토큰과 컴포넌트로 조금씩 고친다. API를 지어내지 말고 글에 링크된 공식 문서를 따른다.
4. 마지막으로 남은 질문과 확인하지 못한 내용을 정리한다.Anda jurutera UI kanan. Gunakan kaedah artikel “Kemahiran reka bentuk untuk Claude dan Cursor” (https://ui.incidental.site/blog/claude-cursor-design-skills/) pada projek saya.
Idea utama: Tiga format fail, satu idea. Cara menulis kemahiran reka bentuk, dengan templat.
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 “Skill thiết kế cho Claude và Cursor: SKILL.md, rules, AGENTS.md” (https://ui.incidental.site/blog/claude-cursor-design-skills/) cho dự án của tôi.
Ý chính: Ba định dạng, một ý tưởng. Cách viết skill thiết kế thật sự thay đổi kết quả, kèm mẫu.
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 « Compétences design pour Claude et Cursor » (https://ui.incidental.site/blog/claude-cursor-design-skills/) à mon projet.
Idée clé : Trois formats, une idée. Comment écrire une compétence design efficace, avec modèle.
É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 “Skills de diseño para Claude y Cursor” (https://ui.incidental.site/blog/claude-cursor-design-skills/) a mi proyecto.
Idea clave: Tres formatos, una idea. Cómo escribir un skill de diseño eficaz, con plantilla.
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 „Design-Skills für Claude und Cursor“ (https://ui.incidental.site/blog/claude-cursor-design-skills/) auf mein Projekt an.
Kernidee: Drei Formate, eine Idee. So schreibt man einen wirksamen Design-Skill, mit Vorlage.
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
- Agent Skills overview — Anthropic
- anthropics/skills — GitHub
- Rules — Cursor docs
- AGENTS.md — agents.md
- taste-skill — GitHub
相关文章相關文章Related posts関連記事관련 글Artikel berkaitanBài liên quanArticles liésArtículos relacionadosÄhnliche Beiträge
教 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.
给智能体的设计 Token：让 AI 产出符合品牌的那份文件給智慧體的設計 Token：讓 AI 產出符合品牌的那份檔案Design tokens for agents: the file that makes AI output on-brandエージェントのためのデザイントークン에이전트를 위한 디자인 토큰Token reka bentuk untuk ejenDesign token cho agent: file giúp AI ra đúng thương hiệuDes design tokens pour les agentsDesign tokens para agentesDesign Tokens für Agents
一份机器可读的 Token 文件（W3C DTCG 格式）加一段简短用法说明，胜过提示里任何形容词。结构、命名和交给智能体的方法。一份機器可讀的 Token 檔（W3C DTCG 格式）加一段簡短用法說明，勝過提示裡任何形容詞。結構、命名與交給智慧體的方法。A machine-readable token file (the W3C DTCG format) plus a short usage note beats any adjective in a prompt. Structure, naming, and how to hand it to an agent.機械可読なトークン(W3C DTCG)と短い使い方メモはどんな形容詞にも勝る。기계가 읽는 토큰 파일(W3C DTCG)과 짧은 사용법이 어떤 형용사보다 낫다.Fail token boleh dibaca mesin (DTCG) mengatasi kata sifat dalam prompt.File token máy đọc được (DTCG) cùng ghi chú ngắn hơn mọi tính từ trong prompt.Un fichier de tokens lisible par machine (DTCG) vaut mieux que tout adjectif.Un archivo de tokens legible por máquina (DTCG) supera a cualquier adjetivo.Eine maschinenlesbare Token-Datei (DTCG) schlägt jedes Adjektiv.
教程：让智能体以 UI Hub 为上下文搭一个落地页教學：讓智慧體以 UI Hub 為上下文搭一個落地頁Tutorial: have an agent build a landing page using UI Hub as contextチュートリアル：UI Hubを文脈にエージェントでLPを作る튜토리얼: UI Hub를 컨텍스트로 에이전트가 랜딩 페이지 만들기Tutorial: ejen bina halaman pendaratan dengan UI HubHướng dẫn: để agent dựng landing page với UI Hub làm ngữ cảnhTutoriel : un agent construit une landing avec UI Hub comme contexteTutorial: un agente crea una landing con UI Hub como contextoTutorial: ein Agent baut eine Landingpage mit UI Hub als Kontext
从空文件夹到验证通过的页面六步走：加载 AGENTS.md、搜索百科、挑组件、加载技能、构建、浏览器验证。從空資料夾到驗證通過的頁面六步：載入 AGENTS.md、搜尋百科、挑元件、載入技能、建置、瀏覽器驗證。Six steps from an empty folder to a verified page: load AGENTS.md, search the encyclopedia, pick components, load skills, build, verify in a browser.空フォルダから検証済みページまで6ステップ。빈 폴더에서 검증된 페이지까지 6단계.Enam langkah dari folder kosong ke halaman disahkan.Sáu bước từ thư mục trống đến trang đã kiểm chứng.Six étapes du dossier vide à la page vérifiée.Seis pasos de una carpeta vacía a una página verificada.Sechs Schritte vom leeren Ordner zur geprüften Seite.