Communitygithub.com

ytisvibecoding/html-visual-editor

Verwandle jedes statische HTML in eine visuell bearbeitbare Seite — integrierte Textbearbeitung, Farb-/Schrift-/Layout-Panels, vorgefertigte Themes und Export mit einem Klick.

Was ist html-visual-editor?

Diese Fähigkeit (Skill) ermöglicht es, jedes statische HTML-Dokument in eine interaktive, visuell bearbeitbare Seite umzuwandeln. Entwickler und Agenten können Text durch Inline-Klick bearbeiten sowie Farben, Schriftarten und Layouts über spezielle Bedienfelder anpassen. Es enthält mehrere vorgefertigte Themes für schnelle Stiländerungen und bietet eine Exportfunktion, um die bearbeitete Version mit einem Klick als eigenständige HTML-Datei zu speichern. Die Fähigkeit ist besonders nützlich für Rapid Prototyping, Content-Management-Aufgaben und Live-Demo-Erstellungen direkt im Browser.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add ytisvibecoding/html-visual-editor
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht html-visual-editor?

Verwandle jedes statische HTML in eine visuell bearbeitbare Seite — integrierte Textbearbeitung, Farb-/Schrift-/Layout-Panels, vorgefertigte Themes und Export mit einem Klick.

Funktionen

  • Inline-Textbearbeitung: Klicke auf beliebigen Text, um ihn direkt zu bearbeiten.
  • Farb-/Schrift-/Layout-Anpassung: Verwende die seitlichen Panels, um Stile zu ändern.
  • Vorgefertigte Themes: Wähle aus mehreren bereitgestellten Designvarianten.
  • 1-Klick-Export: Exportiere die bearbeitete Seite als vollständige HTML-Datei.

Verwendung

Führe den Skill auf einem beliebigen statischen HTML-Inhalt aus. Der Skill erstellt eine interaktive Vorschau, in der Änderungen sofort sichtbar sind.

<!-- Beispiel-HTML wird hier eingefügt -->

Nach der Bearbeitung exportierst du das Ergebnis über den Export-Button.

Plattform

Dieser Skill funktioniert in Browser-basierten KI-Agenten wie Claude Code oder ähnlichen Umgebungen, die HTML-Rendering unterstützen.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community