mcpField
H
html-ppt-zhangzara-retro-windows

html-ppt-zhangzara-retro-windows

github.com/nexu-ioドキュメント104.6k58 回インストール今日更新
リポジトリ

html-ppt-zhangzara-retro-windows について

Windows 95風の単体HTMLスライドを作成するスキルです。テンプレートの内容を置き換えながら、書体、配色、レイアウト、ナビゲーションを維持する手順を示します。

主な機能

  1. 01Windows 95風のビジュアル
  2. 02単体HTMLスライドテンプレート
  3. 03プレースホルダー置換の手順
  4. 04レイアウト複製による枚数調整
  5. 05ナビゲーションランタイムの維持

活用シーン

  1. 01レトロゲームのプレゼン作成
  2. 02Y2K風ブランド資料の制作
  3. 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.html
LICENSE
template.json

詳細

レトロな Windows

Windows 95 のクローム:グレーのタイトルバー、MS Sans Serif、ピクセル調のタイポグラフィー、懐かしさ満載です。

タイポグラフィー、配色、装飾システム、スライドの語彙を一体として調整した、単独で動作する HTML デッキです。テンプレートをまたいでレイアウトを混ぜるとシステムが崩れるため、このテンプレート内にとどめてください。

概要

  • 配色: ライト
  • フォーマルさ: 低
  • 情報密度: 中
  • デモのスライド数: 10

おすすめの用途

意図的に懐かしさを感じさせたい場合に最適です。レトロゲーム、Y2K 美学のブランド、90 年代の雰囲気があるクリエイターのポートフォリオ、技術史の講演、あえてユーモラスなデッキなどに適しています。遊び心のあるレトロな引用が主題となる場面に最適です。

避けたほうがよい用途

モダンで洗練された印象や、組織としての信頼感が必要なデッキには適しません。Win95 のクロームはどうしても仮装のように見えます。

ワークフロー

  1. example.html を複製し、作業ファイルとしてユーザーのワークスペースに配置します。
  2. プレースホルダーのコンテンツを置き換え、ユーザーの実際の見出し、本文、数値、名前、日付、セクションラベルを入れます。画像のプレースホルダーを差し替える際は、既存の寸法に合わせます。
  3. デザインシステムを維持します。フォントの置き換え、配色の変更、レイアウトグリッドの再構成、装飾要素(コーナーブラケット、紙の質感、幾何学模様、イラスト入り SVG)の削除は行わないでください。これらはアイデンティティの一部です。
  4. レイアウトを複製してデッキの長さを調整します。デモよりコンテンツが多い場合は、最も適切なレイアウトの既存スライドを複製します。少ない場合は、末尾のスライドを削除します。ページ番号のラベルも更新します。
  5. 不足するレイアウトをデザインする場合: スライドにテンプレートにないレイアウトが必要なら、同じフォント、配色、装飾の語彙、余白のリズム、コンポーネントの文法を使って一からデザインします。別のテンプレートに切り替えてはいけません。
  6. ナビゲーションのランタイムは提供時の状態のまま維持します。デッキに 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 を参照してください。

コメント