html-ppt-zhangzara-broadside について
ドラマチックなエディトリアル調デッキを作るためのHTMLスキルです。暗色の画面、ファイアオレンジのアクセント、ラテン文字と中国語の書体構成を備え、デザインシステムを保った編集方法を示します。
主な機能
- 01暗色のエディトリアルデザイン
- 02ファイアオレンジのアクセント
- 03ラテン文字と中国語の書体構成
- 04単体で使えるHTMLデッキテンプレート
- 05スライドレイアウト拡張のガイド
活用シーン
- 01ブランド宣言や創業者のビジョン資料
- 02雑誌や文化企画の提案
- 03英中バイリンガルのプレゼン
- 04エディトリアル調のデザインやビジネス講演
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/html-ppt-zhangzara-broadsideを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
example.htmlLICENSEtemplate.json詳細
Broadside
火のようなオレンジを唯一のアクセントにした、ダークなエディトリアルキャンバス。ラテン文字と中国語の二言語タイポグラフィを組み合わせています。
タイポグラフィ、配色、装飾システム、スライドの語彙が一体となった、自己完結型の単一 HTML デッキです。テンプレート間でレイアウトを混在させるとシステムが崩れるため、このテンプレートの範囲内で使用してください。
概要
- 配色: ダーク
- フォーマル度: やや高め
- 情報密度: 中程度
- デモのスライド数: 16
おすすめの用途
新聞の大見出しのように印象を残したいもの全般に適しています。ブランドのマニフェスト、雑誌や文化関連の提案、デザインに関する講演、英語と中国語の二言語デッキ、創業者のビジョン表明などが該当します。また、ドラマチックでアクセントカラーを絞ったエディトリアルな印象を求める、技術、研究、ビジネス関連のデッキにもおすすめです。
避けたほうがよい用途
落ち着いた雰囲気、温かみ、または伝統的な組織の印象が必要なデッキには向きません。ダークなキャンバスと火のようなオレンジのアクセントが、ドラマチックな印象を強く打ち出すためです。
ワークフロー
example.htmlを複製し、ユーザーのワークスペースに作業ファイルとして配置します。- プレースホルダーの内容を、ユーザーの実際の見出し、本文、数値、名前、日付、セクションラベルに置き換えます。画像プレースホルダーを差し替える際は、既存のサイズに合わせてください。
- デザインシステムを維持します。 フォントの変更、配色の変更、レイアウトグリッドの再構成、装飾要素（コーナーブラケット、紙の質感、幾何学図形、イラスト入り SVG）の削除はしないでください。これらはデザインのアイデンティティの一部です。
- レイアウトを複製してデッキの長さを調整します。 デモに収まる量よりユーザーのコンテンツが多い場合は、最も適したレイアウトの既存スライドを複製します。少ない場合は、末尾からスライドを削除します。ページ番号のラベルも更新してください。
- 不足しているレイアウトの作成: スライドにテンプレートにはないレイアウトが必要な場合は、同じフォント、配色、装飾の語彙、スペーシングのリズム、コンポーネントの文法を使ってゼロからデザインします。別のテンプレートに切り替えないでください。
- ナビゲーションのランタイムは、提供された状態のまま維持します。 デッキに
assets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのまま残してください。
出力仕様
<artifact> タグの間に出力します。
<artifact identifier="zhangzara-broadside" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>
ソースとライセンス
MIT ライセンスの上流リポジトリ
zarazhangrui/beautiful-html-templates から取り込まれています。
元の著作権表示を含む、上流の MIT ライセンス全文は、このスキルの
LICENSE に収録されています。また、example.html、
template.json、またはベンダー提供の assets/ ランタイムのコピーと一緒に再配布する必要があります。上流のメタデータのスナップショットについては、template.json を参照してください。