html-ppt-zhangzara-grove について
Groveは、統一されたデザインで落ち着いた雰囲気のHTMLスライドを作るためのスキルです。テンプレートの書体、配色、レイアウト、ランタイムを保ちながら内容を置き換える手順を示します。
主な機能
- 01フォレストグリーンとクリーム色の配色
- 02Playfairのセリフ体
- 03再利用可能なスライドレイアウト
- 04スライド枚数の調整手順
- 05HTML出力仕様
活用シーン
- 01サステナビリティやウェルネスのプレゼン
- 02自然、ワイナリー、飲食店の資料
- 03文学や芸術のプレゼン
- 04英中バイリンガルレポート
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ nexu-io/ open-design --skill html-ppt-zhangzara-groveインストール後、Claude Code で/html-ppt-zhangzara-groveを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
example.htmlLICENSEtemplate.json詳細
Grove
森の緑のキャンバスにクリーム色の文字、クラシカルなPlayfairのセリフ体、アクセントカラーには錆色をひとつ。
タイポグラフィ、パレット、装飾システム、スライドの語彙をすべて調整した、単体で完結するHTMLデッキです。テンプレート間でレイアウトを混ぜるとシステムが崩れるため、このテンプレート内で完結させてください。
概要
- 配色: ミックス
- フォーマル度: 中〜高
- 密度: 中
- デモのスライド数: 12
おすすめの用途
有機的で、よく練られ、成熟した印象が求められるあらゆる用途に適しています。サステナビリティやウェルネスのブランド、アウトドア/自然関連の商品、ワイナリーやレストラン、文学や芸術のデッキ、アドバイザリー資料、英語/中国語のバイリンガルレポートなどです。性急さよりも落ち着きを重視するテック、研究、ビジネスのデッキにも、穏やかで個性的な選択肢となります。
おすすめしない用途
ネオンのような勢いや、次々と展開するポップな印象が必要なデッキには向きません。森の緑のキャンバスとPlayfairのセリフ体が、ゆったりとしたクラシカルな語り口を生み出すためです。
ワークフロー
- 作業ファイルとして、
example.htmlをユーザーのワークスペースに複製します。 - **プレースホルダーの内容を置き換えます。**見出し、本文、数値、名前、日付、セクションラベルをユーザーの実際の内容に差し替えます。画像のプレースホルダーを差し替える際は、既存の寸法に合わせます。
- **デザインシステムを維持します。**フォントの差し替え、パレットの色変更、レイアウトグリッドの再構成、装飾要素(コーナーブラケット、紙の粒子感、幾何学図形、イラスト付きSVG)の削除は決して行わないでください。これらはデザインのアイデンティティの一部です。
- **レイアウトを複製してデッキの長さを調整します。**デモに収まらない量のコンテンツがある場合は、最も適したレイアウトの既存スライドを複製します。コンテンツが少ない場合は、下部のスライドを削除します。ページ番号のラベルも更新します。
- 不足しているレイアウトのデザイン: 必要なレイアウトがテンプレートにない場合は、同じフォント、パレット、装飾の語彙、間隔のリズム、コンポーネントの文法を使って一から設計します。別のテンプレートに切り替えてはいけません。
- **同梱されているナビゲーションの実行環境を維持します。**デッキに
assets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのまま残します。
出力仕様
<artifact>タグで囲んで出力します。
<artifact identifier="zhangzara-grove" 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を参照してください。