skills.rest
ConardLi
ConardLiCOMMUNITY
Explore all skills by this author →
Website𝕏@GardenConardLiGitHub

web-design-engineer

Generate web pages and UI components with HTML, CSS, JavaScript, and React.

10.2k|1.3k|Updated Apr 21, 2026
Search Tags:#html#frontend#react#javascript#css#design-system#web-design
One-click install
npx skills add https://github.com/ConardLi/garden-skills --skill web-design-engineer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-engineer
Source: https://github.com/ConardLi/garden-skills/tree/main/skills/web-design-engineer
Command: npx skills add https://github.com/ConardLi/garden-skills --skill web-design-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build high-quality visual Web artifacts using HTML/CSS/JavaScript/React — web pages, landing pages, dashboards, interactive prototypes, HTML slide decks, animated demos, UI mockups, data visualizations, and more. It applies to requests requiring a visual, interactive, or front-end deliverable. Use this skill whenever the user's request involves a visual or interactive deliverable, including web pages, marketing pages, prototypes, dashboards, or design-system explorations. Not applicable to non-visual code tasks or back-end work.

Core Features & Use Cases

  • Produce production-ready HTML/CSS/JS output, including responsive layouts and accessible semantics.
  • Create web pages, landing pages, dashboards, interactive prototypes, HTML slide decks, and data visualizations, with device frames and design-system tokens.
  • Transform design prompts, screenshots, or PRDs into interactive implementations while maintaining branding and design-system constraints.

Quick Start

Use the web-design-engineer skill to produce a stunning front-end deliverable (web page, dashboard, or prototype) following the declared design system.

Frequently Asked Questions about web-design-engineer

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

FAQPage Schema
How do I generate a production-ready landing page from a design prompt?▼

To generate a production-ready landing page, provide a design prompt or PRD to establish branding constraints. The system outputs responsive HTML, CSS, and JavaScript with accessible semantics and design-system tokens.

Can I build interactive dashboards and data visualizations using React?▼

Yes, you can build interactive dashboards and data visualizations using React. The system transforms design inputs into interactive implementations, delivering full builds with device frames and verification.

What's the best way to turn a PRD into an interactive HTML prototype?▼

The best way to turn a PRD into an interactive HTML prototype is to declare a design system first. The workflow then presents a v0 draft before delivering the final production-grade web artifact.

Does this approach work for creating HTML slide decks and animated demos?▼

Yes, this approach works for creating HTML slide decks and animated demos. It applies to any visual, interactive, or front-end deliverable, including web pages, marketing pages, and UI mockups.

Why do I need to declare a design system before coding web components?▼

You need to declare a design system before coding to maintain branding and design-system constraints. This ensures the final UI components and web pages are visually consistent and production-grade.

When should I not use an AI web design tool for front-end development?▼

You should not use this tool for non-visual code tasks or back-end work. It is specifically built for visual or interactive front-end deliverables like dashboards, prototypes, and data visualizations.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
JayZeeDesignJayZeeDesign
170

ui-design

Generate responsive single-file HTML UI prototypes with inline styles.

Community
Basic
abeldotamabeldotam
13

frontend-design

Create production-grade frontend interfaces from design concepts.

Community
Advanced
michaelschechtmichaelschecht
1

building-streamlit-dashboards

Create interactive Streamlit KPI dashboards with cards, metrics, and layouts.

Community
Intermediate