デザインツール on KnightLiブログ

PPTからプロトタイプ設計まで：Guizang PPT SkillとHuashu Designの使いどころ

Sat, 09 May 2026 08:34:23 +0800

最近、中国語圏の開発者が作った2つのデザイン系 Agent Skill は、並べて見る価値があります。ひとつは歸藏による guizang-ppt-skill、もうひとつは花叔による huashu-design です。

どちらも従来の意味での「デザインツール」ではありません。設計プロセス、審美上の好み、チェックリスト、エンジニアリングテンプレートを、Agent が実行できる Skill として記述したものです。UI を開いて要素を少しずつドラッグするのではなく、Claude Code、Codex、Cursor のような Agent に要件を渡し、決められた流れに沿って HTML、PPT、アニメーション、プロトタイプを生成させます。

この種のプロジェクトの価値は、AI にランダムに発想させることではありません。「どう作れば見苦しくならないか」をプロセス化している点にあります。

guizang-ppt-skill：雑誌風Web PPTに特化

歸藏の guizang-ppt-skill は位置づけが明確です。単一ファイルの HTML 横スクロールPPTを生成し、視覚の基調は「デジタル雑誌 x 電子インク」です。汎用デザインフレームワークというより、登壇用に用意されたレイアウトシステムに近い存在です。

リポジトリの README では、主な機能として次のものが挙げられています。

単一ファイル HTML 出力。ビルドもサーバーも不要で、ブラウザから直接開ける。
横方向のページ移動。キーボード、ホイール、タッチスワイプ、下部ドット、ESC インデックスに対応。
Ink Classic、Indigo Porcelain、Forest Ink、Kraft Paper、Dune を含む5種類のテーマカラープリセット。
オープニングカバー、章区切り、データ大見出し、左テキスト右画像、画像グリッド、Pipeline、サスペンス質問、大きな引用、Before/After 比較、テキスト画像混在など10種類のページレイアウト。
テンプレート、コンポーネント説明、レイアウト骨格、テーマ設定、品質チェックリストを内蔵。

オフライン共有、業界内の社内発表、少人数イベント、AIプロダクト発表、demo day、そして強い個人スタイルを持つプレゼン資料に向いています。一方で、大量の表データ、研修教材、複数人での共同編集にはあまり向きません。

このプロジェクトの良いところは、割り切りです。すべてのデザイン場面を覆おうとせず、「雑誌風PPT」という場面を狭く定義しています。テーマ色はプリセットから選び、レイアウトにも明確な骨格があります。その制約が、むしろ Agent の脱線を減らします。

意見、業界観察、プロダクト発表の内容をプレゼン deck にまとめる機会が多いなら、かなり実用的です。

インストールコマンドも単純です。

`1`	`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill`

huashu-design：より包括的なHTMLネイティブ設計ワークフロー

花叔の huashu-design はカバー範囲がより広いです。目標は PPT だけを作ることではなく、HTML をネイティブなデザインキャンバスとして扱い、Agent に納品可能なデザイン資産を生成させることです。

リポジトリの README では、次のような機能が挙げられています。

クリック可能な App または Web プロトタイプ。
HTML スライド、および編集可能な PPTX エクスポート。
プロダクト発表アニメーション、MP4、GIF、音楽付きバージョン。
複数方向のデザイン案の横並び比較。
インフォグラフィック、データ可視化、PDF、PNG、SVG エクスポート。
哲学的一貫性、視覚階層、実行品質、機能性、革新性を含む5次元の専門家レビュー。

中心にある考え方は、Agent にまずブランドと素材を理解させ、その後で高忠実度のデザインを出させることです。プロジェクトでは Core Asset Protocol が強調されています。具体的なブランドを扱うときは、記憶に頼って推測するのではなく、logo、製品画像、UI スクリーンショット、配色、フォント、ブランドガイドラインを先に確認します。

これは重要です。AI が生成したデザインの多くは「デザインっぽく」は見えますが、特定の実在する製品やブランドには見えません。huashu-design はこの問題を前段で解決しようとします。まず本物の素材を見つけ、それからデザインする、という流れです。

インストールコマンドは次のとおりです。

`1`	`npx skills add alchaincyf/huashu-design`

より包括的なデザイン納品をターミナル内で進めたい人に向いています。製品プロトタイプ、発表アニメーション、プレゼン資料、インフォグラフィック、デザインレビューを、ひとつの Agent ワークフローに載せて処理できます。

両者の最大の違い

簡単に言えば、guizang-ppt-skill はより狭く、より安定したプレゼン deck 生成器です。huashu-design はより広く、より包括的な HTML ネイティブ設計システムです。

PPT だけを見るなら：

guizang-ppt-skill は雑誌感、リズム、版面、単一ファイルのブラウザ発表をより重視します。
huashu-design は汎用的なデザイン能力、編集可能な PPTX、ブランド素材、エクスポート経路、レビュー工程をより重視します。

全体的なデザイン能力を見るなら：

guizang-ppt-skill は境界が明確で、スタイルのある横型プレゼンを素早く作るのに向いています。
huashu-design はより総合的で、製品やブランドのデザインタスクをプロトタイプ、アニメーション、スライド、インフォグラフィックに分解するのに向いています。

この2つのプロジェクトは、Skill の書き方としても異なる型を示しています。前者は高度に収束したテンプレートと審美上の制約の集合に近く、後者は小さなデザインチームのワークフロー説明書に近いものです。

なぜこの種のSkillが重要なのか

Agent でよくある問題は、「できるが、安定しない」ことです。同じ要件でも、あるときは良い出力になり、別のときは紫のグラデーション、角丸カード、偽物のアイコン、もっともらしい空文句へ流れてしまうことがあります。

Skill の意義は、そこに安定性を補うことです。次のようなものを固定化できます。

再利用可能なテンプレート。
実行可能なチェックリスト。
明確な審美上の好み。
よくあるミスを避けるルール。
出力形式と検証フロー。
いつ質問し、いつそのまま作業を始めるべきか。

これは、単に「もっと高級感を出して」と書くよりはるかに信頼できます。

特にデザインタスクでは、審美は一文の prompt だけで安定して再現できるものではありません。本当に役に立つのはプロセスです。まず素材を確認し、方向性を決め、構造を組み、視覚表現を作り、最後に出力を確認する。この流れを Skill として書くことで、Agent は一回きりの画像生成器ではなく、協働できる実行者に近づきます。

使い分けの提案

ひとつのテーマをオフライン登壇や共有用の deck にしたいだけなら、まず guizang-ppt-skill を試すとよいでしょう。出力の境界が狭く、単一ファイル HTML なので配布やプレビューもしやすいです。

Agent により包括的なデザインタスクを任せたい場合、たとえば App プロトタイプ、発表アニメーション、ブランド化されたスライド、エクスポート可能な PPTX、インフォグラフィックなどであれば、まず huashu-design を見るとよいでしょう。ワークフローは長めですが、複数回の反復と納品物の出力が必要なタスクに向いています。

すでに自分の Codex や Claude Code Skill を書いているなら、この2つのプロジェクトはいずれも参考になります。

「狭い場面をどう安定させるか」を学びたいなら、guizang-ppt-skill。
「複雑なワークフローをどう実行可能なプロトコルに分解するか」を学びたいなら、huashu-design。

まとめ

歸藏と花叔の2つのプロジェクトに共通しているのは、「デザイン能力」を一回の prompt から、繰り返し実行できるプロセスへ変えていることです。

guizang-ppt-skill の重点は雑誌風 HTML PPT で、強くスタイル化されたプレゼンに向いています。huashu-design の重点は HTML ネイティブ設計システムで、プロトタイプ、アニメーション、スライド、インフォグラフィック、レビューまでをカバーします。解決しているのは「AI はデザインを生成できるか」ではなく、「AI は安定した方法に沿って納品可能なデザインを生成できるか」です。

これは Agent ツールのエコシステムにおいて、重要なオープンソースプロジェクトの一類型になるかもしれません。コードテンプレートだけでなく、人間の経験、審美、仕事の進め方を Skill としてパッケージ化するものです。

参考リンク：

AIで点線・矢印・曲線を描く方法、キャンバスサイズを変更する方法

Fri, 08 May 2026 09:18:53 +0800

ここでの AI は一般的なベクターデザインソフトを指し、人工知能による画像生成ではない。

AIソフトを使い始めた人がよく検索するのは、AIで点線を描く方法、矢印を描く方法、曲線を描く方法、キャンバスサイズを変更する方法だ。どれも基本操作だが、入口は線、ペンツール、線分ツール、アートボードツールに分かれている。

実際の使用順に整理する。

AIで点線を描く方法

AIソフトでは、点線は単独のツールではなく、通常は「線」パネルで設定する。

手順：

線分ツール、ペンツール、または 図形ツール で線やパスを描く。
その線を選択する。
ウィンドウ -> 線 を開く。
線パネルで 破線 をオンにする。
線分 と 間隔 の数値を設定する。

よく使う考え方：

線分：実線部分の長さ。
間隔：実線同士の空き。
線幅：点線全体の太さ。

均等な点線にしたい場合は、まず次を試す。

1
2

線分：8
間隔：8

丸いドットのようにしたい場合は、線端を丸型にし、線分を小さくする。

1
2
3

線分：0
間隔：8
線端：丸型

これで丸い点が並んだように見える。

点線が表示されないとき

破線をオンにしても変化が見えない場合は、次を確認する。

オブジェクトに線色があるか。
線幅が小さすぎないか。
正しいオブジェクトを選択しているか。
線分 と 間隔 の数値が小さすぎないか。
塗りだけで、線がないオブジェクトではないか。

多くの線の問題は、「パスはあるが線がない」ことが原因だ。

AIで矢印を描く方法

矢印も通常は単独で描くのではなく、パスの線に矢印スタイルを追加する。

手順：

線分ツール で直線を描く。
直線を選択する。
ウィンドウ -> 線 を開く。
線パネル下部の 矢印 を探す。
始点または終点に矢印スタイルを選ぶ。
矢印の倍率を調整する。

矢印の向きが逆の場合は、次のどちらかで処理する。

線パネルで矢印を始点から終点へ移す。
パス方向を反転するコマンドを使う。

もっと簡単なのは、線を描き直すことだ。矢印の尾から先端へドラッグすれば、終点が矢印方向になる。

両矢印を描く方法

両矢印は、始点と終点の両方に矢印を設定するだけでよい。

手順：

線分を選択する。
線パネルを開く。
1つ目の矢印位置に矢印を選ぶ。
2つ目の矢印位置にも矢印を選ぶ。

矢印が大きすぎる、または小さすぎる場合は、倍率 を調整する。

一般に、矢印の大きさは線幅に合わせる。細い線に大きすぎる矢印は不自然で、太い線に小さすぎる矢印は見づらい。

AIで曲線を描く方法

AIで曲線を描くとき、最もよく使うのは ペンツール だ。

基本手順：

ペンツール を選ぶ。
キャンバス上で一度クリックし、最初のアンカーポイントを作る。
2つ目の位置では、クリックだけでなく押したままドラッグする。
ドラッグすると方向ハンドルが出て、曲線ができる。
さらにクリックとドラッグを続け、連続した曲線を作る。

ポイントは単純だ。直線はクリック、曲線はクリックしてドラッグする。

初心者が曲線を描けない原因は、多くの場合、毎回クリックだけして方向ハンドルをドラッグしていないことだ。

曲線をなめらかに調整する

曲線を描いた後は、次のツールで調整できる。

ダイレクト選択ツール：アンカーポイントを選び、点やハンドルを動かす。
アンカーポイントツール：角点とスムーズポイントを切り替える。
スムーズツール：パスをより滑らかにする。
曲率ツール：より簡単に滑らかな曲線を作る。

自然な曲線を描きたいだけなら、曲率ツール はペンツールより初心者向きだ。多くの方向ハンドルを手で引かなくても、いくつかの点をクリックするだけで滑らかなパスが作れる。

曲率ツールで曲線を描く

曲率ツールは「点を置くと、曲線が自動でついてくる」感覚に近い。

手順：

曲率ツール を選ぶ。
キャンバス上で最初の点をクリックする。
2つ目の点をクリックする。
3つ目の点をクリックすると、ソフトが自動的に曲線を作る。
既存の点をドラッグして曲線の形を変える。

角を作りたい場合は、点をダブルクリックして、スムーズポイントと角点を切り替える。

初心者は、まず曲率ツールで大まかな形を作り、後からダイレクト選択ツールで微調整するほうがやりやすい。

AIでキャンバスサイズを変更する方法

AIでいう「キャンバスサイズ」は、多くの場合 アートボードサイズ を指す。書き出し範囲、デザインサイズ、ページサイズを変えたい場合は、アートボードを変更する。

手順：

左のツールバーから アートボードツール を選ぶ。
現在のアートボードをクリックする。
上部のプロパティバーに幅と高さを入力する。
アートボードの端をドラッグして手動調整することもできる。

よく使うサイズ例：

WeChatカバー：900 x 383 px
小紅書カバー：1242 x 1660 px
Instagram正方形：1080 x 1080 px
A4用紙：210 x 297 mm

単位が px でない場合は、ドキュメントまたはプロパティパネルで単位を切り替える。

アートボードパネルでサイズを変える

アートボードツール以外にも、アートボードパネルで複数のアートボードを管理できる。

手順：

ウィンドウ -> アートボード を開く。
変更したいアートボードを選ぶ。
アートボードオプションを開く。
幅、高さ、位置を入力する。

1つのファイルに複数ページ、複数のポスターサイズ、複数の書き出し画像がある場合は、直接ドラッグするよりアートボードパネルのほうが分かりやすい。

アートボードサイズを変えると図形も変わるか

アートボードサイズだけを変更しても、中の図形は通常自動では拡大縮小されない。

つまり：

アートボードを大きくしても、図形サイズは変わらない。
アートボードを小さくしても、図形サイズは変わらないが、範囲外にはみ出すことがある。
書き出し時は通常、アートボード範囲内の内容だけが出力される。

図形も一緒に拡大縮小したい場合は、図形を選択して手動で拡大縮小するか、拡大縮小ツールや変形パネルを使う。

よく使う入口

覚えておくと便利な入口：

線パネル：ウィンドウ -> 線
アートボードパネル：ウィンドウ -> アートボード
アートボードツール：Shift + O
ペンツール：P
ダイレクト選択ツール：A

バージョンによって画面は少し違うことがあるが、基本ロジックは同じだ。点線と矢印は線パネル、曲線はパスツール、キャンバスサイズはアートボードで調整する。

まとめ

AIで点線を描く：パスを選択し、線 パネルで 破線 をオンにし、線分と間隔を設定する。

AIで矢印を描く：線を描き、線 パネルで始点または終点に矢印を追加する。

AIで曲線を描く：ペンツール でクリックしてドラッグする。初心者は 曲率ツール を使うと滑らかな曲線を作りやすい。

AIでキャンバスサイズを変更する：アートボードツール または アートボード パネルでアートボードの幅と高さを変える。

これらを覚えると、基本的な線、フローチャート、注釈図、ページサイズ調整の多くを扱えるようになる。