mcpField
H
html-ppt-zhangzara-creative-mode

html-ppt-zhangzara-creative-mode

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

html-ppt-zhangzara-creative-mode について

クリーム色の背景に複数の鮮やかなアクセント色と Archivo Black の見出し書体を組み合わせた、表現豊かな HTML プレゼンテーションを作るスキルです。クリエイティブレビューから一部の技術・ビジネス講演まで、一貫したテンプレートを活用できます。

主な機能

  1. 01クリーム色の背景と多色アクセント
  2. 02Archivo Black の見出し書体
  3. 03装飾的なスライド体系
  4. 04レイアウト複製による枚数調整
  5. 05キーボード操作ランタイムの維持

活用シーン

  1. 01クリエイティブエージェンシーの提案
  2. 02ブランド・アートディレクションレビュー
  3. 03デザインスタジオのプレゼンテーション
  4. 04表現的な技術講演や財務レビュー

インストール

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

$npx skills add https://github.com/nexu-io/open-design --skill html-ppt-zhangzara-creative-mode

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

同梱ファイル

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

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

詳細

クリエイティブモード

クリーム色の紙のキャンバスに、鮮やかな複数色(緑、ピンク、オレンジ、黄色)のアクセントと、Archivo Black のディスプレイ書体を組み合わせています。

タイポグラフィ、カラーパレット、装飾の体系、スライドの語彙をすべて一体として調整した、自己完結型の 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-creative-mode" 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 を参照してください。

コメント