skills.rest
ybbms777
ybbms777COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Plan and implement frontend interfaces with design system alignment and visual verification.

1|Updated Apr 4, 2026
Search Tags:#accessibility#design systems#ui development#frontend design#visual verification#web interfaces
One-click install
npx skills add https://github.com/ybbms777/compound-engineering --skill frontend-design-ybbms777
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ybbms777/compound-engineering/tree/main/skills/frontend-design
Command: npx skills add https://github.com/ybbms777/compound-engineering --skill frontend-design-ybbms777

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the pervasive issue of generic, low-quality AI-generated frontend interfaces that rely on overused design tropes (like purple-on-white gradients, generic card grids, and overused default fonts), fail to align with existing design systems, and lack distinctiveness or intentional design.

Core Features & Use Cases

  • Context-Aware Design Alignment: Automatically scans existing codebases for design tokens, component libraries, CSS frameworks, and typography patterns to respect established design systems, or applies opinionated design guidance for greenfield projects.
  • Structured End-to-End Workflow: Guides you through pre-build planning (defining visual thesis, content plan, and interaction plan), core design implementation (typography, color, composition, motion, accessibility), and post-build visual verification to ensure quality.
  • Use Cases: Ideal for building landing pages, web apps, dashboards, admin panels, individual UI components, or modifying existing frontend code to maintain design consistency and avoid generic AI aesthetics.

Quick Start

Use the frontend-design skill to build a new marketing landing page for your product that uses your existing brand color palette and typography, then verify the output matches your visual expectations with a screenshot.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I stop AI from generating generic web interfaces with overused design tropes?▼

To avoid generic web interfaces, apply structured frontend design guidance that enforces intentional typography, color, composition, and accessibility practices rather than relying on default AI aesthetics. This ensures your web interfaces have distinctiveness and align with established design systems.

Can I build a new landing page that automatically matches my existing design tokens and CSS frameworks?▼

Yes, frontend development can automatically scan existing codebases for design tokens, CSS frameworks, and typography patterns to ensure new landing pages respect established design systems. This context-aware design alignment maintains visual consistency across your web apps without manual token mapping.

What is the best way to plan and implement frontend design for a new web app dashboard?▼

The best way to build a web app dashboard is following a structured end-to-end workflow: define a visual thesis and content plan pre-build, implement core design elements like motion and accessibility, then perform post-build visual verification to ensure the UI components meet quality expectations.

Does this frontend design approach work for modifying existing UI components in an established codebase?▼

Yes, modifying existing frontend code is fully supported. The approach detects existing context and design patterns within your current codebase to ensure any new UI components or modifications maintain design consistency and avoid introducing generic AI-generated aesthetics into your established interfaces.

Why does my AI-generated frontend UI lack distinctiveness and fail accessibility best practices?▼

AI-generated frontend UI often lacks distinctiveness because it relies on overused design tropes instead of intentional visual planning. Implementing structured guidance for accessibility, typography, and composition ensures your web interfaces meet proper standards and maintain a unique visual identity.

Related Skills

Explore More Design & Creative Skills→
apollostreetcompanyapollostreetcompany

frontend-design

Analyze existing codebases to generate web interface design plans.

Community
Advanced
sethihqsethihq

qa

Validate web interfaces for visual and accessibility compliance using agent-browser.

Community
Intermediate
sami-abdulsami-abdul
3

frontend-design

Outline and implement bold frontend design systems with typography, color, motion, and CSS.

Community
Advanced
mangorocketofficialmangorocketofficial

web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility and best practices.

Community
Intermediate