skills.rest
danielctc
danielctcCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Convert design briefs and screenshots into React, Vue, or vanilla frontend code.

Updated Jan 13, 2026
Search Tags:#typography#accessibility#React#Vue#design-to-code#frontend-design#UI-components
One-click install
npx skills add https://github.com/danielctc/ReactSpacesMonoRepo --skill frontend-design-danielctc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/danielctc/ReactSpacesMonoRepo/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/danielctc/ReactSpacesMonoRepo --skill frontend-design-danielctc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps design teams translate design briefs and reference visuals into production-ready frontend code, ensuring faithful realization of typography, color, spacing, and layout.

Core Features & Use Cases

  • Translate design briefs and screenshots into reusable UI components, pages, or full applications.
  • Reproduce typography scales, color tokens, spacing systems, and layout patterns while upholding accessibility standards.
  • Output framework-aware code (HTML/CSS/JS) with framework options like React, Vue, or vanilla, ready for integration.

Quick Start

Provide a design brief and optional reference visuals (screenshots, Figma links) and request generation of production-ready frontend components or pages in your preferred framework, while preserving tokens and accessibility.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I convert a design screenshot into production-ready React components?▼

You can generate Vue components from design briefs by specifying Vue as your target framework. The skill outputs framework-aware code that respects layout systems and enforces design tokens for color, typography, and spacing.

Does design-to-code generation preserve accessibility and design tokens?▼

Yes, you can translate Figma links and visual references into frontend code. The skill processes reference visuals and design briefs, reproducing layout patterns and UI component structures across React, Vue, or vanilla HTML, CSS, and JavaScript.

What's the best way to maintain a typography scale when turning visuals into UI components?▼

The best way to maintain a typography scale is by enforcing design tokens. The skill reproduces typography scales, color tokens, and spacing systems from reference visuals, ensuring the generated UI components match your specifications precisely.

Can I generate Vue components from design briefs and reference visuals?▼

You can generate Vue components from design briefs by specifying Vue as your target framework. The skill outputs framework-aware code that respects layout systems and enforces design tokens for color, typography, and spacing.

Does design-to-code generation preserve accessibility and design tokens?▼

Design-to-code generation preserves accessibility and design tokens by enforcing color, typography, and spacing variables directly in the output. The skill upholds accessibility standards while reproducing the required design guidelines from your specifications.

Can I use Figma links as input to generate accessible frontend code?▼

Yes, you can translate Figma links and visual references into frontend code. The skill processes reference visuals and design briefs, reproducing layout patterns and UI component structures across React, Vue, or vanilla HTML, CSS, and JavaScript.

Related Skills

Explore More Design & Creative Skills→
IFIR649IFIR649

visual-design-foundations

Build cohesive visual design systems with typography, color, spacing, and iconography tokens.

Community
Advanced
Lucas23-IECILucas23-IECI
1

frontend-design

Design production-grade frontend interfaces from user requests across React, Vue, or HTML/CSS.

Community
Intermediate
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
respira-pressrespira-press
40

html-to-bricks

Convert raw HTML/CSS exports into native Bricks Builder elements.

Official
Advanced