Design From Scratch: AI Skill for UX Design
Design From Scratch is an AI skill that turns your assistant into a build orchestrator. It sets context once, then composes foundations, components, screens, and flows in order, and hands the result to design review.
npx skills add Uxcel-Lab/product-skills --skill ux-design-from-scratch
What this skill does
Gives an AI assistant a bottom-up build process for new products instead of one screen with no system underneath.
- Establishes the context once: design system, scope, platform, and brand.
- Starts with color, typography, and spacing when no design system exists.
- Inherits tokens and skips the foundations when a design system exists.
- Pulls in only the components the requested screens contain.
- Builds the requested screens on top of the shared system.
- Sequences screens into flows when the product needs a path like onboarding or checkout.
- Propagates decisions upward so nothing gets re-decided per screen.
- Hands the finished build to design review for validation.
When to use it
Use it when you need an AI assistant to:
- design a new app or product from zero;
- set up a design system and first screens together;
- build several screens that share one system;
- turn an idea into foundations, components, screens, and flows;
- extend a build into a full flow like onboarding or checkout;
- validate a from-scratch build before it ships.
Skills this workflow composes
| Skill | Role |
|---|---|
| Color | Core foundation; sets the palette, roles, and tokens |
| Typography | Core foundation; sets the type scale and hierarchy |
| Layout, Spacing & Grids | Core foundation; sets the base unit and grid |
| Iconography | Offered when the product is icon-heavy |
| Component skills | Pulled in on demand: forms, buttons, tables, navigation, overlays |
| Screen skills | Build the artifacts the user asked for: login, pricing, dashboard, settings |
| Flow skills | Sequence screens into onboarding, checkout, error recovery, or offboarding |
| Design Review | Validates the finished build with the right audit lenses |
How the skill works
1
Establish the context profile
The skill checks for a design system, then notes scope, platform, and brand.
2
Compose the ladder
It builds foundations first, then only the components, screens, and flows the product needs.
3
Validate with design review
It hands the finished artifacts to the design review workflow and resolves the findings.
Try it with
Related skills
1.0.0
MIT
UX Design
Workflows
