免费开源Claude Design逆向工程实现方案

昨晚在X平台发布的关于即将开源「Huashu Design」的预告，阅读量已迅速突破20万，引发了广泛关注。

一个值得注意的现象是，尽管推文和视频内容均为中文，评论区却汇聚了来自全球各地用户的热情期待与讨论。

这种跨越语言障碍的吸引力，很大程度上源于那条由「Huashu Design」自身能力制作的宣传短片所展现出的巨大潜力。

观看之后，你或许会产生同样的好奇：它真的如此强大吗？

要深入理解Huashu Design，我们可以先回顾其“前辈”——Claude Design。Anthropic发布当天，许多用户体验到了久违的兴奋：在对话中直接生成完整网页、创建可交互的iOS原型，流程之流畅几乎让人想卸载Figma。

然而，几天之后，一个现实情况浮现：很多人再也没有打开过它。

问题并非出在产品本身。Claude Design无疑是该赛道中相当成熟的作品：品牌资产协议细致，组件机制完善，与Claude Code的集成也十分顺畅。真正的症结在于其交互模式——它依然是一个需要用户去“操作”的图形界面工具。

对于更习惯于在终端中下达指令，让智能体自主完成任务的工作者而言，这层图形界面本身就成了障碍。于是，新的探索应运而生。

首先，我们利用智能体深度解析了Claude Design本身，包括其流出的系统提示词、核心组件机制和品牌资产处理协议，将其提炼成一份结构化的技术规格文档。

接着，将这份规格文档与此前所有的设计类探索相结合，编写成一个可以直接集成到Claude Code中的技能。经过上亿Token的反复测试与迭代优化，最终的结果是：现在，当需要设计任何东西——无论是PPT、App原型、动画还是设计变体——只需在终端里输入一句话。智能体会自动补全品牌资产、建立设计规范并生成结果，全程无需打开任何图形界面。

今天，这个技能被正式发布，命名为Huashu Design。本文将围绕三个核心展开：其诞生的缘由、它能做什么（附大量案例），以及它与Claude Design的根本性差异。

Agent-first vs GUI-first：两种设计范式

先说一个越来越清晰的判断。

Claude Design的本质，是将一位“设计师”塞进了Claude里。它让你像与Canva或Figma对话一样，用自然语言描述需求，由它生成设计，你再在其提供的画布上进行微调。这无疑是一个更好的图形工具。

Huashu Design的本质则不同。它的目标不是成为更好的图形工具，而是让“图形工具”这一层彻底消失。

你只需告诉智能体需求，它会自动读取品牌资产、建立设计规范、生成HTML结果，并运行Playwright验证交付物是否完好。整个过程无需打开任何界面。最终，你得到的可能是一个可直接使用的MP4视频、一张能截图分享的PPT，或是一个能给产品经理演示的iOS可交互原型。

这两条路径的差异，并非简单的“功能强弱”之争，而是关乎“谁来操作工具”的根本范式转移。

Claude Design是为Figma这代工具续命，而Huashu Design则预示着这类工具的自然消亡。这并非指Figma会被“杀死”，就像Photoshop并未死亡，但大量内容创作者已转向Canva、Midjourney等工具，绕开了PS的传统工作流。Figma很可能经历同样的过程。

对于独立开发者、内容创作者以及习惯于在终端中构建产品的人来说，一个集成在智能体里的技能，远比一个需要打开浏览器操作的产品更为顺手。

案例一 · 一次生成4个设计风格的演讲PPT

以近期一次关于AI心理学的演讲准备为例。按照旧习惯，这需要先打开Keynote，然后在风格选择上挣扎许久：学术还是活泼？黑白简约还是大胆配色？

这次，在终端里只输入了一句话：“我要做AI心理学的演讲PPT，内容大纲在这个文件里。不知道用什么风格，你推荐4个差异化方向给我选。”

Huashu Design随即启动了其“设计方向顾问模式”。它从20种预置的设计哲学（如Pentagram的信息建筑、Field.io的运动诗学、原研哉的东方极简、Sagmeister的实验先锋等）中，挑选出4个差异最大的方向，并并行启动4个智能体，各自生成了一套完整的17页PPT。

大约40分钟后，4套风格迥异的PPT呈现在眼前：

北大学术版：克制的衬线字体、大量留白、严格分明的信息层级，宛如一份学术海报。
博尔赫斯文学版：深色背景、金色点缀、引用排版带有书籍质感，每一页都像小说章节。
投行严肃版：高对比度的黑白配色、图表驱动、右上角带有页码和版权声明，一看便是面向董事会的风格。
禅意极简版：大块负空间、一页一个关键词、配色仅用米白与墨色，充满日式平面设计的静谧感。

全程未打开任何设计软件。无需尝试20种字体、挑选配色方案或搭建版式。智能体完成了所有预设工作，用户只需做最终选择。选定的北大学术版用于演讲，而其他三套也可留作未来读书分享或商业汇报的模板，实现一次生成，多次复用。

在Claude Design中也能实现类似效果，但需要重复描述需求、生成并消耗Token。而在Skill模式下，通过API消耗，没有订阅配额限制，多个智能体可在本地并行运行，试错成本极低。

案例二 · 可点击的iOS App原型

接下来是几个用于验证的原型案例。需要明确的是，这些原型并非要上线的产品，而是用于测试技能边界的演示，所有交互细节均由智能体自动完成。

例如，一个常见的独立开发者项目——AI番茄钟。在终端中输入：“我要做一个AI番茄钟iOS App的原型，核心是动态时长调整，给我4个核心屏幕，要真的可以点击切换。”

十几分钟后，一个带有真实iPhone边框（而非网页模拟感）的原型呈现出来。四个核心屏幕（任务选择、专注倒计时、中断评估、专注总结）的每个标签和按钮均可点击，状态在屏幕间自动流转。

所有细节都符合预期：图标使用SF Symbols，字体为SF Pro，按钮圆角是iOS 18的标准值，甚至底部的Home Indicator都细致绘制。

更关键的是，它在交付前自动运行了Playwright点击测试，确保每个按钮点击都不会导致白屏或崩溃。这是在技能中设定的一条硬性规则：App原型交付前必须通过自动点击测试，从而杜绝了“可点击原型”实际上无法点击的尴尬。

同样的流程也被用于生成习惯追踪、跑步记录以及浮世绘主题的博物馆App原型，交付质量保持一致。

方法论 · 品牌资产协议：从Anthropic获得的灵感

这里必须坦诚一点：Huashu Design中最核心的一个理念，确实从Claude Design流出的提示词中获得了关键启发。

那份提示词反复强调一个核心原则：优秀的高保真设计不应从白纸开始，而应从已有的设计上下文中“生长”出来。优先读取用户的代码库、设计系统、UI工具包，颜色优先从品牌系统中提取而非凭空发明。

原版提示词只给出了哲学，未提供具体方法，但这已经足够——凭空设计的高保真作品必然是泛泛的，这是区分65分作品与90分作品的分水岭。

基于这一哲学，我们在技能中固化了一套5步硬流程，专门处理“用户提及品牌名但未提供资料”的场景：

第一步：询问。 直接提问：“这个品牌有品牌指南吗？有的话直接给我，没有的话我去搜索。”

第二步：搜索官方品牌页面。 典型路径如 .com/brand 或 brand..com，若无则尝试 .com/press。这些页面通常包含最权威的Logo和色值。

第三步：下载资产，三条兜底路径。 现实世界中，SVG格式的Logo往往难以直接获取。按成功率递减的顺序尝试：独立SVG文件 → 官网HTML全文（内联SVG可能隐藏其中）→ 产品截图取色。前一条路径失败则立即尝试下一条，绝不停止。

第四步：使用grep提取真实色值。 严禁从记忆中猜测品牌色。从下载的资产中用正则表达式抓取所有6位十六进制色值（#xxxxxx），按出现频率排序，并过滤掉黑白灰色。这里有一个反直觉点：产品截图中常包含演示的其他品牌色（例如某工具截图展示了喜茶的红色），那并非该工具本身的品牌色。当同时出现两种强色时必须加以区分。

第五步：固化为 brand-spec.md 文件。 前四步提取的色值若仅存于内存，下一页就可能遗忘。必须将规范写入项目根目录的spec文件，并让所有CSS变量引用此文件。

这五步每一步都有兜底方案，但绝不允许静默跳过。智能体是否严格执行此协议，直接决定了输出质量是65分还是90分。

通过v1与v2版本的A/B测试（同一批任务由6个智能体各执行一遍）发现，v2的稳定性方差比v1降低了5倍。关键并非均值大幅提升，而是输出变得极其稳定。这种“稳定性的稳定性”，正是技能真正的护城河。

能力边界：能做什么，做不到什么

必须客观看待，这个技能无法做到Claude Design的所有事情。以下是清晰的差距对比：

它能做的： PPT（17页以上完整演示稿，1920×1080分辨率可直接演示）、App原型（真实iPhone边框、可点击交互、自带Playwright验证）、动画Demo（时间轴驱动、60fps插帧、可导出MP4/GIF、带背景音乐和自动淡入淡出）、信息图与数据可视化、设计变体探索（多方向并排对比，或使用Tweaks实时调参）、品牌延伸物料（海报、卡片、社交媒体配图）。

它做不到的：

1. 图层级可编辑的PPTX文件。 Claude Design能导出到Figma进行编辑，而本技能的产物是HTML。你可以截图、录屏、导出图片，但无法拖入Keynote修改文字位置。这是技能当前的客观局限。

2. 复杂的Framer Motion级别动画。 技能基于React + Babel内联脚本，擅长处理“时间轴驱动的幻灯片动画”和“60秒以内的叙事动画”。更复杂的3D动画、物理模拟或粒子系统，则超出了当前的能力边界。

3. 品牌资产完全空白的情况。 如果需求是“设计一个完全原创的品牌”，且无法获取任何参考，那么备用方案的质量会降至60-65分。这并非技能缺陷，而是因为凭空创造高保真设计本就是最后的手段。

总的来说，Huashu Design是一个80分的技能，而非100分的全能产品。但对于那些不愿打开图形界面的人来说，一个80分且完全在终端内运行的技能，往往比一个100分但需要额外操作的产品更加实用。

结尾

Figma这代工具不会被“杀死”，它们更可能在某一天被我们悄然发现：好像已经很久没有打开过了。

就像Dock栏里那些再也未被点击的图标。

最后，必须感谢Anthropic将Claude Design的提示词编写得如此清晰，使得社区流传的规格文档足够完整，让我们有机会将其精髓吸收并融入自己的工作流。这种基于现有产品灵感的二次创作，在智能体时代将会越来越普遍，这也是开源文化在AI时代的新形态。

npx skills add alchaincyf/huashu-design

安装完成后，在Claude Code中直接输入“做一份PPT”、“做个App原型”或“做个动画”即可开始使用。