skills.rest
Fuzen2478
Fuzen2478COMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-ux

Generate production-ready UI code from design intent for web and mobile.

Updated Aug 27, 2026
Search Tags:#accessibility#frontend#ui-design#ux#aesthetics#design-system
One-click install
npx skills add https://github.com/Fuzen2478/only-my-opencode --skill frontend-ui-ux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/Fuzen2478/only-my-opencode/tree/main/src/features/builtin-skills/frontend-ui-ux
Command: npx skills add https://github.com/Fuzen2478/only-my-opencode --skill frontend-ui-ux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers translate design intent into production-ready UI implementations when design mockups are unavailable.

Core Features & Use Cases

  • Translate design intent into production-ready UI code across HTML/CSS/JS frameworks.
  • Establish and apply a cohesive design system including typography, color, spacing, and motion.
  • Use case: Refactor an existing interface to align with a bold aesthetic direction when mockups are missing.

Quick Start

Use the design-first approach to craft a cohesive frontend UI when design assets are unavailable. Define typography, color, motion, and layout guidelines, then implement components that align with the chosen aesthetic direction. Iterate with accessible, production-ready code.

Frequently Asked Questions about frontend-ui-ux

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

FAQPage Schema
How do I build frontend UI code when design mockups are missing?▼

Build frontend UI without mockups by applying a design-first approach: establish typography, color, motion, and layout guidelines, then implement components that align with your chosen aesthetic direction to generate production-ready code.

What is a design system and how do I apply it to web and mobile interfaces?▼

A design system for web and mobile interfaces is a cohesive set of typography, color, spacing, and motion rules. Apply it by enforcing these rules during UI implementation to maintain aesthetic consistency across the project.

Can I refactor an existing interface to follow a bold aesthetic direction?▼

Yes, you can refactor an existing interface to follow a bold aesthetic direction. This involves redefining typography and color systems, then updating the HTML/CSS/JS framework components to align with the new visual style.

How do I ensure accessibility when translating design intent into production code?▼

Ensure accessibility in production code by integrating accessibility considerations directly into your design process. Establish inclusive typography, color contrast, and layout guidelines before implementing UI components.

Does this design-first approach work with HTML, CSS, and JavaScript frameworks?▼

Yes, the design-first approach works with HTML, CSS, and JavaScript frameworks. It translates design intent into production-ready implementations across these frontend technologies while maintaining code-structure best practices.

Related Skills

Explore More Design & Creative Skills→
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
Unson-LLCUnson-LLC
9

cursor-design-to-code

Generate runnable UI code from design prompts using Cursor Planning and Build modes.

Official
Intermediate
ncsound919ncsound919

visual-design-foundations

Standardize typography, color, spacing, and iconography into design tokens and guidelines.

Community
Advanced
lionheartapplionheartapp

frontend-design

Guide frontend component development with design direction, typography, and color systems.

Community
Advanced