skills.rest
4xiaxia
4xiaxiaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-engineer

Builds visual web artifacts with HTML, CSS, JavaScript, and React.

Updated Sep 6, 2026
Search Tags:#html#data visualization#react#design system#web design#prototype#slide deck
One-click install
npx skills add https://github.com/4xiaxia/203 --skill web-design-engineer-4xiaxia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-engineer
Source: https://github.com/4xiaxia/203/tree/main/public/fonts
Command: npx skills add https://github.com/4xiaxia/203 --skill web-design-engineer-4xiaxia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Producing polished, on-brand front-end deliverables like landing pages, prototypes, slide decks, and dashboards requires design judgment that generic AI output lacks, often resulting in clichéd, off-brand visuals. ## Core Features & Use Cases - Structured Design Workflow: Enforces a staged process from fact verification and requirement gathering through design-system declaration, v0 drafts, full builds, and a 5-dimension critique. - Brand Asset Protocol: Prioritizes real logos, product imagery, and UI screenshots over CSS substitutes, with a defined sourcing order and a brand-spec.md file for traceability. - Output-Type Guidelines: Provides concrete technical patterns for interactive prototypes, 1920x1080 HTML slide decks, data-visualization dashboards, and animation demos, including CDN choices and React+Babel rules. - Use Case: A user asks for an interactive onboarding prototype for a food-delivery app; the Skill gathers context, declares a design system, ships a v0 draft for feedback, then builds a clickable multi-variant prototype with a Tweaks panel. ## Quick Start Ask the agent to design an interactive prototype or landing page for your product and provide any brand assets or references you have.

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 an interactive HTML prototype with this Skill?▼

Describe the product and flows you want, and the Skill builds a clickable prototype centered in the viewport with device frames, key interaction paths, and at least three variants toggled through a Tweaks panel. It covers states like hover, focus, loading, empty, and error.

What output types does the web design Skill support?▼

It supports interactive prototypes, 1920x1080 HTML slide decks with keyboard navigation, data-visualization dashboards using Chart.js or D3, animation demos, and UI mockups. It does not handle back-end APIs, CLI tools, or non-visual coding tasks.

Can I use React components in the generated HTML?▼

Yes, React prototypes use pinned-version CDN scripts for React, ReactDOM, and Babel with inline JSX. Components must be attached to window to share across script blocks, and global style objects must be namespaced to avoid collisions.

Does the Skill handle brand assets like logos and product images?▼

Yes, it follows an asset protocol that treats real logos and product imagery as non-negotiable for branded work, sourcing them from press kits, official sites, or app stores. All assets are recorded in a brand-spec.md file and referenced via img tags rather than redrawn in CSS.

When should I not use this web design Skill?▼

Avoid it for back-end APIs, CLI tools, data-processing scripts, performance tuning, or any task with no visual deliverable. It is scoped strictly to browser-rendered, presentational front-end artifacts.

Related Skills

Explore More Design & Creative Skills→
aymenhamoudiiaymenhamoudii

teach-impeccable

Extract design tokens and brand assets into .impeccable.md.

Community
Intermediate
sheawinklersheawinkler
78

claude-design

Convert design briefs into self-contained HTML artifacts with embedded CSS and JavaScript.

Community
Advanced
massgenmassgen
1.1k

textual-ui-developer

Run the MassGen Textual UI in a browser with textual-serve for visual feedback.

Official
Advanced
vultisigvultisig
19

Figma Design Implementation

Translate Figma UI designs into React components using MCP tools.

Official
Intermediate