mcpField
H
html-ppt-zhangzara-peoples-platform

html-ppt-zhangzara-peoples-platform

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

html-ppt-zhangzara-peoples-platform について

クリーム地に青、オレンジ、赤を配した、アクティビストポスター調のHTMLプレゼンテーション制作スキルです。一貫したスライドシステムを備え、内容や長さの調整方法も示します。

主な機能

  1. 01青、オレンジ、赤の配色
  2. 02Alfa SlabとCaveat Brushの書体
  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-peoples-platform

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

同梱ファイル

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

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

詳細

People's Platform (Block & Bold)

活動家ポスターのエネルギー:クリーム色を背景に、青、オレンジ、赤を配し、Alfa Slab と Caveat Brush を使用しています。

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

概要

  • 配色: ライト
  • フォーマル度: ややカジュアル
  • 情報密度: やや高め
  • デモのスライド数: 10

おすすめの用途

誠実さ、力強さ、グラフィック性を感じさせたいあらゆる場面に適しています。文化批評、マニフェスト、市民活動や地域コミュニティ向けのデッキ、デザイン講演、キャンペーンの提案などにおすすめです。創業者のビジョンを伝える場面やミッションステートメント、業界を問わず、企業的な洗練さよりも抗議ポスターのようなエネルギーを求めるデッキにも最適です。

避けたほうがよい用途

組織としての抑制が実際に求められる場面には適していません。彩度の高い政治ポスター風の配色は、強い表現力を前面に押し出します。

ワークフロー

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

出力要件

<artifact> タグで囲んで出力してください。

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

コメント