From 33a9a132cec7da6a969d3cbd971804dbba08ca11 Mon Sep 17 00:00:00 2001
From: admin <572701190@qq.com>
Date: Thu, 11 Jun 2026 03:39:35 +0800
Subject: [PATCH] docs: add huashu design agent guide
---
README.md | 1 +
.../huashu-design/.env.example | 6 +
.../huashu-design/.gitignore | 37 +
.../huashu-design/LICENSE | 21 +
.../huashu-design/README.en.md | 309 +++
.../huashu-design/README.md | 340 ++++
.../huashu-design/SKILL.md | 631 ++++++
.../huashu-design/assets/android_frame.jsx | 175 ++
.../huashu-design/assets/animations.jsx | 348 ++++
.../huashu-design/assets/banner.svg | 198 ++
.../huashu-design/assets/bgm-ad.mp3 | Bin 0 -> 4950071 bytes
.../huashu-design/assets/bgm-educational-alt.mp3 | Bin 0 -> 4468765 bytes
.../huashu-design/assets/bgm-educational.mp3 | Bin 0 -> 4047162 bytes
.../huashu-design/assets/bgm-tech.mp3 | Bin 0 -> 4818429 bytes
.../huashu-design/assets/bgm-tutorial-alt.mp3 | Bin 0 -> 3937926 bytes
.../huashu-design/assets/bgm-tutorial.mp3 | Bin 0 -> 5542744 bytes
.../huashu-design/assets/browser_window.jsx | 166 ++
.../huashu-design/assets/deck_index.html | 348 ++++
.../huashu-design/assets/deck_stage.js | 420 ++++
.../huashu-design/assets/design_canvas.jsx | 205 ++
.../director-notes-samples/launch-film-30s-sample.md | 1713 +++++++++++++++++
.../huashu-design/assets/ios_frame.jsx | 192 ++
.../huashu-design/assets/macos_window.jsx | 96 +
.../huashu-design/assets/narration_stage.jsx | 476 +++++
.../assets/personal-asset-index.example.json | 71 +
.../huashu-design/assets/sfx/container/card-flip.mp3 | Bin 0 -> 12164 bytes
.../huashu-design/assets/sfx/container/card-snap.mp3 | Bin 0 -> 8821 bytes
.../huashu-design/assets/sfx/container/modal-open.mp3 | Bin 0 -> 10493 bytes
.../huashu-design/assets/sfx/container/stack-collapse.mp3 | Bin 0 -> 13836 bytes
.../huashu-design/assets/sfx/feedback/achievement.mp3 | Bin 0 -> 24703 bytes
.../huashu-design/assets/sfx/feedback/error-tone.mp3 | Bin 0 -> 12164 bytes
.../assets/sfx/feedback/notification-pop.mp3 | Bin 0 -> 10493 bytes
.../huashu-design/assets/sfx/feedback/success-chime.mp3 | Bin 0 -> 17180 bytes
.../huashu-design/assets/sfx/impact/brand-stamp.mp3 | Bin 0 -> 17180 bytes
.../huashu-design/assets/sfx/impact/drop-thud.mp3 | Bin 0 -> 12164 bytes
.../huashu-design/assets/sfx/impact/logo-reveal-v2.mp3 | Bin 0 -> 24703 bytes
.../huashu-design/assets/sfx/impact/logo-reveal.mp3 | Bin 0 -> 24703 bytes
.../huashu-design/assets/sfx/keyboard/delete-key.mp3 | Bin 0 -> 8821 bytes
.../huashu-design/assets/sfx/keyboard/enter.mp3 | Bin 0 -> 8821 bytes
.../huashu-design/assets/sfx/keyboard/space-tap.mp3 | Bin 0 -> 8821 bytes
.../huashu-design/assets/sfx/keyboard/type-fast.mp3 | Bin 0 -> 24703 bytes
.../huashu-design/assets/sfx/keyboard/type.mp3 | Bin 0 -> 13836 bytes
.../huashu-design/assets/sfx/magic/ai-process.mp3 | Bin 0 -> 20106 bytes
.../huashu-design/assets/sfx/magic/sparkle.mp3 | Bin 0 -> 13836 bytes
.../huashu-design/assets/sfx/magic/transform.mp3 | Bin 0 -> 17180 bytes
.../huashu-design/assets/sfx/progress/complete-done.mp3 | Bin 0 -> 13836 bytes
.../huashu-design/assets/sfx/progress/generate-start.mp3 | Bin 0 -> 13836 bytes
.../huashu-design/assets/sfx/progress/loading-tick.mp3 | Bin 0 -> 8821 bytes
.../huashu-design/assets/sfx/terminal/command-execute.mp3 | Bin 0 -> 8821 bytes
.../huashu-design/assets/sfx/terminal/cursor-blink.mp3 | Bin 0 -> 8821 bytes
.../huashu-design/assets/sfx/terminal/output-appear.mp3 | Bin 0 -> 10493 bytes
.../huashu-design/assets/sfx/transition/dissolve.mp3 | Bin 0 -> 13836 bytes
.../huashu-design/assets/sfx/transition/slide-in.mp3 | Bin 0 -> 10493 bytes
.../assets/sfx/transition/swipe-horizontal.mp3 | Bin 0 -> 12164 bytes
.../huashu-design/assets/sfx/transition/whoosh-fast.mp3 | Bin 0 -> 8821 bytes
.../huashu-design/assets/sfx/transition/whoosh.mp3 | Bin 0 -> 10493 bytes
.../huashu-design/assets/sfx/ui/click-soft.mp3 | Bin 0 -> 8821 bytes
.../huashu-design/assets/sfx/ui/click.mp3 | Bin 0 -> 8821 bytes
.../huashu-design/assets/sfx/ui/focus.mp3 | Bin 0 -> 8821 bytes
.../huashu-design/assets/sfx/ui/hover-subtle.mp3 | Bin 0 -> 8821 bytes
.../huashu-design/assets/sfx/ui/tap-finger.mp3 | Bin 0 -> 8821 bytes
.../huashu-design/assets/sfx/ui/toggle-on.mp3 | Bin 0 -> 8821 bytes
.../huashu-design/assets/showcases/INDEX.md | 115 ++
.../huashu-design/assets/showcases/cover/cover-build.html | 235 +++
.../huashu-design/assets/showcases/cover/cover-build.png | Bin 0 -> 116336 bytes
.../assets/showcases/cover/cover-pentagram.html | 229 +++
.../assets/showcases/cover/cover-pentagram.png | Bin 0 -> 36047 bytes
.../assets/showcases/cover/cover-takram.html | 288 +++
.../huashu-design/assets/showcases/cover/cover-takram.png | Bin 0 -> 155362 bytes
.../assets/showcases/infographic/infographic-build.html | 503 +++++
.../assets/showcases/infographic/infographic-build.png | Bin 0 -> 108710 bytes
.../showcases/infographic/infographic-pentagram.html | 600 ++++++
.../showcases/infographic/infographic-pentagram.png | Bin 0 -> 159021 bytes
.../assets/showcases/infographic/infographic-takram.html | 670 +++++++
.../assets/showcases/infographic/infographic-takram.png | Bin 0 -> 162976 bytes
.../huashu-design/assets/showcases/ppt/ppt-build.html | 382 ++++
.../huashu-design/assets/showcases/ppt/ppt-build.png | Bin 0 -> 84423 bytes
.../huashu-design/assets/showcases/ppt/ppt-pentagram.html | 536 ++++++
.../huashu-design/assets/showcases/ppt/ppt-pentagram.png | Bin 0 -> 101335 bytes
.../huashu-design/assets/showcases/ppt/ppt-takram.html | 497 +++++
.../huashu-design/assets/showcases/ppt/ppt-takram.png | Bin 0 -> 467187 bytes
.../assets/showcases/website-ai-nav/ainav-build.html | 385 ++++
.../assets/showcases/website-ai-nav/ainav-build.png | Bin 0 -> 85064 bytes
.../assets/showcases/website-ai-nav/ainav-pentagram.html | 422 ++++
.../assets/showcases/website-ai-nav/ainav-pentagram.png | Bin 0 -> 105575 bytes
.../assets/showcases/website-ai-nav/ainav-takram.html | 499 +++++
.../assets/showcases/website-ai-nav/ainav-takram.png | Bin 0 -> 121675 bytes
.../showcases/website-ai-writing/aiwriting-build.html | 562 ++++++
.../showcases/website-ai-writing/aiwriting-build.png | Bin 0 -> 130604 bytes
.../showcases/website-ai-writing/aiwriting-pentagram.html | 548 ++++++
.../showcases/website-ai-writing/aiwriting-pentagram.png | Bin 0 -> 150195 bytes
.../showcases/website-ai-writing/aiwriting-takram.html | 696 +++++++
.../showcases/website-ai-writing/aiwriting-takram.png | Bin 0 -> 157158 bytes
.../assets/showcases/website-devdocs/devdocs-build.html | 372 ++++
.../assets/showcases/website-devdocs/devdocs-build.png | Bin 0 -> 68230 bytes
.../showcases/website-devdocs/devdocs-pentagram.html | 460 +++++
.../showcases/website-devdocs/devdocs-pentagram.png | Bin 0 -> 117051 bytes
.../assets/showcases/website-devdocs/devdocs-takram.html | 494 +++++
.../assets/showcases/website-devdocs/devdocs-takram.png | Bin 0 -> 111854 bytes
.../assets/showcases/website-homepage/homepage-build.html | 367 ++++
.../assets/showcases/website-homepage/homepage-build.png | Bin 0 -> 61708 bytes
.../showcases/website-homepage/homepage-pentagram.html | 368 ++++
.../showcases/website-homepage/homepage-pentagram.png | Bin 0 -> 57093 bytes
.../showcases/website-homepage/homepage-takram.html | 459 +++++
.../assets/showcases/website-homepage/homepage-takram.png | Bin 0 -> 127610 bytes
.../assets/showcases/website-saas/saas-build.html | 493 +++++
.../assets/showcases/website-saas/saas-build.png | Bin 0 -> 99745 bytes
.../assets/showcases/website-saas/saas-pentagram.html | 556 ++++++
.../assets/showcases/website-saas/saas-pentagram.png | Bin 0 -> 96559 bytes
.../assets/showcases/website-saas/saas-takram.html | 604 ++++++
.../assets/showcases/website-saas/saas-takram.png | Bin 0 -> 123532 bytes
.../huashu-design/demos/c1-ios-prototype-en.html | 1145 +++++++++++
.../huashu-design/demos/c1-ios-prototype.html | 1142 +++++++++++
.../huashu-design/demos/c2-slides-pptx-en.html | 1055 ++++++++++
.../huashu-design/demos/c2-slides-pptx.html | 1055 ++++++++++
.../huashu-design/demos/c3-motion-design-en.html | 1134 +++++++++++
.../huashu-design/demos/c3-motion-design.html | 1134 +++++++++++
.../huashu-design/demos/c4-tweaks-en.html | 989 ++++++++++
.../huashu-design/demos/c4-tweaks.html | 989 ++++++++++
.../huashu-design/demos/c5-infographic-en.html | 816 ++++++++
.../huashu-design/demos/c5-infographic.html | 813 ++++++++
.../huashu-design/demos/c6-expert-review-en.html | 885 +++++++++
.../huashu-design/demos/c6-expert-review.html | 894 +++++++++
.../huashu-design/demos/hero-animation-v10-en.html | 1498 ++++++++++++++
.../demos/md-html-narration/md-html-demo.html | 615 ++++++
.../huashu-design/demos/md-html-narration/script.md | 69 +
.../huashu-design/demos/voiceover-demo/script.md | 17 +
.../huashu-design/demos/voiceover-demo/什么是token.html | 201 ++
.../huashu-design/demos/w1-brand-protocol-en.html | 684 +++++++
.../huashu-design/demos/w1-brand-protocol.html | 696 +++++++
.../huashu-design/demos/w2-junior-designer-en.html | 983 ++++++++++
.../huashu-design/demos/w2-junior-designer.html | 994 ++++++++++
.../huashu-design/demos/w3-fallback-advisor-en.html | 647 +++++++
.../huashu-design/demos/w3-fallback-advisor.html | 704 +++++++
.../huashu-design/package-lock.json | 846 ++++++++
.../huashu-design/package.json | 8 +
.../huashu-design/references/animation-best-practices.md | 506 +++++
.../huashu-design/references/animation-pitfalls.md | 402 ++++
.../huashu-design/references/animations.md | 249 +++
.../huashu-design/references/apple-gallery-showcase.md | 338 ++++
.../huashu-design/references/audio-design-rules.md | 260 +++
.../huashu-design/references/brand-asset-protocol.md | 250 +++
.../huashu-design/references/cinematic-patterns.md | 264 +++
.../huashu-design/references/content-guidelines.md | 260 +++
.../huashu-design/references/critique-guide.md | 199 ++
.../huashu-design/references/design-context.md | 213 ++
.../huashu-design/references/design-styles.md | 370 ++++
.../huashu-design/references/editable-pptx.md | 334 ++++
.../huashu-design/references/hero-animation-case-study.md | 250 +++
.../references/launch-film-director-notes.md | 293 +++
.../references/multi-perspective-parallel-case-study.md | 267 +++
.../huashu-design/references/react-setup.md | 276 +++
.../huashu-design/references/scene-templates.md | 262 +++
.../huashu-design/references/sfx-library.md | 226 +++
.../huashu-design/references/slide-decks.md | 745 +++++++
.../huashu-design/references/tweaks-system.md | 313 +++
.../huashu-design/references/verification.md | 183 ++
.../huashu-design/references/video-export.md | 232 +++
.../huashu-design/references/voiceover-pipeline.md | 397 ++++
.../huashu-design/references/workflow.md | 216 +++
.../huashu-design/scripts/add-music.sh | 108 ++
.../huashu-design/scripts/convert-formats.sh | 83 +
.../huashu-design/scripts/export_deck_pdf.mjs | 98 +
.../huashu-design/scripts/export_deck_pptx.mjs | 107 +
.../huashu-design/scripts/export_deck_stage_pdf.mjs | 130 ++
.../huashu-design/scripts/fetch_images.py | 94 +
.../huashu-design/scripts/gen_deck_thumbs.mjs | 55 +
.../huashu-design/scripts/html2pptx.js | 1178 ++++++++++++
.../huashu-design/scripts/mix-voiceover.sh | 127 ++
.../huashu-design/scripts/narrate-pipeline.mjs | 315 +++
.../huashu-design/scripts/render-narration.sh | 151 ++
.../huashu-design/scripts/render-video-seek.js | 238 +++
.../huashu-design/scripts/render-video.js | 289 +++
.../huashu-design/scripts/tts-doubao.mjs | 184 ++
.../huashu-design/scripts/verify.py | 154 ++
.../huashu-design/test-prompts.json | 38 +
设计Agent构建.md | 726 +++++++
177 files changed, 48486 insertions(+)
create mode 100644 文档润色流和知识库构建流/huashu-design/.env.example
create mode 100644 文档润色流和知识库构建流/huashu-design/.gitignore
create mode 100644 文档润色流和知识库构建流/huashu-design/LICENSE
create mode 100644 文档润色流和知识库构建流/huashu-design/README.en.md
create mode 100644 文档润色流和知识库构建流/huashu-design/README.md
create mode 100644 文档润色流和知识库构建流/huashu-design/SKILL.md
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/android_frame.jsx
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/animations.jsx
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/banner.svg
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/bgm-ad.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/bgm-educational-alt.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/bgm-educational.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/bgm-tech.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/bgm-tutorial-alt.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/bgm-tutorial.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/browser_window.jsx
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/deck_index.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/deck_stage.js
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/design_canvas.jsx
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/director-notes-samples/launch-film-30s-sample.md
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/ios_frame.jsx
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/macos_window.jsx
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/narration_stage.jsx
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/personal-asset-index.example.json
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/container/card-flip.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/container/card-snap.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/container/modal-open.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/container/stack-collapse.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/feedback/achievement.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/feedback/error-tone.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/feedback/notification-pop.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/feedback/success-chime.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/impact/brand-stamp.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/impact/drop-thud.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/impact/logo-reveal-v2.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/impact/logo-reveal.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/keyboard/delete-key.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/keyboard/enter.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/keyboard/space-tap.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/keyboard/type-fast.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/keyboard/type.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/magic/ai-process.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/magic/sparkle.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/magic/transform.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/progress/complete-done.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/progress/generate-start.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/progress/loading-tick.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/terminal/command-execute.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/terminal/cursor-blink.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/terminal/output-appear.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/transition/dissolve.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/transition/slide-in.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/transition/swipe-horizontal.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/transition/whoosh-fast.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/transition/whoosh.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/ui/click-soft.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/ui/click.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/ui/focus.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/ui/hover-subtle.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/ui/tap-finger.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/sfx/ui/toggle-on.mp3
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/INDEX.md
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/cover/cover-build.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/cover/cover-build.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/cover/cover-pentagram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/cover/cover-pentagram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/cover/cover-takram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/cover/cover-takram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/infographic/infographic-build.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/infographic/infographic-build.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/infographic/infographic-pentagram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/infographic/infographic-pentagram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/infographic/infographic-takram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/infographic/infographic-takram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/ppt/ppt-build.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/ppt/ppt-build.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/ppt/ppt-pentagram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/ppt/ppt-pentagram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/ppt/ppt-takram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/ppt/ppt-takram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-ai-nav/ainav-build.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-ai-nav/ainav-build.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-ai-nav/ainav-pentagram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-ai-nav/ainav-pentagram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-ai-nav/ainav-takram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-ai-nav/ainav-takram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-ai-writing/aiwriting-build.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-ai-writing/aiwriting-build.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-ai-writing/aiwriting-pentagram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-ai-writing/aiwriting-pentagram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-ai-writing/aiwriting-takram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-ai-writing/aiwriting-takram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-devdocs/devdocs-build.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-devdocs/devdocs-build.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-devdocs/devdocs-pentagram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-devdocs/devdocs-pentagram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-devdocs/devdocs-takram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-devdocs/devdocs-takram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-homepage/homepage-build.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-homepage/homepage-build.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-homepage/homepage-pentagram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-homepage/homepage-pentagram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-homepage/homepage-takram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-homepage/homepage-takram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-saas/saas-build.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-saas/saas-build.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-saas/saas-pentagram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-saas/saas-pentagram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-saas/saas-takram.html
create mode 100644 文档润色流和知识库构建流/huashu-design/assets/showcases/website-saas/saas-takram.png
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/c1-ios-prototype-en.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/c1-ios-prototype.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/c2-slides-pptx-en.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/c2-slides-pptx.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/c3-motion-design-en.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/c3-motion-design.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/c4-tweaks-en.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/c4-tweaks.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/c5-infographic-en.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/c5-infographic.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/c6-expert-review-en.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/c6-expert-review.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/hero-animation-v10-en.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/md-html-narration/md-html-demo.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/md-html-narration/script.md
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/voiceover-demo/script.md
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/voiceover-demo/什么是token.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/w1-brand-protocol-en.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/w1-brand-protocol.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/w2-junior-designer-en.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/w2-junior-designer.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/w3-fallback-advisor-en.html
create mode 100644 文档润色流和知识库构建流/huashu-design/demos/w3-fallback-advisor.html
create mode 100644 文档润色流和知识库构建流/huashu-design/package-lock.json
create mode 100644 文档润色流和知识库构建流/huashu-design/package.json
create mode 100644 文档润色流和知识库构建流/huashu-design/references/animation-best-practices.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/animation-pitfalls.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/animations.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/apple-gallery-showcase.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/audio-design-rules.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/brand-asset-protocol.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/cinematic-patterns.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/content-guidelines.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/critique-guide.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/design-context.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/design-styles.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/editable-pptx.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/hero-animation-case-study.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/launch-film-director-notes.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/multi-perspective-parallel-case-study.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/react-setup.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/scene-templates.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/sfx-library.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/slide-decks.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/tweaks-system.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/verification.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/video-export.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/voiceover-pipeline.md
create mode 100644 文档润色流和知识库构建流/huashu-design/references/workflow.md
create mode 100755 文档润色流和知识库构建流/huashu-design/scripts/add-music.sh
create mode 100755 文档润色流和知识库构建流/huashu-design/scripts/convert-formats.sh
create mode 100644 文档润色流和知识库构建流/huashu-design/scripts/export_deck_pdf.mjs
create mode 100644 文档润色流和知识库构建流/huashu-design/scripts/export_deck_pptx.mjs
create mode 100644 文档润色流和知识库构建流/huashu-design/scripts/export_deck_stage_pdf.mjs
create mode 100644 文档润色流和知识库构建流/huashu-design/scripts/fetch_images.py
create mode 100644 文档润色流和知识库构建流/huashu-design/scripts/gen_deck_thumbs.mjs
create mode 100755 文档润色流和知识库构建流/huashu-design/scripts/html2pptx.js
create mode 100755 文档润色流和知识库构建流/huashu-design/scripts/mix-voiceover.sh
create mode 100755 文档润色流和知识库构建流/huashu-design/scripts/narrate-pipeline.mjs
create mode 100755 文档润色流和知识库构建流/huashu-design/scripts/render-narration.sh
create mode 100644 文档润色流和知识库构建流/huashu-design/scripts/render-video-seek.js
create mode 100755 文档润色流和知识库构建流/huashu-design/scripts/render-video.js
create mode 100755 文档润色流和知识库构建流/huashu-design/scripts/tts-doubao.mjs
create mode 100644 文档润色流和知识库构建流/huashu-design/scripts/verify.py
create mode 100644 文档润色流和知识库构建流/huashu-design/test-prompts.json
create mode 100644 设计Agent构建.md
diff --git a/README.md b/README.md
index 6e0d304..ae2fa61 100644
--- a/README.md
+++ b/README.md
@@ -8,5 +8,6 @@
- `文档润色Agent.md`:Claude Scholar 学术插件与文档润色 Agent 快速索引。
- `知识库Agent构建.md`:LLM Wiki 与文本图片多模态知识库构建方案。
+- `设计Agent构建.md`:Huashu Design 跨 Agent 设计 skill 调用方式与任务路线。
- `文档润色流和知识库构建流/`:下载的 `claude-scholar` 插件资料与 `llm-wiki.md`。
- `金刚石散热项目/`:项目资料目录。
diff --git a/文档润色流和知识库构建流/huashu-design/.env.example b/文档润色流和知识库构建流/huashu-design/.env.example
new file mode 100644
index 0000000..bbd2fd0
--- /dev/null
+++ b/文档润色流和知识库构建流/huashu-design/.env.example
@@ -0,0 +1,6 @@
+# 豆包语音 TTS(火山引擎 openspeech)
+# 申请地址:https://console.volcengine.com/speech
+DOUBAO_TTS_API_KEY=your_api_key_here
+DOUBAO_TTS_VOICE_ID=your_clone_voice_id_here
+DOUBAO_TTS_CLUSTER=volcano_icl
+DOUBAO_TTS_ENDPOINT=https://openspeech.bytedance.com/api/v1/tts
diff --git a/文档润色流和知识库构建流/huashu-design/.gitignore b/文档润色流和知识库构建流/huashu-design/.gitignore
new file mode 100644
index 0000000..c37f11a
--- /dev/null
+++ b/文档润色流和知识库构建流/huashu-design/.gitignore
@@ -0,0 +1,37 @@
+# macOS
+.DS_Store
+**/.DS_Store
+
+# Video render temp (render-video.js 产物)
+.video-tmp-*/
+**/.video-tmp-*/
+
+# Personal asset index(个人真实数据,只保留 .example.json 模板)
+assets/personal-asset-index.json
+
+# 环境变量(API key 等敏感信息,只保留 .env.example 模板)
+.env
+.env.local
+
+# Voiceover 工作目录(TTS mp3、timeline.json 临时产物,可重新生成)
+**/_narration/
+**/_narration_*/
+
+# Node / editor / OS
+node_modules/
+*.swp
+.idea/
+.vscode/
+Thumbs.db
+
+# Verification artifacts(截图、临时测试脚本)
+demos/_frames_*.png
+demos/_verify.js
+demos/_verify.mjs
+
+# 开发/测试中间产物(skill 内部研发用,不分发给用户)
+_style-research/
+**/design-demos/
+
+# Demo 大视频(用 GitHub Releases 分发,不进仓库膨胀)
+demos/**/*.mp4
diff --git a/文档润色流和知识库构建流/huashu-design/LICENSE b/文档润色流和知识库构建流/huashu-design/LICENSE
new file mode 100644
index 0000000..ed67368
--- /dev/null
+++ b/文档润色流和知识库构建流/huashu-design/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 alchaincyf (花叔 · 花生)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/文档润色流和知识库构建流/huashu-design/README.en.md b/文档润色流和知识库构建流/huashu-design/README.en.md
new file mode 100644
index 0000000..d696978
--- /dev/null
+++ b/文档润色流和知识库构建流/huashu-design/README.en.md
@@ -0,0 +1,309 @@
+🌐 中文 · English
+
+
+
+# Huashu Design
+
+> *"Type. Hit enter. A finished design lands in your lap."*
+> *「打字。回车。一份能交付的设计。」*
+
+[](LICENSE)
+[](https://skills.sh)
+[](https://skills.sh)
+
+
+
+**Say one sentence to your agent — Claude Code, Cursor, Codex, OpenClaw, Hermes all work.**
+
+
+
+3 to 30 minutes — you ship a **product launch animation**, a clickable App prototype, an editable PPT deck, a print-grade infographic.
+
+Not "decent for AI" quality — it looks like a real design team made it. Give the skill your brand assets (logo, colors, UI screenshots) and it reads your brand's voice; give it nothing and the built-in 20 design vocabularies still keep you out of AI slop territory.
+
+**Every animation in this README was made by huashu-design itself.** No Figma, no After Effects — just a sentence + skill run. Next product launch needs a promo video? You can make it too.
+
+```
+npx skills add alchaincyf/huashu-design
+```
+
+> 📣 **Now MIT-licensed.** As of 2026-05-14 this skill is fully open-source under the [MIT License](LICENSE) — free for personal **and** commercial use, no authorization required. ([what changed](#license))
+
+[See it work](#demo-gallery) · [Install](#install) · [What it does](#what-it-does) · [How it works](#core-mechanics) · [vs. Claude Design](#vs-claude-design)
+
+> 📖 **Note for English readers**: this skill is built by a Chinese-speaking developer. The skill's agent prompts (`SKILL.md`, `references/*.md`) are in Chinese but the agent is bilingual — works fine with English tasks. The demos below are the English parallel versions; the Chinese ones are in the default [Chinese README](README.md).
+>
+> 📖 **致中文读者**:这个 skill 由花叔(@AlchainHust)开发。一句话能让 agent 在 3–30 分钟内交付**产品发布动画 / 可点击 App 原型 / 可编辑 PPT / 印刷级信息图**。完整中文介绍见 [README.md](README.md)(默认中文)。
+
+
+
+---
+
+
+
+
+
+▲ 10-second hero animation showing what huashu-design does (download MP4 if autoplay doesn't work)
+
+---
+
+## Install
+
+```bash
+npx skills add alchaincyf/huashu-design
+```
+
+Then just talk to Claude Code:
+
+```
+"Make a keynote for AI psychology. Give me 3 style directions to pick from."
+"Build an iOS prototype for a Pomodoro app — 4 screens, actually clickable."
+"Turn this logic into a 60-second animation. Export MP4 and GIF."
+"Run a 5-dimension expert review on this design."
+```
+
+No buttons, no panels, no Figma plugin. Agent-agnostic — drops into Claude Code, Cursor, Trae, Hermes, OpenClaw, or any markdown-skill-capable agent.
+
+---
+
+## Star History
+
+
+
+
+
+
+
+---
+
+## What it does
+
+| Capability | Deliverable | Typical time |
+|---|---|---|
+| Interactive prototype (App / Web) | Single-file HTML · real iPhone bezel · clickable · Playwright-verified | 10–15 min |
+| Slide decks | HTML deck (browser presentation) + editable PPTX (text frames preserved) | 15–25 min |
+| Motion design | MP4 (25fps / 60fps interpolation) + GIF (palette-optimized) + BGM | 8–12 min |
+| Design variations | 3+ side-by-side · Tweaks live params · cross-dimension exploration | 10 min |
+| Infographic / data viz | Print-quality typography · exports to PDF/PNG/SVG | 10 min |
+| Design direction advisor | 5 schools × 20 philosophies · 3 directions recommended · Demos generated in parallel | 5 min |
+| 5-dimension expert critique | Radar chart + Keep/Fix/Quick Wins · actionable punch list | 3 min |
+
+---
+
+## Demo Gallery
+
+> English parallel versions of the demos. Chinese versions live at the default filenames (see the Chinese README).
+
+### Design Direction Advisor
+
+The fallback for vague briefs: pick 3 differentiated directions from 5 schools × 20 philosophies, generate all 3 demos in parallel, let the user choose.
+
+
+
+### iOS App Prototype
+
+Pixel-accurate iPhone 15 Pro body (Dynamic Island / status bar / Home Indicator) · state-driven multi-screen navigation · real images pulled from Wikimedia/Met/Unsplash · Playwright click tests before delivery.
+
+
+
+### Motion Design Engine
+
+Stage + Sprite time-slice model · `useTime` / `useSprite` / `interpolate` / `Easing` — four APIs cover every animation need · one command exports MP4 / GIF / 60fps-interpolated / BGM-scored finals.
+
+
+
+### HTML Slides → Editable PPTX
+
+HTML decks for browser presentation · `html2pptx.js` reads DOM computed styles and translates each element into real PowerPoint objects · exports are **actual text frames**, not image-bed fakes.
+
+
+
+### Tweaks · Live Variation Switching
+
+Colors / typography / information density parameterized · side panel toggle · pure-frontend + `localStorage` persistence · survives reload.
+
+
+
+### Infographic / Data Viz
+
+Magazine-grade typography · precise CSS Grid columns · `text-wrap: pretty` typographic details · driven by real data · exports to vector PDF / 300dpi PNG / SVG.
+
+
+
+### 5-Dimension Expert Critique
+
+Philosophical coherence · visual hierarchy · execution craft · functionality · innovation — each scored 0–10 · radar-chart visualization · outputs Keep / Fix / Quick Wins punch list.
+
+
+
+### Junior Designer Workflow
+
+No heroic one-shot attempts: start with assumptions + placeholders + reasoning, show it to the user early, then iterate. Fixing a misunderstanding early is 100× cheaper than fixing it late.
+
+
+
+### Core Asset Protocol · 5-step hard process
+
+Mandatory whenever the task involves a specific brand: ask → search → download (three fallback paths) → verify + extract → write `brand-spec.md` covering **logo, product shots, UI screenshots, colors, fonts** — all required assets, not just colors.
+
+
+
+---
+
+## Core Mechanics
+
+### Core Asset Protocol
+
+The hardest rule in the skill. When the task touches a specific brand (Stripe, Linear, Anthropic, DJI, your own company, etc.), five steps are enforced:
+
+| Step | Action | Purpose |
+|---|---|---|
+| 1 · Ask | Checklist of 6 asset types: logo / product shots / UI screenshots / color palette / fonts / brand guidelines | Respect existing resources |
+| 2 · Search official channels | `.com/brand` · `.com/press` · `brand..com` · product pages · launch films | Find authoritative assets |
+| 3 · Download by asset type | Logo (SVG → inline-SVG in HTML → social avatar) · Product shots (hero → press kit → launch video frames → AI-generated from reference) · UI (App Store screenshots → official video frames) | Three fallback paths per asset type |
+| 4 · Verify + extract | Check logo fidelity · product image resolution · UI freshness · grep color hex from real assets | **Never guess from memory** |
+| 5 · Freeze to spec | Write `brand-spec.md` with logo paths, product image paths, UI screenshot paths, CSS variables for colors/fonts | Un-frozen knowledge evaporates |
+
+**Ranking of asset importance** (from the skill's internal rubric):
+
+1. Logo — mandatory for any brand
+2. Product renders — mandatory for physical products
+3. UI screenshots — mandatory for digital products
+4. Color values — auxiliary
+5. Fonts — auxiliary
+
+A/B-tested (v1 vs v2, 6 agents each): **v2 reduced stability variance by 5×**. Stability of stability — that's the real moat.
+
+### Design Direction Advisor (Fallback)
+
+Triggered when the brief is too vague to execute:
+
+- Don't run on generic intuition — enter Fallback mode
+- Recommend 3 differentiated directions from 5 schools × 20 philosophies, each **from a different school**
+- Each comes with flagship works, gestalt keywords, representative designer
+- Generate 3 visual demos in parallel, let the user choose
+- Once chosen, continue into the Junior Designer main flow
+
+### Junior Designer Workflow
+
+The default working mode across every task:
+
+- Send the full question set in one batch, wait for all answers before moving
+- Write assumptions + placeholders + reasoning comments directly into the HTML
+- Show it to the user early (even if just gray blocks)
+- Fill in real content → variations → Tweaks — show at each of these three steps
+- Manually eyeball the browser with Playwright before delivery
+
+### Fact Verification First (Principle #0)
+
+The highest-priority rule, added after a real failure mode: when the task mentions a specific product / technology / event (e.g., "DJI Pocket 4", "Nano Banana Pro", "Gemini 3 Pro"), the first action **must** be a `WebSearch` to confirm existence, release status, current version, and specs. No claims from training-corpus memory. Cost of a search: ~10 seconds. Cost of a wrong assumption: 1–2 hours of rework.
+
+### Anti AI-slop Rules
+
+Avoid the visual common denominator of AI output (purple gradients / emoji icons / rounded-corner + left border accent / SVG humans / Inter-as-display / **CSS silhouettes standing in for real product shots**). Use `text-wrap: pretty` + CSS Grid + carefully chosen serif display faces + oklch colors.
+
+---
+
+## vs. Claude Design
+
+I'll be upfront: the Core Asset Protocol's philosophy was lifted from system prompts Anthropic wrote for Claude Design. That prompt hammers home a single idea — **great hi-fi design doesn't start from a blank page, it grows from existing design context**. That one principle is the difference between a 65-point design and a 90-point design.
+
+Positioning differences:
+
+| | Claude Design | huashu-design |
+|---|---|---|
+| Form | Web product (used in browser) | Skill (used in Claude Code) |
+| Quota | Subscription quota | API usage · parallel agents unblocked |
+| Output | Canvas + Figma export | HTML / MP4 / GIF / editable PPTX / PDF |
+| Interaction | GUI (click, drag, edit) | Conversation (tell agent, wait) |
+| Complex animation | Limited | Stage + Sprite timeline · 60fps export |
+| Agent compatibility | Claude.ai only | Claude Code / Cursor / Trae / Hermes / OpenClaw |
+
+Claude Design is a **better graphics tool**. Huashu-design makes **the graphics-tool layer disappear**. Two paths, different audiences.
+
+---
+
+## Limitations
+
+- **No layer-editable PPTX-to-Figma round-trip.** The output is HTML — screenshottable, recordable, image-exportable, but not draggable into Keynote for text-position tweaks.
+- **Framer-Motion-tier complex animations are out of scope.** 3D, physics simulation, particle systems exceed the skill's boundaries.
+- **Brand-from-zero design quality drops to 60–65 points.** Drawing hi-fi from nothing was always a last resort.
+
+This is an 80-point skill, not a 100-point product. For people unwilling to open a graphical UI, an 80-point skill beats a 100-point product.
+
+---
+
+## Repository Structure
+
+```
+huashu-design/
+├── SKILL.md # Main doc (read by agent, Chinese)
+├── README.md # Chinese README (default)
+├── README.en.md # English README (this file)
+├── assets/ # Starter Components
+│ ├── animations.jsx # Stage + Sprite + Easing + interpolate
+│ ├── ios_frame.jsx # iPhone 15 Pro bezel
+│ ├── android_frame.jsx
+│ ├── macos_window.jsx
+│ ├── browser_window.jsx
+│ ├── deck_stage.js # HTML deck engine
+│ ├── deck_index.html # Multi-file deck assembler
+│ ├── design_canvas.jsx # Side-by-side variation display
+│ ├── showcases/ # 24 prebuilt samples (8 scenes × 3 styles)
+│ └── bgm-*.mp3 # 6 scene-specific background tracks
+├── references/ # Drill-down docs by task (Chinese)
+│ ├── animation-pitfalls.md
+│ ├── design-styles.md # 20 design philosophies in detail
+│ ├── slide-decks.md
+│ ├── editable-pptx.md
+│ ├── critique-guide.md
+│ ├── video-export.md
+│ └── ...
+├── scripts/ # Export toolchain
+│ ├── render-video.js # HTML → MP4
+│ ├── convert-formats.sh # MP4 → 60fps + GIF
+│ ├── add-music.sh # MP4 + BGM
+│ ├── export_deck_pdf.mjs
+│ ├── export_deck_pptx.mjs
+│ ├── html2pptx.js
+│ └── verify.py
+└── demos/ # Capability demos referenced by this README
+```
+
+---
+
+## Origin Story
+
+The day Anthropic launched Claude Design I played with it until 4 a.m. A few days later I realized I hadn't opened it once since — not because it's bad (it's the most polished product in the category) but because I'd rather have an agent work in my terminal than open any graphical UI.
+
+So I had an agent deconstruct Claude Design itself (including the system prompts circulating in the community, the brand asset protocol, the component mechanics), distill it into a structured spec, then write it as a skill installed in my own Claude Code.
+
+Thanks to Anthropic for writing the Claude Design prompts so clearly. This kind of derivative work inspired by other products is the new form of open-source culture in the AI era.
+
+---
+
+## License
+
+**Relicensed to MIT on 2026-05-14.** This skill was previously released under a Personal Use License that restricted commercial use. That restriction is now removed.
+
+Under the [MIT License](LICENSE) you are free to **use, modify, and distribute** this skill for any purpose, **including commercial use** — inside companies, in client deliverables, as part of a paid product, anywhere. No prior authorization, no licensing fee, no notification required. Attribution is appreciated but not required.
+
+---
+
+## Connect · Huasheng (Huashu)
+
+Huasheng is an AI-native coder, independent developer, and AI content creator. Notable work: Cat Fill Light (App Store Top 1 in Paid category), *A Book on DeepSeek*, Nüwa.skill (GitHub 21k+ stars). Combined 300k+ followers across platforms.
+
+| Platform | Handle | Link |
+|---|---|---|
+| X / Twitter | @AlchainHust | https://x.com/AlchainHust |
+| WeChat Official Account | 花叔 | Search "花叔" in WeChat |
+| Bilibili | 花叔 | https://space.bilibili.com/14097567 |
+| YouTube | 花叔 | https://www.youtube.com/@Alchain |
+| Xiaohongshu | 花叔 | https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf |
+| Official Site | huasheng.ai | https://www.huasheng.ai/ |
+| Developer Hub | bookai.top | https://bookai.top |
+
+For collaborations or sponsored content, DM on any of the above.
diff --git a/文档润色流和知识库构建流/huashu-design/README.md b/文档润色流和知识库构建流/huashu-design/README.md
new file mode 100644
index 0000000..516d481
--- /dev/null
+++ b/文档润色流和知识库构建流/huashu-design/README.md
@@ -0,0 +1,340 @@
+🌐 中文 · English
+
+
+
+# Huashu Design
+
+> *「打字。回车。一份能交付的设计。」*
+> *"Type. Hit enter. A finished design lands in your lap."*
+
+[](LICENSE)
+[](https://skills.sh)
+[](https://skills.sh)
+
+
+
+**在你的 agent 里打一句话,拿回一份能交付的设计。**
+
+
+
+3 到 30 分钟,你能 ship 一段**产品发布动画**、一个能点击的 App 原型、一套能编辑的 PPT、一份印刷级的信息图。
+
+不是「AI 做的还行」那种水平——是看起来像大厂设计团队做的。给 skill 你的品牌资产(logo、色板、UI 截图),它会读懂你的品牌气质;什么都不给,**三套逻辑顾问 + 40 种 HTML 原生风格库**也能兜底到不出 AI slop。
+
+**你看到这篇 README 里的每一个动画,都是 huashu-design 自己做的。** 不是 Figma,不是 AE,就是一句话 prompt + skill 跑通。下次产品发布要做宣传片?现在你也能做。
+
+```
+npx skills add alchaincyf/huashu-design
+```
+
+跨 agent 通用——Claude Code、Cursor、Codex、OpenClaw、Hermes 都能装。
+
+> 📣 **已改为 MIT 协议。** 自 2026-05-14 起本 skill 完全开源([MIT License](LICENSE)),个人和**商用都免费**,无需事先授权。原「个人使用免费、企业商用需授权」的条款已作废。([查看变更](#license))
+
+[看效果](#demo-画廊) · [安装](#装上就能用) · [能做什么](#能做什么) · [核心机制](#核心机制) · [和 Claude Design 的关系](#和-claude-design-的关系)
+
+
+
+---
+
+
+
+
+
+
+ ▲ 25 秒 · Terminal → 4 方向 → Gallery ripple → 4 次 Focus → Brand reveal
+ 👉 访问带音效的 HTML 互动版 ·
+ 下载 MP4(含 BGM+SFX · 10MB)
+
+
+---
+
+## 📺 新手教程(花叔亲录)
+
+不知道怎么用?看花叔录的 huashu-design 上手教程:
+
+
+
+
+
+👉 在 YouTube 观看完整教程
+
+---
+
+## 装上就能用
+
+```bash
+npx skills add alchaincyf/huashu-design
+```
+
+然后在 Claude Code 里直接说话:
+
+```
+「做一份 AI 心理学的演讲 PPT,推荐 3 个风格方向让我选」
+「做个 AI 番茄钟 iOS 原型,4 个核心屏幕要真能点击」
+「把这段逻辑做成 60 秒动画,导出 MP4 和 GIF」
+「帮我对这个设计做一个 5 维度评审」
+```
+
+没有按钮、没有面板、没有 Figma 插件。
+
+---
+
+## Star 趋势
+
+
+
+
+
+
+
+---
+
+## 能做什么
+
+| 能力 | 交付物 | 典型耗时 |
+|------|--------|----------|
+| 交互原型(App / Web) | 单文件 HTML · 真 iPhone bezel · 可点击 · Playwright 验证 | 10–15 min |
+| 演讲幻灯片 | HTML deck(浏览器演讲)+ 可编辑 PPTX(文本框保留) | 15–25 min |
+| 时间轴动画 | MP4(25fps / 60fps 插帧)+ GIF(palette 优化)+ BGM | 8–12 min |
+| 设计变体 | 3+ 并排对比 · Tweaks 实时调参 · 跨维度探索 | 10 min |
+| 信息图 / 可视化 | 印刷级排版 · 可导 PDF/PNG/SVG | 10 min |
+| 设计方向顾问 | **三套逻辑并行**(秒数轮盘 + 现实参照获奖站 + 最佳设计师)· 直接出 3 版真实视觉 | 5 min |
+| 5 维度专家评审 | 雷达图 + Keep/Fix/Quick Wins · 可操作修复清单 | 3 min |
+
+---
+
+## Demo 画廊
+
+### 设计方向顾问
+
+模糊需求时的 fallback:**三套互补逻辑并行**——秒数轮盘(20 选 1 打破惯性)+ 现实参照(世界级获奖网站迁移)+ 最佳设计师(顶级工作室哲学),直接出 3 版**真实视觉**让你看着选,不让你在文字里盲选风格。背后是 **40 种 HTML 原生风格库**(网页 20 + PPT 20,纯 CSS 无需生图)。
+
+
+
+### iOS App 原型
+
+iPhone 15 Pro 精确机身(灵动岛 / 状态栏 / Home Indicator)· 状态驱动多屏切换 · 真图从 Wikimedia/Met/Unsplash 取 · Playwright 自动点击测试。
+
+
+
+### Motion Design 引擎
+
+Stage + Sprite 时间片段模型 · `useTime` / `useSprite` / `interpolate` / `Easing` 四 API 覆盖所有动画需求 · 一条命令导出 MP4 / GIF / 60fps 插帧 / 带 BGM 的成片。
+
+
+
+### HTML Slides → 可编辑 PPTX
+
+HTML deck 浏览器演讲 · `html2pptx.js` 读 DOM 的 computedStyle 逐元素翻译成 PowerPoint 对象 · 导出的是**真文本框**,PPT 里双击即可编辑。
+
+
+
+### Tweaks · 实时变体切换
+
+配色 / 字型 / 信息密度等参数化 · 侧边面板切换 · 纯前端 + `localStorage` 持久化 · 刷新不丢。
+
+
+
+### 信息图 / 数据可视化
+
+杂志级排版 · CSS Grid 精准分栏 · `text-wrap: pretty` 排印细节 · 真数据驱动 · 可导 PDF 矢量 / PNG 300dpi / SVG。
+
+
+
+### 5 维度专家评审
+
+哲学一致性 · 视觉层级 · 细节执行 · 功能性 · 创新性 各 0–10 分 · 雷达图可视化 · 输出 Keep / Fix / Quick Wins 清单。
+
+
+
+### Junior Designer 工作流
+
+不闷头做大招:先写 assumptions + placeholders + reasoning,尽早 show 给你,再迭代。理解错了早改比晚改便宜 100 倍。
+
+
+
+### 品牌资产协议 5 步硬流程
+
+涉及具体品牌时强制执行:问 → 搜 → 下载(三条兜底)→ grep 色值 → 写 `brand-spec.md`。
+
+
+
+---
+
+## Showcase · 真实案例
+
+### 鹦鹉进化史网站 · 设计方向顾问三套逻辑实战(2.0)
+
+> **Live demo · [https://www.huasheng.ai/parrots/](https://www.huasheng.ai/parrots/)**
+
+一句「做个介绍鹦鹉进化史的网站」、零额外要求,skill 自动跑完整 2.0 顾问流程:先判断图片是内容必需 → 抓公共领域博物插画(Edward Lear / John Gould 的鹦鹉图录)→ **三套逻辑并行**(秒数轮盘 + 现实参照获奖站 + 原研哉「白」哲学)各出一版真实视觉。**素材齐了再设计,不是边设计边用色块占位。**
+
+### 「聊聊 skill」 · PM after-party 演讲 deck
+
+> **Live demo · [https://skill-huasheng.vercel.app](https://skill-huasheng.vercel.app)**
+
+13 页 HTML deck,**全部用 huashu-design 完成**:
+
+- 黑底极简衬线视觉系统(cover / about / hook / what / why / closing)
+- 2 个带 BGM + SFX 的 22 秒 cinematic demo(Nuwa skill workflow + Darwin skill workflow),各采用**完全独立的视觉语言**:
+ - **Nuwa**:3D 知识 orbit + Pentagon 提炼 + SKILL.md typewriter + 「21 分钟」hero reveal
+ - **Darwin**:autoresearch loop spin + v1/v5 并列 diff + Hill-Climb 全屏曲线 + Ratchet gear lock
+- 每个 cinematic 默认显示**完整静态 workflow dashboard**(观众随时能看清 skill 怎么跑),点 ▶ 才触发动画,跑完自动 fade 回 dashboard
+- 嵌入 huasheng.ai 的 25 秒 hero 动画(iframe 本地化兜底)
+- 真实数据:14,495 stargazers 真实曲线(gh API 拉取)+ DeepSeek V4 真实 specs(WebSearch 验证)
+- 真实 AI 素材:用 `huashu-gpt-image` 跑 4×2 grid 大图,`extract_grid.py` 抠出 8 张独立透明 PNG,做 3D orbit 漂浮
+
+**适合参考的页面**:
+- `/slides/slide-04b-nuwa-flow.html` · 静态 dashboard + cinematic overlay 双层架构
+- `/slides/slide-06b-darwin-flow.html` · 完全独立视觉语言的对照案例
+- `/slides/slide-03b-deepseek-cover.html` · AI slop vs 真实设计师视角的对比页
+
+详细 cinematic patterns 见 `references/cinematic-patterns.md`。
+
+---
+
+## 核心机制
+
+### 品牌资产协议
+
+skill 里最硬的一段规则。涉及具体品牌(Stripe、Linear、Anthropic、自家公司等)时强制执行 5 步:
+
+| 步骤 | 动作 | 目的 |
+|------|------|------|
+| 1 · 问 | 用户有 brand guidelines 吗? | 尊重已有资源 |
+| 2 · 搜官方品牌页 | `.com/brand` · `brand..com` · `.com/press` | 抓权威色值 |
+| 3 · 下载资产 | SVG 文件 → 官网 HTML 全文 → 产品截图取色 | 三条兜底,前一条失败立刻走下一条 |
+| 4 · grep 提取色值 | 从资产里抓所有 `#xxxxxx`,按频率排序,过滤黑白灰 | **绝不从记忆猜品牌色** |
+| 5 · 固化 spec | 写 `brand-spec.md` + CSS 变量,所有 HTML 引用 `var(--brand-*)` | 不固化就会忘 |
+
+A/B 测试(v1 vs v2,各跑 6 agent):**v2 的稳定性方差比 v1 低 5 倍**。稳定性的稳定性,这是 skill 真正的护城河。
+
+### 设计方向顾问(Fallback)
+
+当用户需求模糊到无法着手时触发(2.0 重做):
+
+- 先对话澄清 + 主动索要参考(名字 / logo / 品牌色 / 喜欢的参考站)
+- 取齐内容必需的真图(公共领域 / 免版权,脚本一键抓),再开工
+- **三套互补逻辑并行 subagent**,各出一版**真实视觉**:① 秒数轮盘(`date +%S` 取秒,20 选 1,打破模型偷选极简的惯性)② 现实参照(世界级获奖网站 / PPT / iOS 原型迁移)③ 最佳设计师(预算无上限时最适合的工作室哲学)
+- **绝不让你在没看到视觉时盲选风格**——三版摆出来,看着选
+- 选定后进入主干 Junior Designer 流程
+- 底层是 **40 种 HTML 原生风格库**(网页 20 + PPT 20,按大胆 / 中性 / 安静分级,纯 CSS 无需生图)作弹药,不是教条
+
+### Junior Designer 工作流
+
+默认工作模式,贯穿所有任务:
+
+- 开工前 show 问题清单一次性发给用户,等批量答完再动手
+- HTML 里先写 assumptions + placeholders + reasoning comments
+- 尽早 show 给用户(哪怕只是灰色方块)
+- 填充实际内容 → variations → Tweaks 这三步分别再 show 一次
+- 交付前用 Playwright 肉眼过一遍浏览器
+
+### 反 AI slop 规则
+
+避免一眼 AI 的视觉最大公约数(紫渐变 / emoji 图标 / 圆角+左 border accent / SVG 画人脸 / Inter 做 display)。用 `text-wrap: pretty` + CSS Grid + 精心选择的 serif display 和 oklch 色彩。
+
+---
+
+## 和 Claude Design 的关系
+
+我大方承认:品牌资产协议的哲学是从 Claude Design 流传出来的提示词里偷师的。那份提示词反复强调**好的高保真设计不是从白纸开始,而是从已有的设计上下文长出来**。这个原则是 65 分作品和 90 分作品的分水岭。
+
+定位差异:
+
+| | Claude Design | huashu-design |
+|---|---|---|
+| 形态 | 网页产品(浏览器里用) | skill(Claude Code 里用) |
+| 配额 | 订阅 quota | API 消耗 · 并行跑 agent 不受 quota 限 |
+| 交付物 | 画布内 + 可导 Figma | HTML / MP4 / GIF / 可编辑 PPTX / PDF |
+| 操作方式 | GUI(点、拖、改) | 对话(说话、等 agent 做完) |
+| 复杂动画 | 有限 | Stage + Sprite 时间轴 · 60fps 导出 |
+| 跨 agent | 专属 Claude.ai | 任意 skill 兼容 agent |
+
+Claude Design 是**更好的图形工具**,huashu-design 是**让图形工具这层消失**。两条路,不同受众。
+
+---
+
+## Limitations
+
+- **不支持图层级可编辑的 PPTX 到 Figma**。产出 HTML,可截图、录屏、导图,但不能拖进 Keynote 改文字位置。
+- **Framer Motion 级别的复杂动画不行**。3D、物理模拟、粒子系统超出 skill 边界。
+- **完全空白的品牌从零设计质量会掉到 60–65 分**。凭空画 hi-fi 本来就是 last resort。
+
+这是一个 80 分的 skill,不是 100 分的产品。对不愿意打开图形界面的人,80 分的 skill 比 100 分的产品好用。
+
+---
+
+## 仓库结构
+
+```
+huashu-design/
+├── SKILL.md # 主文档(给 agent 读)
+├── README.md # 中文 README(默认,本文件)
+├── README.en.md # 英文 README
+├── assets/ # Starter Components
+│ ├── animations.jsx # Stage + Sprite + Easing + interpolate
+│ ├── ios_frame.jsx # iPhone 15 Pro bezel
+│ ├── android_frame.jsx
+│ ├── macos_window.jsx
+│ ├── browser_window.jsx
+│ ├── deck_stage.js # HTML 幻灯片引擎
+│ ├── deck_index.html # 多文件 deck 拼接器
+│ ├── design_canvas.jsx # 并排变体展示
+│ ├── showcases/ # 24 个预制样例(8 场景 × 3 风格)
+│ └── bgm-*.mp3 # 6 首场景化背景音乐
+├── references/ # 按任务深入读的子文档
+│ ├── animation-pitfalls.md
+│ ├── design-styles.md # 40 种 HTML 原生风格库(网页 20 + PPT 20)
+│ ├── slide-decks.md
+│ ├── editable-pptx.md
+│ ├── critique-guide.md
+│ ├── video-export.md
+│ └── ...
+├── scripts/ # 导出工具链
+│ ├── render-video.js # HTML → MP4
+│ ├── convert-formats.sh # MP4 → 60fps + GIF
+│ ├── add-music.sh # MP4 + BGM
+│ ├── export_deck_pdf.mjs
+│ ├── export_deck_pptx.mjs
+│ ├── html2pptx.js
+│ └── verify.py
+└── demos/ # 9 个能力演示 (c*/w*),中英双版 GIF/MP4/HTML + hero v10
+```
+
+---
+
+## 起源
+
+Anthropic 发布 Claude Design 那天我玩到凌晨四点。几天之后发现自己再也没点开过它,不是它不好——它是这个赛道目前最成熟的产品——是我宁愿让 agent 在终端里帮我干活,也不愿意打开任何图形界面。
+
+于是让 agent 拆解 Claude Design 本身(包括社区流传的系统提示词、品牌资产协议、组件机制),蒸馏成结构化 spec,再写成 skill 装进自己的 Claude Code。
+
+感谢 Anthropic 把 Claude Design 的提示词写得清晰。这种基于其他产品灵感的二次创作,是开源文化在 AI 时代的新形态。
+
+---
+
+## License
+
+**2026-05-14 起改为 MIT 协议。** 此前版本采用「个人使用免费、企业商用需授权」的 Personal Use License,对商用做了限制——现在这层限制完全解除。
+
+按 [MIT License](LICENSE),你可以**自由使用、修改、分发**本 skill,**包括商业用途**——公司内部用、客户商单交付、做成付费产品对外卖,都没问题。无需事先授权、无需付费、无需打招呼。注明出处不强制,但欢迎。
+
+---
+
+## Connect · 花生(花叔)
+
+花生是 AI Native Coder、独立开发者、AI 自媒体博主。代表作:小猫补光灯(AppStore 付费榜 Top 1)、《一本书玩转 DeepSeek》、女娲 .skill(GitHub 12000+ star)。自媒体全平台 30 万+ 粉丝。
+
+| 平台 | 账号 | 链接 |
+|---|---|---|
+| X / Twitter | @AlchainHust | https://x.com/AlchainHust |
+| 公众号 | 花叔 | 微信搜索「花叔」 |
+| B 站 | 花叔 | https://space.bilibili.com/14097567 |
+| YouTube | 花叔 | https://www.youtube.com/@Alchain |
+| 小红书 | 花叔 | https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf |
+| 官网 | huasheng.ai | https://www.huasheng.ai/ |
+| 开发者主页 | bookai.top | https://bookai.top |
+
+合作咨询、自媒体约稿 → 以上任一平台私信花生即可。
diff --git a/文档润色流和知识库构建流/huashu-design/SKILL.md b/文档润色流和知识库构建流/huashu-design/SKILL.md
new file mode 100644
index 0000000..8f7be78
--- /dev/null
+++ b/文档润色流和知识库构建流/huashu-design/SKILL.md
@@ -0,0 +1,631 @@
+---
+name: huashu-design
+description: 花叔Design——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审。根据任务embody对应专家(UX/动画师/幻灯片设计师/原型师),避免web design tropes。触发词:做原型、交互原型、HTML演示、动画Demo、设计变体、hi-fi设计、UI mockup、prototype、做个HTML页面、做个可视化、app原型、iOS原型、导出MP4/GIF、60fps视频、设计风格、设计方向、配色方案、推荐风格、选个风格、做个好看的、评审、好不好看、review this design、带解说的动画、解说视频、长视频科普、voiceover、narration、5分钟讲清楚什么是XX。需求模糊时进设计方向顾问(三套逻辑并行出3版真实视觉,HTML原生40种风格库网页20+PPT20为弹药);另含品牌资产协议、反AI slop、Junior工作流、Tweaks变体、动画→MP4/GIF导出、带解说长视频pipeline、5维评审。
+---
+
+# 花叔Design · Huashu-Design
+
+你是一位用HTML工作的设计师,不是程序员。用户是你的manager,你产出深思熟虑、做工精良的设计作品。
+
+**HTML是工具,但你的媒介和产出形式会变**——做幻灯片时别像网页,做动画时别像Dashboard,做App原型时别像说明书。**根据任务embody对应领域的专家**:动画师/UX设计师/幻灯片设计师/原型师。
+
+## 使用前提
+
+这个skill专为「用HTML做视觉产出」的场景设计,不是给任何HTML任务用的万能勺。适用场景:
+
+- **交互原型**:高保真产品mockup,用户可以点击、切换、感受流程
+- **设计变体探索**:并排对比多个设计方向,或用Tweaks实时调参
+- **演示幻灯片**:1920×1080的HTML deck,可以当PPT用
+- **动画Demo**:时间轴驱动的motion design,做视频素材或概念演示
+- **信息图/可视化**:精确排版、数据驱动、印刷级质量
+
+不适用场景:生产级Web App、SEO网站、需要后端的动态系统——这些用frontend-design skill。
+
+## 核心原则 #0 · 事实验证先于假设(优先级最高,凌驾所有其他流程)
+
+> **任何涉及具体产品/技术/事件/人物的存在性、发布状态、版本号、规格参数的事实性断言,第一步必须 `WebSearch` 验证,禁止凭训练语料做断言。**
+
+**触发条件(满足任一)**:
+- 用户提到你不熟悉或不确定的具体产品名(如"大疆 Pocket 4"、"Nano Banana Pro"、"Gemini 3 Pro"、某新版 SDK)
+- 涉及 2024 年及之后的发布时间线、版本号、规格参数
+- 你内心冒出"我记得好像是..."、"应该还没发布"、"大概在..."、"可能不存在"的句式
+- 用户请求给某个具体产品/公司做设计物料
+
+**硬流程(开工前执行,优先于 clarifying questions)**:
+1. `WebSearch` 产品名 + 最新时间词("2026 latest"、"launch date"、"release"、"specs")
+2. 读 1-3 条权威结果,确认:**存在性 / 发布状态 / 最新版本号 / 关键规格**
+3. 把事实写进项目的 `product-facts.md`(见工作流 Step 2),不靠记忆
+4. 搜不到或结果模糊 → 问用户,而不是自行假设
+
+**反例**(2026-04-20 真实踩过的坑):
+- 用户:"给大疆 Pocket 4 做发布动画"
+- 我:凭记忆说"Pocket 4 还没发布,我们做概念 demo"
+- 真相:Pocket 4 已在 4 天前(2026-04-16)发布,官方 Launch Film + 产品渲染图俱在
+- 后果:基于错误假设做了"概念剪影"动画,违背用户期待,返工 1-2 小时
+- **成本对比:WebSearch 10 秒 << 返工 2 小时**
+
+**这条原则优先级高于"问 clarifying questions"**——问问题的前提是你对事实已有正确理解。事实错了,问什么都是歪的。
+
+**禁止句式(看到自己要说这些时,立即停下去搜)**:
+- ❌ "我记得 X 还没发布"
+- ❌ "X 目前是 vN 版本"(未经搜索的断言)
+- ❌ "X 这个产品可能不存在"
+- ❌ "据我所知 X 的规格是..."
+- ✅ "我 `WebSearch` 一下 X 最新状态"
+- ✅ "搜到的权威来源说 X 是 ..."
+
+**与"品牌资产协议"的关系**:本原则是资产协议的**前提**——先确认产品存在且是什么,再去找它的 logo/产品图/色值。顺序不能反。
+
+---
+
+## 核心哲学(优先级从高到低)
+
+### 1. 从existing context出发,不要凭空画
+
+好的hi-fi设计**一定**是从已有上下文长出来的。先问用户是否有design system/UI kit/codebase/Figma/截图。**凭空做hi-fi是last resort,一定会产出generic的作品**。如果用户说没有,先帮他去找(看项目里有没有,看有没有参考品牌)。
+
+**如果还是没有,或者用户需求表达很模糊**(如"做个好看的页面"、"帮我设计"、"不知道要什么风格"、"做个XX"没有具体参考),**不要凭通用直觉硬做**——进入 **设计方向顾问模式**,从 HTML 原生 40 种风格库(网页 20+PPT 20)里给 3 个差异化方向让用户选。完整流程见下方「设计方向顾问(Fallback 模式)」大节。
+
+#### 1.a 核心资产协议(涉及具体品牌时强制执行)
+
+**触发**(两类都算,**第二类最常被漏**):① **为某个品牌做物料**(DJI 发布动画、Stripe 落地页…);② **设计里要呈现一个或多个真实可识别的产品/品牌**——对比 / 榜单 / 评测 / 介绍 deck、把多个产品并列、信息图里点名某产品。
+🔴 **铁律:设计里只要出现一个能被认出的产品/品牌名,它的官方 logo 就是必需资产**(出现几个就取几个),不是「有就用、没有拉倒」。
+⚠️ **即使你在走 Fallback 设计方向顾问模式**(因为没拿到风格参考)——第二类触发**依然成立**。Fallback 决定的是「用什么视觉风格」,**不豁免「取齐具名产品的 logo」**。两件事并行,不是二选一。
+
+**核心理念:资产 > 规范**——logo / 产品图 / UI 截图比品牌色值更重要(花叔:「除了品牌色,显然该用上 logo 和产品图,否则我们在表达什么呢?」)。
+
+**5 步硬流程**(每步有 fallback,绝不静默跳过;完整操作见 reference):
+1. **问**:一次问全资产清单(logo / 产品图 / UI 截图 / 色板 / 字体 / 禁区)
+2. **搜官方渠道**:按资产类型去官网 / press kit / 官方社媒 / Wikimedia
+3. **下载资产**:按类型三条兜底路径下载 logo / 产品图 / UI
+4. **验证 + 提取**:不只 grep 色值,要核对 logo / 产品图真实性
+5. **固化为 `brand-spec.md`**:模板覆盖所有资产路径(logo / 产品图 / UI / 色板 / 字型 / 禁区 / 气质)
+
+🛑 **检查点 · 资产自检**:实体产品要有产品图(不是 CSS 剪影)、数字产品要有 logo+UI 截图、色值从真实 HTML/SVG 抽取。缺了就停下补,不硬做。
+
+> **完整协议**(5 步详细操作 + 下载命令 + brand-spec 模板 + 全流程失败兜底 + 反例 + 代价对比)→ `references/brand-asset-protocol.md`
+
+### 2. Junior Designer模式:先展示假设,再执行
+
+你是manager的junior designer。**不要一头扎进去闷头做大招**。HTML文件的开头先写下你的assumptions + reasoning + placeholders,**尽早show给用户**。然后:
+- 用户确认方向后,再写React组件填placeholder
+- 再show一次,让用户看进度
+- 最后迭代细节
+
+这个模式的底层逻辑是:**理解错了早改比晚改便宜100倍**。
+
+### 3. 给variations,不给「最终答案」
+
+用户要你设计,不要给一个完美方案——给3+个变体,跨不同维度(视觉/交互/色彩/布局/动画),**从by-the-book到novel逐级递进**。让用户mix and match。
+
+实现方式:
+- 纯视觉对比 → 用`design_canvas.jsx`并排展示
+- 交互流程/多选项 → 做完整原型,把选项做成Tweaks
+
+### 4. Placeholder > 烂实现
+
+没图标就留灰色方块+文字标签,别画烂SVG。没数据就写``,别编造看起来像数据的假数据。**Hi-fi里,一个诚实的placeholder比一个拙劣的真实尝试好10倍**。
+
+### 5. 系统优先,不要填充
+
+**Don't add filler content**。每个元素都必须earn its place。空白是设计问题,用构图解决,不是靠编造内容填满。**One thousand no's for every yes**。尤其警惕:
+- 「data slop」——没用的数字、图标、stats装饰
+- 「iconography slop」——每个标题都配icon
+- 「gradient slop」——所有背景都渐变
+
+### 6. 反AI slop(重要,必读)
+
+#### 6.1 什么是 AI slop?为什么要反?
+
+**AI slop = AI 训练语料里最常见的"视觉最大公约数"**。
+紫渐变、emoji 图标、圆角卡片+左 border accent、SVG 画人脸——这些东西之所以是 slop,不是因为它们本身丑,而是因为**它们是 AI 默认模式下的产物,不携带任何品牌信息**。
+
+**规避 slop 的逻辑链**:
+1. 用户请你做设计,是要**他的品牌被认出来**
+2. AI 默认产出 = 训练语料的平均 = 所有品牌混合 = **没有任何品牌被认出来**
+3. 所以 AI 默认产出 = 帮用户把品牌稀释成"又一个 AI 做的页面"
+4. 反 slop 不是审美洁癖,是**替用户保护品牌识别度**
+
+这也是为什么 §1.a 品牌资产协议是 v1 最硬的约束——**服从规范是反 slop 的正向方式**(对的事),清单只是反 slop 的反向方式(不做错的事)。
+
+#### 6.2 核心要规避的(带"为什么")
+
+| 元素 | 为什么是 slop | 什么情况可以用 |
+|------|-------------|---------------|
+| 激进紫色渐变 | AI 训练语料里"科技感"的万能公式,出现在 SaaS/AI/web3 每一个落地页 | 品牌本身用紫渐变(如 Linear 某些场景)、或任务就是讽刺/展示这类 slop |
+| Emoji 作图标 | 训练语料里每个 bullet 都配 emoji,是"不够专业就用 emoji 凑"的病 | 品牌本身用(如 Notion),或产品受众是儿童/轻松场景 |
+| 圆角卡片 + 左彩色 border accent | 2020-2024 Material/Tailwind 时期的烂大街组合,已成视觉噪音 | 用户明确要求、或这个组合在品牌 spec 里被保留 |
+| SVG 画 imagery(人脸/场景/物品)| AI 画的 SVG 人物永远五官错位,比例诡异 | **几乎没有**——有图就用真图(Wikimedia/Unsplash/AI 生成),没图就留诚实 placeholder |
+| **CSS 剪影/SVG 手画代替真实产品图** | 生成的就是「通用科技动画」——黑底+橙 accent+圆角长条,任何实体产品都长一样,品牌识别度归零(DJI Pocket 4 实测 2026-04-20)| **几乎没有**——先走核心资产协议找真实产品图;真没有时用 nano-banana-pro 以官方参考图为基底生成;实在不行标诚实 placeholder 告诉用户"产品图待补" |
+| Inter/Roboto/Arial/system fonts 作 display | 太常见,读者看不出这是"有设计的产品"还是"demo 页" | 品牌 spec 明确用这些字体(Stripe 用 Sohne/Inter 变体,但是经过微调的) |
+| **GitHub-dark 偷懒解**:均匀深蓝底 `#0D1117` + 通用青/紫霓虹 glow | 这**一种特定组合**是 SaaS/AI 落地页的烂大街复制——注意不是「所有暗色都禁」 | 开发者工具产品且品牌本身走这方向 |
+
+**判断边界**:「品牌本身用」是唯一能合法破例的理由。品牌 spec 里明写了用紫渐变,那就用——此时它不再是 slop,是品牌签名。
+
+⚠️ **别把整片暗色大胆派一起误杀**:要禁的只是「均匀深蓝底+通用霓虹 glow」这一种偷懒解。电影级戏剧光影、暖色赛博(Ash Thorp 的橙/青而非冷蓝)、运动诗学的暗场叙事(Locomotive)都是**有作者意图的暗色**,不在禁区内——它们携带强烈风格信息,恰恰是对抗「千篇一律极简」的解药。
+
+#### 6.3 正向做什么(带"为什么")
+
+- ✅ `text-wrap: pretty` + CSS Grid + 高级 CSS:排版细节是 AI 分不清的"品味税",会用这些的 agent 看起来像真设计师
+- ✅ 用 `oklch()` 或 spec 里已有的色,**不凭空发明新颜色**:所有临场发明的色都会让品牌识别度下降
+- ✅ 配图优先 AI 生成(Gemini / Flash / Lovart),HTML 截图仅在精确数据表格时用:AI 生成的图比 SVG 手画准确,比 HTML 截图有质感
+- ✅ 文案用「」引号不用 "":中文排印规范,也是"有审校过"的细节信号
+- ✅ 一个细节做到 120%,其他做到 80%:品味 = 在合适的地方足够精致,不是均匀用力
+
+#### 6.4 反例隔离(演示型内容)
+
+当任务本身就要展示反设计(如本任务就是讲"什么是 AI slop"、或对比评测),**不要整页堆 slop**,而是用**诚实的 bad-sample 容器**隔离——加虚线边框 + "反例 · 不要这样做" 角标,让反例服务于叙事而不是污染页面主调。
+
+这不是硬规则(不做成模板),是原则:**反例要看得出是反例,不是让页面真的变成 slop**。
+
+完整清单见 `references/content-guidelines.md`。
+
+## 设计方向顾问(Fallback 模式)
+
+> ⚖️ **根本立场(先读,统领本节)**:skill 的职责是**帮用户规避最差的设计**——守住反 slop 下限,**不是规定「好设计长什么样」**。真正的好设计**从用户的需求和提供的内容里长出来**,不在内置风格库里。所以:
+> - 用户给了内容/品牌/参考 → 设计就从那里展开,**别套库**。
+> - 用户什么都没有 → 下面三套逻辑只是帮他**起步、打破惯性**的脚手架,不是终点。
+> - `design-styles.md` 的 40 种是「没思路时翻的弹药」,**不是必须从这里选的清单**。过多的硬性风格要求是负担、是无聊——别被风格库绑架,内容永远优先。
+
+**什么时候触发**:
+- 用户需求模糊("做个好看的"、"帮我设计"、"这个怎么样"、"做个XX"没有具体参考)
+- 用户明确要"推荐风格"、"给几个方向"、"选个哲学"、"想看不同风格"
+- 项目和品牌没有任何 design context(既没有 design system,又找不到参考)
+- 用户主动说"我也不知道要什么风格"
+
+**什么时候 skip**:
+- 用户已经给了明确的风格参考(Figma / 截图 / 品牌规范)→ 直接走「核心哲学 #1」主干流程
+- 用户已经说清楚要什么("做个 Apple Silicon 风格的发布会动画")→ 直接进 Junior Designer 流程
+- 小修小补、明确的工具调用("帮我把这段 HTML 变成 PDF")→ skip
+
+不确定就用最轻量版:**列出 3 个差异化方向让用户二选一,不展开不生成**——尊重用户节奏。
+
+### 完整流程(7 个 Phase,顺序执行;Phase 3.5 是图片前置半步)
+
+**Phase 1 · 对话澄清需求 + 主动索要参考(不要跳过、不要直接开做)**
+先用**对话**了解(一次最多 3 个问题):目标受众 / 核心信息 / 情感基调 / 输出格式。
+**同时必须主动索要参考材料**——这是最容易被跳过、却最该问的一步,一次问全:
+- 这个项目/产品**叫什么名字**?
+- 有没有 **logo、品牌色、VI、字体规范**?有就发我。
+- 有没有**你喜欢的参考**——某个网站 URL、一张截图、某个产品「就要那种感觉」?
+- 都没有也没关系,说一句「你看着办」,我直接做几版给你挑。
+
+⏱️ **无应答策略**:问题发出后,若用户**没回应任何信息**(只丢了最初那句模糊需求就没下文)→ 不要枯等。按 best judgment 补齐假设(标 assumption),直接往下跑完 Phase 2-4 把三版真实视觉摆出来——**用「看得见的东西」代替继续追问**(正好呼应选择无效铁律)。
+
+> 用户给了**具体品牌/产品名(能去官网找到 logo 的那种,如 Stripe / DJI / 某 App)**或品牌资产/参考站 → **跳出 Fallback**,走「核心哲学 #1」+「§1.a 核心资产协议」主干。
+> ⚠️ **但普通主题名不算品牌名**:「咖啡 / 鹦鹉 / 历史 / 健身」这类是**内容主题**,不是可找 logo 的品牌——**继续走 Fallback,不要跑去找「咖啡的 logo」空转**。Fallback 正是服务「给了主题、但没给品牌/风格参考」这种最常见的情况。
+
+**Phase 2 · 顾问式重述**(**≥200 字**,把需求真正嚼透,不是敷衍一句)
+用自己的话深入重述本质需求、受众、场景、情感基调、用户没说出口的潜在期待。以「基于这个理解,我**直接做 3 个不同方向的真实版本给你看**」结尾——❌ 不要以「你想选哪个方向?」结尾(见 Phase 3 铁律)。
+
+**Phase 3 · 固化设计 spec(三套逻辑的共同输入)**
+
+把 Phase 1-2 澄清到的东西写成一份 **≥500 字的详尽设计 spec**——这是三个 subagent 的**唯一共同输入**,写薄了三版都会飘。必须覆盖:产品/项目是什么、目标受众与使用场景、核心信息与内容要点(分点列出主要板块)、情感基调与气质关键词、**输出格式与尺寸(必填——网页还是 PPT?具体像素?三个 subagent 必须统一用这个尺寸,否则三版尺寸不一无法横向对比)**、已知约束(品牌色/禁忌/必含元素)、图片需求(Phase 3.5 判断的结果)。它们各自独立工作、只看 spec、互不参考——所以 spec 越具体,三版越不会跑偏。
+
+**Phase 3.5 · 🔴 CHECKPOINT 图片素材前置(spawn 三套逻辑前必做,硬要求)**
+
+开工前先答一个问题:**这个设计,图片是不是内容必需的?**
+- 内容型(介绍鹦鹉 / 咖啡 / 历史 / 人物 / 产品 / 地点…)→ 图片几乎必需
+- 工具 / 数据 / 文档 / 纯观点型 → 可能不需要,判断后跳过取图
+- 拿不准是「内容必需」还是「装饰」→ **按内容必需处理**(宁可取真图)。⚠️「default 无生图」只指**装饰图默认不调生图模型**,不等于「内容图也不许有图」——内容必需的真图该取就取
+
+**图片必需 → 先制定获取策略、取齐真图,再 spawn 三套逻辑**(三个 subagent 共用同一批真图,只换设计),绝不边设计边用色块糊弄:
+
+| 内容类型 | 首选真图来源(公共领域 / 免版权优先) |
+|---|---|
+| 博物 / 历史 / 艺术 / 动植物 / 古典 | Wikimedia Commons、Met / Art Institute Open Access、Biodiversity Heritage Library(古典博物插画,如 Edward Lear / John Gould 鹦鹉图录) |
+| 通用生活 / 场景 / 产品摄影 | Unsplash、Pexels(免版权) |
+| 用户自己的产品 / 品牌 | 走 §1.a 核心资产协议取官方图 |
+| **设计中要点名 / 并列展示的具体产品·品牌(含第三方对比对象)** | **走 §1.a 取每个产品的官方 logo**(svgl API → simpleicons → Google favicon,见 `references/brand-asset-protocol.md` Step 3.1)。对比 / 榜单 / 评测 deck 必走这行 |
+
+🔴 **具名产品 logo 子门(spawn 三套逻辑前必过,硬要求)**:把设计里会出现的产品 / 品牌名**逐个列成清单**,确认每个都已取到官方 logo 并内嵌(base64 / 本地路径),再 spawn。**清单里有一个没取到 logo = 🛑 STOP 补齐**(实在取不到才退诚实 placeholder 并明说「X 的 logo 待补」)。三个 subagent 共用这批 logo。⚠️ 这是对比 / 榜单 / 评测 deck 最常见的翻车点——「只抽了品牌色就开做」就是漏了这道门(2026-06-06 五大 Coding Agent PPT 实测翻车,见 brand-asset-protocol 反例)。
+
+🛠️ **取图用现成脚本(别每次现写)**:`python3 scripts/fetch_images.py --query "英文关键词1" "英文关键词2" --out 项目/assets/img --count 2 --width 1600`——已内置清代理 + 合规 UA + 许可输出 + 失败兜底,下次只改关键词。
+
+- 取图后做**真图诚实性测试**:「去掉这张图,信息是否有损?」有损才用,别配 stock「灵感图」(那是 slop)
+- 取到的真图用 base64 内嵌或本地路径,传给三个 subagent 复用
+- ❌ **内容必需的图绝不用 CSS 色块 / SVG 几何糊弄**——鹦鹉网站没有鹦鹉图 = 失败
+- **取图失败三级兜底(不许卡死)**:① 公共领域库找不到 → 换 Unsplash/Pexels;② 全网取不到合适真图 → 用户确认有生图能力则走 `huashu-gpt-image` 以参考图为基底生成;③ 仍不行 → 标注「图待补」诚实 placeholder **继续 spawn 三套逻辑,不卡流程**,交付时一句话告诉用户「这版图是占位,真图待补」。⚠️ **取图失败是「降级继续」,不是 🛑 STOP**——别让取图卡死整个设计。
+
+> 来自花叔实测:鹦鹉案例里「先判断图片必需 → 选对获取策略(Edward Lear 公共领域博物插画)」是出彩的关键。**素材齐了再设计,不是边设计边占位。**
+
+**Phase 4 · 三套逻辑并行 subagent,各生成一版真实视觉(核心)**
+
+> ✅ **这是 Fallback 的 default 动作**:用户**无需主动要求**「用三套逻辑」「帮我找最佳设计师」——只要触发了顾问模式(用户没给明确风格参考),就**自动**并行跑这三套。目标是让什么都不懂的普通用户,零额外要求也能拿到顶级设计。
+
+> 🔴 **选择无效铁律**(花叔 2026-06 实测确认):绝不让用户在「只有文字、没看到视觉」时选风格——用户没依据。所以不抛文字单选题,而是**并行启动 3 个 subagent 同时跑三套互补逻辑**,各产出一版真实视觉,一次性摆出来让用户选「看得见的东西」。三个 subagent **独立 context、互不参考**(避免趋同),并行是为了更快 deliver。
+
+> ⚙️ **不支持 spawn subagent 的 runtime(Codex / Cursor / 纯对话)**:改**串行**跑三套——每套开跑前只读 spec、清空对上一套的记忆、不许参考已生成的版本,并用三个不同 anchor(轮盘号 / 参照案例 / 设计师名)物理隔离趋同。串行也**必须出三版**,不许偷懒并成一版。spawn prompt 里只喂 spec,别把另两套的逻辑一起写进去。
+
+每个 subagent 拿同一份 spec + 同一份用户真实内容,各按一套逻辑产出一版**纯 HTML/CSS**(default 无生图)真实视觉:
+
+**逻辑一 · 🎲 秒数轮盘(随机 · 20 选 1)**
+跑 `date +%S` 取秒数,算 `秒数 % 20 + 1` 得 1-20,从 `design-styles.md` **对应半区**(做网页用网页 20 种 / 做 PPT 用 PPT 20 种)取那一号风格,subagent 严格按其视觉 DNA + HTML 实现做。作用:用时间掷骰子,强制打破模型「每次都偷选安全极简」的确定性偏好。抽到还原度<70% 的(如 Memphis 做旧纹理)须标注「该部分用纯色块降级,不假装做出原版质感」。
+
+**逻辑二 · 🏆 现实参照(标杆迁移)**
+选 1 个**世界上和该用户需求最相关、且你明确知道设计极出色(最好获奖:Awwwards / CSS Design Awards / FWA / Apple Design Award)**的真实网站 / PPT 模板 / iOS 原型作为参照标准。subagent 先用 WebSearch 核实该案例真实存在与其设计语言,拆解配色/字体/布局/标志元素,再迁移到用户内容上。作用:用真实世界的最高标准锚定,不靠凭空想象。
+
+**逻辑三 · 🧠 最佳设计师(深呼吸 · 顶级定制)**
+深呼吸一口,认真想:**假如预算没有上限,世界上最适合为「这个用户、这个产品」做设计的工作室 / 设计师是谁?**(如 Pentagram / Collins / IDEO / Jony Ive / 原研哉 / Stripe 设计团队…按产品调性选)subagent 启用该设计师/工作室的**设计思维与设计哲学**,从头为用户设计。作用:用顶级设计智慧做最契合的定制。
+
+并行执行规范(三个 subagent 共用):
+- 用**用户真实内容**(非 Lorem),三版同内容只换设计逻辑,方便横向对比
+- 纯 HTML/CSS 单文件;**内容必需的图用 Phase 3.5 取的真图**(三版共用),仅装饰/抽象图才用 CSS 几何/SVG/纯色块,绝不留空占位
+- 🎞️ **PPT / deck 场景必走 deck 模板(绝不写竖向平铺长页!)**:每页做成独立 ``(1920×1080),套 `assets/deck_index.html` 的翻页缩放外壳——**左右键 / 点击翻页 + 自适应 `fit()` 缩放**(整页缩进浏览器窗口,绝不按真实像素放大到只看见一角)。三版只换视觉风格,deck 骨架统一用这个模板,演示体验一致。详见 `references/slide-decks.md`。截图按**单页** 1920×1080 截,不是截整条长页。**单页内容绝不自带页码 / 页数 / 进度标记**——页码由 deck 外壳(`deck_index.html` 计数器)统一承载,单页自己画会和 deck 重复打架(实测出现「02/03」和「6/16」双页码)。`deck_index.html` 现**默认进 3D 概览墙**(所有页斜铺延展悬浮,点「▶ 开始演示」或点任意卡片进全屏单页,ESC 回概览)——交付 deck 时跟用户提一句这个功能
+- 存当前**项目目录**(`项目名/design-demos/[逻辑名].html`)——❌ 禁 `_temp/`(花叔铁律)
+- 截图:`npx playwright screenshot file:///path.html out.png --viewport-size=1440,900`(PPT 用 1920,1080)
+- ✅ **产出自检(防偷懒,进 Phase 5 前必查)**:确认 `design-demos/` 下真有 **3 个 .html**——少于 3 个 = 没走完三套逻辑,补齐再往下,不许只做一版交差
+- 三版全部完成后**一起展示三张截图**,每版标明:用了哪套逻辑、具体哪个风格/参照案例/设计师,一句话说为什么
+
+> 仅当用户**已确认有生图能力**时,AI 生成型风格才走 `huashu-gpt-image`(见 `design-styles.md` 尾部「AI 生图专用风格」);否则一律 HTML。
+> 完整 40 种风格库(网页 20+PPT 20,含还原度/温度/HTML 实现/开源字体)→ `references/design-styles.md`。
+
+**Phase 5 · 用户基于「看到的真实视觉」选择**(第一次有效选择):看完三版真实截图,选一版深化 / 混合("轮盘版的配色 + 设计师版的布局")/ 微调 / 全部重来 → 重跑三套逻辑。
+
+**Phase 6 · 进入主干执行**
+用户选定(或混合)后 → 回到「核心哲学」+「工作流程」的 Junior Designer pass,把那一版做扎实。这时已有明确 design context,不再凭空。
+> 仅当走 AI 生图:提示词用「具体视觉特征 + 内容 + 技术参数」(写「赤陶橙 #C04A1A + 留白」不写「极简」),避开审美禁区 → 见 `huashu-gpt-image`。
+
+**真实素材优先原则**(涉及用户本人/产品时):
+1. 先查用户配置的**私有 memory / config 路径**下的 `personal-asset-index.json`(各 runtime 按自身约定的 memory 目录;找不到就问用户)
+2. 首次使用:复制 `assets/personal-asset-index.example.json` 到上述私有路径,填入真实数据
+3. 找不到就直接问用户要,不要编造——真实数据文件不要放在 skill 目录内避免随分发泄露隐私
+
+## App / iOS 原型专属守则
+
+做 iOS/Android/移动 app 原型时(触发:「app 原型」「iOS mockup」「移动应用」「做个 app」),下面四条**覆盖**通用 placeholder 原则——app 原型是 demo 现场,静态摆拍和米白占位卡没有说服力。
+
+### 0. 架构选型(必先决定)
+
+**默认单文件 inline React**——所有 JSX/data/styles 直接写进主 HTML 的 `` 标签,**不要**用 `