Verwendung von OpenCode skills | Runoob Tutorial
Im vorherigen Inhalt haben wir OpenCode und Skills kennengelernt. Wenn du sie noch nicht gelesen hast, kannst du hier nachsehen:
Als Nächstes stellen wir vor, wie man Skills in OpenCode verwendet.
Es gibt bereits viele fertige Skills auf dem Markt, und wir können sie direkt verwenden. Wir könnenhttps://skills.sh/weitere Skills finden.
Installationsmethode:
npx skills add <owner/repo>
Hinweis:Wenn Sie mit npx nicht vertraut sind, können Sie Folgendes zu Rate ziehen:npx Erste-Schritte-Tutorial
ui-ux-pro-max
Als Nächstes verwenden wir den Skill ui-ux-pro-max zur Demonstration, Adresse:https://skills.sh/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max。
UI/UX Pro Max ist ein KI-Design-Skill (AI Skill), das strukturiertes Designwissen und automatisierte Unterstützung für den Aufbau professioneller Benutzeroberflächen (UI) und Benutzererfahrungen (UX) bietet. Es wird hauptsächlich für die Integration mit KI-Coding-Assistenten (wie Claude Code, Cursor, Windsurf usw.) verwendet.
UI/UX Pro Max enthält eine durchsuchbare Design-Datenbank, die auf Basis natürlichsprachlicher Eingabeaufforderungen intelligent Schnittstellenstile, Farbschemata, Typografie und Methoden zur Komponentenimplementierung empfehlen kann.
Installationsbefehl:
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
Während des Installationsprozesses kannst du die Umgebung prüfen, die wir benötigen, z. B. OpenCode:
Als Nächstes wähle hier das aktuelle Verzeichnis aus, also das, das wir zuvor erstellt habenopencode-example-test, eine weitere OptionGlobalist die globale Installation:
Als Nächstes einfach die ganze Zeit Enter drücken.
VerwendungopencodeVerwenden Sie den Befehl, um OpenCode zu öffnen, und geben Sie/uiein, dann können Sie den installierten Skill sehen:
Als Nächstes können wir die Anforderung direkt eingeben:
Build a landing page for pet grooming services, with a lively and friendly style, and set up appointment-type call-to-action buttons.
Die KI ruft automatisch den installierten Skill zum Entwerfen auf, drücken Sie einfach die ganze Zeit Enter:
Als Nächstes werden automatisch Verzeichnisse und Dateien generiert:
Sehen Sie sich dann das Endergebnis an, es sieht viel besser aus:
remotion-best-practices
Verwenden Sie als Nächstes den Skill remotion-best-practices zur Demonstration.
- Opencode: ein Tool, das dafür verantwortlich ist, KI Coding-Workflows automatisieren zu lassen
- remotion-best-practices: ein Skill, der dafür verantwortlich ist, direkt Videos mit React zu generieren
remotion-best-practices ist ein spezialisierter Skill für Remotion, der Dutzende Regeldateien enthält (basierend auf offiziellen Best Practices), wie zum Beispiel:
- 3D-Inhalte
- Grundlagen der Animation
- Medienimport (Bilder, Audio, Schriftarten)
- Untertitel und Untertitel-Synchronisierung
- Sequenz- und Szenenorganisation
- Transparentes Video und Bearbeitung
- Textanimation & Interpolationsmethoden …
Skill-Adresse:https://skills.sh/remotion-dev/skills/remotion-best-practices
Installation und Nutzung
Bevor wir beginnen, lass uns ein Verzeichnis erstellenopencode-example-test:
mkdir opencode-example-test cd opencode-example-test
Im Verzeichnis opencode-example-test können wir den npx-Befehl verwenden, um zu installieren:
npx skills add remotion-dev/skills
Während des Installationsprozesses kannst du die Umgebung prüfen, die wir benötigen, z. B. OpenCode:
Als Nächstes wähle hier das aktuelle Verzeichnis aus, also das, das wir zuvor erstellt habenopencode-example-test, eine weitere OptionGlobalist die globale Installation:
Als Nächstes drücke einfach durchgehend Enter; danach werden das Installationsverzeichnis und die unterstützten Entwicklungstools angezeigt:
Wir können auch OpenCode öffnen und/remotioneingeben, und du kannst diesen Skill sehen:
Gib dann in das Eingabefeld ein:
生成一个 Hello Example！的演示视频
Als Nächstes wird die KI diesen Skill finden:
Dann wird die KI diese Skill verwenden, um mit dem Entwerfen und Schreiben zu beginnen:
