ux-design-from-scratch

Orchestrates foundations, components, screens, and flows into a complete from-scratch UX design build.

12|2|Updated Jun 22, 2026
One-click install
npx skills add https://github.com/Uxcel-Lab/product-skills --skill ux-design-from-scratch-uxcel-lab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-design-from-scratch
Source: https://github.com/Uxcel-Lab/product-skills/tree/main/ux/workflows/design-from-scratch
Command: npx skills add https://github.com/Uxcel-Lab/product-skills --skill ux-design-from-scratch-uxcel-lab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Starting a new product design from zero often produces a single screen with no design system underneath, or an over-built system with every component generated regardless of need. This Skill sequences the full build — color, typography, spacing, components, screens, and flows — so each decision is made once and reused consistently. ## Core Features & Use Cases - Context Profiling: Establishes whether a design system exists, what platform is targeted, and what brand constraints apply before any artifact is generated. - Scope Ladder Composition: Walks foundations → components → screens → flows, gating each rung as core, offer, or skip so only needed skills are composed. - Validation Handoff: Passes the finished artifacts to the ux-design-review skill for audit before declaring the build done. - Use Case: A founder asks an AI assistant to design a new mobile budgeting app. The Skill sets up the color palette, type scale, and spacing system, builds only the components the dashboard and onboarding screens need, sequences the onboarding flow, then hands everything to design review. ## Quick Start Ask your assistant to help you design a new app from scratch, including the design system, key screens, and onboarding flow.

Frequently Asked Questions about ux-design-from-scratch

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

FAQPage Schema
How do I design a new app from scratch with an AI assistant?▼

Trigger this Skill with a request like designing a new product or app. It establishes a context profile first, then builds foundations (color, typography, spacing), composes only the components your screens need, generates the screens and flows, and hands the result to design review.

What is the correct order for building a UX design system and screens?▼

Build bottom-up: foundations (color, type, spacing) first, then components, then screens, then flows. Decisions made at a lower rung propagate upward, so color and spacing are decided once and reused by every screen rather than re-decided per artifact.

When should I not use a design orchestration workflow?▼

Skip the orchestrator when you need one specific artifact, such as a single pricing page or a date-picker component. Explicit scope overrides orchestration, so let the individual screen or component skill trigger directly instead.

Does this workflow work if I already have a design system?▼

Yes. If tokens or a styleguide already exist, the foundations rung is skipped entirely and the build starts at components and screens, inheriting your existing system. The context profile in Step 0 determines this before any generation begins.

What happens if a required component skill is not installed?▼

The build does not block. The orchestrator applies that rung's intent inline using general best practice and notes the gap, so missing skills degrade gracefully rather than halting the design process.