スキルを探す

概念や業務の流れ、ソフトウェア構成を図にまとめます。ブラウザで開けるSVG入りHTMLか、編集できるExcalidraw形式で保存するスキルです。

• 教材で概念を図解したいとき
• 業務の流れをフローチャートにしたいとき
• ソフトウェアやクラウドの構成図作成

コードの構造や処理の流れ、性能比較を対話型の図で説明し、OpenClawのダッシュボードに指標や表を継続して表示するスキルです。

• コード構造やデータの流れを説明したいとき
• 実測した性能を比較したいとき
• UIの試作を操作して確認したいとき

処理の流れや状態変化を試すHTML、または複数の画面案を切り替える試作品を作り、操作しながら設計上の疑問を確かめ、判断を記録するスキル。

• 複雑な状態変化を操作して確かめたいとき
• 異なる画面デザインを比較したいとき
• 非エンジニアに処理の試作品を共有したいとき

画面の余白、文字、角丸、影、動きを見直し、見た目と操作感を整えるスキル。ボタンやカードなどの細部を点検し、変更前後が分かる具体的な改善案を示します。

• 窮屈で未完成に見える画面の点検
• ボタンやカード、フォームの仕上げ
• ホバーや読み込み状態の改善

iOS 26のガラス風UIを、背景のぼかしや反射、操作に応じた変形まで含めて実装します。ボタンやカード、ウィジェットへの適用と既存表現の移行を支援します。

• ガラス風のボタンやカードを作りたいとき
• ガラス要素の変形アニメーション
• ウィジェットの色付き表示への対応

発表用のメモやPowerPointから、ブラウザで動くHTMLスライドを作ります。見本でデザインを選び、画面に収まるレイアウトとアニメーションを整えます。

• 登壇や社内報告のスライド作成
• PowerPointをHTML化したいとき
• 見本から資料のデザインを選びたいとき

Webサイトや業務画面の目的・利用者に合うデザイン方針を定め、文字・配色・レイアウト・動きを整えます。既存の部品を生かし、画面幅ごとの表示も確認します。

• 動く業務画面の見た目を整えたいとき
• 新しいサイトのデザイン方針を決めたいとき
• モバイル表示や長いラベルを改善したいとき

SF SymbolsやIconify APIからiOS・macOS向けのアイコンを選び、既存の配色やサイズに合わせてXcode用のPNG素材一式を生成するスキル。

• Xcode用のアイコン素材を作りたいとき
• 既存のデザインに合うアイコン探し
• 仮置きのアイコンを差し替えたいとき

既存コードから色・文字・余白などの共通ルールを抽出し、デザインの仕様書とプレビューを作るスキル。画面の統一感を10項目で評価し、修正箇所も示します。

• 既存コードからデザイン規則を作りたいとき
• リニューアル前の見た目の統一感確認
• スタイルを変更するPRのレビュー

Web・iOS・Androidの画面を、読み上げやキーボード操作に対応させ、ラベル、配色、操作対象の大きさなどをWCAG 2.2に沿って設計・点検するスキル。

• アイコンボタンの説明を付けたいとき
• キーボード操作とモーダルの点検
• コントラストや操作対象の大きさの確認

スクロールに合わせて映像や演出が進むランディングページを制作します。見せる順序や感情の変化を設計し、HTML実装から各位置の画面検証まで進めるスキルです。

• スクロールで動画が進むLPを作りたいとき
• 場面の変化でブランドを紹介したいとき
• 手持ちの写真や映像でページを作りたいとき

文章やMermaidから、システム構成や業務の流れを操作できるHTML図に変換します。検索や関係の追跡、画像・動画への書き出しに対応し、9項目の検証結果も添えます。

• 操作できるシステム構成図の共有
• 業務手順やデータの流れの可視化
• MermaidをHTML図にしたいとき

製品やブランドの特徴をもとに、32×32でも見分けやすい、丸くシンプルなマスコット画像を設計・生成するスキル。モチーフや配色の異なる候補を並べて比較できます。

• アプリや製品のマスコット作成
• ブランドに合うキャラクター案の検討
• マスコットの配色や輪郭の比較

文字のバナー、吹き出し、飾り枠を作り、画像を文字で描いたアートに変換します。用途に応じてローカルツールや無料APIを選び、既存作品の検索にも対応します。

• ターミナル用の文字バナー作成
• 吹き出しや飾り枠の追加
• 画像を文字アートに変換したいとき

画面デザインの方向性を比べるため、操作できるHTMLの試作を2〜3案作ります。レイアウトや情報量の違いを見比べ、各案の長所と弱点から採用案を検討します。

• 実装前に画面レイアウトを比較
• 情報量と余白の違いを試したいとき
• フィルターやパネル操作の試作

Frontend design guidance, upstream-maintained (impeccable).

日本語の概要は準備中です。原文の説明を表示しています。

目標画像と実装した3Dシーンのスクリーンショットを比較し、構図・照明・質感を段階的に改善します。見た目の再現度を採点し、描画速度も確認しながら修正を重ねるスキルです。

• 目標画像に近い3Dシーンを作りたいとき
• ブラウザゲームの照明や質感を磨きたいとき
• 既存の3D作品の見た目を改善したいとき

ランディングページや複数画面のWeb製品を、配色・書体・動きの方針から設計して実装します。スクロールに連動した演出にも対応し、見た目や表示性能、画面間の統一感を検証します。

• ランディングページの新規制作・再設計
• スクロールで物語を伝えたいとき
• 複数の製品画面のデザイン統一

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

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

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

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

Read the live Hermes desktop DOM/CSS over CDP.

日本語の概要は準備中です。原文の説明を表示しています。

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

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

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

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

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

日本語の概要は準備中です。原文の説明を表示しています。