skills.rest
HardyLiu6
HardyLiu6COMMUNITY
Explore all skills by this author →
GitHub

web-design-engineer

Enhance visual design of AI-generated web pages using design systems and anti-cliché rules.

Updated Jul 2, 2026
Search Tags:#design systems#web design#aesthetics#HTML/CSS/JS#AI-generated content
One-click install
npx skills add https://github.com/HardyLiu6/youth-memory --skill web-design-engineer-hardyliu6
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-engineer
Source: https://github.com/HardyLiu6/youth-memory/tree/main/.codebuddy/skills/web-design-engineer
Command: npx skills add https://github.com/HardyLiu6/youth-memory --skill web-design-engineer-hardyliu6

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill enhances the visual design quality of AI-generated web pages, ensuring they are not only functional but also visually appealing and consistent with design systems.

Core Features & Use Cases

  • Design Enhancement: Improve the aesthetic appeal of AI-generated HTML/CSS/JavaScript artifacts.
  • Customizable Design Systems: Leverage predefined design systems or create custom ones based on brand guidelines.
  • Anti-Cliché Rules: Prevent overused design patterns and ensure originality.
  • Use Case: For example, if you have an AI-generated web page that looks generic, this Skill can help it look more professional and visually appealing.

Quick Start

Use the web-design-engineer skill to style the provided HTML page, applying the 'linear' design recipe and ensuring it adheres to the specified brand guidelines.

Frequently Asked Questions about web-design-engineer

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

FAQPage Schema
How do I improve the visual design quality of AI-generated web pages?▼

To improve the visual design quality of AI-generated web pages, you can apply predefined design systems and anti-cliché rules to enhance UI/UX aesthetics. This process transforms generic HTML/CSS/JavaScript artifacts into professional, visually appealing web pages.

What are anti-cliché rules in web design systems?▼

Anti-cliché rules in web design systems are guidelines that prevent overused design patterns in AI-generated web pages, ensuring originality. They help transform generic HTML/CSS/JS outputs into unique, visually appealing interfaces.

Can I apply custom brand guidelines to AI-generated HTML and CSS?▼

Yes, you can apply custom brand guidelines to AI-generated HTML and CSS. The skill allows you to leverage predefined design recipes or create custom configurations based on your specific brand guidelines.

Do I need design system knowledge to enhance AI-generated web page aesthetics?▼

Yes, design system knowledge is required to enhance AI-generated web page aesthetics. You need familiarity with HTML, CSS, JavaScript, and design systems to effectively apply UI/UX improvements and predefined recipes.

What is the best way to style an AI-generated web page using design recipes?▼

The best way to style an AI-generated web page is to apply a predefined design recipe, such as the 'linear' recipe, ensuring the HTML page adheres to specified brand guidelines and design system standards.

Why does my AI-generated web page look generic and lack visual appeal?▼

AI-generated web pages often look generic because they lack cohesive design system application and use overused patterns. Applying anti-cliché rules and structured UI/UX improvements ensures visual consistency and professional appeal.

Related Skills

Explore More Design & Creative Skills→
marchattonmarchatton
5

generating-tailwind-brand-config

Transform design tokens into Tailwind CSS variables and presets.

Community
Advanced
John198912John198912

web-design-engineer

Apply Claude Design principles to improve visual consistency of HTML/CSS/JavaScript web pages.

Community
Advanced
RaNDoM6913RaNDoM6913
1

design-system-reviewer

Analyze frontend components for design system token compliance and hardcoded values.

Community
Advanced
dawsonblockdawsonblock

frontend-design

Design and implement responsive UI interfaces for web applications using React and CSS frameworks.

Community
Advanced