102.3K+Scarica
Vai alla guida all’uso
Web Design Engineerdi ConardLi

Web Design Engineer Skill.

Definisci il contratto visivo prima di ampliare l'interfaccia.

  • Frontend Design
  • Prototipazione
  • Design system
Scarica OpenDesignVedi la guida all'uso
Revisione della fonte · Web Design EngineerSKILL.md
Attività Frontend Design Produce • Un artefatto visivo HTML/CSS/JavaScript o React • Una valutazione documentata della direzione visiva e delle scelte sui design token • Una prima bozza visualizzabile, seguita da stati e interazioni completi Prima di iniziare Serve un agente in grado di scrivere codice e un ambiente frontend con rendering nel browser. Alcuni pattern possono usare React, Babel, grafici o altre librerie; l'accettazione nel browser richiede uno strumento browser adatto.
Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Web Design Engineer

Un metodo di design engineering che parte dal contesto, con requisiti sugli asset, calibrazione del design, bozze iniziali, modalità di conservazione e percorsi distinti per critica e QA nel browser.

Flusso basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Web Design Engineer è un flusso di lavoro per artefatti da browser: pagine, dashboard, prototipi, presentazioni e visualizzazioni. Invece di trattare ogni richiesta come una nuova landing page, individua prima l'artefatto, il pubblico e la modalità rispetto al lavoro esistente. Estendere un prodotto, preservare i contratti di un redesign e ricostruire una direzione visiva sono attività diverse, con permessi diversi.

La valutazione del design usa cinque dimensioni regolabili: variazione, movimento, densità informativa, dipendenza dagli asset e fedeltà al brand. Queste alimentano un sistema dichiarato e una prima bozza visualizzabile prima dell'implementazione dettagliata. Nei lavori di brand, loghi reali, fotografie di prodotto e catture dell'interfaccia contano più della sola palette. La skill distingue inoltre un autocontrollo leggero dall'accettazione eseguibile nel browser, che la fonte riserva a una richiesta esplicita di QA.

Risultati attesi

  • Un artefatto visivo HTML/CSS/JavaScript o React
  • Una valutazione documentata della direzione visiva e delle scelte sui design token
  • Una prima bozza visualizzabile, seguita da stati e interazioni completi
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Leggi il contesto esistente

    Esamina codice sorgente, screenshot, asset di brand e vincoli forniti. Classifica il lavoro come estensione, redesign conservativo o revisione più ampia.

  2. 02
    Dichiara il contratto di design

    Spiega direzione visiva, pubblico, densità, movimento e asset, poi specifica tipografia, spaziatura, palette, superfici e trattamento delle interazioni. Attendi che l'utente approvi questo design system prima di scrivere il primo codice.

  3. 03
    Mostra una bozza visualizzabile

    Usa layout chiave e segnaposto onesti per verificare la direzione. Attendi un'approvazione separata di questa bozza prima di completare ogni componente o stato di interazione.

  4. 04
    Costruisci e verifica

    Completa interazioni e stati approvati. Esegui l'autocontrollo previsto dalla fonte; se è richiesta l'accettazione nel browser, raccogli separatamente evidenze reali su viewport e interazioni.

02 Quando usarlo

Quando usarla

Serve un agente in grado di scrivere codice e un ambiente frontend con rendering nel browser. Alcuni pattern possono usare React, Babel, grafici o altre librerie; l'accettazione nel browser richiede uno strumento browser adatto.

Adatta a

  • Estensioni di prodotti esistentiUtile quando una nuova schermata deve sembrare parte del prodotto e preservare percorsi, moduli e aspettative di interazione circostanti.
  • Esplorazione della direzione di designAdatta a un brief visivo vago che richiede direzioni davvero diverse o varianti regolabili prima che il team scelga una composizione.

Limiti da verificare

  • Ambito frontend visivoAPI backend, strumenti da riga di comando ed elaborazione dati non rientrano nell'output previsto della skill. Anche i flussi dedicati ad articoli e a presentazioni guidate da una narrazione sono separati.
  • La qualità non è un risultato di testUna critica del design o l'ispezione della fonte non dimostrano il comportamento responsive in un browser in esecuzione. Richiedi un'accettazione eseguibile quando serve questa evidenza.

Input da fornire

  • Artefatto e pubblicoIndica la schermata o l'esperienza da produrre, chi la usa e le dimensioni di visualizzazione o le condizioni di presentazione importanti.
  • Contratti esistentiFornisci codice, riferimenti al design system e comportamenti da proteggere. Indica quali parti possono cambiare e quali devono restare riconoscibili.
  • Contenuti e asset realiFornisci testi approvati, immagini di prodotto autentiche, loghi e dati. Segnala ciò che manca invece di inventare testimonianze o metriche.

03 Decisioni importanti

Decisioni che contano

  1. La conservazione come scelta di design

    La modalità di lavoro esplicita aiuta a evitare che un redesign accattivante modifichi in silenzio convenzioni utili del prodotto o sostituisca scelte di brand valide.

  2. Varianti oltre il cambio di colori

    Il suo schema di calibrazione permette di variare densità, organizzazione e interazione in modo indipendente, invece di mostrare diverse versioni cosmetiche dello stesso layout.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Controlla la configurazione

Usa l'intera cartella della skill Garden, così sono disponibili le ricette di design, il protocollo di conservazione e i riferimenti opzionali per l'accettazione.

File sorgente upstream
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-design-engineer/SKILL.md

Serve un agente in grado di scrivere codice e un ambiente frontend con rendering nel browser. Alcuni pattern possono usare React, Babel, grafici o altre librerie; l'accettazione nel browser richiede uno strumento browser adatto.

Parti da un solo risultato

Adatta ambito, materiali di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa Web Design Engineer per estendere la nostra interfaccia di analytics esistente con una schermata di report salvati. Preserva navigazione, token di spaziatura e convenzioni delle tabelle. Leggi i componenti e gli screenshot forniti, proponi il design system e attendi la mia approvazione prima di scrivere codice. Poi mostra una bozza visualizzabile con piani per gli stati di caricamento e vuoto. Dopo la mia approvazione della bozza, completa l'implementazione ed esegui l'accettazione nel browser alle dimensioni desktop e mobile indicate. Non inventare statistiche d'uso dei report.

Esamina il risultato

Confronta l'output reale con questi criteri osservabili.

  • La modalità di lavoro documentata corrisponde alle modifiche effettivamente apportate all'interfaccia esistente.
  • La vista completata include gli stati di interazione rilevanti per il brief.
  • Ogni dichiarazione di accettazione nel browser è accompagnata da viewport realmente testati e dai relativi risultati.

OpenDesign offre uno spazio di lavoro di design locale per agenti di codice. Questo elenco non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le dipendenze software siano inclusi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione fissata della fonte collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Proprietario della fonte
ConardLi
Repository
ConardLi/garden-skills
File della skill
skills/web-design-engineer/SKILL.md
Licenza
MIT
Snapshot esaminato
2026-10-07 · aaf9a82f5efd
Sintesi editoriale della fonte
Un metodo di design engineering che parte dal contesto, con requisiti sugli asset, calibrazione del design, bozze iniziali, modalità di conservazione e percorsi distinti per critica e QA nel browser.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un segnale di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Produce sempre un progetto React?

No. HTML è il mezzo di output, ma la fonte copre sia HTML/CSS/JavaScript semplice sia prototipi e artefatti visivi orientati a React.

Sostituirà un design system esistente?

Non automaticamente. Il flusso distingue estensione, redesign conservativo e revisione completa; questa scelta va definita prima di modificare.

Ogni build include test automatici nel browser?

La fonte richiede un autocontrollo leggero per ogni lavoro, ma il suo harness di accettazione eseguibile si attiva solo con una richiesta esplicita di browser, responsive o QA.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente upstream
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-design-engineer/SKILL.md