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旅行用冷蔵庫マグネットポスター
ユーザーの写真から、ミニマルな冷蔵庫マグネット風のアイコンが付いた、縦に分割された旅行写真ポスターを生成します。背景は単色で、テキストオーバーレイはオプションです。
弁護士のWeChatモーメンツ九面図ジェネレーター
このツールは、弁護士のWeChatモーメンツ向けに、プロフェッショナルな9マス構成の画像を生成します。事例研究とアドバイスを物語形式で提示することで、潜在顧客に切迫感を与え、法律相談へと誘導します。弁護士情報やアバターのカスタマイズに対応し、ホワイトボード風の手描きデザインを採用することで、法律用語を羅列することなく、共感的な言葉遣いで顧客との繋がりを築きます。このスキルのおかげで、私は既に継続的な収益化を実現しています。この手法は、同様の専門家、独立開業弁護士、顧客獲得を目指す方々にも応用可能です。
シティカルチャーピクセルムードジェネレーター
世界中のあらゆる都市の文化を深く掘り下げ、ピクセルアート風のカルチャームードポスターを生成しましょう。8ビット刺繍パッチワークの美学で都市の真の個性を表現し、ピクセル刺繍コラージュを使ってあらゆる都市の「カルチャームード」ポスターを生成します。都市名を入力するだけで、魂のこもったピクセルムードポスターが手に入ります。
コードからイメージへ
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旅行用冷蔵庫マグネットポスター
ユーザーの写真から、ミニマルな冷蔵庫マグネット風のアイコンが付いた、縦に分割された旅行写真ポスターを生成します。背景は単色で、テキストオーバーレイはオプションです。
弁護士のWeChatモーメンツ九面図ジェネレーター
このツールは、弁護士のWeChatモーメンツ向けに、プロフェッショナルな9マス構成の画像を生成します。事例研究とアドバイスを物語形式で提示することで、潜在顧客に切迫感を与え、法律相談へと誘導します。弁護士情報やアバターのカスタマイズに対応し、ホワイトボード風の手描きデザインを採用することで、法律用語を羅列することなく、共感的な言葉遣いで顧客との繋がりを築きます。このスキルのおかげで、私は既に継続的な収益化を実現しています。この手法は、同様の専門家、独立開業弁護士、顧客獲得を目指す方々にも応用可能です。
シティカルチャーピクセルムードジェネレーター
世界中のあらゆる都市の文化を深く掘り下げ、ピクセルアート風のカルチャームードポスターを生成しましょう。8ビット刺繍パッチワークの美学で都市の真の個性を表現し、ピクセル刺繍コラージュを使ってあらゆる都市の「カルチャームード」ポスターを生成します。都市名を入力するだけで、魂のこもったピクセルムードポスターが手に入ります。
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
