skills.rest
MomoDaviluke
MomoDavilukeCOMMUNITY
Explore all skills by this author →
GitHub

web-design-engineer

Build web artifacts from AI prompts using a six-step design workflow.

2|Updated Mar 3, 2026
Search Tags:#design#ui#frontend#ai#prototyping#design-system
One-click install
npx skills add https://github.com/MomoDaviluke/star-citizen-promotion --skill web-design-engineer-momodaviluke
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-engineer
Source: https://github.com/MomoDaviluke/star-citizen-promotion/tree/main/.agents/skills/web-design-engineer
Command: npx skills add https://github.com/MomoDaviluke/star-citizen-promotion --skill web-design-engineer-momodaviluke

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The Web Design Engineer Skill transforms AI-generated ideas into high-quality, visually refined web artifacts by applying a structured, design-system–driven workflow that ensures consistency, aesthetics, and usable front-end outputs.

Core Features & Use Cases

  • Six-step design workflow that guides requirements understanding, context gathering, design-system declaration, v0 drafts, full build, and verification to produce production-ready front-ends.
  • Design-system declaration: articulate color, typography, spacing, motion tokens in Markdown before coding to align with branding and accessibility goals.
  • v0 draft strategy: produce placeholders, tokenized styles, and early layouts to enable rapid feedback and course correction.
  • Placeholder philosophy: replace missing assets with professional placeholders while requesting real assets from the user.
  • Token-based color/typography system: rely on design tokens (oklch-space based colors, scalable typography) for consistent theming.
  • Output formats: generates HTML/CSS/JS/React components, UI mockups, prototypes, dashboards, and data visualizations that follow design-system constraints.
  • Collaborative iterations: encourages early user feedback and multiple variant exploration to converge on the final design.

Quick Start

Drop this Skill into your AI agent project and start requesting front-end deliverables to trigger the six-step design workflow.

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 web UI designs from AI prompts?▼

You can generate web UI designs from AI prompts by applying a structured six-step workflow that guides requirements understanding, context gathering, design-system declaration, drafting, building, and verification to produce production-ready front-end artifacts.

What is a design-system declaration in front-end prototyping?▼

A design-system declaration in front-end prototyping articulates color, typography, spacing, and motion tokens in Markdown before coding to ensure visual consistency, align with branding, and meet accessibility goals.

How do I build a React dashboard using design tokens?▼

To build a React dashboard using design tokens, define oklch-space based colors and scalable typography first, then apply these tokenized styles alongside professional placeholders to generate consistent, themed UI components.

Can I generate HTML and CSS prototypes without real image assets?▼

Yes, you can generate HTML and CSS prototypes without real image assets by using a placeholder philosophy that replaces missing media with professional placeholders while prompting you to supply the actual assets.

What's the best way to iterate on web UI mockups with an AI agent?▼

The best way to iterate on web UI mockups with an AI agent is to use a v0 draft strategy that produces early tokenized layouts, enabling rapid feedback, collaborative course correction, and multiple variant exploration before the final build.

Does this web design workflow support data visualization and slide decks?▼

Yes, this web design workflow supports data visualization and slide decks, applying design-system constraints and robust output guidelines across various front-end deliverables including dashboards and prototypes.

Related Skills

Explore More Design & Creative Skills→
ibnuhalimmibnuhalimm

Architect

Gather project context and produce a detailed architecture plan.

Community
Advanced
PrasminPrasmin

frontend-design

Generate production-grade HTML/CSS/JS or React/Vue frontend code with a cohesive visual concept.

Community
Basic
fusenginefusengine
22

designing-systems

Define OKLCH color palettes, CSS variables, and typography scales for Tailwind CSS v4 theming.

Community
Advanced
JmarquesJmarques

webawesome

Provide a UI component library built with Web Components for multiple frameworks.

Community
Advanced