「ref」の検索結果

ガイドやAPIリファレンスの画面を、ナビゲーション・本文・目次の3列で設計し、コード例や表も含む単一のHTMLページとして試作するスキル。

• APIリファレンスを試作したいとき
• コード例付きのチュートリアル作成
• 目次付きガイドの画面設計

デザインの要件と実装したUIの見た目のずれを詰めるため、講評・調整・仕上げを繰り返す作業を案内し、別途導入する元のワークフローにつなぐスキル。

• 実装画面とデザイン要件を見比べたいとき
• 見た目のずれを繰り返し調整したいとき
• デザインから実装への見直し工程を計画

既存のWebサイトやアプリの画面を点検し、文字・配色・配置・操作時の表示を改善します。現在の技術構成と機能を保ちながら、段階的に整えるスキル。

• 既存サイトのデザインを点検したいとき
• 定型的な画面パターンを見直したいとき
• 読み込み中・空データ・エラー表示の改善

提供したHTMLやテキストをiPhoneとMacBookの画面内に配置し、ガラス風のハイライトや床面の反射を添えた立体的な製品紹介ページを作るスキル。

• 製品発表でアプリ画面を見せたいとき
• モバイルとデスクトップのデザイン展示
• テキストやデータをアプリ風に見せたいとき

Figmaのデザインをコードに落とし込む際のプロジェクト固有のルールを作り、色や余白などの共通値、命名規則、自動チェックの基準を一か所にまとめます。

• Figmaからの実装ルールを作りたいとき
• デザインの共通値と命名規則の整理
• 自動チェックの基準をまとめたいとき

作成済みのWebページやHTMLを点検し、既存の内容やブランドを保ちながら、見た目・文章・動き・操作性の問題を修正して共有前の仕上げを行います。

• 生成したページを共有前に整えたいとき
• 画一的な見た目や不統一を見直したいとき
• モバイル表示や操作性を修正したいとき

文章や参考画像からCodex向けの動くペットを作り、姿の一貫性や背景の透過を確認しながら、アニメーション用画像と設定ファイルをまとめて出力するスキル。

• 文章からCodexペットを作りたいとき
• キャラクター画像をペット化したいとき
• 動きごとの姿の違いを修正したいとき

心理学と行動科学の考え方を文章やデザインに取り入れ、関心を引く導入、情報の伝え方、価格の見せ方を見直すスキルです。販促表現を検討する際に使えます。

• 関心を引く導入文を整えたいとき
• 情報の伝え方を見直したいとき
• 価格の見せ方を改善したいとき

広告ライブラリから競合の広告を抽出・分析し、訴求メッセージやクリエイティブの方向性を調べるスキル。自社の広告表現を検討するための材料を整理します。

• 競合広告の訴求を調べたいとき
• 競合の広告表現を分析したいとき
• 自社広告の企画材料を集めたいとき

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

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

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

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

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

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

公開サイトの配色・フォント・ロゴ・画像・文体を実測して整理し、ブランドガイドやプレビュー付きの再利用可能なデザインシステムにまとめるスキル。

• サイトの配色・フォント・ロゴの整理
• 参考サイトからブランドガイドを作りたいとき
• ブランドを表す画像の収集

見た目の要望を伝えるプロンプトに、デザイン仕様やUI/UXの用語を補い、画面づくりやデザインからコードへの実装で使う依頼文を具体化するスキル。

• 見た目に関する依頼を具体化したいとき
• デザインから実装への依頼文の整理
• UI/UXの用語を依頼文に補いたいとき

ロゴ、配色、書体、画面や印刷物への展開例を一枚の画像にまとめるスキル。ブランドの目的や対象者を踏まえ、統一感のあるデザイン案を視覚化します。

• 新製品のブランドイメージを共有
• 意味のあるロゴ案を検討したいとき
• 配色・書体・使用例をまとめて確認

ボタンや通知などの細部を見直し、操作に合った動きと反応を設計するスキルです。アニメーションの要否からCSS実装、アクセシビリティまで検討します。

• アニメーションの要否を判断したいとき
• ボタンや通知の操作感を整えたいとき
• UIコードを変更前後で比較したいとき

コードの処理を機能別のフローチャートに整理し、重複する仕組みを調べるスキルです。根拠付きの統合案と、実装計画に引き継ぐ依頼文を作成します。

• 改修前に機能別の処理を把握したいとき
• 機能内外の重複処理を探したいとき
• 統合案と既存の呼び出し箇所の比較

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

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

余白の広い見出しや隙間のないグリッド、スクロールに連動する動きを組み合わせ、Webページを実装します。注目から行動へ導く構成と、動きを抑える利用者設定への対応も扱います。

• 申し込みへ導くLPを作りたいとき
• スクロール連動のギャラリー制作
• 空きマスのない機能紹介グリッド設計

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

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

RuViewの処理結果をSHA-256で照合し、第三者が再検証できる証拠一式の作成と、精度の数値が実測か主張かを明示しているかの確認を支援するスキル。

• 処理結果を基準ハッシュと照合したいとき
• 第三者が再検証できるリリース資料の作成
• 報告書やREADMEの精度表記の点検

複数のエージェントへの依頼を順番につなぎ、前の出力を次の工程へ渡して、コード分析や改修、テスト作成、データ変換を一連の手順で進めるスキル。

• コード分析から改善計画を作成
• 優先順位を付けてコードを改修
• テスト不足を調べて単体テストを作成

AIエージェントが会話履歴や利用者の好みを保存し、次のセッションでも参照できるように、AgentDBで短期・長期の記憶と検索を実装するスキル。

• チャットに会話履歴を追加
• セッションをまたいで好みを記憶
• 成功した対話パターンを再利用

RuViewのセンサーノードを動かすため、ESP32-S3／ESP32-C6のファームウェア作成・書き込み、WiFi設定、受信確認を案内します。

• RuViewの実機を初期設定したいとき
• 8 MB・4 MB版の再書き込み
• WiFiと受信サーバーの接続設定