mcpField
H
html-ppt-zhangzara-monochrome

html-ppt-zhangzara-monochrome

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

html-ppt-zhangzara-monochrome について

Monochromeは、黒とアイボリーの簡素なデザインで、文章中心のHTMLプレゼンテーションを作成するスキルです。統一された書体とレイアウトにより、調査、政策、長文レポートに適しています。

主な機能

  1. 01アイボリーの紙面と黒い文字
  2. 02Loraのセリフ体見出しとJost本文
  3. 03再利用できるスライドレイアウト
  4. 04デザイン統一の維持ガイド

活用シーン

  1. 01ユーザー調査の統合
  2. 02ホワイトペーパーや長文レポート
  3. 03学術・政策ブリーフ
  4. 04英中バイリンガルレポート

インストール

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

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

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

同梱ファイル

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

example.html
LICENSE
template.json

詳細

モノクローム

アイボリーの帳簿用紙に、黒一色の文字。見出しには Lora のセリフ体、本文には Jost を使用し、色は一切使いません。

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

概要

  • 配色: ライト
  • フォーマル度: 高
  • 情報密度: 高
  • デモのスライド数: 16

おすすめの用途

手書きで組んだ帳簿のような雰囲気にしたいもの全般に適しています。ユーザーリサーチの統合、ホワイトペーパー、長文レポート、学術・政策ブリーフ、アドバイザリー成果物、英中バイリンガルレポートなどが該当します。また、言葉だけをページに載せたいテクノロジー、デザイン、ブランド関連のデッキにも同様に適しています。

避けたほうがよい用途

ビジュアルの個性や色を軸にしたストーリーテリングが必要なデッキには適しません。インクのみの配色は、意図的に簡素なものになっています。

ワークフロー

  1. example.html を複製し、作業用ファイルとしてユーザーのワークスペースに配置します。
  2. プレースホルダーのコンテンツを置き換え、ユーザーの実際の見出し、本文、数値、名前、日付、セクションラベルを挿入します。画像プレースホルダーを差し替える際は、既存の寸法に合わせます。
  3. デザインシステムを維持します。 フォントの置き換え、配色変更、レイアウトグリッドの再構成、装飾要素(コーナーブラケット、紙の質感、幾何学模様、イラスト付き SVG)の削除は、決して行わないでください。これらはデザインのアイデンティティを構成する要素です。
  4. レイアウトを複製してデッキの長さを調整します。 デモに収まらないほどコンテンツが多い場合は、最も適したレイアウトの既存スライドを複製します。コンテンツが少ない場合は、末尾からスライドを削除します。ページ番号のラベルも更新してください。
  5. 不足しているレイアウトをデザインする場合: テンプレートにないレイアウトが必要な場合は、同じフォント、配色、装飾表現、余白のリズム、コンポーネントの構成ルールを使用して、一からデザインします。別のテンプレートに切り替えてはいけません。
  6. 付属のナビゲーションランタイムをそのまま維持します。 デッキに assets/deck-stage.js またはインラインのキーボードハンドラーが含まれている場合は、変更しないでください。

出力要件

<artifact> タグの間に出力します。

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

コメント