html-ppt-zhangzara-block-frame について
高密度でネオブルータリズム調の HTML プレゼンテーションを作るスキルです。パステルネオンのブロック、太い黒枠、統一されたスライド構成が、デザイン重視の発表に適しています。
主な機能
- 01ネオブルータリズムのビジュアル
- 02パステルネオンの色ブロック
- 03太い黒枠
- 04再利用可能なスライドレイアウト
- 05HTMLデッキ出力
活用シーン
- 01インディーSaaSのローンチ発表
- 02エージェンシーの実績紹介
- 03クリエイティブレビュー
- 04ブランド刷新のプレゼンテーション
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/html-ppt-zhangzara-block-frameを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
example.htmlLICENSEtemplate.json詳細
BlockFrame
パステルネオンのカラーブロックと太い黒枠が特徴の、ネオ・ブルータリズム風スライドデッキです。
タイポグラフィ、配色、装飾システム、スライドの表現がすべて連動する、単一の自己完結型 HTML デッキです。テンプレート間でレイアウトを混在させるとシステムが崩れるため、このテンプレートの範囲内で使用してください。
概要
- 配色: ライト
- フォーマル度: やや低め
- 情報密度: 高め
- デモのスライド数: 10
おすすめの用途
ポップなグラフィックとデザイン主導の印象が求められるもの全般に適しています。インディー SaaS のローンチ、エージェンシーの実績紹介、クリエイティブレビュー、ブランドのリデザインなどが該当します。また、堅苦しさよりも自信と現代性を印象づけたい場合は、テック、金融、研究分野にも意外性のある有力な選択肢です。
使用を避ける場面
静かで制度的な抑制や伝統的な重厚感が求められる場面（規制対象の開示資料、正式な法律文書など）。
ワークフロー
- 作業ファイルとして、
example.htmlをユーザーのワークスペースに複製します。 - プレースホルダーの内容を、ユーザーの実際の見出し、本文、数値、名前、日付、セクション名に差し替えます。画像のプレースホルダーを置き換える場合は、既存の寸法に合わせてください。
- デザインシステムを維持します。 フォントの置き換え、配色の変更、レイアウトグリッドの再構成、装飾要素（コーナーブラケット、紙の質感、幾何学図形、イラスト入り SVG）の削除は行わないでください。これらはデザインのアイデンティティの一部です。
- レイアウトを複製してデッキの長さを調整します。 ユーザーのコンテンツがデモに収まらない場合は、最も適したレイアウトの既存スライドを複製します。コンテンツが少ない場合は、末尾からスライドを削除します。ページ番号のラベルを更新してください。
- 不足しているレイアウトのデザイン: スライドにテンプレートにないレイアウトが必要な場合は、同じフォント、配色、装飾表現、余白のリズム、コンポーネントの文法を用いて、独自にデザインしてください。別のテンプレートに切り替えることは避けてください。
- 同梱されているナビゲーションのランタイムをそのまま維持します。 デッキに
assets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのまま残してください。
出力仕様
<artifact>タグで囲んで出力してください。
<artifact identifier="zhangzara-block-frame" 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を参照してください。