skills.rest
nguyenvanlinh1902
nguyenvanlinh1902COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Extract design tokens and generate frontend components from design references.

Updated Dec 16, 2025
Search Tags:#ui#accessibility#frontend#responsive#aesthetics#design-to-code
One-click install
npx skills add https://github.com/nguyenvanlinh1902/trackingSolar --skill frontend-design-nguyenvanlinh1902
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/nguyenvanlinh1902/trackingSolar/tree/main/.opencode/skill/frontend-design
Command: npx skills add https://github.com/nguyenvanlinh1902/trackingSolar --skill frontend-design-nguyenvanlinh1902

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Convert design references into production-ready frontend interfaces, closing the gap between design and implementation with rigorous attention to aesthetics, accessibility, and responsive behavior.

Core Features & Use Cases

  • Extract design guidelines from reference assets (screenshots, style guides) and translate them into code-ready tokens (typography, color, spacing).
  • Generate frontend components, pages, and UI patterns that match the provided design direction with pixel-accurate details.
  • Validate implementations against design references, ensuring accessibility, responsive behavior, and visual fidelity.

Quick Start

Provide a design reference (screenshots or briefs) and specify your target framework; I will generate production-ready frontend components, documentation, and a runnable scaffold.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I convert design references into production-ready frontend code?▼

To convert design references into production-ready frontend code, provide design screenshots or style guides to extract code-ready tokens for typography, color, and spacing, generating runnable UI scaffolds.

What is design-to-code token extraction for web UI development?▼

Design-to-code token extraction translates visual design assets into standardized typography, color, and spacing variables, ensuring pixel-accurate, accessible frontend implementations across responsive variants.

Can I generate responsive frontend components from a screenshot?▼

Yes, you can generate responsive frontend components from a screenshot by processing the visual reference to extract design guidelines and applying them to create code scaffolds with responsive variants.

Does design-to-code conversion validate accessibility and visual fidelity?▼

Design-to-code conversion validates accessibility and visual fidelity by checking generated frontend implementations against original design references to ensure rigorous adherence to responsive behavior and aesthetics.

What's the best way to ensure pixel-accurate frontend implementations from design assets?▼

The best way to ensure pixel-accurate frontend implementations is translating design assets into token-driven outputs, validating generated components and pages against the original references for aesthetic consistency.

Related Skills

Explore More Design & Creative Skills→
IwatsukaYuraIwatsukaYura

frontend-design

Define and enforce a cohesive visual system for frontend interfaces.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
VidyaBodepudiVidyaBodepudi
2

frontend-ui-engineering

Review web components for accessibility, responsiveness, and performance.

Community
Advanced
ryan-nguyen-01ryan-nguyen-01
4

skill-ui-figma

Extract design tokens and translate Figma designs into CSS-ready components.

Community
Advanced