frontend-design-pro

Enforce typography, color, spacing, and motion rules in frontend UI outputs.

1|1|Updated Mar 18, 2026
One-click install
npx skills add https://github.com/xianmingyao/openclaw-CaySon --skill frontend-design-pro-xianmingyao
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design-pro
Source: https://github.com/xianmingyao/openclaw-CaySon/tree/main/skills/frontend-design-pro
Command: npx skills add https://github.com/xianmingyao/openclaw-CaySon --skill frontend-design-pro-xianmingyao

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides AI to produce professionally designed frontend UI by enforcing a design language and anti-pattern checks, reducing generic and stale UI outcomes.

Core Features & Use Cases

  • Enforces a cohesive design language for typography, color, spacing, and motion to elevate UI quality.
  • Provides audit, polish, and critique commands to steer AI toward production-ready designs.
  • Applies to dashboards, landing pages, and component libraries to ensure visual consistency across products.

Quick Start

Apply the frontend-design-pro rules to a UI design task to get a polished, production-ready result.

Frequently Asked Questions about frontend-design-pro

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

FAQPage Schema
How do I polish AI UI designs to a professional frontend quality?

Polishing AI UI designs involves enforcing a cohesive design language that covers typography, color, spacing, and motion. This process audits AI outputs for accessibility and consistency to ensure professional frontend quality.

What is the best way to audit frontend component libraries for visual consistency?

The best way to audit component libraries is by applying critique and polish commands that enforce visual consistency. This checks typography, color, and interaction rules to eliminate generic UI outcomes across products.

How do I enforce typography and motion rules in AI-generated web applications?

You can enforce typography and motion rules by applying a structured frontend design language to your AI generation task. This steers the AI toward cohesive interactions and visual quality while actively checking for anti-patterns.

Can I use frontend design rules to critique dashboard layouts?

Yes, you can critique dashboard layouts by running audit checks that enforce accessibility and consistency. This applies professional design rules to ensure dashboards meet visual quality standards before production.

Why does my AI-generated landing page look generic and lack professional polish?

Your AI-generated landing page looks generic because it lacks an enforced design language. Applying structured typography, color, and spacing rules alongside anti-pattern checks steers the AI toward production-ready designs.