stacks-design-soft

Enforce a premium soft aesthetic preset for Stacks UI designs.

2|Updated Jul 2, 2026
One-click install
npx skills add https://github.com/stacksjs/status --skill stacks-design-soft
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stacks-design-soft
Source: https://github.com/stacksjs/status/tree/main/.claude/skills/stacks-design-soft
Command: npx skills add https://github.com/stacksjs/status --skill stacks-design-soft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of generic, template-like Stacks UI that fails to convey premium, high-end brand value for customer-facing pages such as landing pages, marketing sections, and portfolios.

Core Features & Use Cases

  • Premium Soft Aesthetic Preset: Enforces a curated design language with generous whitespace, premium typography, soft diffused shadows, and spring-like motion to create luxurious, high-end digital experiences.
  • Strict Anti-Pattern Guardrails: Bans low-quality fonts, icons, borders, and motion patterns to eliminate generic, low-effort "slop" design.
  • Creative Variance Engine: Dynamically selects unique layout and texture archetypes to ensure no two generated designs are identical while maintaining consistent elite quality.
  • Component Architecture Standards: Mandates double-bezel nested card design, button-in-button icon patterns, and spatial rhythm rules for tactile, haptic UI feel.
  • Use Case: Ideal for building SaaS landing pages, agency portfolios, luxury product marketing sections, or pricing pages that require Awwwards-tier design quality.

Quick Start

Use the stacks-design-soft skill to design a premium soft-themed hero section for a SaaS landing page with glassmorphism cards and fluid hover animations.

Frequently Asked Questions about stacks-design-soft

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

FAQPage Schema
How do I design premium soft UI for SaaS landing pages?

To design premium soft UI for SaaS landing pages, apply a curated aesthetic preset enforcing generous whitespace, diffused shadows, and spring-physics motion. This approach replaces generic templates with high-end visual depth suitable for marketing sections and portfolios.

What is double-bezel component architecture in UI design?

Double-bezel component architecture in UI design is a standard mandating nested card designs and button-in-button icon patterns. It establishes spatial rhythm rules to create a tactile, haptic UI feel for high-end digital experiences.

How do I prevent generic low-fidelity UI when building marketing sections?

Prevent generic low-fidelity UI in marketing sections by enforcing strict anti-pattern guardrails that ban low-quality fonts, icons, borders, and motion patterns. A creative variance engine dynamically selects unique layout archetypes to ensure consistent elite quality.

Can I use spring-physics motion choreography for mobile-responsive portfolio layouts?

Yes, you can apply spring-physics motion choreography to mobile-responsive portfolio layouts. The premium soft aesthetic preset includes fluid motion patterns alongside mandatory mobile-responsive layout collapse rules for high-end digital experiences.

What is the best way to ensure unique layout archetypes in high-end UI generation?

The best way to ensure unique layout archetypes in high-end UI generation is using a creative variance engine. It dynamically selects unique layout and texture archetypes, guaranteeing no two generated designs are identical while maintaining consistent elite quality.

When should I not use a soft design aesthetic for web interfaces?

You should not use a soft design aesthetic for web interfaces requiring dense data visualization or strict utilitarian functionality. This preset enforces generous whitespace and luxurious visual depth, which suits customer-facing landing pages and portfolios rather than data-heavy dashboards.