Der vollständige Leitfaden für Agentenfähigkeiten: Vom Anfänger zum Meister

Wenn jemand fragt, welche KI-Fähigkeiten im Jahr 2026 am lohnendsten zu erlernen sind, muss die Antwort "Fähigkeiten" lauten.

Von Claude Code über OpenClaw bis hin zu Hermes Agent verlassen sich fast alle Mainstream-Agenten auf Skills, um die Qualität und Effizienz ihrer Arbeit zu verbessern. Agenten, die keine Unterstützung durch Skills haben, sind wie neue Mitarbeiter, die wiederholt geschult werden müssen, während Agenten, die mit Skills ausgestattet sind, wie erfahrene Kollegen sind, die von Anfang an gut zusammenarbeiten.

Skills entwickelt sich zu einer der einflussreichsten Innovationen im Bereich der Agenten. Kurz gesagt: Das Modell ist das Gehirn, der Agent ist der Körper, und Skills sind die Hände. Zu wissen, wie man KI “lehrt”, ist wichtiger als nur zu lernen, wie man KI “fragt”. Wenn Sie sich wiederholende Aufgaben, stillschweigendes Teamwissen und betriebliche Details in Skill-Dateien zusammenfassen, werden sie zu den zuverlässigsten digitalen Assistenten.

1. was sind Fertigkeiten

Am 16. Oktober 2025 veröffentlichte Anthropic erstmals Agent Skills. Diese Funktion war zunächst nur in Claude Code verfügbar und erforderte ein kostenpflichtiges Pro-Konto.

Anthropische Freisetzungen Agent-Fähigkeiten

Am 18. Dezember desselben Jahres stellte Anthropic die Agentenfähigkeiten als einheitlichen Standard für alle Benutzer zur Verfügung. In der Folge unterstützten Coding Agents wie Codex, Cursor, Antigravity, OpenCode, Trae, Qoder, CodeBuddy und andere Coding Agents sowie Desktop Agents wie Claude Cowork, Skywork, MiniMax Agent und Buckle nacheinander Skills.

OpenClaw, das nach dem Frühjahr 2026 auf den Markt kam, und der kürzlich erschienene Hermes Agent unterstützen diese Funktion ebenfalls.

Skills bedeutet ”Fähigkeitspakete”. Menschen haben eine Vielzahl von Fähigkeiten, wie z. B. Radfahren, Schwimmen, Autofahren, Kochen, Fotografieren; Skills sind die Fähigkeiten der KI.

Die offizielle Definition von Anthropic: Skills sind eine Reihe von modularen Fähigkeiten, die es Entwicklern ermöglichen, Claude Code mit strukturierten Ordnern zu erweitern. Jeder Skill enthält eine Kerndatei SKILL.md und zugehörige Hilfsressourcen. Wenn ein Benutzer eine Anfrage an Claude Code stellt, bestimmt das System automatisch anhand des Inhalts der Anfrage und der Skill-Beschreibung, ob der entsprechende Skill aufgerufen werden soll.

Eine einfachere Erklärung ist, dass Skills Standard-Betriebshandbücher (SOPs) sind, die für AI angepasst wurden. Jede Fertigkeit hat einen eigenen Ordner für Anweisungen, Ressourcendateien und Referenzen. Dieser Ordner ermöglicht es der KI, schnell vom ”Anfänger” zum ”Experten” zu werden.

Verwenden Sie eine Metapher, um den Unterschied zwischen den drei Bereichen zu verdeutlichen:

Prompt ist wie eine Kundenbestellung, bei der die Anweisungen klar sind, die Ausführung aber dem Koch überlassen bleibt, MCP liefert die Küchenwerkzeuge und Zutaten, damit die KI nicht mehr mit leeren Händen arbeiten muss, und Skills ist das Geheimrezept und der Personalcode, der die Reihenfolge der Aktionen, die Grundlinie der Qualität und den Standard der Ausführung definiert. Mit Skills arbeitet die KI nach Vorschrift und muss die Absichten des Benutzers nicht erraten.

2. die Kernstruktur der Fertigkeiten

Nachdem die grundlegenden Konzepte verstanden wurden, wird die Skills-Architektur auf Ordnerebene analysiert.

Öffnen Sie den Installationsordner von Claude Code (der sich standardmäßig auf Laufwerk C befindet und den Dateinamen .Claude trägt) und suchen Sie das Verzeichnis Skills files, das in der Regel die folgende Struktur aufweist:

Ordnerstruktur der Fertigkeit "Fertigkeitsersteller"

• SKILL.md: SKILL-Kernbefehle, einschließlich Name, Auslösebedingungen, Aufgabenablauf und Ausführungsrichtlinien.
• Skripte: Speichern von ausführbarem Code, z. B. Python, Bash-Skripte
• Referenzen: Speichert On-Demand-Referenzdokumentation, wie z. B. technische Spezifikationen, API-Dokumentation, Codeschnipsel, Designrichtlinien.
• Assets: Speichermaterialien wie Vorlagen, Schriftarten, Bilder, Logos usw.

Die Standard-Skill-Struktur ist wie folgt:

skill-name/
├── SKILL.md (必需)
│   ├── YAML frontmatter (必需)
│   │   ├── name: (必需)
│   │   └── description: (必需)
│   └── Markdown instructions (必需)
└── Bundled Resources (可选)
├── scripts/          - 可执行代码
├── references/       - 参考文档
└── assets/           - 资源文件

Mit Ausnahme von SKILL.md, die obligatorisch ist, sind alle anderen Optionen optional und können je nach Bedarf flexibel konfiguriert werden.

Der Agent führt den folgenden Prozess durch, wenn er einen Kill ausführt:

1. Verwenden Sie SKILL.md als ersten Leitfaden, um die Anforderungen von SKILL für große Modelle zu verstehen
2. Bestimmen, ob Skripte, Referenzen und Anlagen in Verbindung mit der aktuellen Aufgabe aufgerufen werden sollen
3. Die Benutzeraufgaben werden durch eine ”Plan-Do-Watch”-Feedback-Schleife erledigt.

SKILL.md ist der wichtigste Teil der Architektur:

SKILL.md Interne Dissektion (Bild von Cang He)

Der erste ist der Name, der normalerweise aus Englisch und Bindestrichen besteht, z. B. "frontend-design".

Die Beschreibung ist das Herzstück der YAML-Metadaten und ihre Qualität wirkt sich direkt darauf aus, ob der Agent die Fähigkeit korrekt auslösen kann.

Die offizielle Frontend-Design-Fähigkeit von Anthropic hat zum Beispiel das folgende Beschreibungsfeld:

Beschreibungsfeld von "frontend-design.skill".

Translate to Chinese: Die Fähigkeit wird verwendet, um professionelle Front-End-Schnittstellen mit fortschrittlichem Design zu erstellen, die für Web-Komponenten, Seiten oder Anwendungsentwicklungsszenarien geeignet sind und kreativen und anspruchsvollen Code generieren, wobei der einheitliche AI-Stil vermieden wird.

Das Beschreibungsfeld bestimmt direkt die Umstände, unter denen Claude Code die Fertigkeit automatisch auslöst und auflädt. Wenn die Fertigkeit nicht deutlich oder genau genug geschrieben ist, kann sich der Agent möglicherweise nicht daran erinnern, sie bei Bedarf zu verwenden, selbst wenn sie mächtig ist.

Die wichtigsten Strategien und Vorlagen für das Verfassen einer guten Beschreibung, die auf bewährten Verfahren beruhen, sind die folgenden:

Grundprinzip: Auslöser ist die Gerechtigkeit

Die erste Aufgabe der Beschreibung besteht nicht darin, sie einem Menschen zu zeigen, sondern dem KI-Routing-Mechanismus. Zwei Fragen müssen klar beantwortet werden: Was macht diese Fähigkeit? In welchen Szenarien oder mit welchen Worten sollte der Benutzer sie verwenden?

“Die Formel der ”goldenen Struktur"

Qualitativ hochwertige Beschreibungen folgen in der Regel: [Ein-Satz-Kernfunktionalität] + [spezifische auszuführende Aktionen] + [klare Auslöseschlüsselwörter/Szenarien].

Hervorragendes Beispiel zum Schreiben:

Fall A: Fähigkeiten zur Codeüberprüfung

name: security-code-review
description: Reviews code for security vulnerabilities and best practices. Use when the user asks to "review code", "check for bugs", "analyze security", or mentions specific issues like SQL injection, XSS, or performance bottlenecks.

Fall B: PDF-Verarbeitungsfähigkeiten

name: pdf-processor
description: Extracts text, tables, and metadata from PDF files; merges or splits documents. Use when working with PDF files, converting PDFs to text, filling forms, or when the user uploads a PDF and asks for summary/extraction.

Das Geheimnis einer guten Beschreibung besteht darin, die Art und Weise zu simulieren, wie Nutzer Fragen stellen. Stellen Sie sich vor, wie Sie Anfragen an die KI stellen und schreiben Sie alle Schlüsselwörter für diese Anfragen in die Beschreibung.

Das Markdown-Format der Standard-SKILL.md sieht in etwa wie folgt aus:

---
name: 你的skill名称
description: 简要描述该技能的功能以及何时该使用它
---
# 你的技能名称
## 指令 (Instructions)
为 Claude Code 提供清晰、逐步的操作指南。
## 目标 (Goal)
## 示例 (Examples)
展示使用该技能的具体代码或操作案例。

Beispiel einer SKILL.md für die Erstellung einer Fertigkeit "PDF-Analyse":

---
name: pdf
description: 从PDF文档中提取和分析文本。当用户要求处理或阅读PDF时使用。
---
# PDF 处理技能：
1.使用本文件夹中的extract_text.py脚本提取PDF中的文本：
python3 extract_text.py <input_file>
2.提取后，请以结构化格式总结要点。

3. die drei Kernmechanismen von Skills

Die Kernarchitektur von Skills umfasst drei Mechanismen, die ineinander greifen.

Nehmen Sie als Beispiel die Einstellung SKILL.md für den Skill Remotion (spezialisiert auf die Erstellung von Videos):

---
name: remotion-best-practices
description: Best practices for Remotion - Video creation in React
metadata:tags: remotion, video, react, animation, composition
---
## When to use
Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
## Captions
When dealing with captions or subtitles, load the [./rules/subtitles.md](./rules/subtitles.md) file for more information.
## Using FFmpeg
For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [./rules/ffmpeg.md](./rules/ffmpeg.md) file for more information.
## Audio visualization
When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [./rules/audio-visualization.md](./rules/audio-visualization.md) file for more information.
## How to use
Read individual rule files for detailed explanations and code examples:

Der SKILL schränkt das Verhalten der KI durch drei Mechanismen ein:

Mechanismus 1: Smart Switch (YAML-Metadaten)

Am Anfang jeder Skill-Datei (der Bereich, der mit - umschlossen ist) befindet sich das Control Panel, das immer als Metadaten in die Claude Code System Tips geladen wird, wie ”Schalter” und ”Berechtigungskarten” für die Skills.

Mechanismus II: Umlageverfahren (progressive Offenlegung)

Herkömmliche KI hat ein ”Gedächtnis”-Problem: Wenn alle Entwicklungsspezifikationen auf einmal eingegeben werden, platzt das Kurzzeitgedächtnis (Kontextfenster), was zu Halluzinationen der KI führt.

Das clevere Design der Skills besteht darin, dass sie keinen Platz im Gehirn beanspruchen, sondern nur dann geladen werden, wenn sie benötigt werden. Die Nutzer legen Dutzende von Skills an, wie einen Werkzeugkasten in einem Bücherregal, und Claude Code blättert sie nicht durch, sondern lädt nur den entsprechenden ”Spickzettel” in das Gehirn, wenn eine bestimmte Fähigkeit ausgelöst wird.

Mechanismus III: Wirkungsorientierung und Subagenten

Skills lässt die KI nicht nur die Anweisungen lesen, sondern auch ”ausführen”. Unter der Anleitung von Skills kann Claude Code Befehlszeilen ausführen, Dateien durchsuchen, Tests durchführen und andere Operationen durchführen. Bei komplexen Aufgaben kann der Agent einen Subagenten aufrufen, der sich auf die Teilaufgaben spezialisiert und nach Abschluss der Aufgabe die Ergebnisse zurückmeldet.

Progressive Disclosure ist die wichtigste Design-Philosophie von Skills. Anstatt alles auf einmal zu laden, werden die Informationen von Skills in drei progressiven Ebenen präsentiert:

Ebene	Element	Zeitpunkt der Beladung	Token-Kontingent	entspricht Englisch -ity, -ism, -ization
erste Schicht	Metadaten (Name + Beschreibung)	Immer im Kontext	Etwa 100 Wörter	Bestimmen, wann eine Fähigkeit ausgelöst wird
zweite Schicht	SKILL.md Thema	Nachdem die Fähigkeit ausgelöst wurde	<5000 Wörter	Zentraler Arbeitsablauf
dritte Etage	Unterstützende Ressourcen (Skripte/Referenzen/Assets)	Last auf Abruf	unendlich	Detaillierte Referenz und ausführbarer Code

Die Vorteile dieses Konzepts liegen auf der Hand: Angenommen, ein Skill enthält Hunderte von Seiten technischer Dokumentation, so würde der Kontext schnell erschöpft sein, wenn bei jedem Gespräch alles geladen würde. Mit der progressiven Offenlegung lädt Claude Code die relevante Dokumentation nur dann, wenn sie benötigt wird, wie bei einem gut organisierten Handbuch, bei dem man nur die Kapitel liest, die man braucht.

4. der Unterschied zwischen Fähigkeiten und Prompt, MCP, Agent, Projekten

Nach dem Verständnis von Fertigkeiten muss klar sein, wie sie sich von anderen Konzepten unterscheiden:

Kurz gesagt: "Skills" ist das vorgefertigte Gericht, "Prompt" ist das fertige Gericht, "Project" sind die Zutaten und "MCP" ist das Logistik- und Mitnahmesystem. Bei Skills ist der Ansatz bereits voreingestellt, und der Nutzer muss nur noch den Namen des Gerichts angeben, und die KI kann es schnell und präzise ausführen und dabei Token-Kosten sparen.

In Claude Code enthält eine SKILL.md-Datei die folgenden Funktionen:

• Enthält eine detaillierte Aufforderung, die die KI über die Ziele, Methoden und erwarteten Ergebnisse informiert
• Spezifizieren Sie Tools und ausführbaren Code, den AI verwenden kann
• Command Agent muss eine strenge Reihenfolge einhalten, um sicherzustellen, dass er nicht vom Weg abkommt

5、Wie man Fähigkeiten sinnvoll einsetzt

Es gibt drei Hauptkanäle für den Erwerb von Qualitätsskills:

1) Offizielle Empfehlungen

Für Benutzer, die keinen Code schreiben wollen und eine sofort einsatzbereite Lösung suchen, ist dies die beste Einstiegsmöglichkeit.

GitHub verfügt über eine Reihe leistungsfähiger Basis-Skills, die von Anthropic-Beamten vordefiniert wurden, z. B. den xlsx-Skill für die Arbeit mit komplexen Daten und den pptx-Skill für das automatische Layout von Geschäftspräsentationen. Geben Sie einen Satz ein, und KI kann diese fortgeschrittenen Skills beherrschen.

Anthropic Fertigkeiten:
https://github.com/anthropics/skills

Offizielle Anthropische Fähigkeiten

Es wird dringend empfohlen, "Skill-creator" zu installieren, einen Skill-Creator mit über 80k Sternen auf GitHub, der es extrem einfach macht, jeden Skill zu erstellen.

Fertigkeitserzeuger:
https://github.com/anthropics/skills/tree/main/skills/skill-creator

Skill-creator.skill

Der Installationsbefehl ist einfach in Claude Code einzugeben:

Helfen Sie mir bei der Installation dieser Fertigkeit, die Adresse des Repository lautet:
https://github.com/anthropics/skills/tree/main/skills/skill-creator

skill-creator Installationsbefehle

2) Markt für Open-Source-Kompetenzen

Agent Skills ist ein offener Standard, zu dem Entwickler auf der ganzen Welt beitragen.

agentskills.io ist der ”App Store” oder ”npm Source” der KI-Ära, ein offiziell empfohlenes globales Kompetenzregister, das die Arbeit von Experten aus einer Vielzahl von Branchen durchsucht.

Die Open-Source-Schatzkammer GitHub ist eine Leidenschaft für Programmierer und kann direkt nach offiziellen Anthropics/Skills-Repositories oder von der Community gepflegten Listen von awesome-agent-skills durchsucht werden.

Das OpenSkills Open-Source-Repository auf GitHub ist plattformübergreifend kompatibel und erstellt automatisch Markdown-Dateien mit Projektregeln, um anderen KI-Agenten die Verwendung von Skills ”beizubringen”.

Adresse des OpenSkills-Projekts:
https://github.com/numman-ali/openskills

Es gibt auch Unternehmensplattformen, die sich mit Skills beschäftigen, wie skillsmp.com und skillsdirectory.com.

3) Erstellen Sie Ihr eigenes

Die besten Skills im Web werden oft intern geschrieben. Extern heruntergeladene Skills sind gut, aber sie sind gesunder Menschenverstand; was wirklich einen kommerziellen Graben bildet, sind Ihre eigenen ”unausgesprochenen Geschäftsgeheimnisse”:

• Unternehmensspezifische Namenskonventionen für Codes
• Private Domain-Sätze von Gold Medal Sales für die Beantwortung von Kundenrückerstattungen
• Das Fazit des Finanzministeriums zur Einhaltung der Rechnungsvorschriften bei der Bearbeitung komplexer Forderungen

6 Praktische Fertigkeiten: HTML-Infografik-Generator

Wenn Sie bei Ihrer täglichen Arbeit eine visuelle Infografik aus Text erstellen möchten, können Sie sich auf die folgenden Stichworte beziehen, um sie zu erstellen:

提炼下面文字内容的核心关键点，创建一个HTML网页。
文字内容：
{这里是一段文字}
网页的设计要求如下：
1.视觉设计：采用{Magazine Layout}风格布局，{深色}主题色，营造现代高端氛围。
2.字体与排版：
·使用超大字体或数字突出核心要点，中文采用大号粗体，强调视觉冲击力。
·英文使用小号字体作为点缀，与中文形成比例反差，提升设计层次感。
3视觉元素：
·融入超大视觉元素（如标题、背景图或装饰）以突出重点，与小型元素形成强烈对比。
·使用简洁的勾线风格图形作为数据可视化或配图元素，保持现代感和清晰度。
4.色彩与效果：运用高亮色（单色透明度渐变）营造科技感，每种高亮色独立使用，避免不同高亮色之间的渐变混杂。
5.技术要求：引入专业图标库（如Font Awesome或Material Icons，通过CDN加载），避免使用emoji作为主要图标。
6.内容要求：提炼内容关键要点，不忽略重要细节。

Anhand dieses Stichworts, mit dem die Modellinformationen geordnet werden, kann die KI eine visuelle Infografik erstellen:

Qwen3.6-Plus Modell Infografik

Es ist mühsam, die Eingabeaufforderung zu kopieren, auf die AI-Chat-Website zu gehen, um sie zu erstellen, sie herunterzuladen und jedes Mal einen Screenshot zu machen. Sie können eine Fertigkeit "HTML-Infografik-Generator" mit dieser Aufforderung erstellen und sie in Claude Code oder OpenClaw installieren. Wenn Sie sie in Zukunft brauchen, können Sie dem Agenten einfach sagen: "Rufen Sie die Fertigkeit HTML-Infografik-Generator auf, um xxx zu erstellen".

Benennen Sie zunächst die Fertigkeit, verwenden Sie Kleinbuchstaben und Standardgrammatik, z. B. "html-infographic-generator", und verbinden Sie die Wörter mit Bindestrichen.

Gemäß der oben beschriebenen Skills-Dateistrukturarchitektur benötigt der Infografik-Generator in der Regel nur die Datei SKILL.md, die bei Bedarf durch Gestaltungsrichtlinien im Ordner references und Beispiele im Ordner assets ergänzt werden kann:

html-infographic-generator/
├── SKILL.md                    # 入口文档（设计规范+操作流程）
├── references/
│   └── design-guide.md         # 详细设计指南

SKILL.md, das Markdown-Format, ist eine leichtgewichtige Auszeichnungssprache, die das reine Textformat zum Schreiben von Dokumenten verwendet und in HTML/PDF umgewandelt werden kann.

SKILL.md enthält normalerweise:

---
name: 你的skill名称
description: 简要描述该技能的功能以及何时该使用它
---
# 你的技能名称
## 指令 (Instructions)
为 Claude Code 提供清晰、逐步的操作指南。
## 目标 (Goal)
## 示例 (Examples)
展示使用该技能的具体代码或操作案例。

Der obere Bereich besteht aus YAML-Metadaten, die die Felder Name und Beschreibung enthalten, die die Visitenkarte des Agenten zur Identifizierung von Skills darstellen.

YAML-Metadaten für "html-infographic-generator":

---
name: html-infographic-generator
description: 从用户文字中提炼核心关键点，生成Magazine Layout风格的深色主题HTML信息图网页；当用户需要将文字内容可视化、创建信息图、生成数据展示页面或制作图文混排页面时使用。
---

YAML-Metadaten definieren die Funktionalität des HTML-Infografik-Generators: Dieser Skill wird geladen, wenn der Nutzer Inhalte visualisieren, eine Infografik erstellen, eine Datenpräsentationsseite generieren oder eine Grafik-Mashup-Seite erzeugen möchte.

Das Beschreibungsfeld ist der Schlüssel, um zu bestimmen, wann der Agent die Fertigkeit automatisch aufruft, und ist dafür gedacht, in imperativen Sätzen verwendet zu werden, bei denen die zweite Person weggelassen wird, z. B. ”Generiere HTML aus dem vom Benutzer hochgeladenen Text” und nicht ”Generiere HTML aus diesem Text für mich! ”. Die Wortzahl beträgt in der Regel weniger als 500 Wörter, einschließlich der Schlüsselwörter, die den Skill auslösen.

Nach dem Schreiben der YAML-Metadaten folgen die spezifischen Ausführungsanweisungen. Die vollständige SKILL.md für "html-infographic-generator.skill" lautet wie folgt:

# HTML信息图生成器
## 任务目标
- 本 Skill 用于：从用户提供的文字内容中提炼核心关键点，生成视觉冲击力强的HTML信息图网页
- 能力包含：文本关键点提炼、信息架构设计、HTML/CSS代码生成、视觉设计实现
- 触发条件：用户发送文字内容并希望生成可视化信息图、数据展示页面、图文混排网页
## 设计规范
### 1. 视觉设计
- **布局风格**：采用Magazine Layout（杂志排版）风格，强调网格系统、留白对比、视觉层次
- **主题色调**：深色主题，背景色使用 `#0a0a0a` 或 `#1a1a1a`，营造现代高端氛围
- **视觉层次**：通过大小、粗细、位置、色彩对比建立清晰的信息层级
### 2. 字体与排版
- **中文文本**：使用大号粗体（60-120px），突出核心要点，强调视觉冲击力
  - 标题字体：`font-weight: 700-900`
  - 推荐字体：Noto Sans SC、Source Han Sans（通过Google Fonts加载）
- **英文文本**：使用小号字体（12-16px）作为点缀，与中文形成比例反差
  - 字体选择：Roboto、Inter、SF Pro Display
  - 用途：副标题、注释、装饰性文字
- **行高与间距**：
  - 标题行高：1.1-1.3
  - 正文行高：1.6-1.8
  - 段落间距：使用em或rem单位保持比例一致性
### 3. 视觉元素
- **超大视觉元素**：融入超大标题、背景图或装饰元素以突出重点
  - 标题字号可达120-200px
  - 背景图使用低透明度（10-30%）避免干扰文字
- **对比原则**：超大元素与小型元素形成强烈对比
- **图形风格**：使用简洁的勾线风格图形作为数据可视化或配图元素
  - 可使用CSS绘制几何图形（圆、线、矩形）
  - SVG图标保持线条简洁（stroke-width: 1.5-2px）
### 4. 色彩与效果
- **基础色板**：
  - 背景：`#0a0a0a`、`#1a1a1a`
  - 主文字：`#ffffff`、`#f0f0f0`
  - 次要文字：`#888888`、`#666666`
- **高亮色方案**（单色透明度渐变）：
  - 青色系：`rgba(0, 255, 255, 0.8)` → `rgba(0, 255, 255, 0.1)`
  - 洋红系：`rgba(255, 0, 255, 0.8)` → `rgba(255, 0, 255, 0.1)`
  - 金色系：`rgba(255, 215, 0, 0.8)` → `rgba(255, 215, 0, 0.1)`
  - 绿色系：`rgba(0, 255, 128, 0.8)` → `rgba(0, 255, 128, 0.1)`
- **渐变规则**：每种高亮色独立使用，避免不同高亮色之间的渐变混杂
- **科技感营造**：使用透明度渐变、发光效果（box-shadow）、渐变边框
### 5. 技术要求
- **图标库**：引入Font Awesome或Material Icons（通过CDN加载）
```html
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

• Schriftart-Bibliothek: Einführung von Google Fonts

  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700;900&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
  

• Emoji verbietenVermeiden Sie die Verwendung von Emoji als Hauptsymbol, verwenden Sie einheitlich eine professionelle Symbolbibliothek.

6. inhaltliche Anforderungen

• Eckpunkte Verfeinerung：
  • Identifizierung von Kernthemen, Schlüsseldaten und wichtigen Erkenntnissen
  • Behalten Sie wichtige Details bei und lassen Sie keine Schlüsselinformationen aus.
  • Rationale Gruppierung, um eine Hierarchie der Informationen zu schaffen
• Informationsarchitektur：
  • Haupttitel: Die zentralste Botschaft
  • Untertitel: Zusätzliche Klarstellung oder Anleitung
  • Hauptteile: Ausarbeitung
  • Daten/Listen: strukturierte Darstellung

Verfahren

Schritt 1: Textanalyse und Extraktion der wichtigsten Punkte

• Vom Benutzer eingegebenen Textinhalt lesen
• Identifizierung von Kernthemen, Schlüsseldaten und wichtigen Erkenntnissen
• Verfeinerung von 3-8 Kernpunkten
• Priorisierung und Hierarchisierung von Informationen

Schritt 2: Entwurf der Informationsarchitektur

• Bestimmen Sie den Inhalt der Hauptrubriken (die wichtigsten Informationen)
• Planung von Zwischenüberschriften und Textabschnitten
• Darstellung von Daten (Abbildungen, Listen, Diagramme)
• Festlegung des Layouts der visuellen Elemente (Kopfzeilenpositionen, dekorative Elemente, Weißraumbereiche)

Schritt 3: HTML-Code-Generierung

• Einführung von wichtigen Ressourcen (Font Awesome, Google Fonts)
• Schreiben Sie die HTML-Struktur:

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>信息图</title>
  <!-- 引入资源 -->
  </head>
  <body>
  <!-- 内容结构 -->
  </body>
  </html>
  

• CSS-Stile schreiben:
  • Grundlegende Stile (Reset, Schriftart, Farbvariablen)
  • Layout-Stile (Rastersystem, Container, Abstände)
  • Komponentenstile (Überschriften, Absätze, Karten, Icons)
  • Effektstile (Farbverläufe, Schatten, Animationen)

Schritt 4: Outputs und Lieferung

• Generierung vollständiger HTML-Dateien (mit Inline-CSS)
• Sicherstellen, dass der Code gut formatiert und klar kommentiert ist
• Speichern einer Datei im Arbeitsverzeichnis des Benutzers mit dem Dienstprogramm write_file

Ressourcen-Index

Gestaltungsrichtlinien

• Detaillierte Entwurfsspezifikationen: siehe references/design-guide.md
• Enthält: Hinweise zum Magazin-Layout, Farbschemata, Layout-Vorlagen, bewährte Verfahren

HTML-Vorlagen

• Basisvorlage: siehe assets/template.html
• Dazu gehören: Infrastruktur, Einführung in die Ressourcen, Beispielstile, gemeinsame Komponenten

caveat

Gestaltungsprinzipien

• Visuelle Auswirkungen haben VorrangVisuelle Schwerpunkte mit übergroßen Schriftarten, starken Kontrasten und leuchtenden Farben setzen
• Weißer Raum ist das DesignWeißer Raum für ein Gefühl von Atmungsaktivität und Raffinesse
• Zurückhaltung bei der Verwendung von Farben: dunkler Hintergrund + eine hervorgehobene Farbe, um ein Farbchaos zu vermeiden
• Mobile AnpassungResponsive Design, um die Lesbarkeit auf verschiedenen Geräten zu gewährleisten

Technische Realisierung

• Alle Stile sind in die HTML-Datei eingebettet, so dass die Datei als eigenständige Datei ausgeführt werden kann.
• Verwendung von CSS-Variablen zur Verwaltung von Farben und Abständen für eine einfache Wartung
• Vorrangige Verwendung von CSS für visuelle Effekte und geringere Abhängigkeit von externen Bildern
• Sicherstellen, dass der Code klar strukturiert und gut kommentiert ist

Behandlung von Inhalten

• Lassen Sie keine wichtigen Details aus, aber vermeiden Sie eine Überfrachtung mit Informationen
• Verwenden Sie eine visuelle Hierarchie, um die Lesereihenfolge festzulegen.
• Vorrangig werden datenbasierte Inhalte in Form von Abbildungen + Icons + Kurzbeschreibungen verwendet.

Anwendungsbeispiel

Beispiel 1: Anzeige von Produktdaten

EinfuhrBenutzer senden eine Textbeschreibung der jährlichen Verkaufsdaten eines Produkts.
behandeln：

1. Verfeinerung der Kerndaten: Gesamtumsatz, Wachstumsrate, Marktanteil usw.
2. Gestaltung der Informationsarchitektur: Hauptrubriken (Kerndaten) + Datenkarten (detaillierte Indikatoren)
3. HTML generieren: übergroße Digitalanzeigen, Hintergründe mit Farbverläufen, Symboldekorationen verwenden
   Ausfuhren: Vollständige HTML-Infografik-Datei

Beispiel 2: Zusammenfassung der wichtigsten Wissenspunkte

EinfuhrBenutzer senden Wissensinhalte oder Artikel zu einem bestimmten Thema
behandeln：

1. Verfeinerung von 3-5 zentralen Wissenspunkten
2. Entwurf der Informationsarchitektur: Hauptüberschriften + Aufzählungslisten + zusätzliche Notizen
3. HTML generieren: nummerierte Listen, Icon-Tags, Kartenlayouts verwenden
   Ausfuhren: Infografik zu strukturiertem HTML

Beispiel 3: Ereignis-Zeitleiste

EinfuhrDer Benutzer sendet eine Beschreibung der Entwicklung eines Ereignisses
behandeln：

1. Verfeinerung der wichtigsten Zeitpunkte und Ereignisse
2. Gestaltung der Informationsarchitektur: Timeline-Layout + Ereigniskarten
3. HTML generieren: vertikale/horizontale Zeitleiste, Knotenauszeichnung, Gradienteneffekte verwenden
   AusfuhrenHTML-Infografik im Zeitleistenstil

SKILL.md包含任务目标、设计规范、操作步骤、资源索引、注意事项和使用示例，详细规定skill的工作流程和输出标准，全程使用Markdown格式编写。
为帮助Agent更好理解该skill，还创建了references参考文件夹，包含design-guide.md设计指南：

HTML-Infografische Gestaltungsrichtlinien

 

Verzeichnis (auf der Festplatte des Computers)

 

1. 1. Magazin-Layout-Stilhinweise

 

1. 1. Dunkles Farbschema des Themas

 

1. 1. Bewährte Praktiken für die Typografie von Schriften

 

1. 1. Gestaltungsprinzipien für visuelle Elemente

 

1. 1. Gemeinsame Layout-Vorlagen

 

 

 

Magazin-Layout-Stilhinweise

 

Wesentliche Merkmale

Der Magazin-Layout-Stil orientiert sich an der visuellen Gestaltung traditioneller Zeitschriften und betont diese:

• • RastersystemLayout: Spaltenbasiertes Layout zur Schaffung einer geordneten visuellen Struktur

 

• • eine leere Seite zum Vergleich lassenViel weißer Raum, um den Inhalt hervorzuheben und einen hochwertigen Eindruck zu vermitteln

 

• • visuelle HierarchieKlare Priorisierung der Informationen durch Größe, Dicke und Position

 

• • Grafiken und Text mischenOrganische Kombination von Text und visuellen Elementen für eine verbesserte Präsentation

 

 

Designpunkt

 

1. das Gittersystem

 

/* 基础网格布局 */
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
max-width: 1400px;
margin: 0 auto;
padding: 40px;
}
/* 内容区域 */
.content-wide {
grid-column: span 12;  /* 全宽 */
}
.content-main {
grid-column: span 8;   /* 主内容 */
}
.content-side {
grid-column: span 4;   /* 侧边栏 */
}

2. die Verwendung von Leerraum

• Seitenränder: 40-80px
• Elementabstände: 24-48px
• Abstand zwischen den Absätzen: 1,5-2em
• Abstand zwischen den Listenelementen: 12-20px

3. visuelle Hierarchie

Level 1: 超大标题 (120-200px) - 最核心信息
Level 2: 大标题 (48-72px) - 重要章节
Level 3: 中标题 (24-36px) - 段落标题
Level 4: 正文 (16-18px) - 详细内容
Level 5: 辅助文字 (12-14px) - 注释、说明

design-guide.md ist zu lang, Details ausgelassen.

Dieses Dokument enthält Details zu Designstilen, Designpunkten, Seitenlayoutvorlagen und Design-Checklisten und ist ein kommentiertes Dokument für die SKILL, um dem Agenten zu helfen, die Kompetenzaufgabe zu verstehen.

Der gesamte Skill besteht aus einer 2-Schichten-Struktur und 2 Dateien: html-infographic-generator.skill kann jeden beliebigen Text in ästhetisch hochwertige Infografiken umwandeln. Der Agent fasst den Text zusammen und verfeinert ihn selbst, um eine HTML-Infografik zu erstellen, die für Produkteinführungen, Werbeprogramme, neue Medien und andere visuelle Inhalte geeignet ist.

Diese Fertigkeit wurde kostenlos im Buckle Skill Store veröffentlicht. Suchen Sie nach dem Stichwort "HTML Infographic Generator", um sie zu finden und zu verwenden.

Im Knopfladen angerufen

Geschicklichkeitsadresse:
https://www.coze.cn/?skill_share_pid=7614920172729843731

7 Installation von öffentlichen Skills

Sie können nicht nur Ihre eigenen Skills erstellen, sondern auch öffentlich verfügbare Skills installieren.

Skills werden normalerweise auf GitHub gehostet, wo die Open-Source-Skills von Anthropic an einem einheitlichen Ort gespeichert sind.

Anthropics Open-Source-Fähigkeit

Adresse des Lagers:
https://github.com/anthropics/skills/tree/main/skills

Es gibt auch einige spezialisierte SKILL-Märkte:

https://www.skillhub.club
https://agentskills.io
https://skillsmp.com
https://www.skillsdirectory.com
https://skillhub.tencent.com

Die Installation der Fertigkeit ist einfach, geben Sie sie in Claude Code oder OpenClaw ein:

Helfen Sie mir bei der Installation dieser Fertigkeit, die Adresse des Repository lautet:
https://github.com/anthropics/skills/tree/main/skills/skill-creator

"Skill-creator" ist ein spezieller Skill-Creator mit mehr als 80k Sternen auf GitHub, mit dem es extrem einfach ist, einen Skill zu erstellen, indem man einfach etwas eingibt:

Benutze die Schöpferfähigkeit, um mir zu helfen, ein Wort zu PPT SKILL zu erstellen.

Der Agent entwirft automatisch das Gerüst SKILL.md und führt das Skript aus, um die Erstellung der Fertigkeit abzuschließen.

8. bewährte Praktiken für die Erstellung und den Einsatz von Fertigkeiten

Gemäß der offiziellen Anthropic-Dokumentation und den Praktiken der Gemeinschaft umfasst die Erstellung und Anwendung einer Fertigkeit in der Regel vier Phasen:

Phase 1: Festlegung von Bedürfnissen und Grenzen

Beantworten Sie drei Fragen, bevor Sie sich die Hände schmutzig machen:

1) Welches spezifische Problem soll mit dieser Fertigkeit gelöst werden? Das Prinzip ist ”single duty”, jede Fähigkeit konzentriert sich auf nur eine Kompetenz. PDF verarbeiten” ist zu weit gefasst, ”Tabellen aus PDF extrahieren und in CSV konvertieren” ist eine gute Definition.

2) Welches Schlüsselwort/Szenario war der Auslöser? Dies bestimmt, wie das Beschreibungsfeld geschrieben wird. Schreiben Sie statt ”Hilfe bei Dokumenten” lieber ”Zur Extraktion von Text und Formularen aus PDFs, wenn sich der Benutzer auf PDFs, Formulare oder Dokumentenextraktion bezieht”.

3) Welche Ressourcen werden benötigt? Skripte, Vorlagen, Referenzdokumente oder Beispieldaten? Organisieren Sie diese im Voraus und legen Sie sie in das entsprechende Unterverzeichnis des Kompetenzordners.

Stufe 2: Erstellen des Kompetenzordners

Die Dateistruktur wird nach der Ermittlung der Anforderungen erstellt und es können drei Speicherorte ausgewählt werden:

Typologie	Pfade	Verwendungsszenarien
Persönliche Fähigkeiten	~/.claude/skills/	Persönliche Workflow-Optimierung, experimentelle Funktionen
Projekt-Fähigkeit	.claude/skills/	Teamarbeit, projektspezifisches Wissen
Plugin-Fähigkeit	Einbau über Stecksystem	Projektübergreifender Austausch, öffentliche Freigabe

Aufbau der Kerndatei SKILL.md:

---

name: your-skill-name
description: 清晰描述Skill的功能和触发场景，最多1024字符。
allowed-tools: Read, Grep  # 可选：白名单工具列表
--------------------------------------------------
# Skill标题
## 功能说明
为Claude提供清晰的分步操作指导
## 使用示例
展示具体应用场景和方法
## 注意事项
边界条件、常见陷阱等

Namenskonventionen: Das Namensfeld darf nur Kleinbuchstaben, Zahlen und Bindestriche enthalten und nicht länger als 64 Zeichen sein. Der Ordnername muss mit Name konsistent sein.

Phase III: Schreiben von Kernanweisungen

Die Erfahrung des internen Anthropic-Teams hat gezeigt, dass der wertvollste Inhalt der Abschnitt ”Häufige Fallstricke” ist, in dem die Fehlermöglichkeiten der Agenten gesammelt werden, damit diejenigen, die nach ihnen kommen, direkt durch die Fallstricke navigieren können.

Die Datei SKILL.md ist in der Regel von hoher Qualität:

1) Klare Abgrenzung der Zuständigkeiten: Sagen Sie dem Agenten, was er tun kann und was er auf keinen Fall tun darf. Der SQL-Analyse-Skill sollte ausdrücklich darauf beschränkt sein, nur SELECT-Abfragen auszuführen und gefährliche Operationen wie DROP, DELETE usw. zu verbieten.

2) Spezifische Schritte: Verwenden Sie nummerierte Listen anstelle von Absätzen. Der Agent folgt strukturierten Inhalten viel besser als erzählenden Texten.

3) Eingabe- und Ausgabespezifikation: Es werden Beispielformate und erwartete Ausgaben angegeben, wodurch die Zufälligkeit der Ergebnisse deutlich verringert wird.

(4) Harte Einschränkungen: Verwendung von absoluten Wörtern wie ”muss”, ”verboten”, ”immer”, usw.. Es wurde festgestellt, dass ein Skill mit mindestens 3 expliziten Constraints und 1 Output-Beispiel die Stabilität der Ergebnisse um 60% verbessern kann.

Phase 4: Testen, Fehlersuche und Iteration

Überprüfen Sie nach Abschluss der Erstellung wie aufgeführt:

• Pfadprüfung: Stellen Sie sicher, dass sich SKILL.md im richtigen Verzeichnis befindet (.claude/skills//)
• YAML-Prüfsumme: Sicherstellung der korrekten Formatierung der Metadaten, - fehlerfreies Wrapping
• Trigger-Test: Stellen Sie eine Frage in natürlicher Sprache und beobachten Sie, ob der Agent die Fähigkeit erkennt und anfordert.
• Validierung durchführen: prüfen, ob die Ausgabe dem erwarteten Format und Inhalt entspricht

Wenn der SKILL nicht ausgelöst wird, ist 90% ein Fall, in dem die Beschreibung nicht spezifisch genug geschrieben wurde. Sie können claude -debug ausführen, um das detaillierte Ladeprotokoll bei der Fehlersuche zu sehen.

Wichtiger als das ”Verstehen” ist das "Tun". Versuchen Sie, Ihre erste .skill zu schreiben, so dass sich wiederholende Aufgaben, vertraute Prozesse und Ihre eigenen Erfahrungen zu wiederverwendbaren Fähigkeiten werden.

In dem Moment, in dem ein SKILL erstellt wird, wird ein Großteil des Verständnisses über Agenten und Skills klar.