Communityコーディング&開発github.com

zhouwei713/article-visual-director

記事のビジュアル、小紅書(Xiaohongshu)のカルーセル、HTMLファーストのチュートリアルカードを計画・制作するためのCodexスキル

article-visual-director とは?

このスキルは、Codex(例:Cursor、Codex CLI)上で動作し、記事のビジュアル、小紅書のカルーセル投稿、HTMLベースのチュートリアルカードを計画・制作するためのものです。デベロッパーやAIエージェントユーザーが、ビジュアルコンテンツのアイデア出しから実際のコード生成までを効率的に行えるよう支援します。主な特徴は、HTMLとCSSを活用したレスポンシブでモダンなデザインを自動生成することにあり、画像編集ツールに依存せずに、ブラウザでそのまま利用できるビジュアルを作成できます。小紅書のカルーセル形式(スライドショー)や、ステップバイステップのチュートリアルカードなど、特定のプラットフォームに最適化された出力が可能で、マークダウン記法による簡単な設定で利用できます。このスキールは、コンテンツマーケティングや教育資料作成のワークフローを大幅に効率化し、開発者がデザインとコードの両方の側面を統合的に扱えるように設計されています。

対応~Claude Code✓Codex CLI~Cursor
npx skills add zhouwei713/article-visual-director

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

article-visual-director は何をしますか?

Codexスキル:記事ビジュアル、小紅書(Xiaohongshu)カルーセル、HTMLファーストのチュートリアルカードの計画と制作

概要

このスキルは、Codex対応のAIエージェント(Cursor、Codex CLIなど)上で動作し、以下のビジュアルコンテンツを計画・生成します:

  • 記事ビジュアル:ブログ記事やSNS投稿用のアイキャッチ画像や図解
  • 小紅書カルーセル:スライド形式の投稿(複数ページのカルーセル)
  • HTMLファーストのチュートリアルカード:ブラウザでそのまま表示・操作可能なチュートリアルカード

使い方

  1. スキルを有効にした状態で、Codexエージェントにビジュアルのテーマや内容を指示します。
  2. エージェントがHTML、CSS、JavaScriptを生成し、ブラウザでプレビュー可能な形で出力します。
  3. 必要に応じて、カルーセルのページ数やレイアウトを調整できます。

設定例

> スキル:article-visual-director
> テーマ:AIツールの比較
> 形式:小紅書カルーセル(3ページ)
> カラーテーマ:ブルー系

対応プラットフォーム

  • Cursor
  • Codex CLI
  • Claude Code(一部互換)

注意事項

  • 生成されるHTMLは、外部依存のないスタンドアロンファイルです。
  • 小紅書カルーセルは、各ページが個別の<div>または<section>として出力されます。
  • デザインのカスタマイズは、CSS変数やインラインスタイルで行えます。

関連スキル