html-ppt-zhangzara-studio について
黒いキャンバスとエレクトリックイエローの文字を使った、デザイン重視のHTMLプレゼンテーション制作スキルです。テンプレートのビジュアルアイデンティティとナビゲーションを保ちながら、既存レイアウトを調整できます。
主な機能
- 01黒とエレクトリックイエローの配色
- 02デザインスタジオ風のビジュアル
- 03再利用可能なHTMLスライドレイアウト
- 04デッキの長さを調整するガイド
- 05ナビゲーションランタイムの維持
活用シーン
- 01クリエイティブエージェンシーの実績紹介
- 02ブランドやアートディレクションの展示
- 03デザイン重視のテクノロジーやビジネス資料
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/html-ppt-zhangzara-studioを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
example.htmlLICENSEtemplate.json詳細
Studio
黒いキャンバスにエレクトリックイエローの文字が映える、ハイボルテージなデザインスタジオの美学です。
タイポグラフィ、カラーパレット、装飾システム、スライドの表現はすべて、一体となるよう調整された、単一の自己完結型 HTML デッキです。テンプレート間でレイアウトを混在させるとシステムが崩れるため、このテンプレートの範囲内で使用してください。
概要
- 配色: ダーク
- フォーマルさ: 中程度
- 情報量: 中程度
- デモのスライド数: 12
おすすめの用途
電気的でデザイン主導の印象にしたいもの全般に適しています。スタジオの実績紹介、クリエイティブエージェンシーの提案、ブランド紹介、アートディレクションのレビュー、ファッション／スニーカーブランドの制作物などです。また、デッキそのものをブランドステートメントにしたい場合には、テック、研究、ビジネス向けデッキにも意外性のある選択肢としてよく映えます。
おすすめしない用途
落ち着きや格式が求められる場面には適しません。黒とエレクトリックイエローの配色は、ライブラリ内で最も強い印象を与えます。
ワークフロー
- 作業ファイルとして、
example.htmlをユーザーのワークスペースに複製します。 - プレースホルダーの内容を、ユーザーの実際の見出し、本文、数値、名前、日付、セクションラベルに置き換えます。画像プレースホルダーを差し替えるときは、既存の寸法に合わせます。
- デザインシステムを維持します。 フォントの置き換え、配色の変更、レイアウトグリッドの再構成、装飾要素（コーナーブラケット、紙の質感、幾何学形状、イラスト入り SVG）の削除は行わないでください。これらはアイデンティティの一部です。
- レイアウトを複製してデッキの長さを調整します。 ユーザーのコンテンツがデモに収まらない場合は、最も適したレイアウトの既存スライドを複製します。コンテンツが少ない場合は、末尾からスライドを削除します。ページ番号ラベルも更新してください。
- 不足しているレイアウトのデザイン： テンプレートにないレイアウトが必要な場合は、同じフォント、カラーパレット、装飾表現、余白のリズム、コンポーネントの文法を使って一からデザインします。別のテンプレートに切り替えてはいけません。
- 同梱されているナビゲーションのランタイムをそのまま維持します。 デッキに
assets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのまま残します。
出力仕様
<artifact> タグで囲んで出力します。
<artifact identifier="zhangzara-studio" 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 を参照してください。