「pin」の検索結果

管理・分析画面の試作を、単一のHTMLファイルで作るスキル。既存のデザインに沿って、主要指標のカードやグラフ、表を備えた画面を組み立てます。

• 売上ダッシュボードの試作
• アクセス・利用状況の分析画面の検討
• 運用状況を確認する管理画面の設計

指定したテーマの長文記事を執筆し、見出しや図版用の枠、引用、著者紹介、関連記事を備えた、雑誌のように読みやすい単一のHTMLページに仕上げます。

• 長文ブログの記事ページ試作
• 図版や引用を含む事例紹介
• 既存デザインに沿った記事画面設計

Venice.aiのAPIを使い、画像の編集・拡大・背景除去をエージェントに依頼するためのスキル。既存画像の修正や、用途に合わせた画像素材の調整に使えます。

• 既存の画像を編集したいとき
• 画像を拡大したいとき
• 画像の背景を除去したいとき

ReactとTailwindを使い、claude.ai向けの複雑なHTMLアーティファクトを作成するスキルです。埋め込み可能なWebコンテンツの制作に使えます。

• claude.ai向けHTML成果物の制作
• ReactとTailwindでの制作
• 埋め込み用Webコンテンツの作成

YouTubeなどのプラットフォームから動画をダウンロードし、形式や画質を選びながら、オフラインでの視聴、動画編集、アーカイブ用の保存に使います。

• オフライン視聴用の動画保存
• 編集用の動画ダウンロード
• 動画のアーカイブ保存

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

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

メンバー一覧や活動履歴、役割別グラフを備えたチーム管理画面を作るスキル。タブ切替や明暗表示、CSV出力が動く単一HTMLの試作を作成します。

• チーム管理画面を試作したいとき
• 役割の構成やオンライン状況の説明
• メンバー情報や活動をタブで確認

年間の読書時間や読了冊数、メモ、関心キーワードを、紙の質感と本をめくる演出でまとめ、共有用の縦長動画に仕立てるHTMLテンプレートです。

• 年間の読書実績を動画にしたいとき
• 読書メモと関心分野の振り返り
• 読書会の一年間の記録共有

リリースの追加機能、修正、互換性を損なう変更、既知の問題、更新手順を1ページのHTMLに整理します。未提供の情報も明示し、変更内容を共有する文書を作ります。

• バージョン更新の案内を作りたいとき
• 追加機能と修正を一覧で共有したいとき
• 互換性の変更と更新手順の説明

Apple HIG、Material Design 3、WCAG 2.2に基づく300以上のルールを参照し、iOS・Android・Webに共通する画面設計を支えるスキル。

• iOS・Android・Web共通の画面設計
• HIGやMaterial Designを参照したいとき
• WCAG 2.2を踏まえた使いやすさの検討

GLSLで流体や粒子、手続き的に生成する映像表現を制作するスキル。レイマーチングなどの技法を使い、ページ冒頭のメインビジュアルや動きの一場面の制作に役立ちます。

• ページのメインビジュアル制作
• 流体シミュレーションの表現
• 粒子エフェクトを作りたいとき

コードベースをもとにFigmaのデザインシステムライブラリを作成・更新します。実装済みの部品と、デザイン側で参照するライブラリを揃える作業に使えます。

• コードからFigmaライブラリを作りたいとき
• 実装に合わせたデザインライブラリの更新
• デザインの参照資料と実装を揃えたいとき

Webサイトのデザイン画像を先に生成し、文字・余白・配色・配置を分析して画面に実装します。セクションごとの見本を使い、小型ノートPCでも読みやすい構成を目指します。

• 画像を見本にしたLP制作
• 小型画面でも読みやすいヒーロー制作
• 統一感のあるポートフォリオ制作

ランディングページなどのWebデザイン案を、セクションごとに独立した横長画像で生成。配色をそろえながら構図や余白、ボタンの見せ方を変え、実装の参考に使えます。

• LPをセクション別に検討したいとき
• 冒頭の構図を検討したいとき
• 開発者に参考画像を共有したいとき

Figmaのデザイン部品とコードの部品をCode Connectで関連付け、共通のデザインルールや部品の更新をコード側へ自動反映するためのスキル。

• Figmaとコードの部品を関連付けたいとき
• デザインシステムの更新を反映したいとき
• Code Connectを導入したいとき

スマートフォン向けのログイン画面を、単体のHTML試作として作成します。SMS認証やパスワード、外部アカウントでのログインに合わせ、入力エラーや処理中の表示も整えます。

• 電話番号とSMS認証を試作したいとき
• パスワードログイン画面の設計
• 外部アカウントログインの検討

温かみのあるモノトーンと文字の強弱、広い余白を使い、カードのグリッドや淡い差し色で、雑誌のように情報を整理したミニマルなWeb画面を設計するスキル。

• ミニマルなプロダクト画面を試作したいとき
• 機能紹介カードの非対称グリッド配置
• 書体・余白・配色を統一したいとき

GSAPで作ったアニメーションのカクつきを減らすため、位置や透明度の変え方、画面更新のまとめ方、不要な処理の停止を見直し、描画負荷の軽減を支援します。

• GSAPのカクつきを減らしたいとき
• 多数のリスト要素の動きを改善したいとき
• マウス追従の演出を軽くしたいとき

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

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

広告企画やデザインの方向性を定め、発想から評価、発表まで進めるスキル。複数の発想法と自己評価を使い、利用できる制作資源も組み合わせます。

• キャンペーンのコンセプト検討
• ページの見た目の方向性を決めたいとき
• デザインの批評と改善計画

ランディングページやホームページ、広告の文章を作成・書き直すためのスキル。商品やサービスの公開に向け、訴求文を検討する編集役として使えます。

• ランディングページの文章作成
• ホームページの文章を書き直したいとき
• 広告文の下書き作成

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

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

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

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

まだ形になっていないアイデアを、段階的な問いかけと代替案の検討を通じて具体的なデザインへ整理し、構想初期の方向性を詰めるためのスキル。

• 大まかなアイデアを具体化したいとき
• コンセプトの別案を検討したいとき
• 問いかけを通じた構想の整理