html-ppt-zhangzara-retro-windows について
Windows 95風の単体HTMLスライドを作成するスキルです。テンプレートの内容を置き換えながら、書体、配色、レイアウト、ナビゲーションを維持する手順を示します。
主な機能
- 01Windows 95風のビジュアル
- 02単体HTMLスライドテンプレート
- 03プレースホルダー置換の手順
- 04レイアウト複製による枚数調整
- 05ナビゲーションランタイムの維持
活用シーン
- 01レトロゲームのプレゼン作成
- 02Y2K風ブランド資料の制作
- 03テクノロジー史の講演資料
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ nexu-io/ open-design --skill html-ppt-zhangzara-retro-windowsインストール後、Claude Code で/html-ppt-zhangzara-retro-windowsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
example.htmlLICENSEtemplate.json詳細
レトロな Windows
Windows 95 のクローム:グレーのタイトルバー、MS Sans Serif、ピクセル調のタイポグラフィー、懐かしさ満載です。
タイポグラフィー、配色、装飾システム、スライドの語彙を一体として調整した、単独で動作する HTML デッキです。テンプレートをまたいでレイアウトを混ぜるとシステムが崩れるため、このテンプレート内にとどめてください。
概要
- 配色: ライト
- フォーマルさ: 低
- 情報密度: 中
- デモのスライド数: 10
おすすめの用途
意図的に懐かしさを感じさせたい場合に最適です。レトロゲーム、Y2K 美学のブランド、90 年代の雰囲気があるクリエイターのポートフォリオ、技術史の講演、あえてユーモラスなデッキなどに適しています。遊び心のあるレトロな引用が主題となる場面に最適です。
避けたほうがよい用途
モダンで洗練された印象や、組織としての信頼感が必要なデッキには適しません。Win95 のクロームはどうしても仮装のように見えます。
ワークフロー
example.htmlを複製し、作業ファイルとしてユーザーのワークスペースに配置します。- プレースホルダーのコンテンツを置き換え、ユーザーの実際の見出し、本文、数値、名前、日付、セクションラベルを入れます。画像のプレースホルダーを差し替える際は、既存の寸法に合わせます。
- デザインシステムを維持します。フォントの置き換え、配色の変更、レイアウトグリッドの再構成、装飾要素(コーナーブラケット、紙の質感、幾何学模様、イラスト入り SVG)の削除は行わないでください。これらはアイデンティティの一部です。
- レイアウトを複製してデッキの長さを調整します。デモよりコンテンツが多い場合は、最も適切なレイアウトの既存スライドを複製します。少ない場合は、末尾のスライドを削除します。ページ番号のラベルも更新します。
- 不足するレイアウトをデザインする場合: スライドにテンプレートにないレイアウトが必要なら、同じフォント、配色、装飾の語彙、余白のリズム、コンポーネントの文法を使って一からデザインします。別のテンプレートに切り替えてはいけません。
- ナビゲーションのランタイムは提供時の状態のまま維持します。デッキに
assets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのまま残します。
出力仕様
<artifact> タグの間に出力します:
<artifact identifier="zhangzara-retro-windows" 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 を参照してください。