デザインのスキル

確認済みの広告制作要件とブランド情報を基に、設定済みの画像生成サービスで広告画像を作り、媒体仕様や文言を点検して生成記録とともに保存するスキル。

• 承認済みの制作要件から広告画像を作りたいとき
• 費用上限内で画像の別案を作りたいとき
• 画像サイズと文字の配置範囲の確認

目的や内容から既定テーマを使ったスライドを作り、各ページの複数案を比較できるHTML資料として出力します。ブラウザ編集やPPTX・PDFへの書き出しにも対応。

• 製品紹介や社内報告のスライド作成
• 調査結果やデータを資料化したいとき
• ページごとのレイアウト案を比較

ロゴや配色、書体、文章の語り口をOpenClawのブランド方針に合わせます。資料・プレゼン・SNS画像などで表現をそろえ、読みやすさも確認するスキルです。

• 資料やプレゼンのブランド表現を整える
• SNS画像や公開時の告知素材を統一する
• ロゴ・書体・配色を確認したいとき

OpenClawのブランド、製品UI、公開ページ、デザイン監査の作業に応じて参照する指針を選び、見た目の変更と共通ルールの確認を進めるスキル。

• 公開サイト更新の指針を選びたいとき
• アプリの見た目やテーマを変更したいとき
• デザインの一貫性と使いやすさの点検

OpenClawの画面や部品を、色・余白などの共通定義と既存コンポーネントに沿って作成・修正し、テーマや操作状態の見た目を整えるスキル。

• OpenClawの画面デザインを揃えたいとき
• テーマや共通トークンの調整
• フォーカスや読み込み状態の表示確認

OpenClawの画面とコードを調べ、Carapaceのデザイン規約からのずれや操作性の問題を点検するスキル。違反と提案を区別し、根拠付きの監査結果にまとめます。

• Carapaceの規約への適合を確認したいとき
• デスクトップとモバイル表示の点検
• アクセシビリティと文言の監査

既存のOpenClaw画面にCarapaceの色・余白・テーマや共通CSSを適用します。既存部品を活用し、操作状態やアクセシビリティを含めて見た目を整えるスキル。

• 既存OpenClaw画面の見た目統一
• 共通CSSと既存部品の再利用
• 操作状態やアクセシブルな名前の確認

投稿文や短い言葉を、X風の投稿カードに仕立てます。ユーザー情報やいいね・閲覧数などを配置し、動画への重ね表示や画像での共有に使う単一HTMLを作ります。

• 動画に投稿カードを重ねたいとき
• 短い言葉を画像で共有したいとき
• データを短い投稿カードにしたいとき

タスクを４つの進捗列に並べる、Trello風のカンバン画面を設計するスキル。担当者やラベルでの絞り込み、期限やコメント数を備えたカードの配置をまとめます。

• チームのタスク一覧を設計したいとき
• レビュー待ちも含めて進捗を示したいとき
• 担当者や作業単位でタスクを分けたいとき

商品発表やSNSでの共有に使う、縦長のマーケティングポスターを設計するスキル。大きな見出し、グラデーション背景、要点カードとQRコードの仮枠を配置します。

• 新商品の縦長告知ポスターを作りたいとき
• SNSで共有する宣伝画像を作りたいとき
• 要点とブランド・QR枠を１枚にまとめたいとき

SNSのフォロワー数や反応、成長曲線、人気投稿をまとめて見せるダッシュボードの原型を作るスキル。媒体切り替えや話題・コメントの欄も配置します。

• クリエイター向けSNS管理画面の原型作り
• フォロワーの伸びと反応の表示を検討
• 人気投稿と話題・コメントを一覧化したいとき

発表内容を大見出しと短い説明に絞り、Keynote風のスライドに整えます。キーボードでのページ切り替えや現在位置の表示、フェードイン演出も備えます。

• 製品紹介を短いスライドにしたいとき
• データ図や要点を大きく見せたいとき
• キーボードで発表資料を操作したいとき

提供したHTMLやテキスト、データをiPhoneやMacBook風の画面に埋め込み、反射や光沢を添えた立体的な製品紹介を単一HTMLで作るスキル。

• 製品発表用のビジュアル制作
• iPhone風の画面でアプリ紹介
• モバイルとデスクトップの同時展示

アプリ起動時のロゴ表示、価値を伝える案内、サインインの3画面を、iPhoneの枠で横並びに構成し、初回利用時の画面案をまとめるデザイン用テンプレートです。

• アプリの初回案内を設計したいとき
• イラストと一文で価値を伝えたいとき
• 複数のログイン方法を画面に配置

シルバーやクリーム色の背景に、二重の縁を持つカードや入れ子のボタンを配するWeb原型を作るスキル。丸みのある形と軽く弾む動きで、柔らかな質感を表現します。

• 柔らかな質感のWeb原型を作りたいとき
• 丸いカードと入れ子ボタンの設計
• ホバー時に軽く弾む動きを試したいとき

回転する文字のリングや地球儀、タイマー、浮遊ラベルを組み合わせ、繰り返し動く画面を作ります。動画の冒頭やランディングページの大きなメイン画像に使うスキルです。

• 動画の冒頭画面を作りたいとき
• ランディングページのメイン画像制作
• 複数の動きをループ画面にまとめたいとき

雑誌のような落ち着いたWebページの試作を、暖色の単色背景と広い余白で整えるスキル。見出しと本文の書体を使い分け、細い罫線や控えめな動きを取り入れます。

• 雑誌風のWebデザインを試したいとき
• 余白を生かしたページの試作
• 書体と控えめな装飾の検討

曲やポッドキャスト、自己紹介をSpotifyの再生画面風カードに仕立てるスキル。カバーや進行バー、操作アイコンを備え、動画や個人ページに使えます。

• 動画に重ねる再生画面風カードの作成
• 自己紹介を音楽カード風に見せたいとき
• 曲やポッドキャストを小型カードで紹介

iPhone 15 Proの端末枠に収めたアプリの単一画面をデザインし、ステータスバーや検索欄、下部タブまで含めて画面構成を示すスキル。

• アプリ画面をiPhoneの枠付きで見せたいとき
• フィードや一覧、詳細、フォームの画面設計
• 下部に4〜5個のタブを置く構成の検討

大きなセリフ体の見出しと二段組の本文で、日曜版の新聞のような縦長ポスターを作るスキル。番号付きの６節と引用文を配し、文章中心の告知を紙面風にまとめます。

• 新聞風の告知ポスターを作りたいとき
• 活動方針を６つの節で伝えたいとき
• 文章中心の編集ポスター制作

ピクセルアートのマスコットと動く日本語・中国語の文字を組み合わせ、レトロな配色と流れる年表で説明内容を見せる、CSSループアニメーションのスキル。

• レトロなアニメーション解説を作りたいとき
• ドット絵と動く日本語を組み合わせたいとき
• 動画収録用の動くポスターを作りたいとき

SaaSの3段階の料金プランを、月払い・年払いの切り替え、機能比較表、よくある質問とともに配置し、価格と提供内容を見比べやすくするページ作成スキル。

• 3段階の料金ページを作りたいとき
• 月払いと年払いの選択肢を示したいとき
• プラン別の機能を表で比較したいとき

新聞紙風の背景と極細の罫線、画面からはみ出す巨大な数字で、スイスの工業印刷を思わせる、力強いブルータリズム調のWeb原型を作るスキル。

• 力強いデスクトップサイトの原型作り
• 巨大な数字や見出しの配置を検討したいとき
• 工業印刷風のページをデザインしたいとき

製品紹介ページを、ナビゲーションや特徴紹介、利用手順、行動を促すボタンまで含む操作可能な試作として作るテンプレート。スマートフォン向けの表示にも対応します。

• 製品紹介ページを試作したいとき
• ナビゲーションやボタンを確認したいとき
• スマートフォンとPCの表示を確認したいとき