Frontend Design

This is one of those rare design tools that actually understands the problem: most AI-generated interfaces look generic and soulless. It gives you three modes: analyze existing CSS to audit what you've got, specify what you want through JSON configs, and generate palettes, typography systems, design tokens, and component templates. The analysis side is legitimately useful for extracting tokens from legacy code or checking accessibility compliance. Generation supports React, Vue, Svelte, and vanilla HTML with multiple styling approaches. The underlying philosophy is sound: pick an aesthetic direction and execute it with precision, whether that's bold maximalism or refined minimalism. Runs on Deno, outputs to common formats like Tailwind and CSS variables.

skills.sh installs: 2.3K
GitHub stars: 182
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add jwynia/agent-skills --skill frontend-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Frontend Design

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. This skill combines design philosophy guidance with practical TypeScript tooling for analyzing existing designs and generating design system artifacts.

Core Principle: Choose a clear aesthetic direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.