skills.rest
aniwei
aniweiCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-ux

Translate design briefs into responsive HTML/CSS/JS frontend code.

Updated Feb 3, 2026
Search Tags:#typography#frontend#prototyping#ui-ux#responsive-design#design-to-code
One-click install
npx skills add https://github.com/aniwei/vitamin-code --skill frontend-ui-ux-aniwei
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/aniwei/vitamin-code/tree/main/refs/oh-my-opencode/src/features/builtin-skills/frontend-ui-ux
Command: npx skills add https://github.com/aniwei/vitamin-code --skill frontend-ui-ux-aniwei

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps bridge the gap between design concepts and production-ready frontend code, enabling non-technical designers to translate ideas into implementable UI.

Core Features & Use Cases

  • Pixel-perfect UI implementation from design briefs into HTML/CSS/JS.
  • Responsive layout prototyping and consistent motion patterns across breakpoints.
  • Use case: Convert a text design brief into a functional dashboard prototype that matches typography, color, spacing, and interactions.

Quick Start

Build a minimal UI prototype from a design brief: create a responsive header with a card grid, use CSS variables for a color system, and add a small JavaScript snippet to handle basic interactions.

Frequently Asked Questions about frontend-ui-ux

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

FAQPage Schema
How do I turn a design brief into production-ready frontend HTML CSS code?▼

To turn a design brief into frontend HTML CSS code, translate refined UI/UX goals into clean structure, maintaining consistent typography, color systems, and spacing for a polished web app component.

What is the best way to build responsive layouts from a UI design prototype?▼

Building responsive layouts from a UI design prototype involves applying consistent motion patterns and breakpoints across web apps to ensure the frontend adapts cleanly to different screen sizes.

Can I use design-to-code workflows to implement typography and color systems?▼

Yes, design-to-code workflows implement typography and color systems by converting design briefs into functional components using CSS variables to maintain consistent visual styling.

Does this frontend implementation approach support accessible web app interactions?▼

Yes, this frontend implementation approach supports accessible web app interactions by applying polished interactions and clean HTML/CSS/JS structure to satisfy accessibility requirements.

Why does my design to code conversion lose pixel-perfect UI details?▼

Design to code conversion loses pixel-perfect UI details when refined UI/UX design goals are not accurately translated into consistent typography, spacing, and color systems within the frontend code structure.

Related Skills

Explore More Design & Creative Skills→
JZKK720JZKK720

design-taste-frontend

Generate frontend designs by analyzing briefs and implementing typography, color, and layout.

Community
Advanced
samjhechtsamjhecht
4

frontend-design

Generates responsive, accessible HTML/CSS/JS frontend interfaces with bold aesthetic direction.

Community
Advanced
i3ringiti3ringit
3

design-implementation-reviewer

Compare live UI states against Figma design specs and generate structured feedback.

Community
Intermediate
runkidsrunkids
11

frontend-design

Create distinctive frontend interfaces with HTML, CSS, and JS artifacts.

Community
Advanced