html-ppt-zhangzara-raw-grid について
太い境界線、ずらした影、ピンク・セージ・インクの配色を使う、ネオブルータリズムのHTMLプレゼンテーションを作るスキルです。テンプレートのグラフィック体系を保ちながら、内容やレイアウトを調整する手順を示します。
主な機能
- 01ネオブルータリズムのデザイン
- 02太い境界線とずらした影
- 03ピンク・セージ・インクの配色
- 04再利用可能なスライドレイアウト
- 05HTML作成ワークフロー
活用シーン
- 01創業者やアクセラレーター向けピッチ
- 02ブランド資料やインディー製品のローンチ
- 03クリエイターのポートフォリオ
- 04比較表やプロセスフロー
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ nexu-io/ open-design --skill html-ppt-zhangzara-raw-gridインストール後、Claude Code で/html-ppt-zhangzara-raw-gridを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
example.htmlLICENSEtemplate.json詳細
Raw Grid
太いボーダー、ずらしたシャドウ、ピンク/セージ/インクのパレットを特徴とするネオ・ブルータリズムなスライドデッキです。
タイポグラフィ、パレット、装飾システム、スライドの語彙がすべて調和する、単一で自己完結した HTML スライドデッキです。異なるテンプレートのレイアウトを組み合わせるとシステムが崩れるため、このテンプレートの範囲内で作成してください。
概要
- 配色: ライト
- フォーマル度: ややカジュアル
- 情報密度: 高
- デモのスライド数: 10
おすすめの用途
率直でグラフィックに自信のある印象を与えたいあらゆる用途に適しています。創業者向けのピッチ、アクセラレータのデモ、ブランドデッキ、インディー製品のローンチ、クリエイターのポートフォリオなどが挙げられます。統計スライド、比較表、プロセスフローに特に適しています。テック、研究、金融分野でも、きちんと整った印象より、荒削りで自信に満ちた印象を求める場合に最適です。
避けるべき用途
柔らかく、温かみがあり、あるいは意図的に落ち着いた雰囲気が求められる場面には適していません。ブルータリズムなボーダーとずらしたシャドウが、強いグラフィック表現を打ち出します。
ワークフロー
- 作業ファイルとして、
example.htmlをユーザーのワークスペースに複製します。 - **プレースホルダーのコンテンツを置き換えます。**見出し、本文、数値、名前、日付、セクションラベルをユーザーの実際の内容に差し替えます。画像のプレースホルダーを置き換える際は、既存の寸法に合わせてください。
- **デザインシステムを維持します。**フォントの変更、パレットの再配色、レイアウトグリッドの再構成、装飾要素(コーナーブラケット、紙の質感、幾何学図形、イラスト入り SVG)の削除はしないでください。これらはデザインのアイデンティティの一部です。
- **レイアウトを複製してスライドの長さを調整します。**デモに収まらないほどユーザーのコンテンツが多い場合は、最適なレイアウトの既存スライドを複製します。コンテンツが少ない場合は、末尾からスライドを削除します。ページ番号のラベルも更新してください。
- **不足しているレイアウトのデザイン:**必要なレイアウトがテンプレートにない場合は、同じフォント、パレット、装飾の語彙、スペーシングのリズム、コンポーネントの文法を用いて、一からデザインしてください。別のテンプレートに切り替えてはいけません。
- **付属のナビゲーションランタイムをそのまま維持します。**スライドデッキに
assets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのまま残してください。
出力仕様
<artifact> タグで囲んで出力します:
<artifact identifier="zhangzara-raw-grid" 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 を参照してください。