mcpField
H
html-ppt-zhangzara-grove

html-ppt-zhangzara-grove

github.com/nexu-ioドキュメント104.6k58 回インストール今日更新
リポジトリ

html-ppt-zhangzara-grove について

Groveは、統一されたデザインで落ち着いた雰囲気のHTMLスライドを作るためのスキルです。テンプレートの書体、配色、レイアウト、ランタイムを保ちながら内容を置き換える手順を示します。

主な機能

  1. 01フォレストグリーンとクリーム色の配色
  2. 02Playfairのセリフ体
  3. 03再利用可能なスライドレイアウト
  4. 04スライド枚数の調整手順
  5. 05HTML出力仕様

活用シーン

  1. 01サステナビリティやウェルネスのプレゼン
  2. 02自然、ワイナリー、飲食店の資料
  3. 03文学や芸術のプレゼン
  4. 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.html
LICENSE
template.json

詳細

Grove

森の緑のキャンバスにクリーム色の文字、クラシカルなPlayfairのセリフ体、アクセントカラーには錆色をひとつ。

タイポグラフィ、パレット、装飾システム、スライドの語彙をすべて調整した、単体で完結するHTMLデッキです。テンプレート間でレイアウトを混ぜるとシステムが崩れるため、このテンプレート内で完結させてください。

概要

  • 配色: ミックス
  • フォーマル度: 中〜高
  • 密度: 中
  • デモのスライド数: 12

おすすめの用途

有機的で、よく練られ、成熟した印象が求められるあらゆる用途に適しています。サステナビリティやウェルネスのブランド、アウトドア/自然関連の商品、ワイナリーやレストラン、文学や芸術のデッキ、アドバイザリー資料、英語/中国語のバイリンガルレポートなどです。性急さよりも落ち着きを重視するテック、研究、ビジネスのデッキにも、穏やかで個性的な選択肢となります。

おすすめしない用途

ネオンのような勢いや、次々と展開するポップな印象が必要なデッキには向きません。森の緑のキャンバスとPlayfairのセリフ体が、ゆったりとしたクラシカルな語り口を生み出すためです。

ワークフロー

  1. 作業ファイルとして、example.htmlをユーザーのワークスペースに複製します。
  2. **プレースホルダーの内容を置き換えます。**見出し、本文、数値、名前、日付、セクションラベルをユーザーの実際の内容に差し替えます。画像のプレースホルダーを差し替える際は、既存の寸法に合わせます。
  3. **デザインシステムを維持します。**フォントの差し替え、パレットの色変更、レイアウトグリッドの再構成、装飾要素(コーナーブラケット、紙の粒子感、幾何学図形、イラスト付きSVG)の削除は決して行わないでください。これらはデザインのアイデンティティの一部です。
  4. **レイアウトを複製してデッキの長さを調整します。**デモに収まらない量のコンテンツがある場合は、最も適したレイアウトの既存スライドを複製します。コンテンツが少ない場合は、下部のスライドを削除します。ページ番号のラベルも更新します。
  5. 不足しているレイアウトのデザイン: 必要なレイアウトがテンプレートにない場合は、同じフォント、パレット、装飾の語彙、間隔のリズム、コンポーネントの文法を使って一から設計します。別のテンプレートに切り替えてはいけません。
  6. **同梱されているナビゲーションの実行環境を維持します。**デッキに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を参照してください。

コメント