Why we love this skill
このスキルは、コードを美しくハイライトされた画像に変換し、ターミナルインターフェースをシミュレートし、高解像度ダウンロードをサポートするため、開発者がコードスニペットを共有するのに理想的なツールです。
指示
上級フロントエンド開発者として、コンテンツ内のすべてのコードスニペットをハイライト画像に変換する必要があります。すべてのコードスニペットを抽出することが非常に重要です。Markdownのバッククォート（``）構文で厳密に囲まれたコードは、単一のスニペットとして扱われることに注意してください。JSXコードには特に注意を払ってください。ハイライト表示のために、JS構文はJSX構文として扱われます。
配色：メインの背景色にはダークグレーを使用し、コードブロックには暗い背景に色付きのコードハイライト（シアンとブライトグリーンが主要な強調色）を使用します。
レイアウト：コードブロックはターミナル／コードエディタの外観を模倣していますが、コードエディタ上部のボタンは削除され、コードのみが表示されます。各カードには、上下に15ピクセル、左右に25ピクセルのパディングが設定されています。
技術的な実装: レイアウトとスタイルは HTML5 と CSS を使用して実装されています (コード ブロックは色で強調表示する必要があります)。dom-to-image-more 機能が統合されています。dom-to-image-more スクリプトのアドレスは https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js で、カードの下にあるボタンからシングル カードの画像をダウンロードしたり (高解像度の画像が必要です)、ワンクリックですべての画像をダウンロードしたりできます (クリック後、1 秒待ってから画像を 1 つずつダウンロードします)。コードに不要なバッククォート (`\`) を追加しないでください。エラーの原因となる可能性があります。
これを実装する際は、以下の点にご注意ください。表紙カードはシンプルにしてください。アイコンには擬似要素を使用せず、SVGを直接使用してください。ダウンロードする画像は高解像度で、スケールは2にしてください。画像には連番で番号を付けてください。
description
記事内のすべてのコードを画像に変換し、ワンクリックでダウンロードできます。
Related Skills
View all
画像反転プロンプト
ユーザーが画像を入力すると、スキルはリバースエンジニアリングのように、スタイル、構図、被写体の形状、色、雰囲気といった視覚情報を正確に抽出し、ほぼ同一の画像を直接生成できるプロンプトを出力します。派生作品作成のための簡易チュートリアルも含まれています。
言葉の中には絵画があり、絵画の中には古典がある。
慣用句を入力し、20種類の画像スタイルから選択すると、「慣用句分析カード（ピンイン、本来の意味、拡張された意味、例文、適用場面を含む）」と「慣用句の芸術的イメージに合った画像」が自動的に生成されます。これら2つは同じ画像上に合成され、横並びで出力されます。
ペット写真ディレクター | ワンクリックで映画のようなペット写真を生成
愛するペットのために、軽やかでエアリーな手描きの水彩画を描いてみませんか？ゴールデンレトリバーに宇宙服を着せてみたいですか？オレンジ色のトラ猫をジブリ映画のキャラクターに変身させたいですか？写真スタジオに行く必要も、複雑なAIの指示を理解する必要もありません。このスキルは、あなたの「ペットのパーソナルビジュアルディレクター」であり、次の2つの超クールな機能をサポートしています。1. 写真変換（強く推奨）：ペットの写真をアップロードし、スタイルを選択するだけで、ペット本来の特徴を保った素晴らしい画像が瞬時に生成されます。2. テキスト呼び出し：写真がなくても、説明を入力するだけで（例：「サングラスをかけたフレンチブルドッグがスポーツカーを運転している」）、画像が生成されます。プロの指示を自動的に翻訳し、チャットボックス内で直接画像を生成します。14種類の人気スタイル（最新の手描き水彩画や日本の手描きスタイルを含む）が用意されており、ワンクリックで切り替えることができます。スクリーンセーバーを毎日変更するのも簡単です。
コードからイメージへ
Why we love this skill
このスキルは、コードを美しくハイライトされた画像に変換し、ターミナルインターフェースをシミュレートし、高解像度ダウンロードをサポートするため、開発者がコードスニペットを共有するのに理想的なツールです。
指示
上級フロントエンド開発者として、コンテンツ内のすべてのコードスニペットをハイライト画像に変換する必要があります。すべてのコードスニペットを抽出することが非常に重要です。Markdownのバッククォート（``）構文で厳密に囲まれたコードは、単一のスニペットとして扱われることに注意してください。JSXコードには特に注意を払ってください。ハイライト表示のために、JS構文はJSX構文として扱われます。
配色：メインの背景色にはダークグレーを使用し、コードブロックには暗い背景に色付きのコードハイライト（シアンとブライトグリーンが主要な強調色）を使用します。
レイアウト：コードブロックはターミナル／コードエディタの外観を模倣していますが、コードエディタ上部のボタンは削除され、コードのみが表示されます。各カードには、上下に15ピクセル、左右に25ピクセルのパディングが設定されています。
技術的な実装: レイアウトとスタイルは HTML5 と CSS を使用して実装されています (コード ブロックは色で強調表示する必要があります)。dom-to-image-more 機能が統合されています。dom-to-image-more スクリプトのアドレスは https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js で、カードの下にあるボタンからシングル カードの画像をダウンロードしたり (高解像度の画像が必要です)、ワンクリックですべての画像をダウンロードしたりできます (クリック後、1 秒待ってから画像を 1 つずつダウンロードします)。コードに不要なバッククォート (`\`) を追加しないでください。エラーの原因となる可能性があります。
これを実装する際は、以下の点にご注意ください。表紙カードはシンプルにしてください。アイコンには擬似要素を使用せず、SVGを直接使用してください。ダウンロードする画像は高解像度で、スケールは2にしてください。画像には連番で番号を付けてください。
description
記事内のすべてのコードを画像に変換し、ワンクリックでダウンロードできます。
Related Skills
View all画像反転プロンプト
ユーザーが画像を入力すると、スキルはリバースエンジニアリングのように、スタイル、構図、被写体の形状、色、雰囲気といった視覚情報を正確に抽出し、ほぼ同一の画像を直接生成できるプロンプトを出力します。派生作品作成のための簡易チュートリアルも含まれています。
言葉の中には絵画があり、絵画の中には古典がある。
慣用句を入力し、20種類の画像スタイルから選択すると、「慣用句分析カード（ピンイン、本来の意味、拡張された意味、例文、適用場面を含む）」と「慣用句の芸術的イメージに合った画像」が自動的に生成されます。これら2つは同じ画像上に合成され、横並びで出力されます。
ペット写真ディレクター | ワンクリックで映画のようなペット写真を生成
愛するペットのために、軽やかでエアリーな手描きの水彩画を描いてみませんか？ゴールデンレトリバーに宇宙服を着せてみたいですか？オレンジ色のトラ猫をジブリ映画のキャラクターに変身させたいですか？写真スタジオに行く必要も、複雑なAIの指示を理解する必要もありません。このスキルは、あなたの「ペットのパーソナルビジュアルディレクター」であり、次の2つの超クールな機能をサポートしています。1. 写真変換（強く推奨）：ペットの写真をアップロードし、スタイルを選択するだけで、ペット本来の特徴を保った素晴らしい画像が瞬時に生成されます。2. テキスト呼び出し：写真がなくても、説明を入力するだけで（例：「サングラスをかけたフレンチブルドッグがスポーツカーを運転している」）、画像が生成されます。プロの指示を自動的に翻訳し、チャットボックス内で直接画像を生成します。14種類の人気スタイル（最新の手描き水彩画や日本の手描きスタイルを含む）が用意されており、ワンクリックで切り替えることができます。スクリーンセーバーを毎日変更するのも簡単です。
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
