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
Decision gist · record as of 2026-07-06
frontend-design generates distinctive, production-grade interfaces with code guided by named aesthetic philosophies like Scandinavian, Brutalist, or Swiss style. 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.
Use it when
- Yes.
- frontend-design implements responsive, accessible interfaces with mobile-first and dark mode support built in.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
julianoczkowski/designer-skills/frontend-design
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
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:rootdeclarations with custom properties - Tailwind config:
tailwind.config.jsortailwind.config.ts, checktheme.extendfor custom values
(truncated - see the full file via the links below)
File tree — 1 file
frontend-design/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build distinctive, high-quality frontend interfaces guided by named design philosophies”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill creates a complete token foundation for new projects, generating semantic color tokens, spacing scales, typography systems, and motion parameters in your project's native format—whether Tailwind, CSS custom properties, or theme files. It always includes intentional light and dark mode palettes derived from your chosen design philosophy.
Generate bold, memorable web designs directly from text requirements using React 18, TypeScript, Tailwind CSS, and shadcn/ui. Deploy as pure static HTML via Vite or as a Vercel-ready Next.js site, with mobile-first responsive patterns and anti-generic aesthetics built in.
This skill channels a distinctive design philosophy centered on concept-first thinking rather than generic templates. You'll learn to build interfaces that feel authored and alive through strategic typography choices, purposeful color systems, tactile interactions, and atmospheric layering—whether your project calls for editorial warmth, bright creator-tool optimism, or high-contrast neon energy. The skill covers layout principles, responsive design, and concrete patterns for discovery, action, and ambient UI.
This skill executes a comprehensive design review by comparing your built application against the design brief and aesthetic direction. It captures screenshots across responsive breakpoints, analyzes visual hierarchy and consistency, and produces a prioritized refinement list organized by severity.
Bencium Impact Designer creates distinctive, production-grade frontend interfaces that reject generic AI patterns. It guides you through design thinking—understanding purpose, tone, and constraints—then commits boldly to a cohesive aesthetic direction before generating working code. The skill emphasizes intentional creative choices, from brutalist minimalism to retro-futuristic maximalism, ensuring every interface is visually memorable and functionally polished.
Design Brief walks you through a structured conversation to define a new feature or page, then scans your codebase for existing design tokens, components, and patterns. It produces a markdown brief that captures the problem, solution, design principles, aesthetic direction, and component inventory—ensuring your design extends rather than duplicates existing work.
More skills design-flow (Apache-2.0) · Bencium Innovative Ux Designer (unlicensed) · Frontend Design (NOASSERTION) · Frontend Design (NOASSERTION) · frontend-design (MIT) · Frontend Design (unlicensed) · frontend-design (MIT) · information-architecture (Apache-2.0)