skills.rest
zunyiqingfeng-code
zunyiqingfeng-codeCOMMUNITY
Explore all skills by this author →
GitHub

web-design-engineer

Create HTML/CSS/JavaScript/React web artifacts with design-system coherence.

2|Updated Apr 27, 2026
Search Tags:#design#react#design-system#web-design#prototypes#ui-mockups#html/css/js
One-click install
npx skills add https://github.com/zunyiqingfeng-code/skills --skill web-design-engineer-zunyiqingfeng-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-engineer
Source: https://github.com/zunyiqingfeng-code/skills/tree/main/web-design-engineer
Command: npx skills add https://github.com/zunyiqingfeng-code/skills --skill web-design-engineer-zunyiqingfeng-code

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building high-quality visual web artifacts (pages, dashboards, prototypes, slide decks) quickly and consistently using HTML/CSS/JavaScript/React, while preserving design systems and brand integrity.

Core Features & Use Cases

  • Visual front-end deliverables: pages, landing pages, dashboards, interactive prototypes, UI mockups, data visualizations.
  • Workflow-focused guidance: steps to gather context, declare a design system, present a v0 draft, and iterate to full build with multiple variants via a Tweaks panel.
  • Real-world example: quickly produce a landing page with a responsive dashboard and a 3-variant prototype set for stakeholder review.

Quick Start

Create a v0 design canvas and runnable HTML prototype that showcases a landing page and a dashboard.

Frequently Asked Questions about web-design-engineer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create interactive prototypes and UI mockups using React?▼

To create interactive UI mockups with React, use a design-system-driven workflow that generates a v0 design canvas, declares styling tokens, and iteratively builds runnable HTML/CSS/JavaScript prototypes for stakeholder review.

What is the best way to build web pages while maintaining design system coherence?▼

Building web pages with design system coherence requires declaring your design tokens upfront, generating an initial v0 draft, and iteratively refining HTML/CSS/React components through a Tweaks panel to ensure brand integrity across deliverables.

Can I generate landing pages and dashboards with HTML, CSS, and JavaScript?▼

Yes, you can generate both landing pages and responsive dashboards using HTML, CSS, and JavaScript. The workflow produces a v0 design canvas and runnable prototypes that showcase data visualizations and responsive layouts for production-ready outputs.

Do I need predefined assets to build HTML demos and web artifacts?▼

No, predefined assets are not strictly required to build HTML demos, but the workflow supports optional references and assets to enhance the visual fidelity and production-readiness of your web artifacts during the iterative build steps.

How do I produce multiple design variants for stakeholder review?▼

To produce multiple design variants for stakeholder review, generate an initial v0 design canvas and use a Tweaks panel during the iterative build phase to quickly create and compare multiple HTML/CSS/React prototype sets.

Related Skills

Explore More Design & Creative Skills→
astoreyaiastoreyai
3

kymera-brand

Define Kymera Brand System UI guidelines for dashboards, reports, presentations, and technical artifacts across web and print with color tokens, typography, components, and backgrounds for dark/light modes.

Community
Basic
DauQuangThanhDauQuangThanh
14

mockup-creation

Create UI mockups for Vue and React projects with TypeScript and TailwindCSS v4.

Community
Advanced
KAFKA2306KAFKA2306

design-system

Enforce typography, contrast, and safe-zone layout for YT3 thumbnails and UI assets.

Community
Intermediate
ArieGoldkinArieGoldkin

design-to-production

Convert HTML prototypes into React components with shadcn/ui and validation.

Community
Intermediate