デザインのスキル

StripeやLinearなど54のサイトの配色・文字・余白を参考に、HTML/CSSのページを制作します。部品や画面幅に応じた表示も揃えるスキル。

• Stripeを参考にしたLP制作
• Linearを参考にしたダッシュボード制作
• 資料サイトのデザイン制作

文章や資料の情報を、比較図・年表・手順図などのインフォグラフィックにするスキル。21種類のレイアウトと21種類の画風を組み合わせ、画像を生成します。

• 比較内容を図で説明したいとき
• 作業手順を図解したいとき
• 年表を画像にしたいとき

ランディングページやスライド、操作できる試作品をHTMLで制作します。既存の資料や画面をもとに、構成や見た目の案を比較し、表示や動作を確認します。

• ブランド資料からLPを作りたいとき
• 製品の操作手順を試作したいとき
• HTMLでプレゼン資料を作りたいとき

ブラウザで動く生成アートや、操作・音に反応する映像を制作します。p5.jsで構想から実装、見た目の確認、画像・動画への書き出しまで進めるスキル。

• 規則や乱数からアートを作りたいとき
• マウス操作に反応する作品制作
• 音に反応するアニメーション制作

色・文字・余白などのデザイン値と使い方をDESIGN.mdにまとめます。構造や配色のコントラストを検証し、変更比較やTailwind向けの書き出しまで支援するスキルです。

• スタイルガイドをエージェント向けに整理
• 複数プロジェクトのデザイン設定の共有
• 配色のコントラストと参照の検証

システムやクラウドの構成を、暗い背景の図にまとめるスキル。サービス間の接続やセキュリティ境界を色分けし、ブラウザで開ける単一のHTMLファイルにします。

• 画面・サーバー・DBの関係を説明したいとき
• クラウドのリージョンやサブネットの整理
• マイクロサービス間の接続を図にしたいとき

スライドや文書、レポート、HTMLのランディングページに、配色とフォントをまとめて適用します。10種類のテーマから選ぶほか、希望に応じた新規テーマも作れます。

• スライドの配色と書体を統一したいとき
• 見本からテーマを選びたいとき
• レポートや文書の見た目の統一

ポスターや静止画作品を、配色・形・余白などのデザイン方針から制作します。文字を抑えた独自の構図をPNGやPDFにまとめ、方針の文書も添えます。

• テーマに沿った独自ポスターの制作
• 文字を抑えた抽象アートの制作
• 作品とデザイン方針を一緒に残したいとき

新しい画面の制作や既存UIの改修で、題材と利用者に合う配色・書体・レイアウトを設計し、画面内の言葉や動きまで意図を持って整えるデザイン支援スキル。

• 新しいサイトの見た目を設計したいとき
• 定型的なUIを改修したいとき
• 利用者に合う配色・書体・配置の検討

粒子の動きや数学的な規則から、p5.jsで独自の生成アートを制作します。同じ絵を再現するシードや操作画面を備え、数値を変えながら表現を探れます。

• コードで独自のアートを作りたいとき
• 粒子や流れの表現を試したいとき
• シードや数値を変えて比較したいとき

Anthropicのブランド配色と書体を制作物に適用します。見出し・本文の文字づかいや背景に応じた色、図形のアクセントを整え、見た目を統一します。

• Anthropicの配色で資料を整えたいとき
• 見出しと本文の書体を統一
• 明暗の背景に合わせた文字色の調整

新しい画面の制作や既存UIの改修で、題材と利用者に合う配色・書体・レイアウトを設計し、画面内の言葉や動きまで意図を持って整えるデザイン支援スキル。

• 新しいサイトの見た目を設計したいとき
• 定型的なUIを改修したいとき
• 利用者に合う配色・書体・配置の検討

SNSのヘッダーや広告、Web・印刷向けのバナーを用途とサイズに合わせて制作。支給素材やCSSの図形を使い、複数のデザイン案を比較できます。

• SNSのヘッダーやカバーを作りたいとき
• 広告バナーのデザイン案を比較したいとき
• Webのメインビジュアル制作

shadcn/uiとTailwind CSSを使い、操作しやすいフォームや表、画面幅に応じたレイアウトを実装。配色やダークモードも統一するスキル。

• キーボードで操作できるフォーム作成
• スマホとパソコンの表示を整えたいとき
• 配色とダークモードの統一

色・余白・書体を共通の設定値として整理し、画面部品の状態別仕様やCSS変数を作成。同じブランドルールに沿ったHTMLスライドも制作するスキル。

• 色・余白・書体の共通化
• ボタンの状態別仕様を整理したいとき
• コード内の直接指定された値の確認

ロゴ、名刺の完成イメージ、スライド、バナー、SNS画像、アイコンを制作。ブランドの色や書体のルールづくりからUIへの反映まで扱うスキル。

• ロゴと名刺の完成イメージ制作
• 複数のSNS向け画像を作りたいとき
• HTMLでの提案スライド制作

Web・モバイル・デスクトップの画面設計や改善に、ローカル資料から配色・書体・操作の指針を検索。製品や開発環境に合うUIの実装とレビューを支えます。

• 新しい製品の配色と書体を選びたいとき
• フォームとキーボード操作のレビュー
• 小さな画面で崩れる表示の修正

サイトの見た目の不統一、余白、情報の強弱、操作の遅さを点検し、ソースコードを修正。変更前後のスクリーンショットで確かめながら仕上げるスキル。

• サイト内の見た目の不統一を探したいとき
• 余白や情報の強弱を直したいとき
• 公開中のサイトの見た目の仕上げ

英語の説明やmermaidのソースから図を作り、元データ、編集用の.excalidraw、共有用のSVG・PNGをまとめて出力するスキルです。

• 業務の説明をフローチャートにしたいとき
• システム構成を図解したいとき
• 資料やREADME用の図を用意したいとき

新しいプロダクトの目的や競合を踏まえ、配色・書体・余白・動きのルールを提案。プレビューで見た目を確認し、DESIGN.mdに設計方針をまとめるスキル。

• 新規プロダクトの見た目を決めたいとき
• ブランドと画面の共通ルールの文書化
• 書体と配色の組み合わせの確認

AIで複数の画面デザイン案を作り、比較ボードで見比べながら意見を整理するスキル。見た目の方向性を探り、フィードバックをもとに案の改善を繰り返せます。

• 新しい画面の方向性を比較したいとき
• 既存画面の別案を探したいとき
• 複数案への意見を整理したいとき

実機のiPhoneでiOSアプリの各画面を撮影し、Appleの設計指針やDESIGN.mdに照らして見た目を評価。項目別の採点と改善点を示すスキル。

• iPhone実機で見た目を確認したいとき
• 画面とデザイン方針を照合したいとき
• 採点をもとに改善点を整理したいとき

実装前のUI/UX計画をデザイナーの視点で点検し、各観点を10点満点で評価。足りない設計判断を対話で明らかにし、改善内容を計画そのものに反映するスキル。

• 実装前にUI/UX計画を点検したいとき
• 不足している設計判断の洗い出し
• デザインの指摘を計画に反映したいとき

Paperclipの画面や部品を、既存の色・文字・状態表示・操作の規則に合わせて作成・修正し、再利用する部品と見本ページも一緒に整えるスキル。

• 既存の規則に沿ってページを追加
• 再利用できるUI部品の作成
• 状態の色や優先度アイコンの統一