mcpField
H
html-ppt-zhangzara-retro-zine

html-ppt-zhangzara-retro-zine

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

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

Retro Zine は、手作りのリソグラフ風デザインを使った自己完結型 HTML スライドデッキを作成するスキルです。付属のデザインシステムに沿った内容の調整を案内し、出版物やアートなどローファイな見た目に適した資料を作れます。

主な機能

  1. 01自己完結型 HTML デッキテンプレート
  2. 02ベージュの紙とグリーンのアクセント
  3. 03Bebas Neue と Caveat の書体
  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-retro-zine

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

同梱ファイル

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

example.html
LICENSE
template.json

詳細

レトロジン

ベージュの紙にグリーンのアクセント、Bebas Neue と Caveat を組み合わせた、HTML 形式のリソグラフ印刷風ジンです。

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

概要

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

最適な用途

印刷物のような、ローファイで手作り感のある雰囲気が求められるものに最適です。インディー系のジンや出版物、音楽・アート系ブランド、クリエイターのポートフォリオ、小規模なクラフト商品のローンチ、コミュニティ向けデッキなどが該当します。また、デジタルの洗練さではなく、リソグラフ印刷の温かみを求めるテクノロジー、研究、ビジネス関連のデッキにも最適な選択肢です。

避けたほうがよい用途

デジタルネイティブな洗練さや、現代的なテクノロジーのスピード感が求められる場面には向きません。重ね合わせたジンの美学は、意図的に手作り感のある雰囲気を演出します。

ワークフロー

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

出力仕様

<artifact> タグで囲んで出力します。

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

コメント