skills.rest
ahmadzakiy
ahmadzakiyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/ahmadzakiy/skills --skill pixel-ahmadzakiy
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
HeartcoolmanHeartcoolman
88

figma-implement-design

Convert Figma design files into React and Tailwind CSS code.

Community
Advanced
woody1234567woody1234567
1

pinia

Manage Vue application state with a typed, store-based API.

Community
Advanced
vultisigvultisig
19

figma

Implement React components from Figma designs using MCP inspection.

Official
Advanced
iptodaysiptodays

frontend-standards

Standardize Vue 3 frontend code quality and project structure.

Community
Advanced