デザインのスキル

工業マニュアルや古い端末を思わせるWeb画面を、厳密なグリッド、大きな文字と細かなデータ表示、赤い差し色、紙や走査線の質感で設計するスキル。

• データ量の多いダッシュボードを試作したいとき
• 印刷物風のポートフォリオ制作
• 暗い端末風の画面を作りたいとき

配色づくりや文字のコントラスト確認を、色彩科学の資料に基づいて支援します。色の命名、顔料の混色、歴史的な色彩理論まで、制作に関わる色の相談を扱います。

• デザインの配色を考えたいとき
• 文字と背景のコントラスト確認
• 色の名前を決めたいとき

1920×1080の固定キャンバスで、内容に合わせて構成を自由に組むスライド制作スキル。配色や文字サイズを統一し、キーボードで切り替えるHTMLにまとめます。

• 個人の作品集を作りたいとき
• 美術やデザインの授業資料
• 問いや画像が主役の講演資料

デザインの方向性、色や余白などの共通値、見た目のルールをDESIGN.mdにまとめて作成・管理します。制作時に参照する基準を一つの文書に集約するためのスキルです。

• プロジェクトのデザイン方針の文書化
• デザインの共通値を集約したいとき
• DESIGN.mdで見た目のルールを管理

Apple製品向けの画面設計で、人が操作しやすいUIの指針を参照するためのスキル。iOSやmacOSなどの基礎・部品・操作方法を扱う14スキルを案内します。

• iOSアプリの設計指針を確認したいとき
• macOSの画面部品を参照したいとき
• visionOSの操作設計を調べたいとき

実装済みのUIを見た目の面から点検し、コード修正まで進めるスキル。変更を小さな単位でコミットし、修正前後のスクリーンショットで公開前の仕上がりを確認します。

• 公開前のUIを点検したいとき
• 見た目の点検結果に基づく修正
• UI修正前後のスクリーンショット比較

新しいブランドや製品の立ち上げに向けて、独創的な表現も取り入れながらデザインシステムをゼロから構築し、実際の製品を想定したモックアップを作るスキル。

• 新しいブランドを一から作りたいとき
• デザイン開始時のワークショップ
• デザインシステムの新規構築

暗い背景とセリフ体を使い、ファッション誌のような３ページの映像的な演出を作ります。文字の段階表示や章の切り替えを備えた単一のHTMLにまとめます。

• ファッション誌風の動く紹介を作りたいとき
• 短い物語を３ページで見せたいとき
• 既存のブランド表現を暗い誌面に反映

Markdownやメモを、雑誌のように読みやすく整えた長文HTML記事に仕上げます。大きなタイトルと一列の本文に、引用やコードの専用スタイルを組み合わせます。

• Markdownを雑誌風の記事にしたいとき
• メモからエッセイを整えたいとき
• 長文ニュースレターのデザイン

Anthropicの公式ブランドカラーとタイポグラフィを制作物に適用し、色や書体に一貫性を持たせます。独自のブランド指針を考える際の参考にも使えます。

• 公式ブランドカラーを適用したいとき
• 公式の指針に沿って文字を整えたいとき
• 制作物の見た目を統一したいとき

文章や画像をもとに、fal.aiで3Dモデルを生成するためのスキル。ゲーム素材、ARでのプレビュー、商品の試作イメージ、立体のコンセプト作りに使えます。

• ゲーム向け3D素材を生成したいとき
• ARプレビュー用モデルの作成
• 商品の試作イメージ作り

画面や製品のデザインをDieter Ramsの10原則で点検し、根拠付きで採点します。新規設計・改良・再設計の方針を決め、実行計画を作るための依頼文にまとめます。

• UIをDieter Ramsの10原則で点検したいとき
• 画面を改良するか再設計するか決めたいとき
• 表示文言や使いやすさを根拠付きで点検したいとき

Ant Designの色・余白・角丸などを共通設定し、部品ごとの見た目の調整やダークモード、CSS変数を使うテーマ設定まで支援するスキル。

• 配色やフォントをデザインに合わせたいとき
• ダークテーマを設定したいとき
• 特定の部品だけ見た目を調整したいとき

ランディングページや作品集を、目的と読者に合わせて設計する旧実験版です。レイアウトの変化・動き・情報密度を調整し、定型的な見た目を避けて配色や操作状態を整えます。

• 読者に合わせた紹介ページの設計
• 動きと情報量を調整した作品集制作
• 既存ブランドを生かしたサイト改修

iOS・Androidなどのアプリ画面や一連の操作フローを画像で作成し、読みやすさと画面間の統一感を保ちながら、スマートフォンの端末枠付きで提示するスキル。

• 複数画面でアプリの企画を可視化したいとき
• 初回案内やログインのフロー画像の作成
• モバイルアプリの改修案を比較したいとき

LPや商品紹介サイトのデザイン参考画像を、セクションごとに横長で生成します。配色や書体の統一感を保ちつつ、構図・余白・画像・ボタンの見せ方を設計します。

• LP全体のデザイン参考画像づくり
• ミニマル・雑誌風のヒーロー検討
• サイト全体の配色・書体の統一

温かみのある白とグレー、書体の対比、広い余白で、読みやすいWeb画面を設計・実装します。淡い差し色と平面的なグリッドを使い、文書や雑誌のような落ち着いた構成に整えます。

• 文書のように落ち着いた画面の設計
• 機能紹介を非対称グリッドに整理
• ボタン・FAQ・ショートカットの統一

公開Webページの設計・実装・見直しを、題材に合う構図や書体の選定から進めます。実ブラウザーでの測定と3種類の画面幅のスクリーンショットで改善を重ねます。

• 定型的に見えるLPの再設計
• 独自の軸を持つポートフォリオ制作
• 3種類の画面幅で文字と配置を点検

厳密なグリッド、大きさに差をつけた文字、赤いアクセントで、工業図面や旧式端末を思わせるWeb画面を設計します。情報量の多いダッシュボードや作品集に向いています。

• 工業図面風のダッシュボード制作
• 大きな文字が主役の作品集制作
• 技術資料風の編集サイト制作

ブランドの意味や対象読者を踏まえ、ロゴ・配色・書体・使用例を一枚の画像にまとめます。新規ブランドの方向性づくりや、既存のロゴを生かした統一感のある提案資料に使えます。

• 新ブランドの見た目を検討したいとき
• 既存素材からブランド提案資料を作成
• ロゴ・配色・書体をまとめて確認

Webサイトのデザイン画像を先に生成し、文字・余白・配色・配置を分析して実装へつなげます。セクションごとの画像を基準に、読みやすいLPやポートフォリオを作るスキルです。

• デザイン画像を基準にLPを作りたいとき
• ポートフォリオを改修したいとき
• 小型画面でも見やすい冒頭の設計

Google Stitchで画面を生成するためのDESIGN.mdを作り、色・書体・部品・配置・動きのルールを、具体的な数値と自然言語で共有するスキル。

• Stitch用の共通デザイン方針の作成
• 複数画面の色や書体を統一したいとき
• モバイル配置とタップ領域の文書化

ReactやNext.jsの画面を、構図・動き・情報密度の設定に沿って実装し、配色や書体から読み込み・空・エラー状態まで整える、旧版互換用のスキル。

• 従来のv1の挙動を維持したいとき
• Reactで非対称な画面を作りたいとき
• 読み込み・空・エラー状態の設計

既存のWebサイトやアプリを点検し、文字・配色・レイアウト・操作時の表示を改善します。現在の技術構成と機能を保ちながら、画一的な見た目や不足している状態表示を整えます。

• AI生成の画一的な見た目を直したいとき
• 文字・配色・余白を整えたいとき
• 読み込み・空データ・エラー表示の追加