skills.rest
iJosueeh
iJosueehCOMMUNITY
Explore all skills by this author →
GitHub

design-maker

Generate design mockups, components, and state variants from Product-Spec and Design-Brief documents via a design tool MCP.

Updated Jun 29, 2026
Search Tags:#figma#mcp#design tokens#ui components#product spec#design mockups#state variants
One-click install
npx skills add https://github.com/iJosueeh/amauta --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/amauta/tree/main/.opencode/skills/design-maker
Command: npx skills add https://github.com/iJosueeh/amauta --skill design-maker-ijosueeh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning a written product spec and design brief into a complete, consistent set of mockups is slow and error-prone: pages get missed, state variants are skipped, and components are redrawn inconsistently. This Skill automates that translation so every UI feature in the spec has a corresponding design page. ## Core Features & Use Cases - Full-coverage mockup generation: Reads Product-Spec.md and Design-Brief.md, extracts every page, feature, and user flow, then produces design tokens, reusable components, page mockups, and state variants (empty, loading, error, active) through a design tool MCP such as Pencil or Figma. - Multi-alternative and gradual refinement modes: Generate N distinct design alternatives with a cross-comparison table, or deliver in three tiers (structure, interaction, edge cases) with user confirmation between tiers. - Verification and handoff: Runs a five-dimension self-critique, an 8-item quality rubric, and generates UI-Spec.md so downstream development does not guess structure from pixels. - Use Case: After finishing a product spec and design brief for a teacher dashboard app, invoke the Skill to produce tokenized components, all page mockups with state variants, and a UI-Spec.md ready for the development planning step. ## Quick Start Ask the AI to run /design-maker to generate complete design mockups from your Product-Spec.md and Design-Brief.md using the connected design tool.

Frequently Asked Questions about design-maker

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

FAQPage Schema
How do I generate design mockups from a product spec automatically?▼

Run the /design-maker command with Product-Spec.md and Design-Brief.md present in the project. The Skill extracts all pages and features, builds design tokens and reusable components, then generates every page mockup with state variants through a connected design tool MCP.

What design tools does design-maker support?▼

The Skill supports Pencil and Figma through their respective MCP connections. At startup it asks which tool you prefer, checks the MCP connection, and attempts to connect or prompts you to install the software if unavailable.

What happens if Product-Spec.md or Design-Brief.md is missing?▼

The dependency check runs first and stops the workflow. If Product-Spec.md is missing you are prompted to run /product-spec-builder first; if Design-Brief.md is missing you are prompted to run /design-brief-builder first.

Can I generate multiple design alternatives for comparison?▼

Yes. Multi-Alternative Mode, triggered by --alternatives N or an alternatives setting in the brief, generates N internally consistent design directions and produces a cross-comparison table with strengths, weaknesses, and a recommendation before you decide.

What if I don't have a design tool MCP available?▼

You can choose to skip during the dependency check. The Skill exits and the workflow continues in no-mockup mode, going straight to /dev-builder without generated designs.

How does design-maker verify mockup quality before delivery?▼

It runs a five-dimension self-critique covering hierarchy, brand consistency, information density, state completeness, and developability, plus an 8-item 16-point quality rubric. Any dimension scoring 2 or below triggers revision before the completion report is delivered.

Related Skills

Explore More Design & Creative Skills→
iJosueehiJosueeh

design-brief-builder

Generates a Design-Brief.md through a structured design interview about visual direction.

Community
Advanced
iJosueehiJosueeh

design-maker

Generate design mockups, components, and state variants from Product-Spec and Design-Brief documents via a design tool MCP.

Community
Advanced
elderbernardielderbernardi
1

excrtx-quality-taste

Routes visual output generation to specialized sub-skills and validates rendered UI against anti-slop quality gates.

Community
Advanced
Pixazo-AIPixazo-AI

idm-vton

Generates virtual try-on images by compositing garments onto person photos via the Pixazo API.

Official
Intermediate