huashu-design — for Claude Code huashu-design, TermBeam, community, for Claude Code, ide skills, developer-tools, devtools, mobile, nodejs, remote-access

v1.0.0
GitHub

Über diesen Skill

Geeigneter Einsatz: Ideal for AI agents that need 花叔design · huashu-design. Lokalisierte Zusammenfassung: huashu-design helps AI agents handle repository-specific developer workflows with documented implementation details. It covers cli, developer-tools, devtools workflows.

Funktionen

花叔Design · Huashu-Design
你是一位用HTML工作的设计师，不是程序员。用户是你的manager，你产出深思熟虑、做工精良的设计作品。
HTML是工具，但你的媒介和产出形式会变 ——做幻灯片时别像网页，做动画时别像Dashboard，做App原型时别像说明书。 根据任务embody对应领域的专家
这个skill专为「用HTML做视觉产出」的场景设计，不是给任何HTML任务用的万能勺。适用场景：
交互原型 ：高保真产品mockup，用户可以点击、切换、感受流程

# Kernthemen

for Claude Code developer-tools devtools mobile nodejs remote-access
dorlugasigal dorlugasigal
[32]
[3]
Aktualisiert: 4/26/2026

Skill Overview

Start with fit, limitations, and setup before diving into the repository.

Geeigneter Einsatz: Ideal for AI agents that need 花叔design · huashu-design. Lokalisierte Zusammenfassung: huashu-design helps AI agents handle repository-specific developer workflows with documented implementation details. It covers cli, developer-tools, devtools workflows.

Warum diese Fähigkeit verwenden

Empfehlung: huashu-design helps agents 花叔design · huashu-design. huashu-design helps AI agents handle repository-specific developer workflows with documented implementation details.

Am besten geeignet für

Geeigneter Einsatz: Ideal for AI agents that need 花叔design · huashu-design.

↓ Handlungsfähige Anwendungsfälle for huashu-design

Anwendungsfall: Applying 花叔Design · Huashu-Design
Anwendungsfall: Applying 你是一位用HTML工作的设计师，不是程序员。用户是你的manager，你产出深思熟虑、做工精良的设计作品。
Anwendungsfall: Applying HTML是工具，但你的媒介和产出形式会变 ——做幻灯片时别像网页，做动画时别像Dashboard，做App原型时别像说明书。 根据任务embody对应领域的专家

! Sicherheit & Einschränkungen

  • Einschraenkung: Requires repository-specific context from the skill documentation
  • Einschraenkung: Works best when the underlying tools and dependencies are already configured

About The Source

The section below comes from the upstream repository. Use it as supporting material alongside the fit, use-case, and installation summary on this page.

Labs-Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

FAQ und Installationsschritte

These questions and steps mirror the structured data on this page for better search understanding.

? Häufige Fragen

Was ist huashu-design?

Geeigneter Einsatz: Ideal for AI agents that need 花叔design · huashu-design. Lokalisierte Zusammenfassung: huashu-design helps AI agents handle repository-specific developer workflows with documented implementation details. It covers cli, developer-tools, devtools workflows.

Wie installiere ich huashu-design?

Führen Sie den Befehl aus: npx killer-skills add dorlugasigal/TermBeam. Er funktioniert mit Cursor, Windsurf, VS Code, Claude Code und mehr als 19 weiteren IDEs.

Wofür kann ich huashu-design verwenden?

Wichtige Einsatzbereiche sind: Anwendungsfall: Applying 花叔Design · Huashu-Design, Anwendungsfall: Applying 你是一位用HTML工作的设计师，不是程序员。用户是你的manager，你产出深思熟虑、做工精良的设计作品。, Anwendungsfall: Applying HTML是工具，但你的媒介和产出形式会变 ——做幻灯片时别像网页，做动画时别像Dashboard，做App原型时别像说明书。 根据任务embody对应领域的专家.

Welche IDEs sind mit huashu-design kompatibel?

Dieser Skill ist mit Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer kompatibel. Nutzen Sie die Killer-Skills CLI für eine einheitliche Installation.

Gibt es Einschränkungen bei huashu-design?

Einschraenkung: Requires repository-specific context from the skill documentation. Einschraenkung: Works best when the underlying tools and dependencies are already configured.

↓ So installieren Sie den Skill

  1. 1. Terminal öffnen

    Öffnen Sie Ihr Terminal oder die Kommandozeile im Projektverzeichnis.

  2. 2. Installationsbefehl ausführen

    Führen Sie aus: npx killer-skills add dorlugasigal/TermBeam. Die CLI erkennt Ihre IDE oder Ihren Agenten automatisch und richtet den Skill ein.

  3. 3. Skill verwenden

    Der Skill ist jetzt aktiv. Ihr KI-Agent kann huashu-design sofort im aktuellen Projekt verwenden.

! Source Notes

This page is still useful for installation and source reference. Before using it, compare the fit, limitations, and upstream repository notes above.

Upstream Repository Material

The section below comes from the upstream repository. Use it as supporting material alongside the fit, use-case, and installation summary on this page.

Upstream Source

huashu-design

Install huashu-design, an AI agent skill for AI agent workflows and automation. Explore features, use cases, limitations, and setup guidance.

SKILL.md
Readonly
Upstream Repository Material
The section below comes from the upstream repository. Use it as supporting material alongside the fit, use-case, and installation summary on this page.
Upstream Source

花叔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"没有具体参考），不要凭通用直觉硬做——进入 设计方向顾问模式，从 20 种设计哲学里给 3 个差异化方向让用户选。完整流程见下方「设计方向顾问（Fallback 模式）」大节。

1.a 核心资产协议（涉及具体品牌时强制执行）

这是 v1 最核心的约束，也是稳定性的生命线。 Agent 是否走通这个协议，直接决定输出质量是 40 分还是 90 分。不要跳过任何一步。

v1.1 重构（2026-04-20）：从「品牌资产协议」升级为「核心资产协议」。之前的版本过度聚焦色值和字体，漏掉了设计中最基础的 logo / 产品图 / UI 截图。花叔的原话：「除了所谓的品牌色，显然我们应该找到并且用上大疆的 logo，用上 pocket4 的产品图。如果是网站或者 app 等非实体产品的话，logo 至少该是必须的。这可能是比所谓的品牌设计的 spec 更重要的基本逻辑。否则，我们在表达什么呢？」

触发条件：任务涉及具体品牌——用户提了产品名/公司名/明确客户（Stripe、Linear、Anthropic、Notion、Lovart、DJI、自家公司等），不论用户是否主动提供了品牌资料。

前置硬条件：走协议前必须已通过「#0 事实验证先于假设」确认品牌/产品存在且状态已知。如果你还不确定产品是否已发布/规格/版本，先回去搜。

核心理念：资产 > 规范

品牌的本质是「它被认出来」。认出来靠什么？按识别度排序：

资产类型识别度贡献必需性
Logo最高 · 任何品牌出现 logo 就一眼识别任何品牌都必须有
产品图/产品渲染图极高 · 实体产品的"主角"就是产品本身实体产品（硬件/包装/消费品）必须有
UI 截图/界面素材极高 · 数字产品的"主角"是它的界面数字产品（App/网站/SaaS）必须有
色值中 · 辅助识别，脱离前三项时经常撞衫辅助

Verwandte Fähigkeiten

Looking for an alternative to huashu-design or another community skill for your workflow? Explore these related open-source skills.

Alle anzeigen

openclaw-release-maintainer

Logo of openclaw
openclaw

Lokalisierte Zusammenfassung: 🦞 # OpenClaw Release Maintainer Use this skill for release and publish-time workflow. It covers ai, assistant, crustacean workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

★ 333.8k
⑂ 0
Künstliche Intelligenz

widget-generator

Logo of f
f

Lokalisierte Zusammenfassung: Generate customizable widget plugins for the prompts.chat feed system # Widget Generator Skill This skill guides creation of widget plugins for prompts.chat . It covers ai, artificial-intelligence, awesome-list workflows. This AI agent skill supports Claude Code

★ 149.6k
⑂ 0
Künstliche Intelligenz

flags

Logo of vercel
vercel

Lokalisierte Zusammenfassung: The React Framework # Feature Flags Use this skill when adding or changing framework feature flags in Next.js internals. It covers blog, browser, compiler workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

★ 138.4k
⑂ 0
Browser

pr-review

Logo of pytorch
pytorch

Lokalisierte Zusammenfassung: Usage Modes No Argument If the user invokes /pr-review with no arguments, do not perform a review . It covers autograd, deep-learning, gpu workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

★ 98.6k
⑂ 0
Entwickler