diff --git a/LICENSE b/LICENSE index 6079786..29d61d1 100644 --- a/LICENSE +++ b/LICENSE @@ -1,21 +1,44 @@ -MIT License +Huashu Design · Personal Use License +Copyright (c) 2026 alchaincyf (花叔 · 花生) -Copyright (c) 2026 alchaincyf (花叔) +本 skill（以下简称「本作品」）包含 SKILL.md、scripts、references、assets、demos 及其全部派生内容。使用本作品视为同意以下条款： -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. +## 1. 允许的使用（个人免费） -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. +以下场景无需授权、无需打招呼： + +- **学习与研究**：阅读代码、修改、二次开发用于自己理解 +- **个人创作**：为自己的文章、视频、副业项目、小红书/公众号/B站等内容创作使用 +- **非营利分享**：基于本作品做 demo、教程，发布到社交平台、博客、播客 +- **派生作品**：在自己名下的个人仓库里基于本作品做派生 skill，需在 README 显著位置注明来源（`Derived from alchaincyf/huashu-design`） + +## 2. 禁止的使用（必须事先授权） + +以下场景**必须联系花生获得书面授权后方可使用**： + +- 任何**公司、团队、工作室、机构**将本作品集成到其内部工具链或对外产品 +- 将本作品或其派生物作为**面向付费客户的交付手段**（包括设计外包、品牌咨询、B 端 SaaS 等） +- 基于本作品做**商业软件产品**、付费模板、付费订阅服务 +- 以**营利为目的**的培训课程、商业工作坊、闭门付费社群 +- 在**商单创作**（乙方向甲方交付物）中使用本作品生成的内容 + +## 3. 授权联系方式 + +商用授权请通过以下任一平台联系花生： + +- X / Twitter：https://x.com/AlchainHust +- 公众号：微信搜索「花叔」 +- B 站：https://space.bilibili.com/14097567 +- YouTube：https://www.youtube.com/@Alchain +- 小红书：https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf +- 官网：https://www.huasheng.ai/ + +## 4. 免责声明 + +本作品按「现状」提供，不提供任何明示或默示的担保。作者不对因使用本作品导致的任何损失承担责任。 + +--- + +简而言之：**个人随便用，企业要打招呼。** diff --git a/README.md b/README.md index 6501df0..88a4950 100644 --- a/README.md +++ b/README.md @@ -2,231 +2,240 @@ # Huashu Design -> *「你要做的下一个设计，何必打开图形界面」* +> *"Type. Hit enter. A finished design lands in your lap."* -[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE) -[![Claude Code](https://img.shields.io/badge/Claude%20Code-Skill-blueviolet)](https://claude.ai/code) +[![License](https://img.shields.io/badge/License-Personal%20Use%20Only-orange.svg)](LICENSE) +[![Agent-Agnostic](https://img.shields.io/badge/Agent-Agnostic-blueviolet)](https://skills.sh) [![Skills](https://img.shields.io/badge/skills.sh-Compatible-green)](https://skills.sh)
-**Claude Design 把设计师塞进了浏览器。Huashu Design 让图形工具这一层消失。** +**Say one sentence to your agent — Claude Code, Cursor, Codex, OpenClaw, Hermes all work.**
-PPT、App 原型、时间轴动画、信息图、设计变体——在 Claude Code 里说一句话，agent 自己搭 design spec、自己抓品牌色、自己生成 HTML、自己跑 Playwright 验证。
-没有画布，没有图层，没有插件。只剩下一个能直接复制到 Keynote、贴进飞书、发进 issue 的交付物。 +Thirty seconds later, you have a slide deck, an iOS prototype, a motion-design sequence, or an infographic. Drop it in an issue, paste it into Keynote, ship it to Notion. + +It doesn't look like AI made it. Twenty real design philosophies are distilled into the skill (Pentagram's information architecture, Field.io's motion poetics, Kenya Hara's eastern minimalism…). The agent grabs brand assets, builds a design spec, generates HTML, runs Playwright verification, then critiques itself against a 5-dimension rubric. ``` npx skills add alchaincyf/huashu-design ``` -[看效果](#demo-画廊) · [安装](#装上就能用) · [能做什么](#能做什么) · [核心机制](#核心机制) · [和 Claude Design 的关系](#和-claude-design-的关系) - -
- -[![Star History Chart](https://api.star-history.com/svg?repos=alchaincyf/huashu-design&type=Date)](https://star-history.com/#alchaincyf/huashu-design&Date) +[See it work](#demo-gallery) · [Install](#install) · [What it does](#what-it-does) · [How it works](#core-mechanics) · [vs. Claude Design](#vs-claude-design) ---

- Fallback 设计顾问 · 从 20 种设计哲学推荐 3 个差异化方向 + Fallback design advisor · 3 differentiated directions from 20 design philosophies

--- -## 装上就能用 +## Install ```bash npx skills add alchaincyf/huashu-design ``` -然后在 Claude Code 里直接说话： +Then just talk to Claude Code: ``` -「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」 -「做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击」 -「把这段逻辑做成 60 秒动画，导出 MP4 和 GIF」 -「帮我对这个设计做一个 5 维度评审」 +"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." ``` -没有按钮、没有面板、没有 Figma 插件。跨 agent 通用 —— Claude Code / Cursor / Trae / Hermes / OpenClaw 任一都能装。 +No buttons, no panels, no Figma plugin. Agent-agnostic — drops into Claude Code, Cursor, Trae, Hermes, OpenClaw, any of them. --- -## 能做什么 +## What it does -| 能力 | 交付物 | 典型耗时 | -|------|--------|----------| -| 交互原型（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 | -| 设计方向顾问 | 5 流派 × 20 种设计哲学 · 推荐 3 方向 · 并行生成 Demo | 5 min | -| 5 维度专家评审 | 雷达图 + Keep/Fix/Quick Wins · 可操作修复清单 | 3 min | +| 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 | -**跨 agent 通用**：Claude Code、Cursor、Trae、Hermes、OpenClaw 任一都能装。 +**Agent-agnostic**: installs into Claude Code, Cursor, Trae, Hermes, OpenClaw, or any markdown-skill-capable agent. --- -## Demo 画廊 +## Demo Gallery -### 设计方向顾问 +### Design Direction Advisor -模糊需求时的 fallback：从 5 流派 × 20 种设计哲学里挑 3 个差异化方向，并行生成 3 个 Demo 让你选。 +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 原型 +### iOS App Prototype -iPhone 15 Pro 精确机身（灵动岛 / 状态栏 / Home Indicator）· 状态驱动多屏切换 · 真图从 Wikimedia/Met/Unsplash 取 · Playwright 自动点击测试。 +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 引擎 +### Motion Design Engine -Stage + Sprite 时间片段模型 · `useTime` / `useSprite` / `interpolate` / `Easing` 四 API 覆盖所有动画需求 · 一条命令导出 MP4 / GIF / 60fps 插帧 / 带 BGM 的成片。 +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 → 可编辑 PPTX +### HTML Slides → Editable PPTX -HTML deck 浏览器演讲 · `html2pptx.js` 读 DOM 的 computedStyle 逐元素翻译成 PowerPoint 对象 · 导出的是**真文本框**，不是图片铺底。 +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 · 实时变体切换 +### Tweaks · Live Variation Switching -配色 / 字型 / 信息密度等参数化 · 侧边面板切换 · 纯前端 + `localStorage` 持久化 · 刷新不丢。 +Colors / typography / information density parameterized · side panel toggle · pure-frontend + `localStorage` persistence · survives reload.

-### 信息图 / 数据可视化 +### Infographic / Data Viz -杂志级排版 · CSS Grid 精准分栏 · `text-wrap: pretty` 排印细节 · 真数据驱动 · 可导 PDF 矢量 / PNG 300dpi / SVG。 +Magazine-grade typography · precise CSS Grid columns · `text-wrap: pretty` typographic details · driven by real data · exports to vector PDF / 300dpi PNG / SVG.

-### 5 维度专家评审 +### 5-Dimension Expert Critique -哲学一致性 · 视觉层级 · 细节执行 · 功能性 · 创新性 各 0–10 分 · 雷达图可视化 · 输出 Keep / Fix / Quick Wins 清单。 +Philosophical coherence · visual hierarchy · execution craft · functionality · innovation — each scored 0–10 · radar-chart visualization · outputs Keep / Fix / Quick Wins punch list.

-### Junior Designer 工作流 +### Junior Designer Workflow -不闷头做大招：先写 assumptions + placeholders + reasoning，尽早 show 给你，再迭代。理解错了早改比晚改便宜 100 倍。 +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.

-### 品牌资产协议 5 步硬流程 +### Core Asset Protocol · 5-step hard process -涉及具体品牌时强制执行：问 → 搜 → 下载（三条兜底）→ grep 色值 → 写 `brand-spec.md`。 +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 -skill 里最硬的一段规则。涉及具体品牌（Stripe、Linear、Anthropic、自家公司等）时强制执行 5 步： +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: -| 步骤 | 动作 | 目的 | -|------|------|------| -| 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-*)` | 不固化就会忘 | +| 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 | -A/B 测试（v1 vs v2，各跑 6 agent）：**v2 的稳定性方差比 v1 低 5 倍**。稳定性的稳定性，这是 skill 真正的护城河。 +**Ranking of asset importance** (from the skill's internal rubric): -### 设计方向顾问（Fallback） +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. -- 不凭通用直觉硬做，进入 Fallback 模式 -- 从 5 流派 × 20 种设计哲学里推荐 3 个**必须来自不同流派**的差异化方向 -- 每个方向配代表作、气质关键词、代表设计师 -- 并行生成 3 个视觉 Demo 让用户选 -- 选定后进入主干 Junior Designer 流程 +### Design Direction Advisor (Fallback) -### Junior Designer 工作流 +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 -- 开工前 show 问题清单一次性发给用户，等批量答完再动手 -- HTML 里先写 assumptions + placeholders + reasoning comments -- 尽早 show 给用户（哪怕只是灰色方块） -- 填充实际内容 → variations → Tweaks 这三步分别再 show 一次 -- 交付前用 Playwright 肉眼过一遍浏览器 +### Junior Designer Workflow -### 反 AI slop 规则 +The default working mode across every task: -避免一眼 AI 的视觉最大公约数（紫渐变 / emoji 图标 / 圆角+左 border accent / SVG 画人脸 / Inter 做 display）。用 `text-wrap: pretty` + CSS Grid + 精心选择的 serif display 和 oklch 色彩。 +- 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. --- -## 和 Claude Design 的关系 +## vs. Claude Design -我大方承认：品牌资产协议的哲学是从 Claude Design 流传出来的提示词里偷师的。那份提示词反复强调**好的高保真设计不是从白纸开始，而是从已有的设计上下文长出来**。这个原则是 65 分作品和 90 分作品的分水岭。 +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 | |---|---|---| -| 形态 | 网页产品（浏览器里用） | skill（Claude Code 里用） | -| 配额 | 订阅 quota | API 消耗 · 并行跑 agent 不受 quota 限 | -| 交付物 | 画布内 + 可导 Figma | HTML / MP4 / GIF / 可编辑 PPTX / PDF | -| 操作方式 | GUI（点、拖、改） | 对话（说话、等 agent 做完） | -| 复杂动画 | 有限 | Stage + Sprite 时间轴 · 60fps 导出 | -| 跨 agent | 专属 Claude.ai | Claude Code / Cursor / Trae / Hermes / OpenClaw 任一 | +| 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 是**更好的图形工具**，huashu-design 是**让图形工具这层消失**。两条路，不同受众。 +Claude Design is a **better graphics tool**. Huashu-design makes **the graphics-tool layer disappear**. Two paths, different audiences. --- ## Limitations -- **不支持图层级可编辑的 PPTX 到 Figma**。产出 HTML，可截图、录屏、导图，但不能拖进 Keynote 改文字位置。 -- **Framer Motion 级别的复杂动画不行**。3D、物理模拟、粒子系统超出 skill 边界。 -- **完全空白的品牌从零设计质量会掉到 60–65 分**。凭空画 hi-fi 本来就是 last resort。 +- **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. -这是一个 80 分的 skill，不是 100 分的产品。对不愿意打开图形界面的人，80 分的 skill 比 100 分的产品好用。 +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 # 主文档（给 agent 读） -├── README.md # 本文件（给用户读） +├── SKILL.md # Main doc (read by agent) +├── README.md # This file (read by user) ├── 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/ # 按任务深入读的子文档 +│ ├── 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 │ ├── animation-pitfalls.md -│ ├── design-styles.md # 20 种设计哲学详细库 +│ ├── design-styles.md # 20 design philosophies in detail │ ├── slide-decks.md │ ├── editable-pptx.md │ ├── critique-guide.md │ ├── video-export.md │ └── ... -├── scripts/ # 导出工具链 +├── scripts/ # Export toolchain │ ├── render-video.js # HTML → MP4 │ ├── convert-formats.sh # MP4 → 60fps + GIF │ ├── add-music.sh # MP4 + BGM @@ -234,21 +243,47 @@ huashu-design/ │ ├── export_deck_pptx.mjs │ ├── html2pptx.js │ └── verify.py -└── demos/ # 9 个能力演示（本 README 引用的 GIF 都来自这里） +└── demos/ # 9 capability demos (referenced by this README) ``` --- -## 起源 +## Origin Story -Anthropic 发布 Claude Design 那天我玩到凌晨四点。几天之后发现自己再也没点开过它，不是它不好——它是这个赛道目前最成熟的产品——是我宁愿让 agent 在终端里帮我干活，也不愿意打开任何图形界面。 +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. -于是让 agent 拆解 Claude Design 本身（包括社区流传的系统提示词、品牌资产协议、组件机制），蒸馏成结构化 spec，再写成 skill 装进自己的 Claude Code。 +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. -感谢 Anthropic 把 Claude Design 的提示词写得清晰。这种基于其他产品灵感的二次创作，是开源文化在 AI 时代的新形态。 +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 +## License · Usage Rights -MIT. Skill 和 demo 都开源，随便用。issue 里欢迎延伸讨论。 +**Personal use is free and unrestricted** — studying, research, creating things for yourself, writing articles, side projects, personal social media. Use it freely, no need to ask. + +**Enterprise / commercial use is restricted** — any company, team, or for-profit organization integrating this skill into a product, external service, or client deliverable **must obtain authorization from Huasheng first**. Including but not limited to: +- Using the skill as part of internal company tooling +- Using skill outputs as the primary creative method for external deliverables +- Building a commercial product on top of the skill +- Using it in paid client projects + +**Commercial licensing contact**: any of the social platforms below. + +--- + +## 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 12k+ 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 commercial licensing, collaborations, or sponsored content, DM on any of the above. diff --git a/SKILL.md b/SKILL.md index 3d267f4..7d3641d 100644 --- a/SKILL.md +++ b/SKILL.md @@ -21,6 +21,43 @@ description: 花叔Design（Huashu-Design）——用HTML做高保真原型、 不适用场景：生产级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出发，不要凭空画 @@ -29,86 +66,206 @@ description: 花叔Design（Huashu-Design）——用HTML做高保真原型、 **如果还是没有，或者用户需求表达很模糊**（如"做个好看的页面"、"帮我设计"、"不知道要什么风格"、"做个XX"没有具体参考），**不要凭通用直觉硬做**——进入 **设计方向顾问模式**，从 20 种设计哲学里给 3 个差异化方向让用户选。完整流程见下方「设计方向顾问（Fallback 模式）」大节。 -#### 1.a 品牌资产协议（涉及具体品牌时强制执行） +#### 1.a 核心资产协议（涉及具体品牌时强制执行） -> **这是 v1 最核心的约束，也是稳定性的生命线。** Agent 是否走通这个协议，直接决定输出质量是 65 分还是 90 分。不要跳过任何一步。 +> **这是 v1 最核心的约束，也是稳定性的生命线。** Agent 是否走通这个协议，直接决定输出质量是 40 分还是 90 分。不要跳过任何一步。 +> +> **v1.1 重构（2026-04-20）**：从「品牌资产协议」升级为「核心资产协议」。之前的版本过度聚焦色值和字体，漏掉了设计中最基础的 logo / 产品图 / UI 截图。花叔的原话：「除了所谓的品牌色，显然我们应该找到并且用上大疆的 logo，用上 pocket4 的产品图。如果是网站或者 app 等非实体产品的话，logo 至少该是必须的。这可能是比所谓的品牌设计的 spec 更重要的基本逻辑。否则，我们在表达什么呢？」 -**触发条件**：任务涉及具体品牌——用户提了产品名/公司名/明确客户（Stripe、Linear、Anthropic、Notion、Lovart、自家公司等），不论用户是否主动提供了品牌资料。 +**触发条件**：任务涉及具体品牌——用户提了产品名/公司名/明确客户（Stripe、Linear、Anthropic、Notion、Lovart、DJI、自家公司等），不论用户是否主动提供了品牌资料。 -**5 步硬流程**（每一步都有 fallback，但绝不可以静默跳过）： +**前置硬条件**：走协议前必须已通过「#0 事实验证先于假设」确认品牌/产品存在且状态已知。如果你还不确定产品是否已发布/规格/版本，先回去搜。 -##### Step 1 · 问 -一句话问清楚：「这个品牌有 brand guidelines / 设计规范 / logo 文件吗？品牌色和字体清单？有的话直接给我；没有的话我去搜。」 +##### 核心理念：资产 > 规范 -##### Step 2 · 搜官方品牌页 -- 典型路径：`.com/brand` / `.com/press` / `brand..com` / `.github.io/brand` -- `WebFetch` 搜不到时用 `WebSearch`：「`` brand guidelines logo download」 -- App 类产品另查 App Store 页面（app icon + 截图可提色） +**品牌的本质是「它被认出来」**。认出来靠什么？按识别度排序： -##### Step 3 · 下载资产 · 三条兜底路径 +| 资产类型 | 识别度贡献 | 必需性 | +|---|---|---| +| **Logo** | 最高 · 任何品牌出现 logo 就一眼识别 | **任何品牌都必须有** | +| **产品图/产品渲染图** | 极高 · 实体产品的"主角"就是产品本身 | **实体产品（硬件/包装/消费品）必须有** | +| **UI 截图/界面素材** | 极高 · 数字产品的"主角"是它的界面 | **数字产品（App/网站/SaaS）必须有** | +| **色值** | 中 · 辅助识别，脱离前三项时经常撞衫 | 辅助 | +| **字体** | 低 · 需配合前述才能建立识别 | 辅助 | +| **气质关键词** | 低 · agent 自检用 | 辅助 | -> **真实世界里 SVG logo 经常拿不到**。2026 年官网大多 Next.js SSR + inline SVG，或 Cloudflare 反爬返回 403。下面三条路径按成功率递减排列——**前一条失败立刻走下一条，不要停**： +**翻译成执行规则**： +- 只抽色值 + 字体、不找 logo / 产品图 / UI → **违反本协议** +- 用 CSS 剪影/SVG 手画替代真实产品图 → **违反本协议**（生成的就是「通用科技动画」，任何品牌都长一样） +- 找不到资产不告诉用户、也不 AI 生成，硬做 → **违反本协议** +- 宁可停下问用户要素材，也不要用 generic 填充 -1. **独立 SVG 文件**（最理想） +##### 5 步硬流程（每步有 fallback，绝不静默跳过） + +##### Step 1 · 问（资产清单一次问全） + +不要只问「有 brand guidelines 吗？」——太宽泛，用户不知道该给什么。按清单逐项问： + +``` +关于 ，你手上有以下哪些资料？我按优先级列： +1. Logo（SVG / 高清 PNG）—— 任何品牌必备 +2. 产品图 / 官方渲染图 —— 实体产品必备（如 DJI Pocket 4 的产品照） +3. UI 截图 / 界面素材 —— 数字产品必备（如 App 主要页面截图） +4. 色值清单（HEX / RGB / 品牌色盘） +5. 字体清单（Display / Body） +6. Brand guidelines PDF / Figma design system / 品牌官网链接 + +有的直接发我，没有的我去搜/抓/生成。 +``` + +##### Step 2 · 搜官方渠道（按资产类型） + +| 资产 | 搜索路径 | +|---|---| +| **Logo** | `.com/brand` · `.com/press` · `.com/press-kit` · `brand..com` · 官网 header 的 inline SVG | +| **产品图/渲染图** | `.com/` 产品详情页 hero image + gallery · 官方 YouTube launch film 截帧 · 官方新闻稿附图 | +| **UI 截图** | App Store / Google Play 产品页截图 · 官网 screenshots section · 产品官方演示视频截帧 | +| **色值** | 官网 inline CSS / Tailwind config / brand guidelines PDF | +| **字体** | 官网 `` 引用 · Google Fonts 追踪 · brand guidelines | + +`WebSearch` 兜底关键词： +- Logo 找不到 → ` logo download SVG`、` press kit` +- 产品图找不到 → ` official renders`、` product photography` +- UI 找不到 → ` app screenshots`、` dashboard UI` + +##### Step 3 · 下载资产 · 按类型三条兜底路径 + +**3.1 Logo（任何品牌必需）** + +三条路径按成功率递减： +1. 独立 SVG/PNG 文件（最理想）： ```bash curl -o assets/-brand/logo.svg https://.com/logo.svg + curl -o assets/-brand/logo-white.svg https://.com/logo-white.svg ``` -2. **官网 HTML 全文**（80% 场景必用）：WebFetch 返回 403 时用 curl 带 UA 兜底，logo 的 inline SVG 和色值 token 直接藏在 HTML 里： +2. 官网 HTML 全文提取 inline SVG（80% 场景必用）： ```bash curl -A "Mozilla/5.0" -L https://.com -o assets/-brand/homepage.html + # 然后 grep ... 提取 logo 节点 ``` -3. **产品截图取色**（App/未开源产品必走）：从用户提供的产品截图或官方 Dribbble / Twitter media 里提取主色。macOS 用 Preview 的吸管、Linux 用 `convert image.png -unique-colors txt:-` 给出主要色值。 +3. 官方社交媒体 avatar（最后手段）：GitHub/Twitter/LinkedIn 的公司头像通常是 400×400 或 800×800 透明底 PNG -##### Step 4 · Grep 提取真实色值 -- **绝对不要从记忆里猜品牌色**。从下载的资产里 grep 所有 `fill`/`stroke`/`color`/`background`/`#xxxxxx` 的 6 位 hex，按频率排序，过滤黑白灰： - ```bash - grep -hoE '#[0-9A-Fa-f]{6}' assets/-brand/*.{svg,html,css} | sort | uniq -c | sort -rn | head -20 - ``` -- **警惕示范品牌污染**：产品截图里常有用户 demo 的品牌色（如某工具截图里演示喜茶红），那不是该工具的色。**同时出现两种强色时必须区分**。 -- **品牌多切面的客观事实**：同一品牌的官网营销色（`.com` 暖底 accent 色）和产品 UI 色（产品内深底 accent 色）经常不同，比如 Lovart 官网是暖米+橙+蓝，产品 UI 是 Charcoal + Lime 青柠。**两套都是真的**——根据交付场景选合适的切面（做营销物料用官网色，做产品内/App 延伸用 UI 色）。 +**3.2 产品图/渲染图（实体产品必需）** -##### Step 5 · 固化为 `brand-spec.md` 文件（不可省略） +按优先级： +1. **官方产品页 hero image**（最高优先级）：右键查看图片地址 / curl 获取。分辨率通常 2000px+ +2. **官方 press kit**：`.com/press` 常有高清产品图下载 +3. **官方 launch video 截帧**：用 `yt-dlp` 下载 YouTube 视频，ffmpeg 抽几帧高清图 +4. **Wikimedia Commons**：公共领域常有 +5. **AI 生成兜底**（nano-banana-pro）：把真实产品图作为参考发给 AI，让它生成符合动画场景的变体。**不要用 CSS/SVG 手画代替** -> **这一步是全协议的制胜点**。前 4 步抽完色，如果只留在内存里下一页就忘。必须写一份 `brand-spec.md` 到项目根目录，让所有 CSS 变量引用这份文件。 +```bash +# 示例：下载 DJI 官网产品 hero image +curl -A "Mozilla/5.0" -L "" -o assets/-brand/product-hero.png +``` + +**3.3 UI 截图（数字产品必需）** + +- App Store / Google Play 的产品截图（注意：可能是 mockup 而非真实 UI，要对比） +- 官网 screenshots section +- 产品演示视频截帧 +- 产品官方 Twitter/X 的发布截图（常是最新版本） +- 用户有账号时，直接截屏真实产品界面 + +##### Step 4 · 验证 + 提取（不只是 grep 色值） + +| 资产 | 验证动作 | +|---|---| +| **Logo** | 文件存在 + SVG/PNG 可打开 + 至少两个版本（深底/浅底用）+ 透明背景 | +| **产品图** | 至少一张 2000px+ 分辨率 + 去背或干净背景 + 多个角度（主视角、细节、场景） | +| **UI 截图** | 分辨率真实（1x / 2x）+ 是最新版本（不是旧版）+ 无用户数据污染 | +| **色值** | `grep -hoE '#[0-9A-Fa-f]{6}' assets/-brand/*.{svg,html,css} \| sort \| uniq -c \| sort -rn \| head -20`，过滤黑白灰 | + +**警惕示范品牌污染**：产品截图里常有用户 demo 的品牌色（如某工具截图演示喜茶红），那不是该工具的色。**同时出现两种强色时必须区分**。 + +**品牌多切面**：同一品牌的官网营销色和产品 UI 色经常不同（Lovart 官网暖米+橙，产品 UI 是 Charcoal + Lime）。**两套都是真的**——根据交付场景选合适的切面。 + +##### Step 5 · 固化为 `brand-spec.md` 文件（模板必须覆盖所有资产） ```markdown # · Brand Spec -> 从以下资产抽取：<列出资产来源和提取日期> +> 采集日期：YYYY-MM-DD +> 资产来源：<列出下载来源> > 资产完整度：<完整 / 部分 / 推断> -## 色板 +## 🎯 核心资产（一等公民） + +### Logo +- 主版本：`assets/-brand/logo.svg` +- 浅底反色版：`assets/-brand/logo-white.svg` +- 使用场景：<片头/片尾/角落水印/全局> +- 禁用变形：<不能拉伸/改色/加描边> + +### 产品图（实体产品必填） +- 主视角：`assets/-brand/product-hero.png`（2000×1500） +- 细节图：`assets/-brand/product-detail-1.png` / `product-detail-2.png` +- 场景图：`assets/-brand/product-scene.png` +- 使用场景：<特写/旋转/对比> + +### UI 截图（数字产品必填） +- 主页：`assets/-brand/ui-home.png` +- 核心功能：`assets/-brand/ui-feature-.png` +- 使用场景：<产品展示/Dashboard 渐现/对比演示> + +## 🎨 辅助资产 + +### 色板 - Primary: #XXXXXX <来源标注> - Background: #XXXXXX - Ink: #XXXXXX +- Accent: #XXXXXX - 禁用色: <品牌明确不用的色系> -## 字型 +### 字型 - Display: - Body: +- Mono（数据 HUD 用）: -## 签名细节 -- <哪些细节是「120% 做到」的，如 2px 细线、italic em 强调> +### 签名细节 +- <哪些细节是「120% 做到」的> -## 禁区 +### 禁区 - <明确不能做的：比如 Lovart 不用蓝色、Stripe 不用低饱和暖色> -## 气质关键词 +### 气质关键词 - <3-5 个形容词> ``` -**写完 spec 后的执行纪律**（硬要求）： -- 写 CSS 前把 spec 色值做成 `:root { --brand-primary: ...; }` CSS 变量 -- 所有 HTML 文件只能用 `var(--brand-*)`，**不允许临场写死色号** -- 这一条让品牌一致性从「靠自觉」变成「靠结构」——agent 想临时加色要先改 spec，改 spec 就会自觉 +**写完 spec 后的执行纪律（硬要求）**： +- 所有 HTML 必须**引用** `brand-spec.md` 里的资产文件路径，不允许用 CSS 剪影/SVG 手画代替 +- Logo 作为 `` 引用真实文件，不重画 +- 产品图作为 `` 引用真实文件，不用 CSS 剪影代替 +- CSS 变量从 spec 注入：`:root { --brand-primary: ...; }`，HTML 只用 `var(--brand-*)` +- 这让品牌一致性从「靠自觉」变成「靠结构」——想临时加色要先改 spec -**全流程失败的兜底**：三条路径都失败（极罕见）才明确告诉用户「找不到 official brand guidelines，我按通用风格做并在 spec 里标注 assumption」——**不要静默用通用色硬做**。Fallback 时进入「设计方向顾问模式」（见下节）。 +##### 全流程失败的兜底 -**反例**（真实踩过的坑）： -- 为 Kimi 做动画时凭记忆猜「应该是橙色」，实际 Kimi 是 `#1783FF` 蓝色——返工一遍 -- 把 Lovart 产品截图里演示品牌的喜茶红当成 Lovart 自己的色——差点毁整个设计 +按资产类型分别处理： + +| 缺失 | 处理 | +|---|---| +| **Logo 完全找不到** | **停下问用户**，不要硬做（logo 是品牌识别度的根基） | +| **产品图（实体产品）找不到** | 优先 nano-banana-pro AI 生成（以官方参考图为基底）→ 次选向用户索取 → 最后才是诚实 placeholder（灰块+文字标签，明确标注"产品图待补"） | +| **UI 截图（数字产品）找不到** | 向用户索取自己账号的截屏 → 官方演示视频截帧。不用 mockup 生成器凑 | +| **色值完全找不到** | 按「设计方向顾问模式」走，向用户推荐 3 个方向并标注 assumption | + +**禁止**：找不到资产就静默用 CSS 剪影/通用渐变硬做——这是协议最大的反 pattern。**宁可停下问，也不要凑**。 + +##### 反例（真实踩过的坑） + +- **Kimi 动画**：凭记忆猜「应该是橙色」，实际 Kimi 是 `#1783FF` 蓝色——返工一遍 +- **Lovart 设计**：把产品截图里演示品牌的喜茶红当成 Lovart 自己的色——差点毁整个设计 +- **DJI Pocket 4 发布动画（2026-04-20，触发本协议升级的真实案例）**：走了旧版只抽色值的协议，没下载 DJI logo、没找 Pocket 4 产品图，用 CSS 剪影代替产品——做出来是「通用黑底+橙 accent 的科技动画」，没有大疆识别度。花叔原话：「否则，我们在表达什么呢？」→ 协议升级。 - 抽完色没写进 brand-spec.md，第三页就忘了主色数值，临场加了个「接近但不是」的 hex——品牌一致性崩溃 -**协议代价 vs 不做代价**：5-10 分钟 grep + 5 分钟写 spec = 15 分钟。不做的代价是整个产出方向错，返工 1-2 小时。**这是稳定性最便宜的投资**。 +##### 协议代价 vs 不做代价 + +| 场景 | 时间 | +|---|---| +| 正确走完协议 | 下载 logo 5 min + 下载 3-5 张产品图/UI 10 min + grep 色值 5 min + 写 spec 10 min = **30 分钟** | +| 不做协议的代价 | 做出没识别度的通用动画 → 用户返工 1-2 小时，甚至重做 | + +**这是稳定性最便宜的投资**。尤其对商单/发布会/重要客户项目，30 分钟的资产协议是保命钱。 ### 2. Junior Designer模式：先展示假设，再执行 @@ -161,6 +318,7 @@ description: 花叔Design（Huashu-Design）——用HTML做高保真原型、 | 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 变体，但是经过微调的） | | 赛博霓虹 / 深蓝底 `#0D1117` | GitHub dark mode 美学的烂大街复制 | 开发者工具产品且品牌本身走这方向 | @@ -416,11 +574,15 @@ Screen 组件接 callback props（`onEnter`、`onClose`、`onTabChange`、`onOpe ### 标准流程（用TaskCreate追踪） -1. **理解需求**：新任务或模糊任务必须问clarifying questions，详见 `references/workflow.md`。一次focused一轮问题通常够，小修小补跳过。 - 🛑 **检查点1：问题清单一次性发给用户，等用户批量答完再往下走**。不要边问边做。 - 🛑 **幻灯片/PPT 任务额外必问「最终交付格式」**（浏览器演讲 / PDF / 可编辑 PPTX）——**要可编辑 PPTX 就必须从第一行 HTML 开始按 `references/editable-pptx.md` 的 4 条硬约束写**，事后补救会导致 2-3 小时返工。详见 `references/slide-decks.md` 开头「开工前先确认交付格式」一节。 - ⚡ **如果用户需求严重模糊（没参考、没明确风格、"做个好看的"类）→ 走「设计方向顾问（Fallback 模式）」大节，完成 Phase 1-4 选定方向后，再回到这里 Step 2**。 -2. **探索资源 + 抽 spec**：读 design system、linked files、上传的截图/代码。**涉及具体品牌时必走 §1.a 五步协议**（问→搜→下载→grep→写 `brand-spec.md`）。如果用户没给 context 且挖不出资产，先走设计方向顾问 Fallback，再按 `references/design-context.md` 的品位锚点兜底。 +1. **理解需求**： + - 🔍 **0. 事实验证（涉及具体产品/技术时必做，优先级最高）**：任务涉及具体产品/技术/事件（DJI Pocket 4、Gemini 3 Pro、Nano Banana Pro、某新 SDK 等）时，**第一个动作**是 `WebSearch` 验证其存在性、发布状态、最新版本、关键规格。把事实写入 `product-facts.md`。详见「核心原则 #0」。**这步做在问 clarifying questions 之前**——事实错了问什么都歪。 + - 新任务或模糊任务必须问clarifying questions，详见 `references/workflow.md`。一次focused一轮问题通常够，小修小补跳过。 + - 🛑 **检查点1：问题清单一次性发给用户，等用户批量答完再往下走**。不要边问边做。 + - 🛑 **幻灯片/PPT 任务额外必问「最终交付格式」**（浏览器演讲 / PDF / 可编辑 PPTX）——**要可编辑 PPTX 就必须从第一行 HTML 开始按 `references/editable-pptx.md` 的 4 条硬约束写**，事后补救会导致 2-3 小时返工。详见 `references/slide-decks.md` 开头「开工前先确认交付格式」一节。 + - ⚡ **如果用户需求严重模糊（没参考、没明确风格、"做个好看的"类）→ 走「设计方向顾问（Fallback 模式）」大节，完成 Phase 1-4 选定方向后，再回到这里 Step 2**。 +2. **探索资源 + 抽核心资产**（不只是抽色值）：读 design system、linked files、上传的截图/代码。**涉及具体品牌时必走 §1.a「核心资产协议」五步**（问→按类型搜→按类型下载 logo/产品图/UI→验证+提取→写 `brand-spec.md` 含所有资产路径）。 + - 🛑 **检查点2·资产自检**：开工前确认核心资产到位——实体产品要有产品图（不是 CSS 剪影）、数字产品要有 logo+UI 截图、色值从真实 HTML/SVG 抽取。缺了就停下补，不硬做。 + - 如果用户没给 context 且挖不出资产，先走设计方向顾问 Fallback，再按 `references/design-context.md` 的品位锚点兜底。 3. **先答四问，再规划系统**：**这一步的前半段比所有 CSS 规则更决定输出**。 📐 **位置四问**（每个页面/屏幕/镜头开工前必答）： @@ -537,6 +699,9 @@ Screen 组件接 callback props（`onEnter`、`onClose`、`onTabChange`、`onOpe | 输出完后验证 | `references/verification.md` + `scripts/verify.py` | | **设计评审/打分**（设计完成后可选） | `references/critique-guide.md`（5 维度评分+常见问题清单） | | **动画导出MP4/GIF/加BGM** | `references/video-export.md` + `scripts/render-video.js` + `scripts/convert-formats.sh` + `scripts/add-music.sh` | +| **动画加音效SFX**（苹果发布会级，37个预制） | `references/sfx-library.md` + `assets/sfx//*.mp3` | +| **动画音频配置规则**（SFX+BGM双轨制、黄金配比、ffmpeg模板、场景配方） | `references/audio-design-rules.md` | +| **Apple画廊展示风格**（3D倾斜+悬浮卡片+缓慢pan+焦点切换，v9实战同款） | `references/apple-gallery-showcase.md` | ## 跨 Agent 环境适配说明 @@ -582,11 +747,12 @@ Skill 路径引用均采用**相对本 skill 根目录**的形式（`references/ ## 核心提醒 +- **事实验证先于假设**（核心原则 #0）：涉及具体产品/技术/事件（DJI Pocket 4、Gemini 3 Pro 等）必须先 `WebSearch` 验证存在性和状态，不凭训练语料断言。 - **Embody专家**：做幻灯片时是幻灯片设计师，做动画时是动画师。不是写Web UI。 - **Junior先show，再做**：先展示思路，再执行。 - **Variations不给答案**：3+个变体，让用户选。 - **Placeholder优于烂实现**：诚实留白，不编造。 - **反AI slop时时警醒**：每个渐变/emoji/圆角border accent之前先问——这真的必要吗？ -- **涉及具体品牌**：先走「品牌资产协议」（核心哲学 §1.a），不要凭记忆猜配色。 +- **涉及具体品牌**：走「核心资产协议」（§1.a）——Logo（必需）+ 产品图（实体产品必需）+ UI 截图（数字产品必需），色值只是辅助。**不要用 CSS 剪影代替真实产品图**。 - **做动画之前**：必读 `references/animation-pitfalls.md`——里面 14 条规则每条都来自真实踩过的坑，跳过会让你重做 1-3 轮。 - **手写 Stage / Sprite**（不用 `assets/animations.jsx`）：必须实现两件事——(a) tick 第一帧同步设 `window.__ready = true` (b) 检测 `window.__recording === true` 时强制 loop=false。否则录视频必出问题。