html-ppt-zhangzara-coral について
Coralは、ほぼ黒の背景にクリーム色とコーラルを配し、Bebas Neueを大きく使うHTMLスライド作成スキルです。ライフスタイルブランドやポートフォリオ、温かく自信のある語り口を求める研究・テクノロジー資料に適しています。
主な機能
- 01ほぼ黒の背景にクリーム色とコーラル
- 02大きなBebas Neue書体
- 03再利用できるHTMLスライドレイアウト
- 04デザインシステムを維持・拡張する手順
活用シーン
- 01ファッションやライフスタイルブランドの紹介
- 02クリエイターのポートフォリオやマニフェスト制作
- 03研究・テクノロジー資料への編集的なトーン付け
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/html-ppt-zhangzara-coralを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
example.htmlLICENSEtemplate.json詳細
Coral
ほぼ黒の背景にクリーム色とコーラルを配し、大きな Bebas Neue で組み上げています。
タイポグラフィ、カラーパレット、装飾システム、スライドの語彙を一体的に調整した、単一の自己完結型 HTML デッキです。テンプレート間でレイアウトを混在させるとシステムが崩れるため、このテンプレート内にとどめてください。
概要
- 配色: ミックス
- フォーマル度: 中
- 情報密度: 中
- デモのスライド数: 10
最適な用途
温かみのあるグラフィックとエディトリアルな印象を与えたいもの全般です。ファッション、美容、フィットネス、飲食、ライフスタイルブランド、エージェンシーの実績紹介などに適しています。クリエイターのポートフォリオ、マニフェスト、あるいは企業的な冷たさではなく、温かみと大胆なアクセントを求めるテクノロジーや研究のデッキにも同様に適しています。
避けるべき用途
静謐さや公的な印象が求められる場面には適しません。コーラルのアクセントと大きな Bebas Neue により、自信に満ちた雑誌のような語り口が強く打ち出されます。
ワークフロー
- 作業ファイルとして、
example.htmlをユーザーのワークスペースに複製します。 - プレースホルダーの内容を置き換えます。 見出し、本文、数値、名前、日付、セクションラベルをユーザーの実際の内容に置き換えます。画像のプレースホルダーを差し替える際は、既存の寸法に合わせてください。
- デザインシステムを維持します。 フォントの差し替え、配色の変更、レイアウトグリッドの再構成、装飾要素（角括弧、紙の粒子感、幾何学的な図形、イラスト入り SVG）の削除はしないでください。これらはデザインのアイデンティティの一部です。
- レイアウトを複製してデッキの長さを調整します。 デモに収まらない量のコンテンツがある場合は、最も適したレイアウトの既存スライドを複製してください。コンテンツが少ない場合は、末尾のスライドを削除してください。ページ番号のラベルも更新してください。
- 不足しているレイアウトを設計する場合： 必要なレイアウトがテンプレートにない場合は、同じフォント、カラーパレット、装飾の語彙、余白のリズム、コンポーネントの文法を使ってゼロから設計してください。別のテンプレートに切り替えないでください。
- 同梱されているナビゲーションのランタイムを維持します。 デッキに
assets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのまま残してください。
出力要件
<artifact> タグで囲んで出力します：
<artifact identifier="zhangzara-coral" 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 を参照してください。