コードからイメージへ

作成者
冴羽
インストール数
3
カテゴリ画像
出典YouMind
編集部のおすすめ

このスキルをおすすめする理由

このスキルは、コードを美しくハイライトされた画像に変換し、ターミナルインターフェースをシミュレートし、高解像度ダウンロードをサポートするため、開発者がコードスニペットを共有するのに理想的なツールです。

指示

上級フロントエンド開発者として、コンテンツ内のすべてのコードスニペットをハイライト画像に変換する必要があります。すべてのコードスニペットを抽出することが非常に重要です。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にしてください。画像には連番で番号を付けてください。

Écrire

説明

記事内のすべてのコードを画像に変換し、ワンクリックでダウンロードできます。

関連スキル

すべて表示
画像

レイジコミック風イラスト

「One-Page Rage Comic Generator」は、中国風の怒り漫画を生成するために特別に設計されたスキルです。シナリオ、感情、ミーム、あるいは「今日の私」などを入力するだけで、自動的に完全な1ページの白黒怒り漫画スタイルの画像に展開されます。デフォルトで生成される効果には、次のものがあります。・白黒の線画・誇張された表情・頭が大きく体が小さい漫画のキャラクター・吹き出しと大きなテキストの怒り・1コマの大きな画像または2~4コマの短い漫画・明確なジョークまたは仕上げのタッチ・ソーシャルメディアへの投稿やミームの拡散に適しています。労働者階級の怒り、学生の崩壊、社会不安、カップルの日常生活、失敗したダイエット、仕事への遅刻、クライアントの修正、上司との会議など、共感を呼ぶテーマに特に適しています。このスキルは、既存の怒り漫画のページや特定の有名なミーム画像を直接コピーするのではなく、中国の怒り漫画と同様の読書体験を提供するオリジナルの1ページのオンライン怒り漫画を生成します。

25
画像

OpenAI風のプロモーションポスター

製品、イベント、コラボレーションのテーマに基づいて、ローンチ、プロモーション、カバー、SaaS Heroでの使用に適した、洗練されたポスターやビジュアルカバーを生成します。ソフトフォーカスカラーフィールド、リアルな素材、自然なシーン、暖色系の色彩ダイナミクス、フルーツマクロ、高速ビームなど、8種類のスタイルをサポートし、アップロードされたロゴ、スクリーンショット、正確なコピーを保持するため、アイデアから完成品までのデザインのハードルを下げます。

41.7k
画像

超ロングポスタージェネレーター

これは、連続した長尺ポスターの作成に特化したGPTプランニングおよび生成システムです。再設計、部分的な置き換え、テンプレートの拡張といった様々なタスクを識別し、価格、名称、メリット、時間などの重要な情報を抽出して階層的に保護し、ポスター全体の情報フロー、セグメント数、ビジュアルマスターを統一的に計画します。使用方法は簡単で、素材やリソースをアップロードし、比率、スタイル、用途を指定するだけです。システムはまず完全なプランを出力し、確認後、ポスターを1枚ずつ生成します。コンテンツの忠実性、マスターページのロック、テキストのホワイトリスト化、ポスターごとの確認、自動校正、スプライシングチェックをサポートし、スタイルの不整合、テキストエラー、コンテンツの重複、不連続性などの問題を軽減し、最終的に一貫性のある統一された長尺ポスターを作成します。

101k

次のお気に入りスキルを見つけよう

リサーチ、制作、日々の作業に役立つ厳選AIスキルをさらに探しましょう。

すべてのスキルを見る