OpenDesign

複雑で判断を誤る影響が大きい課題を、前提の確認から調査、多角的な分析、実行後の検証まで段階的に進め、根拠やリスクを整理して提案するスキル。

• システム構成案を比較したいとき
• 複数システムの変更計画
• 曖昧な依頼の前提を見直したいとき

画面構成を検討するための手描き風ワイヤーフレームをHTMLで作ります。方眼紙、付箋、ラフなグラフ、案を示すタブを使い、設計初期の考えを可視化します。

• ポータルやダッシュボードの初期構成を検討
• 複数案をタブラベルで示したいとき
• 画面の下書きにレビュー用の注釈を付ける

公開前の製品の先行登録ページを、ブランドの配色や書体に合わせて作成します。ロゴと製品紹介、メール登録フォームを一つのHTMLにまとめるスキル。

• 製品公開前のメール登録ページ作成
• ベータ版の参加者を募集したいとき
• 先行アクセスへの関心を集めたいとき

コード編集で積み重なった変更を差分とファイル別の説明にまとめ、確認画面で承認・却下・一部承認を選べます。判断を記録し、却下した変更の取り消しまで扱います。

• コード移行後の変更を確認したいとき
• ファイルごとに変更を承認したいとき
• 引き渡し時にレビュー判断を記録したいとき

複数SNSのフォロワー数や投稿への反応、人気投稿、話題、コメントを見渡せる分析画面を、整合性のあるサンプルデータ入りの単一HTMLで作るスキル。

• クリエイター向け分析画面の試作
• 複数SNSの指標表示を設計したいとき
• フォロワー推移と人気投稿の表示

複数のSNSの指標をまとめて見る分析ダッシュボードを、単体のHTMLで作成。グラフの詳細表示や期間比較、明暗テーマの切り替えを備えた画面に整えます。

• 複数SNSの指標をまとめて確認したいとき
• グラフで選んだ期間を比較したいとき
• グラフの各点と分析内容を確認したいとき

市場データを密に並べた取引分析ダッシュボードを、単一のHTMLで作成。明暗テーマの切り替えやチャートの詳細表示、コマンドパレットを備えた画面を用意します。

• 金融分析端末の画面を試作したいとき
• 市場情報を密に並べた画面の提示
• チャートの詳細表示や操作感の実演

粒子やフラクタル、データの動きを描く可視化画面を、重い計算をWeb Workerに分け、毎秒60フレームを目指す単一HTMLとして作るスキルです。

• 粒子や物理シミュレーションの試作
• フラクタルを可視化したいとき
• 音声やデータの可視化画面づくり

今週の成果、進行中の作業、障害、重要指標を週次報告用のHTMLスライドに整理。注目すべき数値や異常と、翌週に必要な判断・依頼をチームで共有する資料を作ります。

• チームの週次報告資料作成
• KPIの変化や異常を共有したいとき
• 作業の障害と支援依頼の整理

SNS向けの正方形カード3枚を、見出しがつながるシリーズとして作成します。ブランド表記や連番をそろえ、映画のような色調を持つHTMLにまとめます。

• Instagramの3枚投稿を作りたいとき
• LinkedInの連続投稿用デザイン
• Xのスレッド用カード制作

Notionの過去24時間の文書編集、コメント、メンション、データベースの行変更を集め、日々の更新を確認しやすいNotion形式のページにまとめます。

• 前日のNotion文書編集を確認したいとき
• コメントやメンションを日次で確認したいとき
• データベースの行変更をまとめて確認したいとき

ピクセルアートのキャラクター、大きな年号、動く文字や年表を組み合わせ、歴史や豆知識を紹介する画面録画向けのアニメーション付きHTMLを作るスキル。

• 歴史解説の一場面を作りたいとき
• 豆知識をピクセルアートで伝えたいとき
• 画面録画用のレトロな動きを作りたいとき

既存のHTMLに調整パネルを付け、配色・文字サイズ・余白・テーマ・動きを画面上で変更するスキル。設定を保存し、エージェントへの再依頼なしに見た目を試せます。

• LPの配色や余白を詰めたいとき
• ブランドやデザインの違いを実演
• 見た目を調整できる単体デモの制作

既存リポジトリのファイル構成や依存関係、コンポーネント、ルーティングを記録し、移行や改修の際にエージェントが繰り返し参照できる構造データを作るスキル。

• コード移行の下準備をしたいとき
• 改修前に部品や画面構成を記録したいとき
• 構造データを会話間で再利用したいとき

機能提案やロードマップ、設計レビューの資料を、意思決定に使う横送りのHTMLスライドに整理します。8種類から一つのテーマを選び、全ページの見た目を統一します。

• 新機能の採用理由を説明したいとき
• ロードマップのレビュー資料作成
• 技術設計の選択肢を判断したいとき

制作の方向性や内容構成、納品形式を左右する未確認事項を、必要最小限の質問フォームにまとめるスキル。選択肢や入力欄を使い、作業再開に必要な回答を集めます。

• 制作を止めている要件を確認したいとき
• 未確定の対象読者の確認
• 納品形式を決めたいとき

制作したデザインを、レイアウト・目的への適合・ブランド・使いやすさ・文章の5つの観点で点検し、見つかった具体的な不備の修正まで進めるスキル。

• 納品前のデザイン点検
• ブランドの指定との整合確認
• キーボード操作やコントラストの確認

デスクトップ向けランディングページの構成を灰色のボックスで描き、番号付きの注釈と仕様パネルで、配置や実装時の要点を共有するワイヤーフレームを作ります。

• デスクトップ向けLPの構成検討
• 開発担当への仕様メモ共有
• ナビや訴求エリアの配置確認

商品のお披露目や予告、背景ループに使う3〜10秒の短い動画を生成します。被写体や動き、照明を整理し、指定の長さと縦横比でMP4を保存します。

• 商品のお披露目動画を作りたいとき
• 動きのある短い予告の制作
• 雰囲気を伝える背景ループ作り

複数ファイルにまたがるコード改修の前に、変更対象の役割と作業順序、リスクを整理し、後続の編集・差分レビュー・ビルドテストが参照する計画を作るスキル。

• 複数ファイルの改修を計画したいとき
• 個別部品と共有部分の変更範囲の整理
• 変更範囲とリスクに応じた作業順の整理

サービスの料金プラン、機能比較表、よくある質問をまとめたHTMLページを作成。プラン数や推奨表示を整え、契約前に内容を比べられる料金ページを試作するスキル。

• サブスクリプション料金ページの試作
• プラン別の機能を比較したいとき
• 個人向けと法人向けのプラン提示

デスクトップ向けダッシュボードの画面構成を、灰色のブロックで示すHTMLワイヤーフレームにします。配色や写真を決める前に、情報の優先順位や配置を確認できます。

• ダッシュボードの配置を確認したいとき
• ナビゲーションと情報の優先順位の検討
• KPI・グラフ・表の配置検討

四半期の目標と主要な成果指標を、進捗バー・担当者・状況ラベルで見渡せるHTML画面にし、集計指標や進行を妨げる課題も横にまとめる試作用スキル。

• チームの四半期目標画面を試作したいとき
• 成果指標の現在値と目標値を見比べたいとき
• 目標の担当者と進捗状況を並べたいとき

コードの書き換え計画を一段階ずつ小さな編集として適用し、対象ファイルとリスクを確認しながら、各変更の理由・実施記録・進捗を残すスキル。

• コード移行計画を段階的に適用したいとき
• 局所的な修正をレビューしたいとき
• 完了やスキップの理由を記録したいとき