skills.rest
code-yeongyu
code-yeongyuCOMMUNITY
Explore all skills by this author →
Website𝕏@q_yeon_gyu_kimGitHub

frontend-ui-ux

Convert visual design ideas into responsive HTML/CSS/JS components.

67.6k|5.5k|Updated Dec 3, 2025
Search Tags:#accessibility#frontend#UI/UX#prototyping#responsive#design-to-code
One-click install
npx skills add https://github.com/code-yeongyu/oh-my-opencode --skill frontend-ui-ux-code-yeongyu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/code-yeongyu/oh-my-opencode/tree/main/src/features/builtin-skills/frontend-ui-ux
Command: npx skills add https://github.com/code-yeongyu/oh-my-opencode --skill frontend-ui-ux-code-yeongyu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers often struggle to translate visual ideas into production-ready interfaces without heavy mockups, slowing development and risking fidelity gaps in UI.

Core Features & Use Cases

  • Design-to-code translation: Transform design concepts into ready-to-run HTML/CSS/JS components.
  • Pixel-perfect implementation: Maintain spacing, typography, and micro-interactions for faithful UI execution.
  • Rapid prototyping from briefs: Generate responsive UI scaffolds from natural-language briefs for web apps, dashboards, and marketing pages.

Quick Start

Design a responsive hero header with a bold title, supporting subtitle, and two call-to-action buttons.

Frequently Asked Questions about frontend-ui-ux

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

FAQPage Schema
How do I convert design concepts into production-ready front-end code?▼

Converting design concepts into production-ready front-end code involves translating visual ideas into semantic HTML, clean CSS architecture, and maintainable React, Vue, or VanillaJS components with accurate spacing and typography.

Can I generate responsive UI scaffolds from natural language briefs?▼

Yes, generating responsive UI scaffolds from natural language briefs allows rapid prototyping of web apps, dashboards, and marketing pages by creating structural layouts ready for immediate refinement.

Does design-to-code translation support accessibility and semantic HTML?▼

Design-to-code translation supports accessibility and semantic HTML by ensuring generated front-end interfaces meet responsive layout requirements and maintain clean CSS architecture for faithful UI execution.

What is the best way to maintain pixel-perfect UI during front-end implementation?▼

Maintaining pixel-perfect UI during front-end implementation involves preserving exact spacing, typography, and micro-interactions to ensure faithful execution of the original visual design across components.

How do I build a responsive hero header with call-to-action buttons?▼

Building a responsive hero header with call-to-action buttons starts by designing a bold title, supporting subtitle, and two CTAs, then translating that visual structure into responsive HTML and CSS.

Related Skills

Explore More Design & Creative Skills→
cooopmaccooopmac

design-taste-frontend

Transform design briefs into front-end interfaces with design variance and motion controls.

Community
Advanced
alguaritoalguarito

frontend-design

Design and build custom frontend interfaces using HTML/CSS/JS or React/Vue.

Community
Advanced
VYRE-StudiosVYRE-Studios

frontend-design

Design responsive, accessible UI components with semantic HTML and WCAG AA compliance.

Official
Intermediate
wikimediawikimedia
7

protowiki-create-prototype

Create prototype folders with index.vue under src/prototypes/ for automatic gallery publishing.

Official
Basic