html-ppt-zhangzara-bold-poster について
雑誌の表紙のようなプレゼンテーションを作る HTML スキルです。ブランド宣言や創業者のビジョン、クリエイティブ提案向けに、Shrikhand の大きな文字と赤のアクセントで要点を際立たせます。
主な機能
- 01単体で使える HTML デッキ
- 02Shrikhand の大きな文字
- 03赤のアクセントと装飾
- 04レイアウト複製による枚数調整
- 05付属のナビゲーション処理を維持
活用シーン
- 01ブランド宣言デッキの作成
- 02創業者のビジョンの提示
- 03編集・文化系提案の制作
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ nexu-io/ open-design --skill html-ppt-zhangzara-bold-posterインストール後、Claude Code で/html-ppt-zhangzara-bold-posterを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
example.htmlLICENSEtemplate.json詳細
大胆なポスター
Shrikhandの巨大なディスプレイ書体と、1色の消防車のような赤いアクセントが特徴のエディトリアルポスター。
1つの自己完結型HTMLデッキです。タイポグラフィ、パレット、装飾システム、スライドの表現はすべて一体となるよう調整されています。テンプレート間でレイアウトを混在させるとシステムが崩れるため、このテンプレートの範囲内で使用してください。
概要
- 配色: ライト
- フォーマル度: 中程度
- 情報密度: 低
- デモのスライド数: 10
おすすめの用途
雑誌の表紙のような印象を残したいもの全般に適しています。ブランド宣言、創業者のビジョンを伝えるデッキ、エディトリアルや文化に関する提案、クリエイティブレビューなどに最適です。テック系の基調講演や、引用したくなるような金融に関する宣言など、意外な用途も含め、少ない言葉をポスターのように印象づけたいときに優れています。
避けたほうがよい用途
スライドごとに密度の高い情報を伝える必要があるデッキには適していません。このレイアウトは、詳細な段落ではなく、少数の大きなメッセージを中心に設計されています。
ワークフロー
example.htmlを複製し、作業ファイルとしてユーザーのワークスペースに配置します。- プレースホルダーのコンテンツを、ユーザーの実際の見出し、本文、数値、名前、日付、セクションラベルに置き換えます。画像のプレースホルダーを差し替えるときは、既存の寸法に合わせます。
- デザインシステムを維持します。 フォントの置き換え、パレットの色変更、レイアウトグリッドの再構成、装飾要素(コーナーブラケット、紙の質感、幾何学図形、イラスト入りSVG)の削除は絶対に行わないでください。これらはアイデンティティの一部です。
- レイアウトを複製してデッキの長さを調整します。 ユーザーのコンテンツがデモに収まらない場合は、最も適したレイアウトの既存スライドを複製します。コンテンツが少ない場合は、末尾からスライドを削除します。ページ番号のラベルも更新してください。
- 不足しているレイアウトをデザインする場合: 必要なレイアウトがテンプレートにない場合は、同じフォント、パレット、装飾表現、間隔のリズム、コンポーネントの文法を使って一からデザインします。別のテンプレートに切り替えることは絶対にしないでください。
- 付属のナビゲーションランタイムを維持します。 デッキに
assets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのまま残してください。
出力仕様
<artifact>タグで囲んで出力します:
<artifact identifier="zhangzara-bold-poster" 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を参照してください。