html-ppt-zhangzara-daisy-days について
明るく柔らかなプレゼンテーション向けのHTMLテンプレートスキルです。パステルカラーと手描きのデイジー、星、虹で装飾し、デザイン体系を保ちながら内容やレイアウトを調整する方法を示します。
主な機能
- 01パステル配色と手描きモチーフ
- 02デイジー、星、虹の装飾
- 03再利用可能なスライドレイアウト
- 04HTMLデッキの出力仕様
- 05ナビゲーションランタイムの維持
活用シーン
- 01教育・家族向けコンテンツ
- 02ウェルネスや地域ワークショップ
- 03クラフトやイラストのポートフォリオ
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ nexu-io/ open-design --skill html-ppt-zhangzara-daisy-daysインストール後、Claude Code で/html-ppt-zhangzara-daisy-daysを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
example.htmlLICENSEtemplate.json詳細
デイジーデイズ
手描きのデイジー、星、虹をあしらった、明るいパステル調のデッキです。親しみやすく、柔らかく、温かみがあります。
タイポグラフィ、配色、装飾のシステム、スライドの表現をすべて一体として調整した、単一の自己完結型 HTML デッキです。テンプレート間でレイアウトを混在させるとシステムが崩れるため、このデッキの範囲内で使用してください。
概要
- 配色: ライト
- フォーマルさ: 低
- 情報密度: 中
- デモのスライド数: 10
最適な用途
親しみやすく、柔らかく、楽しい雰囲気を伝えたいあらゆる内容に適しています。教育コンテンツ、子どもや家族向けの内容、ウェルネスプログラム、地域コミュニティのワークショップ、クラフトやイラストを扱うクリエイターのポートフォリオなどに最適です。また、意外性のある遊び心を取り入れた社内キックオフ、結婚式のプランニング用デッキ、あるいはテクノロジーやビジネスの場面を含め、温かみを伝えたいあらゆる機会にもぴったりです。
避けるべき用途
聴衆が権威や正確さを明確に求めている場面には適しません。手描きのパステル調 SVG 装飾は、かっちりとした印象とは正反対です。
ワークフロー
- **
example.htmlを複製し、**作業ファイルとしてユーザーのワークスペースに配置します。 - **プレースホルダーの内容を置き換え、**ユーザーの実際の見出し、本文、数値、名前、日付、セクションラベルを反映します。画像のプレースホルダーを差し替える場合は、既存の寸法に合わせます。
- デザインシステムを維持します。 フォントの差し替え、配色の変更、レイアウトグリッドの再構成、装飾要素(コーナーのブラケット、紙の質感、幾何学模様、イラスト風 SVG)の削除は行わないでください。これらはデザインのアイデンティティを構成する要素です。
- レイアウトを複製してデッキの長さを調整します。 デモに収まるより多くのコンテンツがある場合は、最も適したレイアウトの既存スライドを複製します。少ない場合は、末尾からスライドを削除します。ページ番号ラベルも更新します。
- 不足しているレイアウトをデザインする場合: 必要なレイアウトがテンプレートにない場合は、同じフォント、配色、装飾の表現、スペーシングのリズム、コンポーネントの文法に従って、一からデザインします。別のテンプレートに切り替えてはいけません。
- ナビゲーションの実行時処理は提供時のまま維持します。 デッキに
assets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのまま残します。
出力仕様
<artifact> タグで囲んで出力します。
<artifact identifier="zhangzara-daisy-days" 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 を参照してください。