design-maker

Generate design mockups from Product-Spec.md and Design-Brief.md using Pencil or Figma.

Updated Apr 3, 2026
One-click install
npx skills add https://github.com/iJosueeh/nexora-web --skill design-maker-ijosueeh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-maker
Source: https://github.com/iJosueeh/nexora-web/tree/main/.opencode/skills/design-maker
Command: npx skills add https://github.com/iJosueeh/nexora-web --skill design-maker-ijosueeh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the generation of design mockups from Product-Spec.md and Design-Brief.md, streamlining the design process and ensuring all requirements are met.

Core Features & Use Cases

  • Automated Mockup Generation: Generates complete design deliverables from specifications.
  • Design Tool Integration: Integrates with design tools like Pencil or Figma.
  • Multi-Alternative Mode: Generates multiple design alternatives for comparison.
  • Gradual Refinement Mode: Delivers design in structured tiers for validation.
  • Use Case: After completing a Design Brief, use this Skill to generate design mockups that align with the brief and specifications.

Quick Start

Use the design-maker skill to generate design mockups for the 'Product-Spec.md' and 'Design-Brief.md' files.

Frequently Asked Questions about design-maker

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

FAQPage Schema
How do I automate UI mockup generation from markdown specifications?

You can automate UI mockup generation by parsing Product-Spec.md and Design-Brief.md files to create design deliverables. This process requires integrating design tools like Pencil or Figma to translate specifications directly into structured visual mockups.

Can I generate multiple design alternatives from a single Design Brief?

Yes, you can generate multiple design alternatives from a single Design Brief using the multi-alternative mode. This feature produces various mockup variations for comparison, ensuring the generated UI designs align with your specifications.

Does design-maker work with Figma and Pencil for product design workflows?

Yes, design-maker integrates with design tools like Pencil or Figma. It requires this design tool integration alongside document parsing capabilities to generate mockups from Product-Spec.md and Design-Brief.md within product design workflows.

What is gradual refinement mode for mockup generation?

Gradual refinement mode delivers design mockups in structured tiers for validation. Instead of generating a complete mockup at once, it provides incremental design deliverables from your specifications to validate requirements progressively.

Do I need a Product-Spec.md file to create UI mockups from specifications?

Yes, generating design mockups requires both Product-Spec.md and Design-Brief.md files. The Skill parses these markdown specifications to automate the creation of UI mockups that align with your defined product requirements and design brief.

What are the limitations of automated mockup generation from specifications?

Automated mockup generation from specifications requires design tool integration and properly formatted markdown documents. Limitations include dependency on parsing capabilities and the need for exact Product-Spec.md and Design-Brief.md structures to ensure all requirements are met.