我逆向了Claude Design！免费开源！设计逻辑全公开 ✍ 花叔🕐 2026-04-21📦 13.5 KB 🟢 已读 𝕏 文章列表 作者分享了其开源项目「huashu-design」，这是一个基于Claude的Agent设计技能。文章探讨了Agent-first与GUI-first设计理念的差异，详细介绍了huashu-design在品牌资产协议、自动生成PPT和iOS原型方面的功能，以及它与Claude Design的功能对比和使用限制。 AgentClaude开源设计自动化UI/UX逆向工程工作流HermesAutoUIClaude Code # 我逆向了Claude Design！免费开源！设计逻辑全公开 **作者**: 花叔 **日期**: 2026-04-21T12:32:38.000Z **来源**: [https://x.com/AlchainHust/status/2046567787460431995](https://x.com/AlchainHust/status/2046567787460431995) ---  我昨晚在X上发了条我要开源「Huashu Design」的预告，现在已经20多万阅读了。  让我比较惊讶的是，我的这条X推文和视频内容明明都是中文的，但这条X底下充斥着各种不同国度用户的期待👇  这个表达也是很有趣  甚至还有好几个日本人和韩国人，似乎天下都苦Anthropic久矣  他们之所以感到这么兴奋，是因为他们看到了我用「Huashu Design」制作的宣传它自己的这条短片👇（建议打开声音享用）  所以，我猜你看完之后也会有类似的兴奋和期待，真的...这么厉害吗？ OK，我觉得我们可以先回头聊聊Claude Design。Anthropic发布当天，我大概我玩到了凌晨四点。 那种兴奋感很久没有过了。让AI直接在对话里生成完整网页、生成可点的iOS原型。就差一步，我就要把Figma从Dock里拖出来删掉了（哦，然后我发现我从来就没装过...  但，几天过去了。我发现自己再也没点开过Claude Design。 不是它不好。Claude Design是这个赛道里目前最成熟的产品：品牌资产协议做得很细、组件机制很完善、和Claude Code的打通也算顺。但我依然用不下去。 不是产品的问题，是我自己。我是一个宁愿让agent在终端里帮我干活，也不愿意打开任何图形界面的人。Claude Design再好，它依然是一个工具，需要我去操作它。 所以这几天我做了两件有点奇怪的事情。 第一件，我让我的agent拆解了Claude Design本身。包括社区流传出来的那份系统提示词，包括它的核心组件机制，包括它对品牌资产的处理协议。agent把这些逻辑蒸馏出来，做成了一份结构化的spec。 第二件，我把这份spec，结合我之前做过的所有设计类探索，写成了一个skill，直接装进了我自己的Claude Code里。在耗费了上亿Token不停地测试、迭代、优化之后。 终于！ 现在我每次需要设计任何东西，PPT、App原型、动画、变体探索，我只在终端里说一句话。agent会自己补全品牌资产、自己建立design spec、自己生成结果。我不需要打开任何界面。 今天把它发布出来，叫 huashu-design。  这篇文章讲三件事：我为什么做这个skill、它能做什么（带一堆案例）、以及它和Claude Design的差异在哪里。 ——— ## Agent-first vs GUI-first 先说一个我最近越来越坚定的判断。 Claude Design的本质，是把设计师塞进了Claude里面。它让你像和Canva、和Figma对话一样，用自然语言告诉设计师你想要什么，它给你生成出来，你再在它的画布上微调。这是一个更好的图形工具。 huashu-design的本质不一样。它不想做图形工具，它想让图形工具这一层消失。 你告诉agent你要什么，agent自己去读你的品牌资产、自己去建design spec、自己生成HTML结果、自己跑Playwright验证交付物没坏。整个过程你不打开任何界面。最后你看到的是一个能直接用的MP4、一张可以截图发朋友圈的PPT、一个能给产品经理演示的iOS原型。 这两条路的差别，不是「哪个功能更强」，是 谁来操作工具。 Claude Design是给Figma这代工具续命。huashu-design是让Figma这代工具自然消亡。 我不是在说Figma会被杀死。Photoshop也没有被杀死，但今天大部分内容创作者已经不打开PS了，他们用Canva、用Midjourney、用Remove.bg。PS没死，但PS的工作流被绕开了。Figma也会经历同样的事情。 我不是设计师，我是一个让agent帮我做东西的人。真正的设计师可能会更喜欢Claude Design，那里有熟悉的画布、图层、组件变体。但对独立开发者、内容创作者、在终端里做产品的人来说，一个装在agent里的skill，比一个装在浏览器里的产品更顺手。  —— ## 案例一 · 一次生成4个设计风格的演讲PPT 我前几天要去准备一场关于AI心理学的演讲。 按过去的习惯，这种事我会先打开Keynote，然后在里面挣扎大半天：到底用什么风格？学术一点还是活泼一点？黑白简约还是大胆配色？ 这次我在终端里只说了一句话。 「我要做AI心理学的演讲PPT，内容大纲在这个文件里。不知道用什么风格，你推荐4个差异化方向给我选。」 huashu-design启动了它的 设计方向顾问模式。从20种预置的设计哲学里（Pentagram的信息建筑、Field.io的运动诗学、Kenya Hara的东方极简、Sagmeister的实验先锋……），挑出4个互相差异最大的方向，然后并行启动4个agent，各自做了一套完整的演讲PPT。 40分钟后，4套17页的PPT摆在我面前。 北大学术版：克制的serif字体、大量留白、信息层级严格分明，像一篇学术海报。 博尔赫斯文学版：深色背景、金色点缀、引用排版带有书籍感，每一页都像是从一本小说里撕下来的一章。 投行严肃版：高对比黑白配色、图表驱动、右上角带页码和版权声明，一眼就知道是要给董事会看的。 禅意极简版：大块负空间、一页一个关键字、配色只用米白和一种墨色，像日本平面设计师做的海报。  我没打开任何设计软件。我不需要去试那20种字体、不需要去挑配色方案、不需要自己搭版式。agent帮我做了所有的预设工作，我只需要做一件事： 选哪一套。 最后我选了北大学术版。但另外3套也不会浪费。博尔赫斯版我可能留着做下一次读书分享，投行版可以改成商单的汇报PPT。一次生成，多次复用。 这个体验在Claude Design里也能做，只是你需要跟它说4次、生成4次、消耗4次token。在skill里走的是API消耗，没有订阅quota的天花板，4个agent并行在本地的Claude Code里跑，可以随便试。 ——— ## 案例二 · 可点击的iOS App原型 接下来是我这几天测的几个小原型。先说清楚：我自己不写代码，这些原型不是要上线的产品，是让skill拉练的验证demo，所有交互细节都是agent自己跑出来的。 一个是AI番茄钟。当然了，我想任何独立开发者都搞过番茄钟。我们就试试吧。 在终端里说：「我要做一个AI番茄钟iOS App的原型，核心是动态时长调整，给我4个核心屏幕，要真的可以点击切换。」 十几分钟后，一个带真iPhone bezel（不是那种Web mockup感）的原型打开了。4个屏幕：首页任务选择、专注中的倒计时、被AI中断后的重新评估、专注总结。每个屏幕的tab和按钮都可以点，状态自动在屏幕之间流转。 我想要的所有细节都在里面：图标用的是SF Symbols、字体是SF Pro、按钮的圆角是iOS 18的标准值、连底部的Home Indicator都画了。 这还不是最值得说的。最值得说的是，它在交付前自己跑了一遍Playwright点击测试，确保我点每一个按钮都不会导致白屏或崩溃。这是我在skill里加的一条硬规则：App原型交付前必须跑自动点击测试，否则一半的「可点击原型」最后都是不能点的。 我还用同样的方式做了Habit Tracker、Running追踪App、一个浮世绘主题的博物馆App。流程一模一样，交付质量也一样。  ——— ## 方法论 · 品牌资产协议是我从Anthropic偷来的 到这里我想大大方方承认一件事：huashu-design里最核心的一个理念，是从Claude Design流传出来的提示词里偷师的。 那份提示词里反复强调一个核心原则： 好的高保真设计不是从白纸开始，而是从已有的设计上下文长出来。优先读用户的codebase、读design system、读UI kit，颜色优先从品牌系统里拿而不是凭空发明。 原版prompt只给了这个哲学，没有给具体怎么做。但它给的已经够了——凭空画hi-fi一定是generic的，这是 区分65分作品和90分作品的分水岭。 我在这个哲学之上，把它落成了skill里的一套5步硬流程，专门处理「用户提了一个品牌名，但没给资料」的场景： Step 1 · 问。一句话问清楚：「这个品牌有brand guidelines吗？有的话直接给我，没有的话我去搜。」 Step 2 · 搜官方品牌页。典型路径是 <brand>.com/brand 或 brand.<brand>.com，没有就 <brand>.com/press。这些页面一般藏着最权威的logo和色值。 Step 3 · 下载资产，三条兜底路径。真实世界里SVG logo经常拿不到，2026年的官网大多是Next.js SSR inline SVG，或者Cloudflare反爬返回403。按成功率递减：独立SVG文件 → 官网HTML全文（inline SVG会藏在里面）→ 产品截图取色。前一条失败立刻走下一条，绝不停。 Step 4 · grep提取真实色值。绝对不能从记忆里猜品牌色。从下载的资产里用正则抓所有 #xxxxxx 的6位hex，按频率排序，过滤黑白灰。这里有个反直觉的点：产品截图里常有用户演示的其他品牌色（比如某个工具的截图里在演示喜茶红），那不是这个工具本身的色。同时出现两种强色时必须区分。 Step 5 · 固化为 brand-spec.md 。前四步抽完的色值，如果只留在内存里，下一页就忘。必须写一份spec文件到项目根目录，让所有CSS变量引用这份文件。 这5步每一步都有兜底，但 绝不可以静默跳过。agent是否走通这个协议，直接决定输出质量是65分还是90分。 我做了一次v1和v2的A/B测试，同一批任务6个agent各跑一遍。结果是：v2的稳定性方差比v1低5倍。不是均值变高了很多，是更加稳定。稳定性的稳定性，这才是skill真正的护城河。  ——— ## 我能做什么，做不到什么 我不想装，这个skill做不到Claude Design的所有能力，把差距列出来。 它能做：PPT（17+页完整deck，1920×1080可直接演示）、App原型（真iPhone bezel、可点击交互、自带Playwright验证）、动画Demo（时间轴驱动、60fps插帧、可导出MP4/GIF、带BGM和自动fade）、信息图和数据可视化、设计变体探索（并排对比多方向、或者用Tweaks实时调参）、品牌延伸物料（海报、卡片、社交媒体配图）。 它做不到的： 图层级可编辑的PPTX。Claude Design能导出到Figma，我做不到。我的产物是HTML，你可以截图、可以录屏、可以导出图片，但没法拖进Keynote改一个文字位置。这是我的skill的真实缺点。 复杂的Framer Motion级别动画。我用的是React + Babel内联脚本，能做的是「时间轴驱动的slide动画」「60秒以内的叙事动画」。再复杂的（3D、物理模拟、粒子系统），超出skill边界。 品牌资产完全空白的情况。如果你的需求是「帮我设计一个完全原创的品牌」，而我又拿不到任何参考，fallback的质量会掉到60-65分。不是skill的问题，是凭空画hi-fi本来就是last resort。 我做的是一个80分的skill，不是一个100分的产品。但对不愿意打开图形界面的人， 80分的skill比100分的产品好用。 ——— ## 结尾 Figma这代工具不会被杀死，只会在某一天被我们发现： 好像已经很久没打开过了。 就像Dock里那些再也没点开过的图标。 感谢Anthropic把Claude Design的提示词写得那么清晰，让社区流传出来的那份spec足够完整，让我有机会把它的精髓吸收进自己的工作流。 这种基于其他产品灵感的二次创作，在agent时代会越来越多，这也是开源文化在AI时代的新形态。 GitHub：https://github.com/alchaincyf/huashu-design > npx skills add alchaincyf/huashu-design  装完在Claude Code里直接说「做一份PPT」「做个App原型」「做个动画」就行。 如果你用了，欢迎在评论区告诉我哪里不够用。 ## 相关链接 - [@AlchainHust](https://x.com/AlchainHust) - [188](https://x.com/AlchainHust/status/2046567787460431995/analytics) - [用Remove.bg](http://xn--remove-2w4o.bg/) - [#xxxxxx](https://x.com/search?q=%23xxxxxx&src=hashtag_click) - [https://github.com/alchaincyf/huashu-design](https://github.com/alchaincyf/huashu-design) - [Upgrade to Premium](https://x.com/i/premium_sign_up) - [8:32 PM · Apr 21, 2026](https://x.com/AlchainHust/status/2046567787460431995) - [188 Views](https://x.com/AlchainHust/status/2046567787460431995/analytics) --- *导出时间: 2026/4/21 20:39:01*
1 17个Hermes Agent提示词：在你睡觉时运行的高效自动化工作流 本文介绍了如何通过17个具体的Prompt配置，将Nous Research的开源Agent框架Hermes转化为强大的“夜间劳动力”。文章强调了Hermes作为持久化、可调度Agent的核心理念，即通过后台守护进程接管重复性工作（如通知摘要、代码审查、竞品监控、Inbox分流等），从而在用户离线时自动完成任务。作者分享了实战中的具体Prompt案例及其解决的实际痛点，并提供了关于模型选择、服务器配置及持久化运行的关键建议。 技术 › Hermes ✍ Mnimiy🕐 2026-06-08 AgentHermes自动化工作流开源PromptClaudeDevOps效率工具Nox Research
终 终于！！AI Agent 也能开口说话了：这个开源工具把语音克隆、听写、MCP 全打通 文章介绍了一款名为 Voicebox 的开源 AI 语音工作室工具。它不仅支持语音克隆、生成和全局听写，更关键的是通过内置 MCP Server，让 Claude Code、Cursor 等 AI Agent 能够调用本地语音层，实现“能听、能说”的交互闭环，弥补了 Agent 只能文字交互的短板。 技术 › TTS ✍ AFei Liang🕐 2026-07-08 VoiceboxMCP语音克隆Agent开源听写Claude本地部署AI语音工作流
C Claude 官方关于 Loop Engineer 的入门解读 文章介绍了 Claude 官方提出的 Loop Engineer 概念，该概念将现有的 Agent 工作流程进行了系统化梳理。文中详细讲解了四种 Loop 类型：回合制循环、基于目标的循环（GOAL 模式）、基于时间的循环以及主动循环。此外，作者还分享了关于代码库质量维护和 Token 消耗管理的优化建议，并提及了 Codex、Skills 和 Hooks 等相关工具。 技术 › LLM ✍ 歸藏🕐 2026-07-08 Loop EngineerClaudeAgentClaude CodeCodexGOAL 模式工作流自动化Token 管理
使 使用 Fable 5 构建自我改进 Agent 系统的 14 步指南 本文介绍如何利用 Claude Fable 5 模型构建具有复合能力的自我改进 Agent 系统。文章首先澄清了 Fable 5 作为 Mythos 级模型的定位，强调了其支持“长周期自主会话”和“自验证”的核心能力。作者指出，真正的自我改进并非模型权重的更新，而是通过 loops、dynamic workflows 和 routines 这三种原语，构建起包含记忆层和评估反馈层的环境架构。文章还详细阐述了如何根据任务复杂度在 Fable 5、Opus 和 Sonnet 之间进行成本最优的路由配置。 技术 › LLM ✍ Codez🕐 2026-06-12 LLMAgentClaudeFable 5自我改进系统架构工作流Claude Code工程化
C Claude 动态工作流终极指南 本文深入介绍了 Anthropic 在 Claude Code 中推出的“动态工作流”功能。该功能通过编写 JavaScript 脚本，编排数十到数百个子智能体并行处理任务，实现了自动化的步骤拆解、执行与结果验证。文章详细解析了其工作原理、与 Skills 的区别、三种使用方式（自定义关键词、内置 /deep-research 及 UltraCode 模式），并展示了内容生产、市场调研等实际应用场景。 技术 › Agent ✍ AI Edge🕐 2026-06-04 ClaudeAgent工作流Claude Code自动化Subagents效率工具Anthropic教程
构 构建每日晨间简报的 Claude 研究助手 本文介绍了一个完整的构建方案，利用 Claude Desktop、N8N、Filesystem MCP 和 Brave Search 创建一个自动化研究助手。该助手每天早晨自动读取互联网信息，过滤噪音，并将结构化的 5 分钟简报存入 Obsidian，帮助用户节省时间并获取关键信息。 技术 › Agent ✍ CyrilXBT🕐 2026-05-26 ClaudeMCPN8NObsidian自动化工作流Brave SearchAgent效率开源
S Superpowers：Claude Code 效率暴涨 10 倍的秘密 文章介绍了 Claude Code 的开源技能库 Superpowers，它如同 AI 的导航系统，通过头脑风暴、计划拆解、子代理驱动开发和测试驱动四大核心工作流，自动引导用户从构思到上线。该系统有效降低了认知负荷，并通过严格的审查机制确保代码质量，是提升企业 AI 交付效率的利器。 技术 › Skill ✍ Miles.🕐 2026-05-22 Claude CodeSuperpowers工作流Agent测试驱动自动化开源效率工具开发实践LLM
还 还在用 AI 学术妲己学论文？这套 Agent 科研团队帮你打败99%研究生 本文指出当前 AI 辅助学术论文写作中普遍存在的“幻觉”和造假问题，并介绍了一个名为 academic-research-skills (ARS) 的开源 Agent 系统。该系统通过多 Agent 协作、引用核验、反谄媚协议及完整性闸门机制，实现了从调研、写作到审稿的防出错流水线，旨在解决 AI 写作不可靠的痛点。 技术 › Agent ✍ Gyro🕐 2026-05-18 AI学术研究Agent论文写作工具Claude开源科研工作流效率
H How to Become a Hermes Agent Operator 本文介绍了由 Nous Research 开源的高杠杆 AI 框架 Hermes Agent。文章详细阐述了其架构（大脑、个性、技能集）、具备记忆与自学习能力的闭环机制，以及如何从单机部署扩展为 VPS 上的自动化营销团队。作者分享了将其作为营销基础设施的实际经验与配置指南。 技术 › Agent ✍ Shann³🕐 2026-05-16 HermesAgent营销自动化Nous ResearchDevOps工作流VPS开源LLM实战指南
不 不用写代码，三招把日常经验沉淀为 AI Skill 本文指出 Skill 的本质是将个人工作经验固化为 Agent 的操作手册。文章分析了为什么直接套用他人 Skill 往往失效，并提出了三种将个人经验转化为 Skill 的实用方法：拆解并改造他人 Skill、复盘成功的 AI 协作过程、利用 skill-creator 搭建骨架。作者强调通过持续迭代，Skill 能让 AI 越用越像自己，从而实现工作流的自动化和个人知识的资产化。 技术 › Skill ✍ 金尘马🕐 2026-05-16 SkillAgent工作流经验沉淀AI辅助OpenClawHermesClaude CodeCodex效率提升
C Claude 多智能体系统：从零到单人运行 4 个智能体的完整指南 本文详细介绍了如何利用 Claude 构建一个多智能体系统。文章主张专家团队的表现优于单打独斗的通才，通过设立研究、生产、质量和分发四个专门的智能体，配合一个主编排器，可以实现高效的并行工作流。文中提供了从环境搭建、文件夹结构配置到首个研究智能体的系统提示词（Prompt）编写的完整实操指南。 技术 › Agent ✍ CyrilXBT🕐 2026-05-12 ClaudeAgentMulti-AgentLLM自动化工作流Claude Code
如 如何使用 Claude Skills 自动化任何工作流（完整指南） 本文是一份关于 Claude Skills 的完整指南。文章指出 Claude Skills 不仅仅是保存的提示词，而是包含具体指令、标准和输出格式的“培训文件”。作者将其比作训练有素的员工，而非临时工。文章详细介绍了从安装第一个 Skill 到构建自定义 Skill 的四个阶段：安装、构建、测试优化以及建立技能库，并提供了具体的操作步骤和行业应用场景，旨在帮助用户建立可重复的系统以自动化任何行业的工作流。 技术 › Skill ✍ Khairallah AL-Awady🕐 2026-05-12 Claude自动化工作流技能AI教程提示词工程效率AgentClaude Code