html-ppt-zhangzara-sakura-chroma について
クリーム色の紙や虹色のリボン、幅の狭い太字を用いた、レトロな日本のカセットパッケージ風HTMLプレゼンテーションを作るスキルです。テンプレートのデザイン体系を保ちながら内容を調整する手順を示します。
主な機能
- 01レトロなカセットパッケージ風デザイン
- 02クリーム色の紙と虹色のリボン
- 03幅の狭い太字書体
- 04再利用可能なスライドレイアウト
- 05HTML作成ワークフロー
活用シーン
- 01インディー系ハードウェアブランドの資料
- 02音楽レーベルのリリース予定表
- 03Zineや雑誌の企画提案
- 04クリエイティブスタジオの年次報告
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ nexu-io/ open-design --skill html-ppt-zhangzara-sakura-chromaインストール後、Claude Code で/html-ppt-zhangzara-sakura-chromaを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
example.htmlLICENSEtemplate.json詳細
Sakura Chroma
ヴィンテージな日本のカセットパッケージの美学:クリーム色の紙、斜めに走る虹色のリボン、幅の狭い太字、JIS風の仕様チェックボックス。
タイポグラフィ、配色、装飾システム、スライドの語彙が一体となった、単独で完結するHTMLデッキです。テンプレート間でレイアウトを混ぜるとシステムが崩れるため、このテンプレート内で使用してください。
概要
- 配色: ライト
- フォーマル度: 低
- 情報密度: 中
- デモのスライド数: 8
おすすめの用途
ヴィンテージな日本のカセットパッケージや、TDK/Sony/Sakura Colorの製品カタログのような雰囲気にしたい場合に適しています。インディーハードウェアブランドのデッキ、音楽レーベルのリリース予定、アナログスタジオの回顧録、ZINEや雑誌の企画書、カワイイ系テック製品のローンチ、クリエイティブスタジオの年次報告書などにおすすめです。大胆な色使い、幅の狭いディスプレイ書体、手触りのある印刷物のような個性を求めるデッキにも同様に適しています。
避けるべき用途
落ち着きや企業らしさ、控えめなタイポグラフィが必要なデッキには向きません。幅の狭い太字のロックアップ、リボン状のストライプ、原色の配色は、意図的に派手で、商品ページのような印象になっています。
ワークフロー
- 作業ファイルとして
example.htmlをユーザーのワークスペースに 複製します。 - プレースホルダーの内容を、ユーザーの実際の見出し、本文、数値、名前、日付、セクションラベルに 置き換えます。画像のプレースホルダーを差し替える際は、既存の寸法に合わせてください。
- デザインシステムを維持します。 フォントの差し替え、配色の変更、レイアウトグリッドの再構成、装飾要素(隅の括弧、紙の質感、幾何学模様、イラスト入りSVG)の削除は、決して行わないでください。これらはデザインのアイデンティティの一部です。
- レイアウトを複製してデッキの長さを調整します。 デモに収まらない量のコンテンツがある場合は、最も適したレイアウトの既存スライドを複製してください。コンテンツが少ない場合は、下からスライドを削除します。ページ番号のラベルを更新してください。
- 不足しているレイアウトのデザイン: スライドにテンプレートにないレイアウトが必要な場合は、同じフォント、配色、装飾の語彙、余白のリズム、コンポーネントの文法を使って、一からデザインしてください。別のテンプレートに切り替えることは避けてください。
- ナビゲーションのランタイムは提供時の状態で維持します。 デッキに
assets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのままにしてください。
出力仕様
<artifact> タグで囲んで出力してください。
<artifact identifier="zhangzara-sakura-chroma" 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 を参照してください。