skills.rest
mewomewoliu
mewomewoliuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-engineer

Translate Figma design intent into production-ready React components with design tokens.

1|Updated Mar 16, 2026
Search Tags:#figma#spec#tokens#code-generation#ui-components#design-engineering#design-taste
One-click install
npx skills add https://github.com/mewomewoliu/ici-design-studio --skill design-engineer-mewomewoliu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-engineer
Source: https://github.com/mewomewoliu/ici-design-studio/tree/main/design-studio/design-engineer
Command: npx skills add https://github.com/mewomewoliu/ici-design-studio --skill design-engineer-mewomewoliu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bridges design direction and engineering discipline to produce production-ready UI components, tokens, and architecture, while enabling fast critique and exploration.

Core Features & Use Cases

  • Integrated design + code: Translate design intent into robust, production-ready components with consistent tokens, architecture, and quality checks.
  • Four-mode workflow: Critique, Spec, Code, and Variant modes to cover evaluation, specification, implementation, and exploration.
  • Design-taste vocabulary: Apply a cohesive aesthetic framework to ensure visual quality while maintaining engineering rigor.
  • Token-driven system: Generate and align design tokens, typography scales, color palettes, and spacing with code.
  • Use case: Teams building a UI component library from Figma to production React components.

Quick Start

Ask the intake questions, determine the mode (Critique, Spec, Code, or Variant), select a style direction, then begin the workflow.

Frequently Asked Questions about design-engineer

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

FAQPage Schema
How do I translate Figma designs into production-ready React components?▼

You can translate Figma designs into production-ready React components by applying a workflow that enforces design-taste vocabulary, generates aligned design tokens, and outputs implementation-ready code architecture.

What is the best way to generate and align design tokens with code?▼

The best way to generate and align design tokens with code is using a token-driven system that maps typography scales, color palettes, and spacing directly into robust component architecture.

How do I critique a UI component library for visual quality and engineering rigor?▼

You can critique a UI component library for visual quality and engineering rigor by applying a cohesive design-taste vocabulary that evaluates implementation-ready outputs across both aesthetic and technical dimensions.

Can I use one workflow for UI component specification, implementation, and exploration?▼

Yes, you can handle UI component specification, implementation, and exploration in one workflow by switching between Critique, Spec, Code, and Variant modes to cover evaluation, generation, and iteration.

Does building a cross-functional design system workflow require separate tools for design and code?▼

Building a cross-functional design system workflow does not require separate tools for design and code if you use a unified system that bridges design direction and engineering discipline to produce cohesive tokens and components.

Related Skills

Explore More Design & Creative Skills→
tech-leads-clubtech-leads-club
5.0k

figma-implement-design

Translate Figma designs into production-ready UI code via Figma MCP.

Official
Advanced
kcc989kcc989

shadcn-customization

Propagate design tokens and variants across shadcn/ui components.

Community
Advanced
0xHoneyJar0xHoneyJar
2

validating

Validate UI sprint components' physics and rigor compliance via Markdown reports.

Official
Intermediate
sumik5sumik5
1

implementing-design

Generate React and Tailwind CSS code from Figma design files.

Community
Advanced