mcpField
H
html-ppt-zhangzara-neo-grid-bold

html-ppt-zhangzara-neo-grid-bold

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

html-ppt-zhangzara-neo-grid-bold について

エディトリアルなネオ・ブルータリズム調のHTMLプレゼンテーションを作るデザインスキルです。デザイナーが視覚システムを保ちながら内容やレイアウトを調整できます。

主な機能

  1. 01オフホワイト地とネオンイエロー
  2. 02エディトリアルなネオ・ブルータリズム
  3. 03再利用可能なスライドレイアウト
  4. 04枚数調整のガイド
  5. 05HTML出力仕様

活用シーン

  1. 01デザイン重視の提案資料
  2. 02ブランド紹介
  3. 03データ比較やプロセスの図示

インストール

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

$npx skills add https://github.com/nexu-io/open-design --skill html-ppt-zhangzara-neo-grid-bold

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

同梱ファイル

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

example.html
LICENSE
template.json
assets/
deck-stage.js

詳細

Neo-Grid Bold

オフホワイトの紙にネオンイエローを一点だけ配した、エディトリアルなネオ・ブルータリズム。

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

概要

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

おすすめの用途

自信に満ちたエディトリアルなグラフィック表現が求められる場面に適しています。デザイン主導のピッチ、ブランド関連の制作、創業者の講演、カンファレンスの基調講演などに最適です。数値を多く含むスライド、比較、プロセスフローにも優れています。企業的な印象ではなくデザイン主導の印象を与えたい場合には、テクノロジー、研究、金融分野でも同様に力を発揮します。

避けるべき用途

落ち着きや伝統、温かみが求められる場面には適していません。ネオンイエローのアクセントと大文字のディスプレイ書体が、自信に満ちたエディトリアルな表現を強く印象づけます。

ワークフロー

  1. example.html と assets/ フォルダーを両方、ユーザーのワークスペースに複製します。 このテンプレートには assets/deck-stage.js ランタイム(キーボード操作、ステージ描画)が含まれています。HTMLから assets/deck-stage.js として参照しているため、複製したHTMLと同じ場所にファイルを配置する必要があります。そうしないと、生成された成果物でパスが404となり、ナビゲーションが機能しなくなります。単一の自己完結型ファイルが望ましい場合は、HTML内の単一の <script> ブロックにJSをインラインで記述してもかまいません。
  2. プレースホルダーの内容を、ユーザーの実際の見出し、本文、数値、名前、日付、セクションラベルに置き換えます。画像プレースホルダーを差し替える場合は、既存の寸法に合わせてください。
  3. デザインシステムを維持します。 フォントの置き換え、配色の変更、レイアウトグリッドの再構成、装飾要素(コーナーブラケット、紙の質感、幾何学模様、イラスト入りSVG)の削除は決して行わないでください。これらはデザインのアイデンティティを構成する要素です。
  4. レイアウトを複製してデッキの長さを調整します。 ユーザーのコンテンツがデモより多い場合は、最も適したレイアウトの既存スライドを複製します。少ない場合は、末尾からスライドを削除します。ページ番号のラベルも更新してください。
  5. 不足しているレイアウトのデザイン: テンプレートにないレイアウトが必要な場合は、同じフォント、配色、装飾の語彙、間隔のリズム、コンポーネントの文法を使って、ゼロからデザインします。別のテンプレートに切り替えてはいけません。
  6. 付属のナビゲーションランタイムを維持します。 デッキに assets/deck-stage.js またはインラインのキーボードハンドラーが含まれている場合は、そのまま残してください。

出力仕様

<artifact> タグの間に出力します。

<artifact identifier="zhangzara-neo-grid-bold" 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 を参照してください。

コメント