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

art-director

Builds websites and UI using design principles and 21st.dev components.

Updated Aug 21, 2026
Search Tags:#Playwright#design tokens#Framer Motion#web design#ui design#21st.dev#golden ratio
One-click install
npx skills add https://github.com/TylerSimons1127/vibe --skill art-director-tylersimons1127
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: art-director
Source: https://github.com/TylerSimons1127/vibe/tree/main/skills/art-director
Command: npx skills add https://github.com/TylerSimons1127/vibe --skill art-director-tylersimons1127

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Websites and interfaces often end up looking generic or cluttered because they lack a systematic design foundation. This Skill applies universal design principles (golden ratio, type scale, density control) combined with the 21st.dev component library to produce polished, premium-looking sites without hand-rolling every element. ## Core Features & Use Cases - Principle-Based Layout: Applies golden-ratio hierarchy, controlled text/image density, and a named type scale instead of ad-hoc styling. - 21st.dev Component Integration: Pulls interactive components (scroll animations, navbars, cards, footers) from the 21st.dev CLI and re-themes them to project design tokens. - Visual Verification Workflow: Establishes design tokens first, adds Framer Motion last, then screenshots with Playwright to verify the result. - Use Case: When a user asks for a "premium" landing page or says "make it look good," the Skill sets up tokens, lays out with restrained hierarchy, imports 21st.dev components, and visually validates the build. ## Quick Start Ask the agent to design a premium landing page for your product using the art-director approach with 21st.dev components.

Frequently Asked Questions about art-director

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

FAQPage Schema
How do I make a website look premium with AI?▼

Apply universal design principles: golden-ratio heading hierarchy, a named type scale, generous line-height, and restrained whitespace. Then pull interactive components from the 21st.dev library and re-theme them to your project's design tokens rather than shipping defaults.

How to use 21st.dev components in a web project?▼

Authorize the 21st.dev CLI by signing in with email or GitHub, then pull components by name into your build. Always re-skin them to your design tokens (color scale, type scale, spacing, radius) before shipping.

What design principles improve website layouts?▼

The Skill applies the golden ratio (1:1.618) for heading proportions, controlled text and image density, a defined type scale from xs to 5xl, and restraint in decoration. These principles come from the Power Design system of 20 universal design rules.

Does this design workflow require any authorization?▼

Yes, using the 21st.dev component library requires authorizing the 21st.dev CLI, which prompts sign-in via email or GitHub. Without authorization, components cannot be pulled into the build.

What styling choices are not allowed in this design system?▼

Neon colors, neon glows, bloom effects, and glowing shadows are prohibited and cause automatic review failure. The standing directive requires muted neutrals with one restrained non-neon accent for a modern premium look.

Related Skills

Explore More Design & Creative Skills→
booklib-aibooklib-ai
35

refactoring-ui

Apply Refactoring UI principles to improve visual hierarchy in UI designs.

Official
Intermediate
eddmanneddmann
2

playwright

Render dynamic web pages with Playwright to capture HTML, text, and screenshots.

Community
Intermediate
mkhsu2002mkhsu2002
1

web-design-guidelines

Apply modern web design principles to improve UI consistency across responsive layouts and accessibility.

Community
Intermediate
sathishssj3sathishssj3
2

animate

Implements CSS, WAAPI, and Motion animations using defined easing curves, durations, and spring configs.

Community
Intermediate