html-ppt-zhangzara-playful について
温かくカジュアルなHTMLスライドを作成するためのスキルです。桃色の配色、タイポグラフィ、レイアウトを統一し、クリエイターのポートフォリオやインディー製品の発表などに適しています。
主な機能
- 01単体で使えるHTMLスライドテンプレート
- 02桃色の配色とSyne見出し書体
- 03統一された装飾とレイアウト
- 04内容とスライド数の調整ガイド
- 05MITライセンスの上流テンプレート
活用シーン
- 01インディー製品の発表資料作成
- 02クリエイターのポートフォリオ紹介
- 03ライフスタイルブランドの資料作成
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/html-ppt-zhangzara-playfulを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
example.htmlLICENSEtemplate.json詳細
Playful
Syne のディスプレイ書体が映える、陽だまりのようなピーチ色の背景。親しみやすいインディー向けのローンチデッキです。
タイポグラフィ、配色、装飾のシステム、スライドの表現をすべて一体化させた、単一の自己完結型 HTML デッキです。テンプレート間でレイアウトを組み合わせるとシステムが崩れるため、このテンプレートの範囲内で使用してください。
概要
- 配色: ライト
- フォーマル度: 低
- 情報量: 中
- デモのスライド数: 10
おすすめの用途
温かみがあり、インディーらしく、親しみやすい印象を持たせたいものに最適です。クリエイターのポートフォリオ、インディー製品のローンチ、ライフスタイルブランド、小規模事業のピッチ、ニュースレターやコミュニティのデッキなどに適しています。企業的な印象よりも、親しみやすさや人間味を大切にしたいデッキであれば、テックや研究などの分野でも使いやすいデザインです。
おすすめしない用途
温かみよりも組織としての信頼性が重視される場面には適していません。ピーチ色の配色は、意図的にカジュアルな印象にしています。
ワークフロー
- 作業ファイルとして、
example.htmlをユーザーのワークスペースに複製します。 - プレースホルダーの内容を、ユーザーの実際の見出し、本文、数値、名前、日付、セクション名に置き換えます。画像のプレースホルダーを差し替える際は、既存の寸法に合わせてください。
- デザインシステムを維持します。 フォントの変更、配色の変更、レイアウトグリッドの再構成、装飾要素（コーナーブラケット、紙の質感、幾何学模様、イラスト SVG）の削除は行わないでください。これらはデザインのアイデンティティの一部です。
- レイアウトの複製でデッキの長さを調整します。 デモよりもコンテンツが多い場合は、最も適したレイアウトの既存スライドを複製します。少ない場合は、末尾からスライドを削除します。ページ番号のラベルも更新してください。
- 不足しているレイアウトの設計: 必要なレイアウトがテンプレートにない場合は、同じフォント、配色、装飾表現、余白のリズム、コンポーネントのルールを用いてゼロから設計してください。別のテンプレートに切り替えてはいけません。
- ナビゲーションのランタイムは、提供時の状態のまま維持してください。 デッキに
assets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのまま残してください。
出力要件
<artifact> タグで囲んで出力します。
<artifact identifier="zhangzara-playful" 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 を参照してください。