# Signup Skill > Dark luxury UI with pink glass highlights - Skill: `majiayu000/signup-skill` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds add majiayu000/signup-skill` - Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/signup-skill/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: majiayu000 (https://skillmd.com/u/majiayu000) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/majiayu000/signup-skill --- --- name: todo-signup-ui version: 2.0.0 level: Senior / 10+ Years UI Design Standard description: Generate a premium, black‑background, pink glassmorphic signup‑only UI for a todo app with clear hierarchy, refined typography, and a high‑level UX workflow mindset. ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- # Todo App Signup UI Skill (High‑Level UI/UX) This skill defines a **production‑ready, premium signup experience** designed with **black glassmorphism**, **pink accents**, and **strong typographic hierarchy**. The goal is emotional impact, clarity, and modern SaaS quality — not just a form. --- ## Design Philosophy (Senior Designer Approach) * **Dark luxury UI** with pink glass highlights * Clear **visual hierarchy** (headline → value → action) * Minimal but expressive UI * Signup feels *exclusive*, *smooth*, and *trust‑building* * Every element earns its place --- ## When to Use * User requests a **signup screen only** for a todo app * User wants **premium glassmorphism** * Theme preference: **black background + pink glass** * User wants **modern SaaS‑level UI**, not basic layouts * Visual impact is as important as functionality --- ## High‑Level Layout Structure ### Overall Canvas * Full viewport height (100vh) * **Black / near‑black background** * Soft ambient pink glow in background (radial / blur) * Two‑column layout on desktop, stacked on mobile --- ### Left Panel (45%) — *Emotional & Brand Side* Purpose: **Sell the feeling, not the form** * App logo or minimal icon * Strong headline (1–2 lines max) * Supporting description (1 short paragraph) * Subtle animated pink glow / glass shapes in background **Example Content Hierarchy:** * Heading: *"Organize your life. One task at a time."* * Description: *"A clean, focused todo app designed to help you stay consistent and stress‑free."* --- ### Right Panel (55%) — *Functional Glass Card* Purpose: **Frictionless signup** * Centered **glassmorphic card** * Pink‑tinted blur glass * Soft neon pink border glow * Rounded corners (16–24px) Inside the card: * Card heading: **Sign Up** * Short helper text below heading * Form fields * Primary CTA * Social signup section --- ## Glassmorphism (Pink on Black) **Card Style Rules:** * Background: `rgba(255, 110, 199, 0.12)` * Backdrop blur: `blur(20–30px)` * Border: `1px solid rgba(255, 110, 199, 0.35)` * Shadow: soft pink outer glow No white or gray glass — **only pink‑tinted glass**. --- ## Typography System (Very Important) ### Heading Font (Modern & Premium) * Suggested styles: * Inter * Poppins * Satoshi * SF Pro (if available) **Signup Heading:** * Size: 28–32px * Weight: 600–700 * Color: `#FFFFFF` --- ### Description / Helper Text * Size: 14–16px * Weight: 400–500 * Color: `rgba(255,255,255,0.75)` * Line height: relaxed (1.5+) --- ### Input Labels & Text * Labels: subtle pink or soft white * Input text: white * Placeholder: muted pink/white --- ## Form Fields Required: * Full Name / Username * Email Address * Password * Confirm Password **Input Style:** * Dark glass input background * Pink focus ring on active * Smooth focus animation --- ## Primary Action Button * Text: **Create Account** * Background: Pink gradient * Rounded: 12–16px * Hover: Glow intensifies * Active: Slight scale down (micro‑interaction) --- ## Social Signup Section * Position: Bottom of glass card * Divider text: "or continue with" * Icons only (no text) Icons: * Facebook * Instagram * Pinterest Style: * Circular glass buttons * Pink border on hover --- ## Design Constraints (Strict) * ❌ No sign‑in link * ❌ No forgot password * ❌ No extra CTA buttons * ❌ No white/gray glass panels * ✅ Signup only, distraction‑free --- ## Responsiveness Rules * Desktop: Two‑column layout * Tablet: Reduced spacing, same structure * Mobile: * Single column * Left panel content moves above * Card centered Touch targets minimum: **44px** --- ## High‑Level UX Workflow Diagram ```text BLACK BACKGROUND CANVAS (soft pink glow ambience) ┌─────────────────────────────────────────────────────────┐ │ │ │ LEFT: BRAND FEEL (45%) RIGHT: ACTION (55%) │ │ │ │ ┌───────────────┐ ┌─────────────────────┐ │ │ │ Logo / Icon │ │ Pink Glass Card │ │ │ │ │ │ │ │ │ │ BIG HEADING │ ─────▶ │ Sign Up │ │ │ │ (Trust + │ Visual │ Helper text │ │ │ │ Motivation) │ Flow │ │ │ │ │ │ │ [ Name ] │ │ │ │ Short Desc │ │ [ Email ] │ │ │ │ │ │ [ Password ] │ │ │ │ Pink Glow │ │ [ Confirm ] │ │ │ │ Shapes │ │ │ │ │ │ │ │ [ Create Account ] │ │ │ │ │ │ │ │ │ │ │ │ — or — │ │ │ │ │ │ ○ ○ ○ │ │ │ └───────────────┘ └─────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────┘ USER FLOW: Emotion → Trust → Focus → Action → Account Created ``` --- ## Output Deliverables One or more of: * High‑fidelity UI mockup * Tailwind / CSS layout * Design tokens (colors, spacing, radius) * Responsive breakpoints * Interaction notes (hover, focus, transitions) --- ## Senior‑Level Best Practices 1. Strong headline before form 2. One clear CTA only 3. Glass must feel *soft*, not noisy 4. Animations < 300ms 5. Accessibility contrast maintained 6. Visual calm — no clutter 7. Design should feel **premium, not playful** --- **This skill represents a modern SaaS‑grade signup experience — minimal, confident, and visually striking.**