skills.rest
TylerSimons1127
TylerSimons1127COMMUNITY
Explore all skills by this author →
GitHub

web-design-engineer

Generates styled HTML, CSS, and React front-end artifacts using design systems and style recipes.

Updated Aug 21, 2026
Search Tags:#html#React#design system#css#web design#ui redesign#style recipe
One-click install
npx skills add https://github.com/TylerSimons1127/vibe --skill web-design-engineer-tylersimons1127
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-engineer
Source: https://github.com/TylerSimons1127/vibe/tree/main/skills/creative/web-design-engineer
Command: npx skills add https://github.com/TylerSimons1127/vibe --skill web-design-engineer-tylersimons1127

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It removes guesswork from front-end visual design by enforcing a structured workflow that declares a design system before writing code, preventing generic or inconsistent UI output. ## Core Features & Use Cases - Design System Declaration: Defines color palette, typography, spacing, shadows, and motion rules before any code is written, with a user confirmation checkpoint. - Style Recipes & Direction Advisor: Loads anchor-based style recipes (Linear, MUJI, Vercel) or proposes 3 design directions from 6 distinct schools when requirements are ambiguous. - 5-Dimension Critique: Scores deliverables on philosophy alignment, visual hierarchy, craft quality, functionality, and originality with severity-sorted fixes. - Use Case: Ask for a Linear-style dashboard redesign; the skill extracts design tokens, declares the system, shows a v0 draft, then builds the full HTML/CSS implementation. ## Quick Start Design a landing page for my SaaS product in the style of Linear with a dark theme and minimal accent color.

Frequently Asked Questions about web-design-engineer

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

FAQPage Schema
How do I get a good UI design from an AI agent?▼

Provide an anchor reference like "Linear-style" or "MUJI quietness" so the skill loads a matching style recipe. If unsure, it switches to Design Direction Advisor mode and proposes 3 directions from different design schools with named designer references.

What design styles does this skill support?▼

It covers six schools: information architecture, editorial minimalist, modern tool SaaS, motion experimental, brutalist raw, and warm humanist. Each maps to concrete anchors like Linear, Vercel, Pentagram, Kenya Hara, and Stripe Press.

Can it redesign an existing page or dashboard?▼

Yes, it supports extension, preserve, and overhaul modes for existing products. It first extracts design tokens from screenshots, Figma files, or your codebase before declaring the new design system.

Does it work for back-end or non-visual tasks?▼

No, the scope is explicitly limited to visual front-end deliverables like pages, dashboards, prototypes, and visualizations. Back-end APIs, CLI tools, and data-processing scripts are out of scope.

Why does AI-generated UI often look generic?▼

AI output converges on clichés like purple-pink gradients, rounded cards with colored borders, and Inter typography. This skill includes a cliche ban table and requires declaring a specific design system before coding to avoid that.

Related Skills

Explore More Design & Creative Skills→
AIDotNetAIDotNet
634

product-design-user-context

Load and manage saved product and design references for Product Design workflows.

Official
Intermediate
JaveedIshaqJaveedIshaq
1

supabase-email-templates

Generate HTML email templates from React Email and deploy to Supabase Auth.

Community
Intermediate
nodefonynodefony

nodefony-browser

Inspect and measure web pages in a Playwright-driven browser with WCAG, performance, and WebSocket probes.

Official
Advanced
Jorge-IvanJorge-Ivan
1

generating-components

Generate and refine frontend UI components with Gemini Design MCP.

Community
Advanced