mcpField
H
html-ppt-zhangzara-8-bit-orbit

html-ppt-zhangzara-8-bit-orbit

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

html-ppt-zhangzara-8-bit-orbit について

8-bitのネオンアーケード風デッキを作るためのHTMLスキルです。テンプレートのビジュアルシステムとナビゲーションランタイムを保ちながら内容を差し替える手順を示します。

主な機能

  1. 01暗色のピクセルアート調ネオン
  2. 02単体で使えるHTMLデッキテンプレート
  3. 03スライド内容の差し替えガイド
  4. 04レイアウトの複製や削除
  5. 05ナビゲーション維持の手順

活用シーン

  1. 01サイバーパンクやゲームのプレゼン
  2. 02ハッカソンやインディー開発ツールの紹介
  3. 03レトロデジタル調の技術講演

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nexu-io/open-design --skill html-ppt-zhangzara-8-bit-orbit

インストール後、Claude Code で/html-ppt-zhangzara-8-bit-orbitを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

example.html
LICENSE
template.json

詳細

8-Bit Orbit

深いネイビーの虚空に広がる、ピクセルアートのネオンアーケード風デザインです。

タイポグラフィ、配色、装飾システム、スライドの語彙をすべて連動させた、単体で完結するHTMLデッキです。テンプレート間でレイアウトを混在させると、システムが崩れるため、このテンプレート内で統一してください。

概要

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

最適な用途

午前2時のCRT画面のような雰囲気を出したいものなら、どんな用途にも適しています。サイバーパンク、ゲーム、web3、インディー開発ツール、ハッカソンのデモなどに向いています。ノスタルジックなデジタル表現を取り入れたい技術トーク、シンセウェーブ風のブランドデッキ、コンソールのような雰囲気にしたいクリエイティブレビューにも最適です。

避けるべき用途

ダークなネオン配色がメッセージの妨げになる場面では避けてください。たとえば、落ち着いた雰囲気が求められる金融機関の開示資料、患者向けの医療資料、伝統的な高級ブランドなどです。

ワークフロー

  1. example.htmlを複製し、作業ファイルとしてユーザーのワークスペースに配置します。
  2. プレースホルダーの内容を置き換え、ユーザーの実際の見出し、本文、数値、名前、日付、セクションラベルを入れます。画像のプレースホルダーを差し替える際は、既存の寸法に合わせます。
  3. デザインシステムを維持します。 フォントの置き換え、配色の変更、レイアウトグリッドの再構成、装飾要素(角括弧、紙の粒子感、幾何学図形、イラスト入りSVG)の削除は行わないでください。これらはデザインのアイデンティティの一部です。
  4. レイアウトを複製してデッキの長さを調整します。 ユーザーのコンテンツがデモに収まりきらない場合は、最も適したレイアウトの既存スライドを複製します。コンテンツが少ない場合は、末尾のスライドを削除します。ページ番号のラベルも更新してください。
  5. 不足しているレイアウトをデザインする場合: テンプレートにないレイアウトが必要なときは、同じフォント、配色、装飾表現、スペーシングのリズム、コンポーネントの文法を使って、一からデザインしてください。別のテンプレートに切り替えてはいけません。
  6. 同梱されているナビゲーションのランタイムを維持します。 デッキにassets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのまま残してください。

出力仕様

<artifact>タグの間に出力してください。

<artifact identifier="zhangzara-8-bit-orbit" 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を参照してください。

コメント