Agent skill · design visual · julianoczkowski
frontend-design
Build distinctive, production-grade frontend interfaces with high design quality, guided by named aesthetic philosophies. Use when building components, pages, or applications. Generates working code with exceptional attention to aesthetic details and creative choices that avoid generic AI output.
Why this skill is useful
Provides specific aesthetic guidelines and design philosophies that enhance the AI's ability to create high-quality, distinctive frontend interfaces.
What it needs
About 6k tokens when loaded. Last updated 2026-07-06. 492 stars on the source repository.
What this skill does
This skill guides creation of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic detail. Example prompts "Build the hero section from the brief" "Create a card component in a Scandinavian style" "I want this to feel like a Japanese magazine. Build the layout." "Build the settings page. Use whatever style fits." Before You Write Any Code 1. Explore the existing codebase first. Scan specifically for: Component directories: components/, ui/, shared/ and list every component by name and its props/API CSS variables / tokens: files named tokens.css, variables.css, theme.css, or :root declarations with custom properties Tailwind config: tailwind.config.js or tailwind.config.ts, check theme.extend for custom values UI framework themes: Material UI createTheme, Chakra extendTheme, shadcn globals.css and components.json Storybook: .storybook/ directory or .stories. files indicating documented components Font loading: Google Fonts links, @font-face declarations, font imports Layout patterns: how existing pages handle grid, containers, breakpoints, and spacing Package.json UI dependencies: tailwindcss, @mui/material, @chakra-ui/react, @radix-ui, lucide-react, framer-motion, etc. If components exist that match or partially match what you need to build, extend or compose them. Do not create duplicates. 2. Understand the context: What problem does this interface solve? Who uses it? What is the intended emotional tone? What are the hard constraints (framework, devices, performance, accessibility)? 3. Commit to an aesthetic direction. Either the user names one (see philosophies below) or you choose one that fits the context. State your choice and why before writing code. Aesthetic Philosophies When the user names a philosophy or describes a vibe, use these as concrete implementation guides. Each philosophy defines typography, color, layout, spacing, motion, and detail treatment. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills julianoczkowski/frontend-design