多Agent通用的高端原型设计skill

从交互原型到MP4动画，用Agent-native工作流跳过Figma，直接拿走HTML、PPTX和印刷级交付物​

​

​

​

​

50%

​

​

​

​

50%

​

​

核心能力：这不是生成"还行"的图，是生产级别的交付​

① 品牌资产协议​

Huashu Design 内置了品牌资产协议 5 步硬流程，只要涉及具体品牌（无论是 Stripe、Linear 还是你自己的公司），Agent 会强制执行：​

​

👍

问——先问你要 brand guidelines；​

搜——爬取 .com/brand 或 press 页面；​

下载——抓取 SVG 或官网 HTML 作为色值样本；​

grep 提取——从代码里抓所有 #xxxxxx，按频率排序，过滤掉黑白灰；​

固化 spec——生成 brand-spec.md 和 CSS 变量，后续所有设计引用 var(--brand-primary)。​

​

重点：协议规定「绝不从记忆猜品牌色」。实测显示，这套流程让品牌一致性错误率下降了 80%，这也是它能做出「看起来像大厂设计团队」质感的关键护城河。​

​

​

​

​

50%

​

​

​

​

50%

​

​

② Motion Design引擎​

终端里直接渲染带BGM的MP4​

传统的 AI 视频生成是黑箱：你输入提示词，等几分钟，拿到一段可能不符合品牌调性的 MP4。Huashu Design 的动画引擎基于 Stage + Sprite 时间片段模型，用四个 API 覆盖所有动效需求：​

•

useTime 控制时间轴进度；​

•

useSprite 管理图层片段；​

•

interpolate 处理补间；​

•

Easing 定义缓动曲线。​

你可以在对话里精确控制：「第 3 秒到第 5 秒，logo 从 80% 缩放到 100%，用 cubic-bezier(0.16, 1, 0.3, 1) 的缓动，同时背景色从 #fff 渐变到品牌色」。渲染完成后，一条命令导出 25fps 或 60fps 插帧的 MP4，自动合成 BGM 和音效。README 里展示的所有动画，都是这么生成的——不是 After Effects，不是 Figma Smart Animate，就是 HTML + 代码。​

③ 设计方向顾问​

模糊需求时的5×20决策矩阵​

当你只说「做个好看的企业介绍页」时，普通 AI 会陷入「AI slop」——紫渐变、圆角卡片、emoji 图标、Inter 字体，那种一眼看就是 AI 生成的视觉最大公约数。​

Huashu Design 的应对机制是 Fallback 模式：从 5 大设计流派 × 20 种设计哲学 中，强制推荐 3 个必须来自不同流派的差异化方向。比如：​

•

瑞士国际主义（栅格系统、客观排版）；​

•

brutalism（粗野主义、 raw 的 HTML 质感）；​

•

新拟态（柔和的阴影、触感界面）。​

每个方向附带代表作、气质关键词和代表设计师，Agent 会并行生成 3 个视觉 Demo 让你选。选定后才进入具体执行——这避免了「闷头做大招最后推翻重来」的沉没成本。​

工作流解剖：Junior Designer如何在终端里协作​

Huashu Design 的默认工作模式叫 Junior Designer 工作流，它模拟的是资深设计师带实习生的协作方式：​

•

开工前一次性抛出假设清单（assumptions），等你批量确认；​

•

HTML 里先写占位符和 reasoning 注释，哪怕只是灰色方块也先发给你看方向；​

•

填充内容 → 生成变体 → Tweaks 调参这三步分别 checkpoint，确保理解没跑偏；​

•

交付前用 Playwright自动点击测试交互原型，确保链接和状态切换没问题。​

这种「早 show 早改」的机制，让需求理解错误的修正成本降低了两个数量级。​

​

"真正的设计自动化不是让AI画一张好看的图，而是让需求到交付之间不再需要'打开设计软件'这个环节。"​

​

五维评审：从"看起来不错"到"专业级把关"​

交付前，skill 会启动 5 维度专家评审：​

哲学一致性（是否符合选定流派）；​

视觉层级（信息优先级是否清晰）；​

细节执行（间距、字体、色值精度）；​

功能性（交互是否可用、逻辑是否通顺）；​

创新性（是否有记忆点）。​

输出一张雷达图，以及可操作的 Keep / Fix / Quick Wins 清单。这不是客套话，比如它可能会指出：「Fix：按钮的 padding 在移动端应该是 16px 而不是 12px；Quick Win：把主标题改成 sentence case 会更符合品牌气质」。​

诚实地说，这些场景它搞不定​

Huashu Design 不是万能药，README 里明确列出了边界：​

•

不能导出可图层编辑的 Figma 文件。产出物是 HTML 或 MP4，你可以截图、录屏，但不能拖进 Keynote 改文字位置；​

•

做不了 Framer Motion 级别的复杂动画。3D 物理模拟、粒子系统超出 skill 边界；​

•

完全空白的品牌从零设计质量会掉到 60–65 分。没有品牌资产参考时，它只能依赖内置的 20 种设计语汇兜底，做凭空 hi-fi 本来就是设计领域的 last resort。​

这是一个 80 分的 skill，不是 100 分的产品。但对那些宁愿在终端里打字也不愿意打开图形界面的人来说，80 分的自动化比 100 分的手动工具更好用。​

适合谁，不适合谁​

适合：​

•

独立开发者/全栈工程师：需要快速生成产品截图、App Store 预览图、发布动画，但不想学 After Effects；​

•

产品经理/创业者：验证想法时需要 clickable prototype，10 分钟生成能发给投资人点击的 HTML；​

•

内容创作者：批量生成信息图、数据可视化、演讲幻灯片（且需要可编辑的 PPTX 源文件）。​

不适合：​

•

需要从 0 建立品牌 VI 的企业：它没有策略咨询能力，只是执行工具；​

•

追求电影级 3D 动效的团队：以 README 为准，复杂物理模拟不在支持范围内；​

•

习惯 GUI 拖拽的设计老手：如果你享受在 Figma 里手动调贝塞尔曲线，这种对话式工作流会让你觉得失控。​

​

小贴士：第一次使用时，哪怕只是做一个简单的按钮，也建议走一遍品牌资产协议——把任意官网的 SVG 丢进去，让 skill grep 出真实色值，你会看到 AI slop 瞬间变成品牌官网同质的质感。​

​

​