frontend-design

Translate design concepts into frontend code with accessibility and responsive guidance.

Updated Jan 31, 2026

Search Tags:#design #ui #frontend #css #component #aesthetics #design-system

Ready to run

npx skills add https://github.com/luan-thnh/hrm-auto-extension --skill frontend-design-luan-thnh

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/luan-thnh/hrm-auto-extension/tree/main/.opencode/skills/frontend-design
Command: npx skills add https://github.com/luan-thnh/hrm-auto-extension --skill frontend-design-luan-thnh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend design teams often struggle to translate ambitious concepts into distinctive, production-grade interfaces quickly, risking inconsistency across products.

Core Features & Use Cases

Design-driven prototyping: Generate production-ready frontend components, pages, and patterns aligned with a chosen aesthetic.
Design guidelines extraction: When given references or screenshots, extract color, typography, spacing, and layout guidelines to inform implementation.
Asset-to-code workflow: Translate design concepts into implementable code with guidance on accessibility, responsiveness, and design-system tokens.

Quick Start

Describe your UI goal and constraints, and I will generate a ready-to-integrate frontend component.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I translate UI design concepts into production-ready frontend code?▼

To translate UI design concepts into production-ready frontend code, provide your design references or constraints to generate implementable web components. The process extracts color, typography, and spacing guidelines to ensure the resulting frontend code satisfies accessibility and responsiveness requirements.

How do I extract design guidelines from a screenshot to build a web component?▼

Extracting design guidelines from a screenshot involves analyzing the reference image to identify color, typography, spacing, and layout patterns. These extracted guidelines then inform the implementation of token-based design systems and frontend components that match the original aesthetic.

Can I generate a complete frontend design system from an existing reference image?▼

You can generate a frontend design system from an existing reference by extracting its visual guidelines. The system produces token-based design outputs, ensuring design consistency across web components and pages while maintaining accessibility and responsive behavior.

What is the best way to ensure design consistency when building frontend components?▼

The best way to ensure design consistency when building frontend components is by using a token-based design system. This approach extracts and standardizes color, typography, and spacing guidelines, translating them into production-ready code assets that maintain a unified aesthetic.

Do I need a specific framework to implement token-based design systems for web pages?▼

You do not need a specific framework to implement token-based design systems, as the workflow translates design concepts into framework-agnostic, production-ready frontend code. It focuses on applying extracted guidelines for accessibility and responsive behavior across web pages.

Why does my frontend component fail to match the original design reference?▼

Frontend components fail to match original design references when visual guidelines like color, typography, and spacing are not properly extracted into design-system tokens. Translating design concepts requires strict adherence to these extracted guidelines to achieve the intended aesthetic and responsive behavior.