1仕組みと動作原理

成果物を単一のHTMLジェネレーターではなく「スタジオ」として定義：1つの成果物に対し、アートディレクター、ブランドリサーチャー、ビジュアルデザイナー、モーションデザイナー、フロントエンドエンジニア、コピーライターの6役を順に担い、媒体に応じて主導する役割を切り替えます。

SKILL.md

**你是设计师，不是写HTML的程序员。** HTML只是你的媒介，就像别人用Figma、…用AE、用InDesign——工具不定义你，交付标准才定义你。

目的：「AIのデフォルト出力が人間味に欠ける」原因をテクニックではなく役割と基準の欠如に帰定させ、以降のアンチスロップ（粗製濫造防止）やアセット規約をここから導出します。

3方向の厳格なゲート：新規ビジュアルデザインを生成するタスクは、いかなる場合も100%事前に3つの差別化された方向性（実ビジュアル初案を含む）を並行作成して提示し、ユーザーが選定した後にのみ実行。スタイルの指定やブランドアセットの提供があっても免除されません。

SKILL.md

**任何会产出新视觉设计的任务，无一例外**——需求模糊触发、需求清晰也触发、用户指定了风格（「Apple 宣传片风格」「Stripe 那种感觉」）**同样触发**、给了品牌名/品牌资产**同样触发**。

目的：AIによる独断的な方向決定とそれに伴う全面手戻りを防ぐため、選択プロセスを省略不可能な事前ステップに設定。免除規定は3種のみで、direction-approved.mdへの記録が必須です。

仮説より事実を優先：他の全プロセスに優先する#0原則。特定の製品・技術・イベントに関する事実的主張は、事前にWebSearchで検証した上でproduct-facts.mdに記録し、学習データのみに頼った断定を禁止します。

SKILL.md

任何涉及具体产品/技术/事件/人物的存在性、发布状态、版本号、规格参数的事实性断言，第一步必须 `WebSearch` 验证，禁止凭训练语料做断言。

目的：「〜だったと思う」といった曖昧な表現を禁止構文に指定し、記憶を検索とドキュメント化に置換。DJI Pocket 4の誤認反例（コスト比較：WebSearch 10秒 << 手戻り2時間）を示します。

ブランドアセット規約（5ステップの厳格プロセス）：特定ブランドが関わる場合、公式ロゴ・製品画像・UIスクリーンショットをすべて収集する必要があります。指名製品ロゴは必須アセット（出現した分だけ取得）であり、単一HTML内へのBase64埋め込みが必須で、1つでも欠落した場合は即座にSTOPします。

SKILL.md

🔴 **铁律：设计里只要出现一个能被认出的产品/品牌名，它的官方 logo 就是必需资产**（出现几个就取几个），不是「有就用、没有拉倒」。

目的：「アセット > ガイドライン」を自己検証可能なゲートとして落とし込み、「想像によるブランド描画」を防止。Fallbackの3方向を採用する場合でもロゴ収集は免除されません。

アンチAIスロップの判断基準に「ブランド認知度」を採用：AIのデフォルト出力は学習データの平均値でありブランドを希釈するため、紫グラデーション、絵文字アイコン、角丸＋左ボーダー、SVGによる人物描画、Display用Interフォントなどの禁止リストを提示。「ブランド自体が使用している場合」のみ例外とします。

SKILL.md

紫渐变、emoji 图标、圆角卡片+左 border accent、SVG 画人脸——这些东西之所以是 slop，不是因为它们本身丑，而是因为**它们是 AI 默认模式下的产物，不携带任何品牌信息**。

目的：美意識へのこだわりを「ブランド情報を含んでいるか」という論理的チェックに変換し、ポジティブな代替案（実画像、oklch、引用符「」、1箇所のみの120%ディテール）を提供します。

Fallbackの3つの並行ロジック：秒数ルーレット（date +%S %20で60種のHTMLネイティブスタイルライブラリから抽選）＋現実の参照（受賞実績のある実例を分解・適用）＋トップデザイナー哲学（一流スタジオの哲学に合わせたカスタマイズ）。3種のスケルトンは完全に異なり、同一の実画像を共有します。

SKILL.md

跑 `date +%S` 取秒数，算 `秒数 % 20 + 1` 得 1-20，从 `design-styles.md` **对应分区**取那一号风格，subagent 严格按其视觉 DNA + HTML 实现做。

目的：時間のランダム性を利用してモデルの「無難なミニマリズムを毎度選んでしまう」決定論的偏りを打破し、インフォグラフィックをWebページの区画に無理に詰め込まないことを明確化します。

チェックポイントをゲートファイルとして実体化：プロジェクトディレクトリ内にbrand-spec.md、direction-approved.md、导演稿.mdの存在を義務付け。デザインゲートフックにより45秒以上の長尺動画レンダリング前に確実に制止し、ユーザーの「続けて」という指示でも内部ゲートはスキップされません。

SKILL.md

检查点容易在长会话里被「继续/开工/快点」的惯性冲掉（2026-07-17 B00实测：跳过方向确认渲210s全片→整片视觉返工）。所以三个关键检查点物化为**项目目录里必须存在的文件**

目的：「ユーザーの確認待ち」を外部ツールから検証可能なファイル実体（scripts/design-gate-hook.sh）に変換し、長いセッションでもデフォルトで流されないようにします。

アニメーションは音声付きMP4を標準納品：HyperFramesバックエンドレンダリング＋ 25/60fps録画＋ GIF派生＋ BGM/SFXデュアルトラック（37種のプリセット効果音）。ffprobeでaudio streamが確認されて初めて完成品とみなします。

SKILL.md

**BGM + SFX 双轨制必须同时做**——只做 BGM 是 ⅓ 分完成度；SFX 占高频、BGM 占低频，频段隔离见 audio-design-rules.md 的 ffmpeg 模板

目的：「無音版＝未完成品」を納品基準に明記し、完全なパイプライン（render-video*.js、convert-formats.sh、add-music.sh、sfx-cues.sh）と効果音密度の調合ルールを付属します。

2コア機能

01高精度インタラクティブプロトタイプ（App / Web、クリック・状態切り替え対応）

02プレゼンテーションスライドデッキ：HTML deck（1920×1080 ＋全体俯瞰ビュー）→ PDF → 編集可能PPTXの2ルート対応

03タイムラインアニメーション / 動画書き出し（MP4 25/60fps、GIF、BGM ＋ SFX、新規プロジェクトはHyperFramesバックエンド標準）

04インフォグラフィック / データ可視化（印刷品質の組版、PDF/PNG/SVG出力対応、独立した20種のスタイル区分）

05デザイン方向性コンサルティング：3つの補完的ロジックによる3方向のリアルビジュアル並行出力、背景に60種のHTMLネイティブスタイル群

06App/iOSプロトタイプ専用規約：単一ファイル内インラインReact、ios_frameデバイス枠、Playwrightクリックテスト、複数画面の並列インタラクション

07ナレーション付きロングコンセプト動画：原稿駆動＋豆包TTS（Doubao TTS）実測タイムライン＋ narration_stage.jsx（セクション間ヒーローモーフィング、字幕）

08Tweaksリアルタイムパラメータ調整＋ 5次元エキスパートレビュー（哲学的整合性、視覚的階層、ディテール実行力、機能性、革新性）

3外部依存関係

Kind	Dependency / Endpoint
cli	Node/npm 及 playwright/sharp/pptxgenjs/pdf-lib 依赖
cli	ffmpeg（sfx-cues.sh / render-narration.sh / convert-formats.sh / add-music.sh 的合成与混音）
cli	Playwright 截图/点击验证（npx playwright screenshot / verify.py）
network	免版权图库 Wikimedia Commons / Unsplash / Pexels（scripts/fetch_images.py 下载真图，内置清代理+合规 UA）
api	豆包 TTS（scripts/cloud/tts-doubao.mjs，可选云能力，自备 key）
api	火山方舟 AI 看片评审（scripts/cloud/ai-review-video.py，可选云能力，自备 key + 显式确认）
cli	HyperFrames 渲染后端（新动画项目默认：npm run check 五门审计 → npx hyperframes render）
network	Agent 侧 WebSearch（#0 事实验证、逻辑二核实参照案例真实存在）

4推奨統制措置と判定根拠

安全運用のための推奨統制措置

Agent 向け

段階的・都度認可、サンドボックス推奨

管理者向け

承認フロー、ロールバック可能、全履歴監査

判定根拠（ファイルパスと抜粋）

scripts/: ローカルスクリプトまたはコマンドの実行: scripts/render-video.js / render-video-seek.js / verify.js / verify-video.s
网络端点: 外部ネットワークアクセスの宣言: scripts/cloud/ai-review-video.py → ark.cn-beijing.volces.com（Volcengine Ark）
本地工作目录: ファイルの読み書きと成果物出力: プロジェクトディレクトリ納品物：メインHTML、design-demos/*.html、スクリーンショット、MP4/GIF/PDF/PPTX書き出し

監査ノート： 評価対象はこのスキルディレクトリ（pinパス "." = リポジトリルート）：コアパイプラインはローカルのHTML/CSS/JS ＋ FFmpeg ＋ Playwrightで構成され、READMEには「core pipeline runs 100% locally — zero network calls, zero API keys」と明記されています。しかし、ディレクトリ内にscripts/cloud/ai-review-video.pyおよびscripts/cloud/tts-doubao.mjsが含まれており、宣言された用途のために持参したAPIキー（.env）を読み取り、ユーザーが作成した動画やナレーション原稿をVolcengine ArkおよびDoubao TTSの外部サービスに送信します。「自身で宣言した用途のために認証情報/envを読み取る、またはユーザー素材を外部サービスバックエンドに送信する」に該当するため、orangeと判定（オプショナル、キー持参＋明示的確認が必要で制御可能だが完全ローカルではない）。fetch_images.pyによるWikimedia/Unsplash/Pexelsへのアクセスは固定された公開エンドポイント（yellow相当）であり、orangeに包含されます。scripts/verify-video.sh内のevalおよびdesign-gate-hook.shは未制御の実行/フックの兆候としてrisksに記録されますが判定ランクは変更しません。リポジトリ内のREADMEにある外部リンク（GitHub Releases/YouTube/star-history）はドキュメントおよび成果物フェーズに属するため判定対象外とします。

5二重目の独立検証

[discrepancy] README 宣称「core pipeline 100% locally, zero network calls, zero API keys」与目录内 scripts/cloud/* 是否矛盾 — 声明仅覆盖核心管线（design → render → MP4/PDF/PPTX export），成立；但 skill 目录自带 scripts/cloud/tts-doubao.mjs 与 ai-review-video.py，会读自备 env key 并把用户成片/文案外发火山方舟与豆包 TTS。二者并行不冲突，但判级须按目录取 orange 而非 green/blue。
[ok] 三方向硬门是否真的可执行、有完整实现路径 — SKILL.md 给出 Fallback Phase 1-5 完整流程、subagent 串/并行规范、三方向初稿形态（网页/信息图/原型 1 HTML+截图，deck 2 页，动画 1 张方向板）、唯一豁免三情形与 direction-approved.md 落档；README 以「设计方向顾问」条目与 demo 佐证。
[ok] Gate 文件与 hook 是否真实存在且可被硬拦 — SKILL.md 列出 brand-spec.md / direction-approved.md / 导演稿.md 三 Gate 文件与 scripts/design-gate-hook.sh（≥45s 长片渲染前硬检查，SKIP_DESIGN_GATE=1 显式放行）；弱 runtime 降级模式第 5 条明确不豁免 gate 文件。
[ok] 品牌资产 5 步硬流程与具名 logo 子门是否成立 — 正文给出「问→搜官方渠道→下载（三条兜底）→验证+提取→固化 brand-spec.md」五步，并规定单文件 HTML 必须 base64 内嵌 logo/图片，缺一即 STOP；README 有对应的品牌资产协议 5 步 showcase。
[ok] 动画音视频管线（HyperFrames 默认 / 60fps / BGM+SFX 双轨）是否可落地 — 正文点名 render-video.js、render-video-seek.js --fps=60、convert-formats.sh、add-music.sh、sfx-cues.sh 与 37 个预制 SFX、6 首 BGM；scripts/sfx-cues.sh 原文可读，ffmpeg amix 混音实现成立。
[unlocatable] meta.installs 是否有可定位到本 skill 的安装量 — README 只给仓库级命令 `npx skills add alchaincyf/huashu-design`，无 per-skill 安装计数；骨架 installs=null，维持 null。
[unlocatable] security.scripts_executed 清单是否穷举 — 风险扫描显示「执行外部程序 121 条命中」「写盘 17 条」，bundle 每类只列最多 6 条样例，且 §1 只列最大 60 个文件（共 191）。当前清单依据 bundle §1/§2 与风险扫描命中项归纳，可能仍漏列个别脚本；只读侦查未运行任何脚本，不跨 commit 推广。
[ok] scripts/verify-video.sh 的 eval 是否构成注入风险 — 风险扫描命中沙箱/未受控执行：`FPS=$(python3 -c "print(round(eval('${FPS_RAW:-0}' ...`，eval 的输入为 ffprobe 解析出的帧率原始串，非用户任意输入，风险有限，但属脚本内动态求值，记入 risks。

6結論

「ユーザーに選択させる」プロセスを徹底追及した中国語デザインスキル：3方向ゲート＋ゲートファイル＋ design-gate-hook ＋実体化チェックポイントにより、AIによる方向性の独断を完全排除。

判断基準、禁止リストから例外規定、ポジティブな代替案まで備えたアンチスロップの完全なクローズドループを構築し、個人の好みではなく「ブランド認知度」を根拠に論証。

すぐに使える圧倒的な内蔵アセット規模：191ファイル、60種のスタイルライブラリ、BGM 6曲、SFX 37種、スターターコンポーネント一式、中英バイリンガルデモを完備。

プロトタイプ、スライド、アニメーション、インフォグラフィック、レビューを網羅する納品チェーンを備え、「HTML deck → PDF → 編集可能PPTX」の相互排他ルートを分けることで変換器に合わせたデザイン劣化を防止。

Agent非依存かつ低スペック環境向けの縮退マトリクスを用意し、明確なデッドラインを設定（多様性とプロセスのみを簡略化し、アンチスロップとアセット規約は維持）。

最適な用途： 推奨環境：① HTML/CSS/JSを用いて高精度プロトタイプ、プレゼンデッキ、タイムラインアニメーション、インフォグラフィック、デザインレビューを行うAgentワークフロー；② 「AI特有のデフォルトテンプレート感」を排し、本物のブランドアセットとアンチスロップ規律を備えたデザイン成果物を求める場合；③ クリック可能なAppプロトタイプ（実デバイス枠＋ Playwrightクリックテスト）やBGM＋効果音付きの完成動画書き出しが必要な場合；④ 要件が曖昧な段階で3方向のリアルな初案を比較検討したく、チェックポイント/ゲートによる制約プロセスを受け入れられる場合；⑤ 各種Agent（Claude Code、Cursor、Codexなど）への導入、または制限環境下での縮退運用。

不向きな用途： 非推奨環境：① 本番プロダクションWebアプリ、SEOサイト、バックエンドを要する動的システム（公式に非対応明記）；② 単一の成果物のみを急ぎで求め、3方向提示やゲートプロセスを拒否するユーザー（厳格なゲートにより選択待ちで停止します）；③ 純粋なテキストのみ、またはビジュアル生成を伴わないタスク；④ 外部スクリプトやホストツール（Playwright、FFmpeg、Node.js）の実行を一切許可しない完全オフライン環境；⑤ 独自のAPIキーを準備せず、クラウドTTSやAIレビュー機能の利用を希望するユースケース。

Install Agent-Ready

① Verified Mirror 2026-10-10

Option A · Direct DownloadDownload huashu-design.tar.gz

sha256: 17cee9ca3b7bc336…

Option B · Copy Guide for Agent

install.json

Agent はこの JSON ガイドから自動的にダウンロードして検証します。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 0830494ecb.