OpenDesign

Web画面のコードをVercelのガイドラインに照らして点検し、レイアウト・文字・色・動き・アクセシビリティの指摘を、ファイル名と行番号で示します。

• プロダクトのUIコードを点検したいとき
• ガイドラインで利用しやすさを確認したいとき
• 配置・文字・色・動きを点検したいとき

現代美術の国際展や展覧会の企画を、黄色と温かな紙色のHTMLスライドに整理します。企画の主題、展示室、作品、来場者の動線を伝える資料作りに使えます。

• 理事会向けに国際展の企画を提案したいとき
• 展示室の構成と来場者の動線の説明
• 文化施設のプログラム発表

OpenDesignの内部構造を題材に、技術発表用のHTMLスライドを作成。構成や根拠、発表者ノートを整理し、エンジニア向けの説明資料に仕上げるスキル。

• OpenDesignの内部構造の技術解説
• 開発者コミュニティ向けの発表準備
• 根拠に基づくAI実装の説明資料作成

Venice.aiのAPIを使い、画像の編集・拡大・背景除去をエージェントに依頼するためのスキル。既存画像の修正や、用途に合わせた画像素材の調整に使えます。

• 既存の画像を編集したいとき
• 画像を拡大したいとき
• 画像の背景を除去したいとき

OpenDesignのライブデモを題材に、発表者ノートやアニメーションを備えたHTMLスライドを作るスキル。構成から説明内容、見た目まで整えます。

• 開発者向けのライブデモ準備
• 見込み顧客へのAI作業手順の説明
• 発表者ノート付きHTML資料の作成

スター数、インストール数、利用開始などの週次指標を、変化の要因と次の施策につなげ、成長施策や製品の検討会で意思決定に使うHTMLスライドにまとめます。

• 週次の成長レビュー資料を作りたいとき
• KPIの変化と要因を議論したいとき
• 製品の次の施策を提案したいとき

ガイドやAPIリファレンスの画面を、ナビゲーション・本文・目次の3列で設計し、コード例や表も含む単一のHTMLページとして試作するスキル。

• APIリファレンスを試作したいとき
• コード例付きのチュートリアル作成
• 目次付きガイドの画面設計

システム障害の原因、修正、再発防止策をHTMLスライドに整理します。技術者や経営層が次の対応を検討できるよう、専用テンプレートで発表用の構成を整えます。

• システム障害の振り返り発表
• 不具合の原因と修正を説明したいとき
• 仕組み全体の改善策の検討

プロジェクト報告や障害レビュー向けに、暗いCRT端末風の16:9 HTMLスライドを制作。等幅文字、赤い警告表示、時系列や監査ログで情報を整理します。

• プロジェクトの振り返り報告
• インフラ障害の経過報告
• セキュリティレビューの整理

企業のAI導入を検討するためのHTMLスライドを、暗紫色のグラデーションを使って作ります。経営層やIT・セキュリティ担当者に向け、リスク管理や投資対効果、展開計画を整理します。

• 経営層へAI導入案を説明したいとき
• IT部門とリスク管理を検討
• 投資対効果と展開計画の整理

投資家向けの資金調達ピッチをHTMLスライドで作成。事業の魅力、実績、競争優位、調達内容を整理し、発表者ノートを備えた資料に仕上げます。

• Demo Dayの資金調達資料作成
• 投資家への実績と競争優位の説明
• 発表者ノート付きHTML資料の制作

OpenDesignへのスキル・デザインシステムの提供、文書の翻訳や修正、不具合報告を支援します。内容の検証から変更提案や報告の作成まで案内します。

• 作成済みスキルやデザインシステムの提供
• 文書の翻訳を追加・更新したいとき
• 誤字・リンクの修正や事例記事の執筆

患者情報をもとに、回診・カンファレンス・記録向けの症例報告を構成し、病歴や検査結果、鑑別診断、問題別の対応計画を印刷向けHTMLにまとめるスキル。

• カンファレンスの症例発表準備
• 回診や引き継ぎの経過を要約したいとき
• 所見をSOAP形式に整理したいとき

WordPressの公式デザインに沿ってテーマやサイトの見た目を整えるスキル。色や文字組みなどの共通設定と、画面部品のパターンを適用します。

• テーマにWordPress公式のスタイルを適用
• サイトの文字組みを整えたいとき
• 公式の画面部品パターンを使いたいとき

新入社員の受け入れ計画を1ページのHTMLにまとめます。初日と初週の予定、上司や相談役、30・60・90日後の目標、必要な資料と完了条件を一覧に整理します。

• 新入社員の初週を準備したいとき
• 30・60・90日後の目標設定
• 上司・相談役・参照資料の共有

Venice.ai APIによる画像生成と、利用可能なスタイルを扱うスキルです。エージェントに画像生成を依頼する際に、生成機能やスタイルの確認に使えます。

• Venice.ai APIで画像を生成したいとき
• 利用可能な画像スタイルの確認
• エージェントと画像生成を計画したいとき

YouTubeなどのプラットフォームから動画をダウンロードし、形式や画質を選びながら、オフラインでの視聴、動画編集、アーカイブ用の保存に使います。

• オフライン視聴用の動画保存
• 編集用の動画ダウンロード
• 動画のアーカイブ保存

文章やデータを、Hyperframes / Remotion向けの連続フレームアニメーションにまとめます。自動再生や手動操作、描画用のメタデータを備えます。

• 短い台本をアニメーションにしたいとき
• データを場面ごとに説明したいとき
• Remotion用の描画素材の準備

既存サイトのソースやブラウザ上の動作を調べ、見た目と操作をローカルで再現する手順を提供。素材収集から実装、元サイトとの比較検証、内容の差し替えまで進めます。

• 既存サイトをローカルで再現して学びたいとき
• WebGLやCanvasの演出を調べたいとき
• 再現したサイトと元サイトを比較したいとき

動画の冒頭で使う短い言葉を、一文字ずつ現れる光の演出付きHTMLにします。光るカーソルや色ずれ、光線を組み合わせ、引用元や章名も添えられます。

• 引用文で動画を始めたいとき
• 光る文字で章の導入画面を作る
• 冒頭の言葉に引用元を添える

Venice.ai APIを使った動画生成と文字起こしの作業を案内するスキル。完全な手順の実行には、提供元のスクリプトや参照資料を含む一式を別途導入します。

• Venice.ai APIでの動画生成
• Venice.aiで文字起こししたいとき
• エージェントの動画作業の計画

趣味の収集体験やゲームの話題を、濃紺とネオンのピクセルアート調で伝えるHTMLスライドにまとめ、友人や趣味仲間に見せる物語として整えるスキル。

• レトロなアーケード機の収集記録紹介
• 友人に趣味の歩みを伝えたいとき
• ゲーム仲間向けの発表資料作成

HTMLのページやスライドを五つの観点で根拠付き採点し、レーダーチャートと、残す点・修正点・短時間で直せる点を一つのHTMLレポートにまとめます。

• 納品前のLPのデザイン確認
• HTMLスライドの視認性と操作確認
• 二つのデザイン案の比較

メンバー一覧や活動履歴、役割別グラフを備えたチーム管理画面を作るスキル。タブ切替や明暗表示、CSV出力が動く単一HTMLの試作を作成します。

• チーム管理画面を試作したいとき
• 役割の構成やオンライン状況の説明
• メンバー情報や活動をタブで確認