frontend-design

frontend-design generates working frontend code with intentional aesthetic direction, grounded in named design philosophies. Choose or describe a visual style—Scandinavian warmth, Swiss objectivity, Japanese restraint, Brutalist rawness, or others—and receive code that reflects that philosophy through typography, color, layout, and motion. The skill scans your codebase first to respect existing components and tokens.

frontend-design generates distinctive, production-grade interfaces with code guided by named aesthetic philosophies like Scandinavian, Brutalist, or Swiss style.

AI-generated summary based on this skill's SKILL.md

★ 461 ⁮ 35 Apache-2.0 updated 2026-07-06 by julianoczkowski

Install

julianoczkowski/designer-skills/frontend-design

Manual (git clone) CLI (skillfed)coming soon

git clone https://github.com/julianoczkowski/designer-skills
cp -r designer-skills/frontend-design ~/.claude/skills/frontend-design

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

What design philosophies does frontend-design support?

frontend-design generates working frontend code guided by named design philosophies including Scandinavian warmth, Swiss typographic objectivity, Japanese minimalism with ma spacing, Brutalist raw structure, Neo-Memphis playful color, and Art Deco geometry. You choose or describe a visual style, and the skill produces code that reflects that philosophy through intentional typography, color, layout, and motion choices rather than generic defaults.

Can I build a beautiful frontend component with design style using this skill?

Yes. frontend-design creates production-grade components with exceptional aesthetic attention to detail. Describe your desired design philosophy—whether Scandinavian, Swiss, Japanese, Brutalist, or another named aesthetic—and receive working code that avoids generic AI output through deliberate design choices grounded in that philosophy's principles.

Does frontend-design support responsive and dark mode design?

frontend-design implements responsive, accessible interfaces with mobile-first and dark mode support built in. Your generated code respects both viewport constraints and color-scheme preferences, ensuring your design philosophy translates consistently across devices and user preferences.

How does frontend-design handle existing design systems?

frontend-design scans your codebase first to respect existing components, design tokens, and component libraries. It integrates new builds with your established design system rather than replacing it, preserving consistency across your frontend while adding distinctive aesthetic direction.

What makes frontend-design output avoid generic AI interfaces?

frontend-design generates working code through deliberate design choices anchored in named aesthetic philosophies. By grounding decisions in specific design movements—Swiss grids, Japanese restraint, Brutalist structure—rather than default patterns, the skill produces interfaces that feel designed with intention, not assembled from generic templates.

Can I design a page that feels like a Japanese magazine with this skill?

frontend-design can create editorial magazine-style layouts grounded in Japanese design principles, emphasizing ma (negative space), restraint, and typographic hierarchy. Describe your content and aesthetic direction, and receive code that reflects that philosophy's approach to layout, spacing, and visual rhythm.

SKILL.md

rendered from the published skill — quoted content, verbatim

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

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

(truncated - see the full file via the links below)

Read as markdown · JSON record · Browse the source repository

File tree — 1 file

frontend-design/SKILL.md

All skills by julianoczkowski → Best frontend design skills for AI agents - SkillFed →