skills.rest
eencinasq
eencinasqCOMMUNITY
Explore all skills by this author →
GitHub

efactory-product-designer

Generates UI screens and design systems using ui-ux-pro-max research and Google Stitch MCP.

Updated Jul 13, 2026
Search Tags:#design system#ui design#wireframes#ux research#design handoff#stitch mcp#screen generation
One-click install
npx skills add https://github.com/eencinasq/cripto-pos --skill efactory-product-designer-eencinasq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: efactory-product-designer
Source: https://github.com/eencinasq/cripto-pos/tree/main/.kiro/skills/efactory-product-designer
Command: npx skills add https://github.com/eencinasq/cripto-pos --skill efactory-product-designer-eencinasq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing product screens without a consistent design system leads to mismatched tokens, ad-hoc mockups, and poor handoff to engineering. This Skill provides a structured workflow that combines design-system research with Google Stitch screen generation so every screen is grounded in a documented Design Decision Record. ## Core Features & Use Cases - Design system research: Runs ui-ux-pro-max searches to produce a Design Decision Record covering patterns, colors, typography, and UX guardrails before any screen is generated. - Stitch screen generation: Uses Google Stitch MCP tools (list_projects, generate_screen_from_text, fetch_design_md, fetch_screen_code) to create and iterate screens from persona-driven prompts. - Token reconciliation and handoff: Compares Stitch theme tokens against the execution repo (e.g. tailwind.config.js) and delivers screen IDs, export paths, and implementation notes to developers. - Use Case: A product team needs a new checkout flow for a mobile app. The Skill scopes the persona and journey, runs ui-ux-pro-max for the design system, generates Stitch screens, and hands off labeled screen IDs with Tailwind token mappings. ## Quick Start Ask the assistant to design a specific screen for your named product, providing the persona, journey step, and any existing Stitch project ID so it can run the design workflow.

Frequently Asked Questions about efactory-product-designer

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

FAQPage Schema
How do I generate UI screens with Google Stitch MCP?▼

Provide a product name, persona, and journey step, then the workflow builds a prompt from the Design Decision Record and calls generate_screen_from_text. You can iterate with get_screen and refined prompts until the screen matches the spec.

What is ui-ux-pro-max used for in a design workflow?▼

ui-ux-pro-max is a search script that returns design system patterns, colors, typography, and UX rules for a given product query. It runs before any Stitch generation so screens follow a documented Design Decision Record instead of ad-hoc styling.

Can I use an existing Stitch project instead of creating a new one?▼

Yes. Provide the project ID or let the workflow call list_projects to find it, then fetch_design_md loads the existing theme so new screens stay consistent with the established design system.

What happens if the Stitch MCP server is not connected?▼

The workflow states that MCP tools are unavailable and only offers the HTTP API fallback after you confirm Application Default Credentials are configured, per the stitch-mcp-setup documentation.

How are Stitch design tokens handed off to developers?▼

The handoff includes the Stitch project and screen IDs, a Tailwind token mapping, and a reconciliation note when the Stitch theme differs from the repo theme such as tailwind.config.js. Business rule changes are routed to the product owner, not design.

Related Skills

Explore More Design & Creative Skills→
EchoNoReturnEchoNoReturn

user-story-mapping

Convert user behavior into hierarchical story maps with activities, steps, and tasks.

Community
Intermediate
rovannirovanni
1

design-md

Analyze Stitch project metadata and synthesize a semantic DESIGN.md.

Community
Intermediate
yuanyuekejiJNyuanyuekejiJN
18

ui-ux-pro-max

Generate design systems with patterns, colors, typography, and accessibility rules.

Community
Intermediate
google-labs-codegoogle-labs-code
8.2k

design-md

Analyzes Stitch project screens and generates a semantic DESIGN.md design system document.

Official
Intermediate