mcpField
H
html-ppt-zhangzara-biennale-yellow

html-ppt-zhangzara-biennale-yellow

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

html-ppt-zhangzara-biennale-yellow について

温かみのある羊皮紙色と太陽のような黄色を使い、アートビエンナーレ風の HTML プレゼンテーションを作るスキルです。内容の差し替え方を示しつつ、テンプレートのデザイン体系を保ちます。

主な機能

  1. 01羊皮紙色と太陽色の配色
  2. 02インディゴのセリフ体
  3. 03装飾的なスライド体系
  4. 04レイアウト複製による枚数調整
  5. 05ナビゲーションランタイムの維持

活用シーン

  1. 01展覧会や美術館プログラムの資料
  2. 02芸術機関の告知
  3. 03デザイン会議のパンフレット
  4. 04キュレーション提案やスタジオ回顧資料

インストール

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

$npx skills add https://github.com/nexu-io/open-design --skill html-ppt-zhangzara-biennale-yellow

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

同梱ファイル

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

example.html
LICENSE
template.json

詳細

ビエンナーレ・イエロー

温かみのあるパーチメントに映えるソーラーイエロー、深いインディゴのセリフ体、そして空気感のある太陽の輝きを思わせるグラデーション。

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

概要

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

最適な用途

アートビエンナーレのポスターや美術館の年間プログラムのような雰囲気が求められるもの全般に適しています。展覧会デッキ、芸術文化機関のお知らせ、デザインカンファレンスのパンフレット、キュレーション企画の提案、文芸出版物、スタジオの回顧展などが該当します。オランダのエディトリアルデザインを思わせる雰囲気と、ひと目でわかる単色の個性を求めるデッキにも最適です。

避けるべき用途

視覚的なインパクトや、彩度の高い多色のエネルギーが必要なデッキには向きません。温かみのある紙のようなキャンバスとイエローだけの配色は、意図的に静かで空気感のあるデザインになっています。

ワークフロー

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

出力仕様

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

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

コメント