mcpField
H
html-ppt-zhangzara-editorial-tri-tone

html-ppt-zhangzara-editorial-tri-tone

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

html-ppt-zhangzara-editorial-tri-tone について

くすみピンク、マスタード、深いバーガンディを使った、エディトリアル調のHTMLプレゼンテーション制作スキルです。テンプレートの書体やビジュアルシステムを保ちながら、内容やスライド数を調整できます。

主な機能

  1. 01三色のエディトリアル配色
  2. 02BricolageとInstrument Serifの書体
  3. 03再利用可能なHTMLスライドレイアウト
  4. 04キーボードナビゲーションのランタイム
  5. 05スライド数の調整ガイド

活用シーン

  1. 01エディトリアルやファッションブランドの提案
  2. 02ライフスタイルメディアのプレゼン
  3. 03アートディレクションのレビュー

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nexu-io/open-design --skill html-ppt-zhangzara-editorial-tri-tone

インストール後、Claude Code で/html-ppt-zhangzara-editorial-tri-toneを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

example.html
LICENSE
template.json
assets/
deck-stage.js

詳細

エディトリアル・トリトーン

ダスティピンク、マスタードクリーム、ディープバーガンディの3色を使ったエディトリアルシステム。Bricolage + Instrument Serif を採用しています。

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

概要

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

おすすめの用途

ファッション誌の見開きのような雰囲気を出したいもの全般に適しています。エディトリアル向けの提案資料、ファッションブランドのデッキ、ライフスタイルメディア、アートディレクションのレビューなどが該当します。トリトーンの統一感と、よくあるニュートラルカラーの代わりにセリフ体とサンセリフ体のコントラストを取り入れたいデッキであれば、テクノロジー、研究、ビジネスなど、どの分野にも適しています。

避けたほうがよい用途

柔らかく安心感のある印象が求められるデッキには向きません。バーガンディ、ピンク、クリームのトリトーンは、意図的にコントラストを強くし、スタイリッシュに仕上げています。

ワークフロー

  1. example.html と assets/ フォルダーをユーザーのワークスペースにコピーします。 このテンプレートには assets/deck-stage.js のランタイム(キーボード操作、ステージの描画)が含まれています。HTMLはこれを assets/deck-stage.js として参照するため、コピーしたHTMLと同じ場所にファイルを置いてください。そうしないと、生成された成果物でこのパスが404になり、ナビゲーションが機能しなくなります。単一の自己完結型ファイルにする場合は、JSをHTML内の単一の <script> ブロックにインライン化してもかまいません。
  2. プレースホルダーのコンテンツを、ユーザーが用意した実際の見出し、本文、数値、名前、日付、セクションラベルに置き換えます。画像のプレースホルダーを差し替える場合は、既存の寸法に合わせます。
  3. デザインシステムを維持します。 フォントの置き換え、パレットの色変更、レイアウトグリッドの再構成、装飾要素(コーナーブラケット、紙の粒子感、幾何学模様、イラスト付きSVG)の削除は行わないでください。これらはデザインのアイデンティティを構成する要素です。
  4. レイアウトを複製してデッキの長さを調整します。 ユーザーのコンテンツがデモに収まらない場合は、最も適切なレイアウトの既存スライドを複製します。コンテンツが少ない場合は、末尾のスライドを削除します。ページ番号のラベルも更新してください。
  5. 不足しているレイアウトのデザイン: スライドにテンプレートにないレイアウトが必要な場合は、同じフォント、パレット、装飾の語彙、余白のリズム、コンポーネントの文法を使って、一からデザインします。別のテンプレートに切り替えてはいけません。
  6. 同梱されたナビゲーションランタイムをそのまま維持します。 デッキに assets/deck-stage.js またはインラインのキーボードハンドラーが含まれている場合は、変更せずに残してください。

出力要件

<artifact> タグで囲んで出力します。

<artifact identifier="zhangzara-editorial-tri-tone" 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 を参照してください。

コメント