premium-saas-design

仓库: hermeticormus/libreuiux-claude-code
安装量: 37
排名: #19054

安装

npx skills add https://github.com/hermeticormus/libreuiux-claude-code --skill premium-saas-design
Premium SaaS Design Framework
"75% of users won't trust a company if the design doesn't look good."
This skill captures the professional design workflow used by senior product teams and UI/UX designers, adapted for AI-assisted development. The framework transforms AI from a "guessing machine" into a true design partner.
The Core Loop
DEFINE → BUILD → REVIEW → REFINE
↑ │
└────────────────────────┘
This loop is everything. It's used by real product teams and works wonders with AI.
The 7 Context Artifacts
AI needs context to produce premium results. These 7 documents form your "design contract" with AI:
1. Project Brief
What
Single document explaining what you're building, why, and for whom.
Purpose
Gives AI direction and understanding of the project.

Project Brief: [Product Name]

What We're Building [Description of the product/website]

Primary Target Audience

[ Persona 1 ] : [Description] - [ Persona 2 ] : [Description]

Goals 1. [Primary goal - e.g., drive signups] 2. [Secondary goal - e.g., build trust] 3. [Tertiary goal - e.g., explain the product]

Requirements

Fully responsive (mobile-first)

Blazing fast performance

Accessible (WCAG 2.1 AA)

[Other requirements]

Sections
1.
Hero
2.
Trust Logos
3.
Features
4.
[etc.]
Key Insight
Think of AI as a new team member. You wouldn't tell them "build me a website" without context.
2. Content Files (One Per Section)
What
Separate file for each section containing all copy/content.
Purpose
Focuses AI on content separately from design.

Hero Section Content

Headline [Main headline text]

Subheadline [Supporting text]

CTA Primary Text: [Button text] Action: [What happens on click]

CTA Secondary Text: [Link text] Action: [What happens on click]

Social Proof (optional)
[Trust indicators, stats, etc.]
3. General Vibe Mood Board
What
Visual inspiration for the overall site aesthetic.
Purpose
Answers "What should the whole site FEEL like when we land on it?"

General Vibe

Overall Aesthetic

Theme: [Dark/Light/Mixed]

Feel: [Modern, Professional, Playful, etc.]

Color Direction: [Primary color family and why]

Inspiration References

Reference 1: [Site Name]

What I Like:

[Specific element 1]

[Specific element 2]

Screenshot: [embedded image]

Reference 2: [Site Name]

What I Like:

[Specific element 1]

[Specific element 2]

Screenshot: [embedded image]

Color Psychology

Primary Color: [Color] - [Why this color for this audience] Example: Turquoise/blue evokes professionalism and trust (important for security products)

Typography Direction

Headlines: [Font family, weight, style]

Body: [Font family, size range]
Research Sources
:
Dribbble (search "[industry] SaaS landing page")
Awwwards
SaaS Landing Page examples
Competitor sites
4. Section-Specific Mood Boards
What
Detailed specs for each section - the "Frankenstein" approach.
Purpose
Gives AI precise visual direction for every section.

Hero Section Specs

Layout Reference

URL: [Reference site]

Screenshot: [embedded]

What to Copy:

Text alignment: [left/center/right]

Font hierarchy

Button placement

Navigation Bar

Components

Logo: [Position, size]

CTA Button: [Shape, color, glow effects]

Code Reference (from component library) ```tsx // Include actual component code from shadcn/21st.dev Hero Content Area Layout [Left/Right/Center aligned] [Split layout description] 3D Element (if applicable) Source: [Three.js / Sketchfab link] Position: [Where in layout] Animation: [Type of movement] Code: // Include Three.js or animation code Components from Libraries Primary Button Source: 21st.dev Style: [pill shaped, glow outline, etc.] Code: // Component code Background Effects Type: [Gradient, particles, grid, etc.] Source: [Library link] Code: // Effect code Animations Scroll Effects: [Parallax, fade-in, etc.] Hover States: [What elements animate] Entrance Animations: [Staggered, sequential, etc.] Critical: Be VERY granular. This is where premium separates from generic.

5. Style Guide (Living Document)

What: Single source of truth for all design specs. Purpose: Ensures consistency across the entire project. ```markdown

Style Guide

Design Philosophy

[Brief statement about the visual approach]

Target Audience

[Who this design serves]

Color Palette

Primary

  • Main: #[hex] - [Usage: CTAs, key highlights]
  • Light: #[hex] - [Usage: hover states]
  • Dark: #[hex] - [Usage: pressed states]

Neutral

  • Background: #[hex]
  • Surface: #[hex]
  • Border: #[hex]
  • Text Primary: #[hex]
  • Text Secondary: #[hex]

Accent

  • Success: #[hex]
  • Warning: #[hex]
  • Error: #[hex]

Do's and Don'ts

DO: [Guidance] DON'T: [Anti-patterns]

Typography

Font Families

  • Headlines: [Font name], [fallbacks]
  • Body: [Font name], [fallbacks]
  • Monospace: [Font name] (for code)

Scale

  • Display: [size]px / [line-height]
  • H1: [size]px / [line-height]
  • H2: [size]px / [line-height]
  • H3: [size]px / [line-height]
  • Body: [size]px / [line-height]
  • Small: [size]px / [line-height]

Spacing System

  • xs: [value]
  • sm: [value]
  • md: [value]
  • lg: [value]
  • xl: [value]
  • 2xl: [value]

Border Radius

  • sm: [value]
  • md: [value]
  • lg: [value]
  • full: 9999px

Shadows

[Shadow definitions]

Animation

  • Duration: [fast/medium/slow values]
  • Easing: [easing functions]
  • Motion Preferences: Respect prefers-reduced-motion

Component Patterns

[Common patterns used across the site]
Important
This is a LIVING document. AI should update it as learnings emerge.
6. Project Requirements Document (PRD)
What
Technical specification for the entire project.
Purpose
Tells AI exactly what tech to use and how.

Project Requirements Document

Project Overview [Brief description]

Tech Stack

Framework: [Next.js / Remix / etc.]

Styling: [Tailwind CSS / CSS Modules / etc.]

UI Components: [shadcn/ui, Radix, etc.]

Animation: [Framer Motion / GSAP / etc.]

3D: [Three.js / React Three Fiber]

Icons: [Lucide / Heroicons / etc.]

Dependencies ```json { "dependencies": { // List all required packages } } File Structure src/ ├── app/ │ └── page.tsx ├── components/ │ ├── ui/ # shadcn components │ ├── sections/ # Page sections │ └── 3d/ # Three.js components ├── lib/ │ └── utils.ts └── styles/ └── globals.css Design System See: style-guide.md Page Sections Section Spec File Priority Hero hero-section.md P0 Features features-section.md P1 [etc.] [etc.] [etc.] Responsiveness Mobile: 320px - 767px Tablet: 768px - 1023px Desktop: 1024px+ Performance Requirements LCP: < 2.5s FID: < 100ms CLS: < 0.1 Accessibility WCAG 2.1 AA compliance Keyboard navigation Screen reader support

7. Tasks Document

What: Step-by-step implementation plan. Purpose: Gives AI a clear execution path. ```markdown

Implementation Tasks

Phase 1: Project Setup

  • [ ] Initialize Next.js project
  • [ ] Install dependencies
  • [ ] Configure Tailwind CSS
  • [ ] Set up shadcn/ui
  • [ ] Create folder structure
  • [ ] Configure fonts
  • [ ] Set up color variables

Phase 2: Core Components

  • [ ] Build navigation bar
  • [ ] Create button variants
  • [ ] Set up typography components
  • [ ] Create layout components

Phase 3: Section Building

  • [ ] Build Hero section
  • [ ] Build Trust Logos section
  • [ ] Build Features section
  • [ ] [Continue for each section]

Phase 4: Polish

  • [ ] Add animations
  • [ ] Optimize images
  • [ ] Add loading states
  • [ ] Mobile responsiveness pass
  • [ ] Accessibility audit

Phase 5: Launch

  • [ ] Performance optimization
  • [ ] SEO metadata
  • [ ] Final review
    Component Resources
    shadcn/ui
    The foundational component library. Copy-paste components with full customization.
    Website:
    https://ui.shadcn.com
    Usage: Base components (buttons, inputs, cards, etc.)
    21st.dev
    Premium components built on top of shadcn/ui.
    Website:
    https://21st.dev
    Usage: Advanced components with animations
    Key Feature
    Each component includes: Preview Code to copy AI prompt for installation Three.js / React Three Fiber 3D graphics in the browser. Three.js Examples: https://threejs.org/examples/ Usage: Hero 3D elements, interactive backgrounds Sketchfab Community 3D models and animations. Website: https://sketchfab.com Usage: Download 3D assets for your hero sections Best Practices
  • Section Isolation Start a new chat for each section change: Cleaner context (no pollution from other sections) Cheaper (fewer tokens consumed) More focused results
  • Commit Per Section After each section is complete: git add . git commit -m "feat(landing): add [section-name] section" This allows easy rollback if iterations go wrong.
  • Include Reference Images Always paste screenshots in your prompts: AI can see exactly what you want Reduces ambiguity Faster convergence on the right design
  • Include Component Code When specifying a component from 21st.dev or shadcn: Copy the actual code Include it in your section spec AI can implement it exactly
  • Auto-Update Style Guide Create a rule file:

.cursorrules or similar When building a section and making design decisions that differ from the style guide, automatically update the style guide to reflect the new learnings. 6. Screenshot-to-Iteration When requesting changes: Take a screenshot of the current state Paste it in the prompt Describe what to change Reference the original inspiration if needed The $500 vs $5000 Difference Generic AI Output Premium Framework Output No context Full context artifacts Guessing what you want Following precise specs Inconsistent styling Living style guide Random components Curated component library No visual references Mood boards + screenshots Build everything at once Section-by-section isolation No iteration loop Define → Build → Review → Refine Prompt Templates Generate Style Guide Based on my mood board and design preferences in [website-sections folder] and in the [product-brief.md], create a style guide that includes: - Color palette (with usage guidance) - Typography scale - Component styles - Spacing system - Animation guidelines This will be our single source of truth for the entire project. Do not duplicate content from the section specs. Generate PRD Based on my [product-brief.md], [style-guide.md], and all section specs in [website-sections], create a Project Requirements Document that includes: - Project overview - Tech stack (extract from component code in specs) - Dependencies (extract from component libraries used) - Design system reference - Page sections with file references - File structure - Responsiveness requirements - Performance requirements Generate Tasks Based on the [style-guide.md] and [prd.md], create a tasks markdown file with: - Phase 1: Project setup tasks - Phase 2: Core component tasks - Phase 3: Section building tasks (one per section) - Phase 4: Polish tasks - Phase 5: Launch tasks Each task should be a checkbox item. Reference the specific spec files for each section. Build a Section Build the [Section Name] section. Reference files: - Style guide: @style-guide.md - Section spec: @[section-name]-section.md - PRD: @prd.md Follow the design specs exactly. Use the components specified. Match the reference images. Iterate on a Section [Paste screenshot of current state] Changes needed: 1. [Specific change 1] 2. [Specific change 2] Reference the original inspiration: [paste reference image] Attribution This framework is derived from the video "How I Build Premium $5k SaaS Websites with AI" by BuilderSpace (December 2025), which documents a 10-year professional design workflow adapted for AI-assisted development. Source: https://www.youtube.com/watch?v=WqSf0noa4hk "The prep work feels like work. You just want to start building. But that upfront context - the brief, the mood boards, the style guide, the section specs - that's what separates a $500 generic website from a $5,000 premium polished one."

← 返回排行榜