html-ppt-zhangzara-cobalt-grid について
コバルトブルーのアクセント、イタリックのセリフ体、方眼紙の背景を備えた HTML プレゼンテーションを作るスキルです。デザイン、研究、芸術、学術分野向けの抑制されたビジュアル体系を提供します。
主な機能
- 01コバルトとクリーム色の配色
- 02イタリックのセリフ体
- 03方眼紙のキャンバス
- 04ピクセルグリッチ装飾
- 05レイアウト複製による枚数調整
活用シーン
- 01デザイン・研究速報
- 02スタジオ年次プレゼンテーション
- 03建築・芸術資料
- 04学術発表やトレンドレポート
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/html-ppt-zhangzara-cobalt-gridを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
example.htmlLICENSEtemplate.json詳細
Cobalt Grid
グラフ用紙のキャンバスに、鮮やかなコバルトブルーのイタリック体セリフ体を配し、階段状のピクセルグリッチ装飾と細い罫線で引き締めています。
タイポグラフィ、カラーパレット、装飾システム、スライドの語彙をすべて一体として調整した、単独で動作する HTML デッキです。テンプレート間でレイアウトを混在させるとシステムが崩れるため、このテンプレート内で一貫させてください。
概要
- 配色: ライト
- 格式: 高
- 情報量: 中
- デモのスライド数: 8
おすすめの用途
落ち着いた真剣さを感じさせるデザイン／リサーチの会報、アート出版物、キュレーションされたトレンドレポートなどに適しています。スタジオの年次報告、代理店のケイパビリティデッキ、デザインリサーチの出版物、建築／アート／学術分野のデッキにも最適です。また、企業的な洗練さよりも、厳格なアクセントカラーと印刷台帳のような落ち着きを求めるデッキにも適しています。
避けるべき用途
温かみ、多彩な色彩、気軽で遊び心のある語り口が必要なデッキには向きません。コバルトブルー、クリーム色、グリッドを基調とした厳格なパレットは、意図的に簡素な印象にしています。
ワークフロー
example.htmlを複製し、ユーザーのワークスペースに作業ファイルとして配置します。- プレースホルダーの内容を置き換え、ユーザーの実際の見出し、本文、数値、名前、日付、セクションラベルを使用します。画像プレースホルダーを差し替える場合は、既存の寸法に合わせます。
- デザインシステムを維持します。 フォントの差し替え、パレットの再配色、レイアウトグリッドの再構成、装飾要素（コーナーブラケット、紙の質感、幾何学図形、イラスト入り SVG）の削除はしないでください。これらはデザインのアイデンティティの一部です。
- レイアウトを複製してデッキの長さを調整します。 ユーザーのコンテンツがデモに収まらない場合は、最も適したレイアウトの既存スライドを複製します。コンテンツが少ない場合は、末尾からスライドを削除します。ページ番号のラベルも更新します。
- 不足しているレイアウトをデザインする場合: 必要なレイアウトがテンプレートにない場合は、同じフォント、パレット、装飾の語彙、間隔のリズム、コンポーネントの文法を使って一からデザインします。別のテンプレートに切り替えないでください。
- ナビゲーションのランタイムは出荷時のまま維持します。 デッキに
assets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのまま残してください。
出力仕様
<artifact> タグの間に出力します。
<artifact identifier="zhangzara-cobalt-grid" 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 を参照してください。