design

Generate UI designs for software products using Paper.design.

9|2|Updated Apr 8, 2026
One-click install
npx skills add https://github.com/0xrafasec/ai-workflow --skill design-0xrafasec
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/0xrafasec/ai-workflow/tree/main/skills/design
Command: npx skills add https://github.com/0xrafasec/ai-workflow --skill design-0xrafasec

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of creating high-quality, distinctive UI designs for software products, leveraging Paper.design's capabilities to ensure consistency and adherence to design systems.

Core Features & Use Cases

  • Full Design Workflow: From design systems and brand guides to individual screens and visual prototypes.
  • Aesthetic Direction: Commit to a bold aesthetic direction, grounded in the PRD and architecture.
  • Design System Integration: Generate and refine design systems with detailed documentation and visual references.
  • Screen Inventory: Organize and prioritize screen requirements based on user flows and roadmaps.
  • Layout Creation: Build screens with precise alignment, typography, color, and spacing according to design system guidelines.

Quick Start

Run the design skill with /design to initiate the full design workflow, or specify a page/flow name like /design auth for targeted design tasks.

Frequently Asked Questions about design

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

FAQPage Schema
How do I generate UI designs for a software product using Paper.design?▼

To generate UI designs with Paper.design, you initiate a workflow that processes your design principles and user requirements to produce production-grade screens, brand guides, and comprehensive design systems.

What is the best way to build a consistent design system for screen layouts?▼

The best way to build a consistent design system is to generate detailed documentation and visual references that enforce precise alignment, typography, color, and spacing guidelines across all individual screen layouts.

How do I create individual screens that adhere to an existing brand guide?▼

You create individual screens by mapping user flows and technical specifications against your established brand guide, ensuring the resulting layouts strictly follow the predefined visual and architectural standards.

Do I need a product requirements document to start the UI design workflow?▼

Yes, a comprehensive understanding of user requirements and technical specifications is needed. The workflow commits to a bold aesthetic direction grounded in your PRD and architecture to ensure visual alignment.

Can I design a specific page flow instead of running the full design system workflow?▼

Yes, you can target a specific page flow. Instead of initiating the full workflow, you can specify a page or flow name to focus the UI design generation strictly on that targeted task.

Why does UI design require organizing a screen inventory before layout creation?▼

Organizing a screen inventory is required because it prioritizes screen requirements based on user flows and roadmaps, enabling precise alignment and consistent layout creation according to design system guidelines.