html-ppt-zhangzara-vellum について
学術的な雰囲気の HTML スライドを作るスキルです。濃紺の背景と控えめなアクセントを用い、研究の統合、政策概要、編集コンテンツに合う落ち着いたデザインと再利用可能なレイアウトを備えています。
主な機能
- 01濃紺の背景
- 02暖かな黄色の Cormorant 斜体セリフ体
- 03くすんだティールのアクセント
- 04再利用可能な HTML スライドレイアウト
活用シーン
- 01研究統合の発表
- 02政策概要の作成
- 03編集コンテンツのプレゼンテーション
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ nexu-io/ open-design --skill html-ppt-zhangzara-vellumインストール後、Claude Code で/html-ppt-zhangzara-vellumを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
example.htmlLICENSEtemplate.json詳細
Vellum
深いネイビーのキャンバスに、温かみのあるイエローのイタリック体Cormorantセリフと、控えめなくすんだティールのアクセントをひとつ。静かで学術的な美しさです。
単独で完結するHTMLデッキです。タイポグラフィ、配色、装飾システム、スライドの表現は、すべて一体となるよう調整されています。テンプレート間でレイアウトを組み合わせると、このシステムが崩れるため、このテンプレートの範囲内で使用してください。
概要
- 配色: ダーク
- フォーマル度: 高
- 情報密度: 低
- デモのスライド数: 9
最適な用途
学術的で文学的な、静かな知性を感じさせたいあらゆるコンテンツに適しています。たとえば、調査結果の統合、白書、学術・政策ブリーフ、アドバイザリー向け資料、長編の編集記事、創業者の所感などです。また、テクノロジー、ビジネス、クリエイター向けなど、エネルギッシュなビジュアルではなく、落ち着いた熟慮の雰囲気を求めるあらゆるデッキにも適しています。
避けるべき用途
視覚的な熱量やインパクトが必要な場面には適しません。ネイビーと温かみのあるイエローのイタリック体Cormorantによる美しさは、意図的に落ち着いたテンポになっています。
ワークフロー
example.htmlを複製し、 ユーザーのワークスペースに作業ファイルとして保存します。- プレースホルダーのコンテンツを置き換え、 ユーザーの実際の見出し、本文、数値、名前、日付、セクションラベルを使用します。画像プレースホルダーを差し替える際は、既存のサイズに合わせてください。
- デザインシステムを維持します。 フォントの置き換え、配色の変更、レイアウトグリッドの再構成、装飾要素(コーナーブラケット、紙の質感、幾何学模様、イラスト入りSVG)の削除は行わないでください。これらはデザインのアイデンティティの一部です。
- レイアウトを複製してデッキの長さを調整します。 ユーザーのコンテンツがデモの容量を超える場合は、最も適したレイアウトの既存スライドを複製します。コンテンツが少ない場合は、末尾からスライドを削除します。ページ番号のラベルを更新してください。
- 不足しているレイアウトのデザイン: 必要なレイアウトがテンプレートにない場合は、同じフォント、配色、装飾表現、余白のリズム、コンポーネントの文法を用いてゼロからデザインしてください。別のテンプレートに切り替えてはいけません。
- 同梱されているナビゲーションのランタイムを維持します。 デッキに
assets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのまま残してください。
出力仕様
<artifact>タグで囲んで出力します:
<artifact identifier="zhangzara-vellum" 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を参照してください。