Does it follow accessibility standards?

Yes, the skill includes a UX Principles template specifically focused on WCAG 2.1 AA compliance, covering color contrast, keyboard navigation, and screen reader support.

Can I use my own brand assets with this skill?

Yes, the skill prompts for existing logos, colors, and brand guidelines to ensure the generated design documentation and UI implementation align with your established identity.

How does the skill gather design research?

The skill autonomously uses WebSearch to analyze current design trends in your project's domain and WebFetch to analyze reference URLs or screenshots you provide.

What does the Frontend Design skill do?

It generates comprehensive design documentation like style guides and design systems, and executes specific UI implementation tasks within the Claude Code environment.

What documentation does the Docs Mode generate?

It creates a full suite including a Style Guide, UI Design System, UX Principles, References Log, Component Specifications, Animation Guide, and Responsive Strategy.

Frontend Design

Name: Frontend Design
Author: orbtyapp

byorbtyapp

0•

设计工具

Creates distinctive, production-grade frontend interfaces and comprehensive design documentation for web and mobile projects.

The Frontend Design skill acts as a specialized UI/UX consultant within Claude Code, capable of both conceptualizing design systems and executing implementation tasks. It bridges the gap between initial project requirements and production-ready code by generating detailed style guides, design systems, and component specifications based on autonomous research and existing project context. Whether you are bootstrapping a new application or refining specific UI components, this skill ensures aesthetic consistency, accessibility compliance, and modern design standards with minimal user input.

主要功能

01Built-in accessibility (WCAG 2.1 AA) frameworks and motion design animation guidelines.

02Autonomous research into domain-specific design trends and reference analysis via WebSearch.

03Specialized implementation mode for executing UI-related coding tasks as a design expert.

04Automated generation of full-suite design documentation including Style Guides and UX Principles.

05Comprehensive design system templates covering typography, spacing, and component catalogs.

060 GitHub stars

使用场景

01Refining existing user interfaces based on modern design trends and target audience personas.

02Generating detailed component specifications and CSS variables for a shared frontend library.

03Bootstrapping a new project with a cohesive visual identity and professional design documentation.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add orbtyapp/orbty-eazy frontend-design

For use in Claude.ai and ChatGPT

Download Skill