skills.rest
idy-00
idy-00COMMUNITY
Explore all skills by this author →
WebsiteGitHub

apply-aesthetic

Apply design archetypes or named design systems to semantic design tokens.

Updated Jul 20, 2026
Search Tags:#typography#branding#accessibility#design system#design tokens#contrast#aesthetic
One-click install
npx skills add https://github.com/idy-00/paytrack --skill apply-aesthetic-idy-00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apply-aesthetic
Source: https://github.com/idy-00/paytrack/tree/main/backend/.agents/skills/apply-aesthetic
Command: npx skills add https://github.com/idy-00/paytrack --skill apply-aesthetic-idy-00

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Choosing and applying a coherent visual direction often produces generic or inaccessible results. This Skill resolves a desired look or brand feel into a concrete token system while enforcing accessibility contrast requirements. ## Core Features & Use Cases - Archetype and Library Selection: Pick from archetypes (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or browse 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla) via the design_systems.py script. - Token Mapping: Re-point semantic color tokens and map typography, spacing, radius, shadow, and motion values to tokens/*.json following the Library Contract. - Accessibility Verification: Validate every mapped color pair with the contrast.py script so brand values that fail WCAG contrast are adjusted. - Use Case: A user asks to make a landing page feel like Linear's dark-tech aesthetic. The Skill runs a brief inference, selects the linear-app system, remaps semantic tokens, verifies contrast, and adds motion choreography. ## Quick Start Apply the stripe design system aesthetic to my project and verify all color pairs pass contrast checks.

Frequently Asked Questions about apply-aesthetic

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

FAQPage Schema
How do I apply a specific design system like Linear or Stripe to my project?▼

Browse available systems with the design_systems.py script using list, search, or show commands, then select one of 138 named systems. The Skill re-points semantic color tokens and maps typography, spacing, radius, shadow, and motion values to your token files.

What design archetypes are available for styling a website?▼

Five archetypes are available: high-end agency, editorial minimal, brutalist, soft-SaaS, and dark-tech. Each archetype is a recipe mapped to the token system, defined in the aesthetic-systems reference.

Does applying a brand color palette break accessibility contrast?▼

It can, which is why every mapped color pair is verified with the contrast.py script or a11y-audit. Brand values that fail WCAG contrast must be adjusted, since accessibility requirements override aesthetic preferences.

Why does AI-generated design often look generic?▼

Generating visuals before deciding on a direction produces generic output. This Skill mandates a brief inference step first, naming the industry, audience, mood adjective, motion depth, and layout family before any tokens are created.

Can I search the design system library for a specific style?▼

Yes, run design_systems.py with the search command followed by a term to find matching systems. Use show with a system name to view its full specification in the library's DESIGN.md file.

Related Skills

Explore More Design & Creative Skills→
andersoncollabandersoncollab

aesthetic-direction

Generate 3–5 ranked visual aesthetic directions with typography and color guidance.

Community
Intermediate
trevorbyrumtrevorbyrum
1

ui-design

Generate UI component and page code using design tokens and semantic HTML.

Community
Advanced
trevorc-aitrevorc-ai

visual_accessibility

Audit UI color contrast, color-reliant cues, and focus state visibility.

Community
Intermediate
LAF-USLAF-US

google-slides-template-migration

Migrate Google Slides decks into a branded template while preserving source content.

Official
Advanced