skills.rest
chanhee-kang
chanhee-kangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-ux

Converts design briefs into implementable UI components with typography, color, and motion constraints.

2|Updated Feb 3, 2026
Search Tags:#typography#UI/UX#design-to-code#color-theory#motion-design#aesthetic-guidelines#front-end-implementation
One-click install
npx skills add https://github.com/chanhee-kang/oh-my-gemini --skill frontend-ui-ux-chanhee-kang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/chanhee-kang/oh-my-gemini/tree/main/skills/frontend-ui-ux
Command: npx skills add https://github.com/chanhee-kang/oh-my-gemini --skill frontend-ui-ux-chanhee-kang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

You are a designer who learned to code, delivering UI/UX that developers can implement precisely, bridging gaps in spacing, color harmony, micro-interactions, and the overall feel.

Core Features & Use Cases

  • Design-to-code bridge: translates bold aesthetic directions into implementable UI components.
  • Aesthetic guidelines: typography, color, motion, and spatial composition with practical constraints.
  • Anti-pattern awareness: avoids generic fonts and overused visual clichés to create distinctive interfaces.
  • Use Case: Imagine converting a design brief into a code-ready spec that a front-end team can implement with minimal back-and-forth.

Quick Start

Describe your UI goals to the AI, including target platforms, frameworks, accessibility constraints, and your preferred tonal direction.

Frequently Asked Questions about frontend-ui-ux

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

FAQPage Schema
How do I translate UI/UX design concepts into front-end code specifications?▼

To translate UI/UX design concepts into front-end code, define your design direction, typography, color constraints, and motion guidelines. This provides a structured design-to-code process yielding concrete, implementable UI specifications with minimal developer back-and-forth.

What is the best way to avoid generic typography and visual clichés in UI design?▼

The best way to avoid generic typography and visual clichés in UI design is applying anti-pattern awareness guidelines. This approach constrains font choices and spatial composition, ensuring distinctive interface outputs rather than overused aesthetic patterns.

Can I use design-to-code guidelines for specific front-end frameworks and accessibility constraints?▼

Yes, you can apply design-to-code guidelines for specific front-end frameworks and accessibility constraints. Describe your UI goals, target platforms, and accessibility requirements to receive concrete UI implementations tailored precisely to your technical environment.

How do I structure motion design and micro-interactions for production-ready UI components?▼

To structure motion design and micro-interactions for production-ready UI components, establish clear motion guidelines alongside typography and color constraints. This bridges aesthetic directions with implementable front-end interactions, ensuring the overall feel translates accurately into code.

Do I need prior front-end implementation knowledge to define aesthetic guidelines for developers?▼

You need basic front-end implementation knowledge to define aesthetic guidelines effectively. Knowing how spacing, color harmony, and micro-interactions translate to code helps you deliver practical constraints that a front-end team can implement precisely without ambiguity.

Related Skills

Explore More Design & Creative Skills→
oldwinteroldwinter
5

defining-product-vision

Creates a Product Vision Pack with statements, narratives, pillars, and strategic choices from provided inputs.

Community
Advanced
AbsolutelySkilledAbsolutelySkilled
207

figma-to-code

Convert Figma design frames into HTML, CSS, and React components.

Official
Advanced
algusaemalgusaem

frontend-design

Craft production-grade frontend interfaces with cohesive typography, color, motion, and accessibility.

Community
Advanced
InnoMikitaKutasInnoMikitaKutas

frontend-design

Generate markdown design specifications for user interfaces and web components.

Community
Advanced