pixel

Converts Figma designs or text prompts into Vue 3 and Nuxt 4 components.

Updated Feb 10, 2026

Search Tags:#frontend #implementation #design system #vue #nuxt #pixel

Ready to run

npx skills add https://github.com/ahmadzakiy/skills --skill pixel-ahmadzakiy

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pixel
Source: https://github.com/ahmadzakiy/skills/tree/main/skills/pixel
Command: npx skills add https://github.com/ahmadzakiy/skills --skill pixel-ahmadzakiy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of translating designs into production-ready frontend code, ensuring high design quality and consistency with the Mekari Pixel 3 design system.

Core Features & Use Cases

Design Implementation: Convert Figma designs or natural language descriptions into Vue 3 components or Nuxt pages.
Design System Adherence: Utilizes the Mekari Pixel 3 design system for components, tokens, and styling.
Use Case: Implement a complex dashboard layout from a Figma design, ensuring all components, spacing, and colors match the specified design system.

Quick Start

Use the pixel skill to implement the provided Figma design node '1:2' into a Vue 3 component.

Frequently Asked Questions about pixel

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

FAQPage Schema

How do I convert Figma designs into Vue 3 components?▼

To convert Figma designs into Vue 3 components, implement frontend interfaces using the Mekari Pixel 3 design system and specific MCP tools for design extraction. This ensures production-ready code with accurate tokens and styling.

Can I generate Nuxt pages from natural language descriptions?▼

Yes, you can generate Nuxt pages from natural language descriptions by leveraging the Mekari Pixel 3 design system. This approach translates your prompts directly into Vue 3 components or Nuxt pages using TypeScript.

Do I need a Pixel MCP server connection to implement frontend interfaces?▼

Yes, a working Pixel MCP server connection is required to implement frontend interfaces for full functionality. This connection enables the extraction of Figma design nodes and component documentation.

How does the Mekari Pixel 3 design system ensure design consistency in frontend implementation?▼

The Mekari Pixel 3 design system ensures frontend implementation consistency by providing standardized components, design tokens, and styling rules. This guarantees that translated Figma designs maintain high design quality.

What is the best way to implement a complex dashboard layout from Figma into Nuxt 4?▼

The best way to implement a complex dashboard layout from Figma into Nuxt 4 is by using the pixel skill. It translates specific Figma design nodes into Nuxt pages while matching all spacing and colors to the design system.

Does this frontend implementation skill support TypeScript development?▼

Yes, this frontend implementation skill supports TypeScript development. It leverages TypeScript when converting Figma designs or natural language prompts into Vue 3 components and Nuxt 4 pages.