Web Design Engineerby ConardLi

Web Design Engineer Skill.

Define the visual contract before expanding the interface.

Frontend Design
Prototyping
Design Systems

Source Review · Web Design EngineerSKILL.md

Task Frontend Design Produces • An HTML/CSS/JavaScript or React visual artifact • A documented assessment of the visual direction and design-token choices • A viewable early draft, followed by completed states and interactions Before You Start Needs a code-capable agent and browser-renderable frontend environment. Selected patterns may use React, Babel, charts, or other libraries; browser acceptance requires a suitable browser tool.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Web Design Engineer

A context-first design-engineering method with asset requirements, design calibration, early drafts, preservation modes, and distinct critique and browser-QA paths.

Source-based workflowNot an execution benchmark

The Working Approach

Web Design Engineer is a browser-artifact workflow for pages, dashboards, prototypes, slide decks, and visualizations. Rather than treating every request as a new landing page, it first identifies the artifact, audience, and existing-work mode. Extending a product, preserving a redesign's contracts, and rebuilding a visual direction are different jobs with different permissions.

Its design assessment uses five adjustable dimensions: variation, motion, information density, asset dependence, and brand fidelity. These feed a declared system and an early viewable draft before detailed implementation. For branded work, real logos, product photographs, and interface captures matter more than a palette alone. The skill also separates a lightweight self-check from executable browser acceptance, which its source reserves for an explicit QA request.

Expected Deliverables

An HTML/CSS/JavaScript or React visual artifact
A documented assessment of the visual direction and design-token choices
A viewable early draft, followed by completed states and interactions

See the Example Brief

From Brief to Review

01
Read The Existing Context
Inspect supplied source code, screenshots, brand assets, and constraints. Classify whether the work is an extension, a preserving redesign, or a wider overhaul.
02
Declare The Design Contract
Explain the visual direction, audience, density, motion, and assets, then specify typography, spacing, palette, surfaces, and interaction treatment. Wait for the user to approve this design system before writing the first code.
03
Show A Viewable Draft
Use key layouts and honest placeholders to test the direction. Wait for separate approval of this early draft before filling every component or interaction state.
04
Build And Review
Complete approved interactions and states. Perform the source's self-check; when browser acceptance is requested, collect actual viewport and interaction evidence separately.

02 When to Use It

When to Use It

Needs a code-capable agent and browser-renderable frontend environment. Selected patterns may use React, Babel, charts, or other libraries; browser acceptance requires a suitable browser tool.

A Good Fit

Existing-Product ExtensionsUseful when a new screen must look like it belongs to the product and preserve surrounding routes, forms, and interaction expectations.
Design Direction ExplorationFits a vague visual brief that needs genuinely different directions or adjustable variants before the team commits to one composition.

Limits to Check

Visual Frontend ScopeBackend APIs, command-line tools, and data-processing work are outside the skill's intended output. Dedicated article and narration-led presentation workflows are also separated.
Quality Is Not A Test ResultA design critique or source inspection does not prove responsive behavior in a running browser. Request executable acceptance when that evidence is required.

Bring These Inputs

Artifact And AudienceName the screen or experience to produce, who uses it, and the important viewing sizes or presentation conditions.
Existing ContractsProvide code, design-system references, and protected behaviors. State which parts may change and which must remain recognizable.
Real Content And AssetsSupply approved copy, genuine product imagery, logos, and data. Mark anything still missing instead of inventing testimonials or metrics.

03 Decisions That Matter

Decisions That Matter

Preservation As A Design Choice
The explicit work mode helps prevent an attractive redesign from quietly changing useful product conventions or replacing valid existing brand decisions.
Variants Beyond Recoloring
Its calibration framework makes it possible to vary density, organization, and interaction independently rather than showing several cosmetic versions of the same layout.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the complete Garden skill folder so its design recipes, preservation protocol, and optional acceptance references are available.

Upstream Source File

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

Needs a code-capable agent and browser-renderable frontend environment. Selected patterns may use React, Babel, charts, or other libraries; browser acceptance requires a suitable browser tool.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use Web Design Engineer to extend our existing analytics interface with a saved-reports screen. Preserve its navigation, spacing tokens, and table conventions. Read the supplied components and screenshots, propose the design system, and wait for my approval before coding. Then show a viewable draft with loading and empty-state plans. After I approve that draft, complete implementation and run browser acceptance at the supplied desktop and mobile sizes. Do not invent report usage statistics.

Inspect the Result

Check the actual output against these observable criteria.

The documented work mode matches the changes actually made to the existing interface.
The completed view includes the interaction states relevant to the brief.
Any claim of browser acceptance is accompanied by actual tested viewports and results.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: ConardLi
Repository: ConardLi/garden-skills
Skill File: skills/web-design-engineer/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · aaf9a82f5efd

Editorial Source Summary

A context-first design-engineering method with asset requirements, design calibration, early drafts, preservation modes, and distinct critique and browser-QA paths.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does it always produce a React project?

No. HTML is the output medium, but the source covers plain HTML/CSS/JavaScript as well as React-oriented prototypes and visual artifacts.

Will it replace an existing design system?

Not automatically. The workflow distinguishes extension, preserving redesign, and overhaul; that choice should be settled before editing.

Does every build include automated browser tests?

The source requires a lightweight self-check for all work, but its executable acceptance harness is triggered by an explicit browser, responsive, or QA request.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills