skills.rest
EmreOzdemiroglu
EmreOzdemirogluCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate production-grade frontend interfaces from user requirements with cohesive design direction.

Updated Aug 4, 2023
Search Tags:#typography#web components#frontend design#motion design#aesthetic direction#ui implementation#css layout
One-click install
npx skills add https://github.com/EmreOzdemiroglu/dotfiles --skill frontend-design-emreozdemiroglu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/EmreOzdemiroglu/dotfiles/tree/main/nvim/custom_rules/frontend-design
Command: npx skills add https://github.com/EmreOzdemiroglu/dotfiles --skill frontend-design-emreozdemiroglu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

frontend-design helps turn vague web design requests into cohesive, production-ready interfaces with strong visual identity—avoiding generic, cookie-cutter aesthetics.

Core Features & Use Cases

  • Design-direction-first delivery: Defines a bold aesthetic concept (e.g., luxury/refined, brutalist/raw, editorial/magazine) before implementation.
  • Production-grade UI implementation: Generates functional, working frontend code with refined typography, color systems, and compositional layout.
  • High-impact polish: Adds purposeful motion, depth, and atmospheric details (textures, borders, grain, layered effects) while keeping the result cohesive and intentional.
  • Typical use cases: Landing pages, dashboards, React/HTML/CSS components, web posters, and any scenario where styling and visual refinement matter.

Quick Start

Ask for the component you want built and specify its audience, purpose, and constraints (for example: “Design a production-ready landing page for a creative studio with a luxury/refined aesthetic, accessible typography, and subtle scroll/hover motion.”).

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a web UI that avoids generic AI-generated aesthetics?▼

To build distinctive web UI, define a bold aesthetic direction like luxury or brutalist before implementation, then generate functional frontend code with refined typography, color systems, and motion design.

What's the best way to create production-grade frontend components with cohesive styling?▼

Creating production-grade frontend components requires enforcing a cohesive design direction with attention to typography, spatial composition, and functional code quality across HTML, CSS, JS, or component frameworks.

Can I use this for building a landing page with motion design and refined typography?▼

Yes, you can build landing pages by specifying the audience, purpose, and constraints, which produces functional frontend code with purposeful motion, depth, and atmospheric details like textures and grain.

How do I turn vague web design requests into a cohesive visual identity?▼

Turning vague web design requests into cohesive visual identity involves establishing a strong aesthetic concept first, then applying refined typography, color systems, and compositional layout to the implementation.

Does this approach work with React components or only plain HTML and CSS?▼

This approach works with React components, plain HTML, CSS, and JS, applying cohesive styling, visual refinement, and high-impact polish across any component framework or web page scenario.

Related Skills

Explore More Design & Creative Skills→
AdamAugustinskyAdamAugustinsky
1

frontend-design

Generate accessible, responsive frontend interfaces with HTML/CSS/JS or React or Vue.

Community
Advanced
augustsclaugustscl
2

frontend-design

Generate runnable HTML/CSS/JS or framework code for distinctive frontend interfaces.

Community
Advanced
akashp1712akashp1712
1

next-loading-skeleton

Generate loading.tsx files with shadcn/ui Skeleton components for Next.js App Router pages.

Community
Intermediate
jieni777jieni777
1

frontend-design

Designs responsive, accessible frontend interfaces with cohesive typography, color, and motion.

Community
Intermediate