Design & Motion · alchaincyf/huashu-design

huashu-design

Name: huashu-design
Author: alchaincyf/huashu-design

Huashu Design — Create high-fidelity prototypes, presentation decks, animations, data visualizations, and expert design reviews using HTML. For any new design, 100% of workflows first generate three distinct concept drafts for user selection (mandatory even with designated styles/brand assets) before proceeding with execution. Trigger phrases: make a prototype, PPT, slide deck, animation, design style, design review, build an HTML page, UI mockup, export MP4/GIF, make it look good. Not suitable for production-grade web apps or systems requiring a backend.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit

Author alchaincyfGitHub alchaincyf/huashu-design ↗License MIT（仓库根 LICENSE）Commit 0830494ecb

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Define delivery as an entire 'studio' rather than a single HTML generator: each delivery sequentially assumes six roles—Art Director, Brand Researcher, Visual Designer, Motion Designer, Frontend Engineer, and Copywriter—shifting the lead role as the medium changes.

SKILL.md

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

Purpose: Root the issue of 'AI default outputs not looking human-made' in identity and design standards rather than mere prompt tricks; anti-slop guidelines and brand asset protocols derive directly from this foundation.

Strict 3-Direction Gate: Any task producing new visual designs must 100% concurrently produce three differentiated directions (including real visual drafts) for user selection before execution; designated styles or provided brand assets do not exempt this requirement.

SKILL.md

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

Purpose: Establish user selection as an unskippable prerequisite to avoid complete redesigns caused by the AI arbitrarily choosing a direction; only three exemptions exist and must be documented in direction-approved.md.

Facts precede assumptions: Principle #0 supersedes all other workflows; factual assertions regarding specific products, technologies, or events must first be verified via WebSearch and recorded in product-facts.md, strictly prohibiting assertions based on training data.

SKILL.md

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

Purpose: Ban phrasing like 'I recall...' in favor of live search and persistence, citing the DJI Pocket 4 misjudgment counterexample (cost comparison: 10s WebSearch << 2h rework).

Brand Asset Protocol (5-step mandatory workflow): When specific brands are involved, official logos, product images, and UI screenshots must be collected; named product logos are required assets (retrieve all that appear), single-file HTML must inline them as base64, and missing any asset triggers a hard STOP.

SKILL.md

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

Purpose: Enforce 'assets > styling guidelines' as a verifiable quality gate against 'hallucinating brand designs'; choosing Fallback directions does not exempt fetching official logos.

Counter AI slop using 'brand recognizability' as the criterion: Default AI output equals training corpus averages, which dilutes brands; thus, an explicit banlist is provided (purple gradients, emoji icons, rounded corners + left border, SVG-drawn humans, Inter for display), with the only valid exception being 'the brand itself uses it natively'.

SKILL.md

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

Purpose: Transform aesthetic purism into a reasoning check of 'does it carry brand identity?', offering positive alternatives (authentic imagery, oklch colors, 「」 quotation marks, a single 120% detail spot).

Fallback 3-way parallel logic: Seconds roulette (date +%S %20 draws from a 60-style native HTML library) + real-world reference (analyzing and adapting award-winning case studies) + top designer philosophy (tailored top-tier studio philosophies); the three structural skeletons must differ while sharing the same authentic images.

SKILL.md

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

Purpose: Use time-based randomization to break the model's deterministic tendency toward 'safe minimalism', while explicitly banning cramming infographics into webpage sections.

Materialize checkpoints into Gate files: brand-spec.md, direction-approved.md, and 导演稿.md must exist in the project directory; the design gate hook strictly intercepts rendering before long videos (≥45s), and the user saying 'continue' does not bypass the internal gate.

SKILL.md

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

Purpose: Transform 'waiting for user confirmation' into an externally verifiable file existence check (scripts/design-gate-hook.sh), preventing long chat sessions from bypassing it by default.

Default animation delivery as MP4 with audio: HyperFrames backend rendering + 25/60fps recording + derived GIF + dual-track BGM/SFX (37 built-in sound effects); an asset is only complete once ffprobe verifies an audio stream.

SKILL.md

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

Purpose: Codify 'silent video = unfinished deliverable' into delivery criteria, providing a complete pipeline (render-video*.js, convert-formats.sh, add-music.sh, sfx-cues.sh) and sound effect density guidelines.

2Core Capabilities

01High-fidelity interactive prototypes (App / Web, clickable with state toggles)

02Presentation slide decks: Dual paths of HTML deck (1920×1080 + overview wall) → PDF → optional editable PPTX

03Timeline animations / video export (MP4 at 25/60fps, GIF, BGM + SFX, defaulting to HyperFrames backend for new projects)

04Infographics / data visualization (print-grade typography, exportable to PDF/PNG/SVG, 20 distinct style categories)

05Design direction consulting: 3 concurrent real visual directions powered by 3 complementary logic streams, backed by a 60-style native HTML library

06App/iOS prototype guidelines: Single-file inline React, ios_frame device bezel, Playwright click-testing, interactive multi-screen layout

07Long concept videos with narration: Script-driven + Doubao TTS calibrated timeline + narration_stage.jsx (hero morphing across segments, subtitles)

08Real-time parameter tweaks + 5-dimension expert review (philosophical consistency, visual hierarchy, detail execution, functionality, innovation)

3External Dependencies

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 事实验证、逻辑二核实参照案例真实存在）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Graded/per-use authorization, sandbox recommended

For Administrators

Approval workflow, rollback support, full audit

Evidence & Triggers (File Paths & Excerpts)

scripts/: Executes local scripts or commands: scripts/render-video.js / render-video-seek.js / verify.js / verify-video.s
网络端点: Declares external network access: scripts/cloud/ai-review-video.py → ark.cn-beijing.volces.com (Volcengine Ark)
本地工作目录: File I/O and artifact generation: Project deliverables: main HTML, design-demos/*.html, screenshots, exported MP4/GIF/PDF/PPTX

Audit Notes: The audit target is this skill directory (pinned path "." = repository root): The core pipeline relies on local HTML/CSS/JS + FFmpeg + Playwright, and the README explicitly claims that the 'core pipeline runs 100% locally — zero network calls, zero API keys'. However, the directory includes scripts/cloud/ai-review-video.py and scripts/cloud/tts-doubao.mjs, which read user-provided API keys (.env) for declared features and send user-generated videos/narration scripts to external services (Volcengine Ark and Doubao TTS). This matches the rule 'reads credentials/env for declared purposes or transmits user assets to third-party backends', justifying an ORANGE rating (optional, requires user-supplied keys and explicit confirmation; controlled but not purely local). The fetch_images.py script querying Wikimedia/Unsplash/Pexels is a fixed public endpoint (YELLOW severity) superseded by ORANGE. The eval in scripts/verify-video.sh and the execution hooks in design-gate-hook.sh represent uncontained execution/hook indicators logged under risks without altering the rating tier. External links in the README (GitHub Releases, YouTube, star-history) pertain to documentation and artifacts, not affecting the rating.

5Second-Pass Verification

[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。

6Verdict & Scenarios

The most deeply proceduralized Chinese design skill for user-driven choices: 3-direction gate + Gate files + design-gate-hook + materialized checkpoints ensure AI never chooses directions by default.

A complete anti-slop loop from evaluation criteria and banlists to exception rules and positive alternatives, justified by 'brand recognizability' rather than subjective taste.

Exceptionally large self-contained asset suite ready out-of-the-box: 191 files, 60-style library, 6 BGM tracks, 37 SFX, a full starter component suite, and bilingual EN/ZH demos.

Comprehensive delivery pipeline covering prototypes, slide decks, animations, infographics, and reviews, separating 'HTML deck → PDF → editable PPTX' into two mutually exclusive routes to prevent degrading designs for converters.

Agent-agnostic with a graceful degradation matrix for restricted runtimes, maintaining strict baselines (reducing diversity and workflow gates only, never compromising anti-slop or asset protocols).

Best for: Suitable for: 1) Agent workflows generating high-fidelity prototypes, slide decks, timeline animations, infographics, and design reviews via HTML/CSS/JS; 2) Users wanting designs that avoid generic AI templates, incorporating authentic brand assets and anti-slop discipline; 3) Clickable App prototypes (authentic device frames + Playwright click tests) or finalized video exports with BGM+SFX; 4) Ambiguous requirements requiring 3 tangible visual directions for decision-making under strict checkpoint/gate constraints; 5) Cross-agent deployment (Claude Code, Cursor, Codex, etc.) or degraded execution in restricted runtimes.

Not for: Not suitable for: 1) Production-grade web apps, SEO websites, or dynamic systems requiring backends (explicitly stated); 2) Users who only want a single quick output and refuse 3-direction workflows and gates (the gates will halt execution to wait for user choices); 3) Pure text or non-visual tasks; 4) Fully offline environments that forbid scripts or host tools (Playwright, FFmpeg, Node.js); 5) Workflows requiring cloud TTS/AI reviews without providing personal API keys.

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

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 0830494ecb.