skills.rest
JongHyunLee84
JongHyunLee84COMMUNITY
Explore all skills by this author →
GitHub

factory-ui-design

Generate UI specifications with screen layouts and component hierarchies from technical architecture.

Updated Mar 1, 2026
Search Tags:#specification#design system#prototyping#ux design#ui design#pencil mcp
One-click install
npx skills add https://github.com/JongHyunLee84/factory --skill factory-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: factory-ui-design
Source: https://github.com/JongHyunLee84/factory/tree/main/skills/factory-ui-design
Command: npx skills add https://github.com/JongHyunLee84/factory --skill factory-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill bridges the gap between technical architecture and user experience, ensuring that UI designs are feasible, consistent, and aligned with technical constraints before development begins.

Core Features & Use Cases

  • Visual Design Specification: Creates detailed UI specifications including screen layouts, component hierarchies, and interaction details.
  • Tool Integration: Leverages tools like Pencil MCP for AI-driven design generation and HTML prototyping as a fallback.
  • Use Case: After technical architecture is defined, use this Skill to generate mockups and a detailed UI specification document, ensuring developers have a clear visual blueprint for implementation.

Quick Start

Use the factory-ui-design skill to create a UI specification based on the technical design document.

Frequently Asked Questions about factory-ui-design

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

FAQPage Schema
How do I generate UI specifications from a technical architecture document?▼

To generate UI specifications from technical architecture, input your design constraints and requirements to produce screen layouts, component hierarchies, and interaction details. This ensures the resulting UI design remains feasible and aligned with your technical foundation.

How do I define design tokens and component hierarchies for a new design system?▼

Defining design tokens and component hierarchies involves structuring your visual elements and interaction specifications based on technical requirements. This process ensures UI consistency by mapping out screen layouts and component structures before development begins.

Can I use HTML prototyping as a fallback for UI design generation?▼

Yes, HTML prototyping serves as a fallback for UI design generation when AI-driven tools are unavailable. It allows you to define screen layouts, component hierarchies, and interaction specifications manually while ensuring UI feasibility.

What is the best way to ensure UI feasibility and consistency with technical constraints?▼

The best way to ensure UI feasibility and consistency is to bridge technical architecture and user experience by generating detailed UI specifications. This includes defining interaction details and component hierarchies that align directly with your technical constraints before development.

Do I need a technical design document to create a UI specification?▼

Yes, a technical design document is needed to create a UI specification because it provides the architectural context and requirements. This Skill uses that foundation to define mockups, screen layouts, and interaction details that developers can implement.

Related Skills

Explore More Design & Creative Skills→
shirulotshirulot

product-spec-builder

Generate product specification documents with Google AI Studio capabilities.

Community
Advanced
bacchus-labsbacchus-labs
4

figma-design-workflow

Generate Figma mockups from wrangler specifications with design system integration.

Official
Advanced
nesihaver-ILnesihaver-IL

figma

Transform Figma designs into React components and design tokens.

Community
Intermediate
timequitytimequity
6

brainstorming

Convert rough ideas into detailed designs through Socratic dialogue.

Official
Basic