html-ppt-zhangzara-pin-and-paper について
温かみのある手作りの紙を思わせる HTML スライドを作るスキルです。文学的なストーリー、質的研究、ワークショップの振り返りに向き、統一されたデザインと再利用可能なレイアウトを備えています。
主な機能
- 01黄色い紙と安全ピンのモチーフ
- 02Caveat の手書き風書体
- 03紙の粒子感
- 04再利用可能な HTML スライドレイアウト
活用シーン
- 01質的研究の発表
- 02創業者の考えの共有
- 03長編ブランドストーリーの紹介
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ nexu-io/ open-design --skill html-ppt-zhangzara-pin-and-paperインストール後、Claude Code で/html-ppt-zhangzara-pin-and-paperを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
example.htmlLICENSEtemplate.jsonassets/deck-stage.jsstyles.css詳細
Pin & Paper
安全ピンのイラスト、インクブルーの手書き文字「Caveat」、紙の繊維感をあしらった黄色い紙。
タイポグラフィ、配色、装飾システム、スライドの表現をすべて一体として調整した、自己完結型のHTMLデッキです。テンプレート間でレイアウトを混在させるとシステムが崩れるため、このテンプレートの範囲内で使用してください。
概要
- 配色: ライト
- フォーマル度: 中
- 情報密度: 中
- デモのスライド数: 11
最適な用途
手作りの温かみと文学的な雰囲気を出したいあらゆる用途に適しています。たとえば、質的調査の結果、創業者の振り返り、長編のブランドストーリー、ワークショップの振り返りなどです。特徴的な安全ピンのイラストと紙の繊維感により、洗練さよりも個性や温かみを重視するデッキであれば、技術系やビジネス系を含め、特に適しています。
避けるべき用途
デジタルネイティブな洗練さや、厳密なデータ重視の印象が必要なデッキには適していません。手書き文字の「Caveat」は、意図的にカジュアルなデザインです。
ワークフロー
example.htmlとassets/フォルダーを両方、ユーザーのワークスペースにコピーします。 このテンプレートには、assets/deck-stage.jsランタイム(キーボードナビゲーション、ステージのレンダリング)とassets/styles.cssスタイルシートが含まれています。HTMLではこれらをassets/deck-stage.jsおよびassets/styles.cssとして参照しているため、複製したHTMLと同じ階層に両方を配置する必要があります。そうしないと、生成された成果物でパスが404になり、ナビゲーションやスタイルが機能しなくなります。単一の自己完結型ファイルが望ましい場合は、JS/CSSをHTML内の単一の<script>/<style>ブロックにインライン化してもかまいません。- プレースホルダーのコンテンツを、ユーザーの実際の見出し、本文、数値、名前、日付、セクションラベルに置き換えます。画像プレースホルダーを差し替える際は、既存の寸法に合わせてください。
- デザインシステムを維持します。 フォントの変更、配色の変更、レイアウトグリッドの再構成、装飾要素(コーナーブラケット、紙の繊維感、幾何学形状、イラスト入りSVG)の削除はしないでください。これらはデザインのアイデンティティの一部です。
- レイアウトを複製してデッキの長さを調整します。 ユーザーのコンテンツがデモに収まらない場合は、最も適したレイアウトの既存スライドを複製します。コンテンツが少ない場合は、末尾からスライドを削除します。ページ番号のラベルも更新してください。
- 不足しているレイアウトのデザイン: テンプレートにないレイアウトが必要なスライドは、同じフォント、配色、装飾表現、余白のリズム、コンポーネントの文法を使って一からデザインします。別のテンプレートに切り替えてはいけません。
- ナビゲーションランタイムは、提供時の状態を維持してください。 デッキに
assets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのまま残してください。
出力要件
<artifact>タグの間に出力してください。
<artifact identifier="zhangzara-pin-and-paper" 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を参照してください。