mcpField
H
html-ppt-zhangzara-stencil-tablet

html-ppt-zhangzara-stencil-tablet

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

html-ppt-zhangzara-stencil-tablet について

文化、研究、伝統を扱う、アーカイブ感のある手触りを備えた HTML プレゼンテーションを作るスキルです。ステンシル書体、アースカラー、スライド構成を一体のデザインシステムとして定めています。

主な機能

  1. 01ステンシル風見出し書体
  2. 026色のアースカラーパレット
  3. 03再利用可能なスライドレイアウト
  4. 04キーボード操作ランタイム
  5. 05HTMLデッキ出力

活用シーン

  1. 01博物館・文化機関のプレゼンテーション
  2. 02アート・建築ブランドのデッキ
  3. 03長編研究のプレゼンテーション

インストール

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

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

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

同梱ファイル

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

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

詳細

ステンシル&タブレット

ステンシルで切り抜いた見出しと、6色のアースカラーを使ったボーンペーパー:考古学とブランドの融合です。

1つの自己完結型HTMLデッキです。タイポグラフィ、パレット、装飾の仕組み、 スライドの語彙がすべて一体となるよう調整されています。テンプレート間で レイアウトを混ぜるとシステムが崩れるため、このテンプレートの範囲内で使用してください。

概要

  • 配色: ライト
  • フォーマル度: やや高め
  • 情報量: 中程度
  • デモのスライド数: 11

おすすめの用途

アーカイブ感、手触り、重厚なグラフィック表現が求められるあらゆる用途に適しています。美術館や文化機関のデッキ、アート/建築ブランド、長編の研究資料、遺産や工芸のブランド、マニフェストなどにおすすめです。テクノロジーやビジネスの分野も含め、スライドデッキではなくフィールドマニュアルのような印象にしたい場合に最適です。

避けるべき用途

デジタルネイティブな洗練さや、遊び心のあるポップな表現が求められる場面には向きません。ステンシルで切り抜いたディスプレイ書体とアースカラーのパレットが、意図的なアナログ感を打ち出します。

ワークフロー

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

出力仕様

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

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

コメント