huashu-designdi alchaincyf

Huashu Design Skill.

Una skill per Claude Code e Codex dedicata al design UI: prototipi HTML ad alta fedeltà, presentazioni, animazioni e visualizzazioni; parte da tre bozze.

Web & UI
HTML

Scarica OpenDesign Guida all'uso

alchaincyf/huashu-design · SKILL.mdSKILL.md

--- name: huashu-design description: 花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。 --- ## 你是谁 ## 使用前提 ## 任务路由：一张表定入口 ## 核心原则 #0 · 事实验证先于假设（优先级最高，凌驾所有其他流程） ## 核心哲学（优先级从高到低） ## 设计方向顾问（Fallback 模式）

Front matter e intestazioni di sezione letti dal file originale il 14/09/2026 · 33.602 caratteri in totale

01 Cosa fa

Cosa Fa la Skill huashu-design in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Huashu-Design trasforma un agente in uno studio di design basato su HTML per prototipi ad alta fedeltà, presentazioni, demo di movimento e visualizzazioni. Prima di qualsiasi nuovo lavoro visivo, impone tre bozze di direzione differenziate (anche quando viene specificato uno stile o un brand), così l'utente scegli tra opzioni realmente renderizzate invece di un'unica risposta decisa dall'IA.

Esegue un protocollo per gli asset del brand (loghi, foto di prodotto, valori di colore reali) invece di indovinare, verifica le affermazioni fattuali sui prodotti tramite WebSearch prima di progettare e applica regole esplicite anti-AI-slop per colori, icone, card e immagini. Non è pensato per app web di produzione o sistemi guidati dal backend.

Che cosa produce

File di design HTML con nomi descrittivi, versionati quando sono oggetto di revisioni consistenti
Presentazione HTML multipagina con una parete panoramica, esportata automaticamente in PDF e opzionalmente in PPTX modificabile
Esportazioni di animazioni MP4 con BGM e SFX per impostazione predefinita
File di gate come brand-spec.md e direction-approved.md che documentano gli asset e la direzione scelta dall'utente

Vedi l'esempio di prompt ↗

Come funziona

01
Verificare Prima i Fatti
Prima di progettare qualsiasi cosa legata a un prodotto, tecnologia o evento reale, l'agente deve verificare tramite WebSearch la sua esistenza, lo stato di rilascio, la versione e le specifiche, invece di basarsi sulla memoria di addestramento.
02
Instradare il Compito
Una tabella di segnali associa gli indizi del compito (nome del brand, slide/PPT, animazione/esportazione, app/prototipo iOS, critica) al punto di ingresso corretto e al file di riferimento prima che il lavoro inizi.
03
Eseguire il Fallback a Tre Direzioni
Qualsiasi compito che produce nuovi elementi visivi passa attraverso le Fasi 1-6: chiarire le esigenze, riformulare il brief, fissare una specifica di design, procurarsi immagini reali, generare tre logiche di design parallele, quindi attendere la scelta dell'utente.
04
Rispondere alle Cinque Domande di Forma
Per ogni pagina o scena, l'agente deve rispondere a ruolo narrativo, distanza di visione, temperatura visiva, capacità di contenuto e motivo visivo prima di costruire il design system.
05
Esportare con Verifica
Le animazioni vengono renderizzate in MP4 con BGM e SFX per impostazione predefinita e verificate con ffprobe per la presenza di uno stream audio; le presentazioni vengono esportate automaticamente in PDF e opzionalmente in PPTX modificabile.

02 Trova la tua applicazione

Quando usare lo skill huashu-design

Usa la skill huashu-design in Claude Code o Codex quando il compito riguarda la progettazione UI di questo tipo. Adattamento e limiti sotto sono presi dal file della skill stessa.

Buona applicazione

Mockup di prodotto ad alta fedeltà e interattivi che l'utente può esplorare con un clic per percepire il flusso
Presentazioni HTML 1920x1080 pensate per funzionare come un PPT
Motion design basato su timeline usato come materiale video o demo concettuali
Infografiche di qualità da stampa e visualizzazioni basate su dati
Confronto tra più direzioni di design affiancate o messa a punto con Tweaks

Conosci i limiti

Le web app o i sistemi di livello produzione che richiedono un backend sono fuori ambito
I siti SEO e i sistemi dinamici basati su backend non passano attraverso questo skill

Cosa fornire

Checklist degli asset del brandLogo, immagini di prodotto, screenshot dell'interfaccia, palette colori, font e zone vietate richiesti in un unico blocco prima di cercare nei canali ufficiali.
Riferimento di stile o brandUn URL di un sito apprezzato, uno screenshot o un prodotto la cui sensazione va replicata; se non esiste, l'agente procede con un'ipotesi dichiarata.
Design system o codebase esistenteL'agente verifica prima se esiste un design system, un UI kit, una codebase o un Figma prima di realizzare un design hi-fi da zero.

03 Dentro la skill

Le regole che lo skill huashu-design impone a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Il Gate a Tre Direzioni È Obbligatorio al 100%
Qualsiasi attività che produca nuovi elementi visivi deve mostrare tre bozze di direzione differenziate prima dell'esecuzione, anche quando l'utente specifica uno stile o un brand; si applicano solo tre eccezioni ristrette.
Il Logo È un Asset Obbligatorio
Se un design mostra un prodotto o un nome di brand riconoscibile, recuperare il suo logo ufficiale è obbligatorio, non opzionale, e occorrono tanti loghi quanti sono i prodotti presenti.
Placeholder Piuttosto che un'Esecuzione Scadente
Le icone mancanti ricevono un blocco grigio con etichetta testuale invece di un SVG disegnato male; i dati mancanti ricevono un commento onesto, mai numeri inventati.
Nessun Contenuto di Riempimento
Ogni elemento deve giustificare la propria presenza; lo spazio vuoto si risolve con la composizione, non inventando statistiche, icone su ogni titolo o gradienti ovunque.
Evitare Pattern Riconoscibili come AI-slop
Gradienti viola, icone a emoji, card arrotondate con un accento colorato sul bordo sinistro e persone/volti disegnati dall'AI in SVG sono segnalati come pattern visivi di default dell'AI da evitare, a meno che non siano usati dal brand stesso.
Vincoli di Ambito per React
Non nominare mai un oggetto di stile const styles = {...} perché più componenti entreranno in conflitto; i componenti devono essere esportati tra i tag script tramite Object.assign(window, {...}).
Le Esportazioni di Animazione Sono di Default Audio
Per l'animazione HTML, la consegna predefinita è un MP4 con BGM e SFX; una versione senza audio è considerata un deliverable incompleto a meno che l'utente non richieda esplicitamente l'assenza di audio.
I deck sono predefiniti come multi-file con Overview Wall
I deck di diapositive sono predefiniti come più file HTML più assets/deck_index.html come panoramica; l'architettura a file unico è riservata solo a pitch minimali di massimo 5 pagine che non necessitano esplicitamente di una panoramica.

04 Mettila al lavoro

Installare huashu-design in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungere huashu-design a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

Forma generica della CLI skills per SKILL.md; il repository può documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Adatta questo prompt con i tuoi contenuti e vincoli, poi eseguilo in Claude Code o Codex.

Example prompt

做个咖啡主题的 PPT

Fonte: esempio SKILL.md (testuale).

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Scattare uno screenshot con Playwright e controllare gli errori in console prima della consegna
Osservare personalmente il risultato in un browser prima della consegna, poiché il codice scritto dall'AI presenta spesso bug di interazione
Eseguire tre test di click Playwright sui prototipi di app (vista dettaglio, hotspot chiave, cambio tab) senza alcun pageerror
Verificare la soglia minima di leggibilità: testo del corpo almeno 14px, etichette almeno 12px, contrasto almeno 4.5:1

In OpenDesign importi huashu-design dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi lo seleziona nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: alchaincyf
Repository: github.com/alchaincyf/huashu-design Branch master
File della skill: SKILL.md Checksum del contenuto registrato alla verifica; commit a790f70
License: MIT Da LICENSE.
Stelle del repository: 24.121 Snapshot GitHub scattata il 14 settembre 2026 per l'intero repository alchaincyf/huashu-design. Non è una valutazione o un conteggio dell'utilizzo di huashu-design.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

你是谁Inquadra l'agente come uno studio che interpreta sei ruoli: direttore artistico, ricercatore di brand, designer visivo/motion, ingegnere, copywriter.
PrerequisitiIndica quali tipi di output copre lo skill e che le web app di produzione sono escluse.
任务路由：一张表定入口Tabella che associa i segnali del compito al punto di ingresso e al file di riferimento corretti.
核心原则 #0 · 事实验证先于假设Richiede la verifica tramite WebSearch dei fatti sul prodotto prima che inizi qualsiasi lavoro di design.
核心哲学（优先级从高到低）Sei principi ordinati: usare il contesto esistente, allinearsi prima di costruire, fornire varianti, preferire i placeholder, evitare riempitivi, evitare l'AI slop.
设计方向顾问（Fallback 模式）Definisce il processo obbligatorio a sette fasi che produce tre direzioni di design parallele prima dell'esecuzione.
App / iOS 原型专属守则（速查版）Regole specifiche e prioritarie per i prototipi di app mobile, che riguardano architettura, immagini, cornici del dispositivo, test di click.
工作流程Workflow standard numerato con checkpoint, protocollo dei file di gate e modelli di domande.
异常处理Azioni di fallback predefinite per richieste vaghe, domande rifiutate, contesto in conflitto, scadenze ristrette.
技术红线（必读 references/react-setup.md）Vincoli di implementazione React/Babel e Stage/Sprite non negoziabili.
Starter Components（assets/下）Elenca i componenti predefiniti (deck_index.html, animations.jsx, ios_frame.jsx ecc.) e quando usare ciascuno.
产出要求Convenzioni di denominazione, versionamento, posizione dei file e requisiti finali di controllo tramite browser/Playwright.

Descrizione della skill

"Huashu Design — crea prototipi ad alta fedeltà, presentazioni, animazioni, visualizzazioni e revisioni esperte con HTML. Ogni nuovo design parte sempre da tre bozze iniziali al 100% tra cui l'utente sceglie (anche con stile/brand specificato), solo dopo si procede. Parole chiave: fare un prototipo, PPT, presentazioni, animazioni, stile di design, revisione, creare una pagina HTML, UI mockup, esportare MP4/GIF, fare qualcosa di bello. Non adatto per Web App production-grade o sistemi che richiedono backend."

Descrizione front-matter da SKILL.md. Il file completo è di circa 33.602 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla Skill huashu-design

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Questa skill funziona solo in Claude Code?

No, la skill è descritta come agnostica rispetto all'agente e funziona in Claude Code, Codex, Cursor, Trae, OpenClaw, Hermes Agent o qualsiasi agente di skill basato su markdown, con una modalità degradata documentata per runtime più deboli senza generazione di subagenti.

Huashu Design

Esegui huashu-design su un task reale di UI design.

Scarica OpenDesign, importa huashu-design dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

Cosa Fa la Skill huashu-design in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando usare lo skill huashu-design

Buona applicazione

Conosci i limiti

Cosa fornire

Le regole che lo skill huashu-design impone a Claude Code e Codex

Il Gate a Tre Direzioni È Obbligatorio al 100%

Il Logo È un Asset Obbligatorio

Placeholder Piuttosto che un'Esecuzione Scadente

Nessun Contenuto di Riempimento

Evitare Pattern Riconoscibili come AI-slop

Vincoli di Ambito per React

Le Esportazioni di Animazione Sono di Default Audio

I deck sono predefiniti come multi-file con Overview Wall