Skip to main content
designing-ui-mockups
Published by @askskills
Transform app ideas into detailed UI specifications with component structure, layouts, and design tokens
Third-Party Content
This skill is created by a third-party developer, not Asterism. While security-scanned, we cannot guarantee safety. By using any skill, you accept our Terms of Service and assume all risk.
Installation
aster install designing-ui-mockupsUniversal installation
By installing, you accept the Terms of Service. Skills are third-party content; Asterism is not liable for their use.
README
# Designing UI Mockups
Transform app ideas into comprehensive UI specifications ready for Figma, Sketch, or direct implementation.
## What This Skill Does
This skill converts app descriptions into detailed UI specifications including:
- Screen-by-screen layouts
- Component hierarchies
- Design token systems
- Interaction patterns
- Responsive considerations
## Design System Foundation
### Design Tokens
#### Spacing Scale (8pt Grid)
```json
{
"spacing": {
"0": "0px",
"1": "4px",
"2": "8px",
"3": "12px",
"4": "16px",
"5": "20px",
"6": "24px",
"8": "32px",
"10": "40px",
"12": "48px",
"16": "64px",
"20": "80px",
"24": "96px"
}
}
```
#### Typography Scale
```json
{
"typography": {
"display-2xl": { "size": "72px", "lineHeight": "90px", "weight": "700" },
"display-xl": { "size": "60px", "lineHeight": "72px", "weight": "700" },
"display-lg": { "size": "48px", "lineHeight": "60px", "weight": "700" },
"display-md": { "size": "36px", "lineHeight": "44px", "weight": "600" },
"display-sm": { "size": "30px", "lineHeight": "38px", "weight": "600" },
"display-xs": { "size": "24px", "lineHeight": "32px", "weight": "600" },
"text-xl": { "size": "20px", "lineHeight": "30px", "weight": "400" },
"text-lg": { "size": "18px", "lineHeight": "28px", "weight": "400" },
"text-md": { "size": "16px", "lineHeight": "24px", "weight": "400" },
"text-sm": { "size": "14px", "lineHeight": "20px", "weight": "400" },
"text-xs": { "size": "12px", "lineHeight": "18px", "weight": "400" }
}
}
```
#### Color System
```json
{
"colors": {
"primary": {
"50": "#EFF6FF",
"100": "#DBEAFE",
"200": "#BFDBFE",
"300": "#93C5FD",
"400": "#60A5FA",
"500": "#3B82F6",
"600": "#2563EB",
"700": "#1D4ED8",
"800": "#1E40AF",
"900": "#1E3A8A"
},
"gray": {
"50": "#F9FAFB",
"100": "#F3F4F6",
"200": "#E5E7EB",
"300": "#D1D5DB",
"400": "#9CA3AF",
"500": "#6B7280",
"600": "#4B5563",
"700": "#374151",
"800": "#1F2937",
"900": "#111827"
},
"success": "#10B981",
"warning": "#F59E0B",
"error": "#EF4444",
"info": "#3B82F6"
}
}
```
#### Border Radius
```json
{
"borderRadius": {
"none": "0px",
"sm": "4px",
"md": "8px",
"lg": "12px",
"xl": "16px",
"2xl": "24px",
"full": "9999px"
}
}
```
#### Shadows
```json
{
"shadows": {
"xs": "0 1px 2px rgba(0,0,0,0.05)",
"sm": "0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)",
"md": "0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)",
"lg": "0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)",
"xl": "0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04)",
"2xl": "0 25px 50px rgba(0,0,0,0.25)"
}
}
```
## Component Library
### Buttons
```
┌─────────────────────────────────────────────────────────┐
│ PRIMARY BUTTON │
├─────────────────────────────────────────────────────────┤
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Get Started │ │ Get Started │ (hover) │
│ └─────────────────┘ └─────────────────┘ │
│ bg: primary-600 bg: primary-700 │
│ text: white text: white │
│ padding: 12px 20px shadow: sm │
│ radius: md │
├─────────────────────────────────────────────────────────┤
│ SECONDARY BUTTON │
│ ┌─────────────────┐ │
│ │ Cancel │ │
│ └─────────────────┘ │
│ bg: white border: gray-300 │
│ text: gray-700 padding: 12px 20px │
├─────────────────────────────────────────────────────────┤
│ SIZES │
│ ┌───────┐ ┌──────────┐ ┌─────────────┐ │
│ │ SM │ │ MD │ │ LG │ │
│ └───────┘ └──────────┘ └─────────────┘ │
│ py: 8px py: 12px py: 16px │
│ px: 16px px: 20px px: 24px │
│ text: sm text: md text: lg │
└─────────────────────────────────────────────────────────┘
```
### Input Fields
```
┌─────────────────────────────────────────────────────────┐
│ TEXT INPUT │
├─────────────────────────────────────────────────────────┤
│ Label │
│ ┌─────────────────────────────────────────────────────┐│
│ │ Placeholder text... ││
│ └─────────────────────────────────────────────────────┘│
│ Helper text goes here │
├─────────────────────────────────────────────────────────┤
│ Specs: │
│ • Label: text-sm, gray-700, font-medium │
│ • Input: h-44px, px-14px, border-gray-300 │
│ • Focus: border-primary-500, ring-4 primary-100 │
│ • Error: border-error, ring-error/10 │
│ • Helper: text-xs, gray-500 │
└─────────────────────────────────────────────────────────┘
```
### Cards
```
┌─────────────────────────────────────────────────────────┐
│ BASIC CARD │
├─────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐│
│ │ ┌───────────────────────────────────────────────┐ ││
│ │ │ Image Area │ ││
│ │ │ aspect-ratio: 16/9 │ ││
│ │ └───────────────────────────────────────────────┘ ││
│ │ ││
│ │ Card Title ││
│ │ Description text that can span multiple ││
│ │ lines with proper line height. ││
│ │ ││
│ │ ┌─────────────┐ ││
│ │ │ Action │ ││
│ │ └─────────────┘ ││
│ └─────────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────┤
│ Specs: │
│ • Container: bg-white, radius-xl, shadow-md │
│ • Padding: 0 (image), 24px (content) │
│ • Title: display-xs, gray-900 │
│ • Description: text-md, gray-500 │
└─────────────────────────────────────────────────────────┘
```
### Navigation
```
┌─────────────────────────────────────────────────────────┐
│ TOP NAVBAR │
├─────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐│
│ │ [Logo] Home Features Pricing │ [Search] [User]││
│ └─────────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────┤
│ Specs: │
│ • Height: 64px (desktop), 56px (mobile) │
│ • Background: white / blur-backdrop │
│ • Border: bottom 1px gray-200 │
│ • Logo area: 120px width │
│ • Nav links: text-sm, gray-600, hover:gray-900 │
│ • Active link: text-primary-600, font-medium │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ MOBILE TAB BAR │
├─────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐│
│ │ 🏠 📊 ➕ 💬 👤 ││
│ │ Home Stats Add Chat Profile ││
│ └─────────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────┤
│ Specs: │
│ • Height: 56px + safe-area-inset │
│ • Background: white │
│ • Border: top 1px gray-200 │
│ • Icon: 24px, gray-400 / primary-600 (active) │
│ • Label: text-xs, same color as icon │
└─────────────────────────────────────────────────────────┘
```
## Screen Templates
### Dashboard Layout
```
┌─────────────────────────────────────────────────────────────────────────┐
│ HEADER (h: 64px) │
│ ┌───────────────────────────────────────────────────────────────────┐ │
│ │ [Logo] Dashboard [Search] [Bell] │ │
│ └───────────────────────────────────────────────────────────────────┘ │
├──────────────┬──────────────────────────────────────────────────────────┤
│ SIDEBAR │ MAIN CONTENT │
│ (w: 240px) │ │
│ │ Welcome back, User │
│ Dashboard │ │
│ Analytics │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ Projects │ │ STAT 1 │ │ STAT 2 │ │ STAT 3 │ │ STAT 4 │ │
│ Team │ │ $12,345 │ │ 1,234 │ │ 89% │ │ +23% │ │
│ Settings │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │ │
│ │ ┌────────────────────────────────────────────────────┐ │
│ │ │ CHART / TABLE AREA │ │
│ │ │ │ │
│ │ │ Primary data visualization │ │
│ │ │ │ │
│ │ └────────────────────────────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────┐ ┌──────────────────────────┐ │
│ │ │ SECONDARY WIDGET │ │ SECONDARY WIDGET │ │
│ │ └──────────────────────┘ └──────────────────────────┘ │
└──────────────┴──────────────────────────────────────────────────────────┘
```
### Mobile App Layout
```
┌───────────────────────┐
│ ← Title ⋮ │ ← Status bar (44px)
├───────────────────────┤ ← Navigation bar (44px)
│ │
│ │
│ │
│ CONTENT AREA │
│ │
│ Scrollable with │
│ proper safe areas │
│ │
│ │
│ │
├───────────────────────┤
│ 🏠 📊 💬 👤 │ ← Tab bar (49px + safe)
└───────────────────────┘
```
### Settings Page Pattern
```
┌─────────────────────────────────────────────────────────┐
│ ← Settings │
├─────────────────────────────────────────────────────────┤
│ │
│ ACCOUNT Section head │
│ ┌─────────────────────────────────────────────────────┐│
│ │ Profile → ││
│ ├─────────────────────────────────────────────────────┤│
│ │ Email user@email.com → ││
│ ├─────────────────────────────────────────────────────┤│
│ │ Password •••••••• → ││
│ └─────────────────────────────────────────────────────┘│
│ │
│ PREFERENCES │
│ ┌─────────────────────────────────────────────────────┐│
│ │ Notifications [====] ○ ││
│ ├─────────────────────────────────────────────────────┤│
│ │ Dark Mode ○ [====] ││
│ ├─────────────────────────────────────────────────────┤│
│ │ Language English → ││
│ └─────────────────────────────────────────────────────┘│
│ │
│ DANGER ZONE │
│ ┌─────────────────────────────────────────────────────┐│
│ │ Delete Account → ││
│ └─────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────┘
```
## Responsive Breakpoints
```json
{
"breakpoints": {
"sm": "640px",
"md": "768px",
"lg": "1024px",
"xl": "1280px",
"2xl": "1536px"
}
}
```
### Layout Adaptations
| Element | Mobile (<768px) | Tablet (768-1024px) | Desktop (>1024px) |
|---------|-----------------|---------------------|-------------------|
| Sidebar | Hidden (hamburger) | Collapsed (icons) | Full (240px) |
| Grid | 1 column | 2 columns | 3-4 columns |
| Card width | Full width | 50% | 33% or 25% |
| Typography | Scale down 10-15% | Base | Base |
| Padding | 16px | 24px | 32px |
## Interaction States
### Buttons
- **Default**: Base styling
- **Hover**: Darker background, subtle shadow
- **Active/Pressed**: Even darker, shadow inset
- **Focus**: Ring outline (accessibility)
- **Disabled**: 50% opacity, cursor: not-allowed
- **Loading**: Spinner, disabled state
### Form Fields
- **Default**: Gray border
- **Focus**: Primary border, ring
- **Error**: Red border, error message
- **Success**: Green border, checkmark
- **Disabled**: Gray background, no interaction
## Output Format
When designing mockups, provide:
1. **Screen Overview** - Purpose and key features
2. **Layout Structure** - ASCII wireframe or description
3. **Component Specs** - Detailed component breakdown
4. **Design Tokens** - Colors, spacing, typography used
5. **Interaction Notes** - States, animations, transitions
6. **Responsive Notes** - Mobile/tablet adaptations
7. **Accessibility Considerations** - WCAG compliance notes
Sign in to leave a comment