skills.rest
MohamedAbdallah-14
MohamedAbdallah-14COMMUNITY
Explore all skills by this author →
GitHub

design

Translate approved design specs into frames, tokens, and exports via MCP workflow.

3|1|Updated Mar 16, 2026
Search Tags:#workflow#design#MCP#spec#design-artifacts#open-pencil
One-click install
npx skills add https://github.com/MohamedAbdallah-14/Wazir --skill design-mohamedabdallah-14
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/MohamedAbdallah-14/Wazir/tree/main/skills/design
Command: npx skills add https://github.com/MohamedAbdallah-14/Wazir --skill design-mohamedabdallah-14

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guides design teams to translate approved specifications into tangible design artifacts via the MCP workflow, reducing handoffs, ambiguity, and rework.

Core Features & Use Cases

  • End-to-end MCP-driven design production: from spec interpretation to frames, tokens, and export-ready outputs.
  • Structured workflow guidance: step-by-step procedures, checks, and handoffs aligned with open-pencil MCP.
  • Use Case: A design team converts a new spec into frames, design tokens, and export-ready assets with minimal manual intervention.

Quick Start

Execute the MCP workflow to translate an approved spec into design artifacts.

Frequently Asked Questions about design

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

FAQPage Schema
How do I translate approved design specs into actionable artifacts using MCP?▼

The MCP workflow solves design production handoffs by applying a structured, step-by-step procedure to interpret approved specs and generate frames, design tokens, and export-ready assets. This structured approach reduces ambiguity and manual rework during end-to-end design execution.

What do I need to run the open-pencil MCP workflow for design production?▼

The MCP workflow translates approved design specifications into tangible artifacts by applying a structured, step-by-step procedure that generates frames, design tokens, and export-ready outputs. This structured approach reduces ambiguity, minimizes manual rework, and streamlines end-to-end design execution within the open-pencil environment.

Can I convert a design spec into frames and tokens with minimal manual intervention?▼

Yes, the MCP workflow converts a design spec into frames and tokens with minimal manual intervention by applying structured, step-by-step procedures with built-in checks and handoffs aligned with the open-pencil environment. This enables design teams to execute end-to-end workflows from specs to export-ready outputs.

What is the best way to execute an end-to-end design workflow from spec to export?▼

The best way to execute an end-to-end design workflow from spec to export is using an MCP-driven approach that guides you through spec interpretation, frame generation, token creation, and export-ready outputs. This structured workflow minimizes handoffs and ambiguity while ensuring deterministic task execution.

Does the MCP design workflow require the Bun runtime to generate design artifacts?▼

Yes, the MCP design workflow requires the Bun runtime to enable deterministic task execution when generating design artifacts from approved specs. Along with the Bun runtime, an open-pencil MCP server and a valid spec artifact are required to execute the end-to-end workflow.

Related Skills

Explore More Design & Creative Skills→
modu-aimodu-ai
4

moai-workflow-pencil-integration

Detect and orchestrate Pencil MCP batch design tasks in MoAI Studio workflows.

Official
Advanced
jfrometajfrometa

game-art

Define cohesive art direction and asset pipelines for 2D and 3D game assets.

Community
Basic
taewook486taewook486

moai-design-tools

Fetch Figma design context and export Pencil designs into React and Tailwind CSS code.

Community
Advanced
landfilllandfill

nano-banana-pro

Generate images from text prompts using Google's Nano Banana Pro model.

Community
Advanced