web-build-design

Builds Laravel marketing pages, pricing tables, and trial flows with Blade, Livewire, and Tailwind.

Updated Jun 17, 2026
One-click install
npx skills add https://github.com/ndestates/ndestates-website --skill web-build-design-ndestates
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-build-design
Source: https://github.com/ndestates/ndestates-website/tree/main/.copilot/skills/web-build-design
Command: npx skills add https://github.com/ndestates/ndestates-website --skill web-build-design-ndestates

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building conversion-focused marketing sites, pricing pages, and license/trial flows for a Laravel SaaS product requires consistent design decisions across many pages; this Skill encodes the design system, page structure, and integration patterns so every landing page and download flow follows the same standard. ## Core Features & Use Cases - Marketing Page Structure: Defines the home, products/pricing, downloads, and licensing pages with hero sections, trust bars, and CTA patterns inspired by Creative Tim SaaS aesthetics. - Pricing & Trial UX: Specifies 3-column pricing cards with a highlighted tier, email-only trial claim forms, and instant license key display after purchase or trial signup. - PayPal & Livewire Integration: Guides PayPal purchase flows, Livewire components like TrialForm and PricingToggle, and coordination with a Filament 5 admin for Products and Licenses. - Use Case: When asked to redesign the pricing page or add a trial claim modal for the NDestates-io site, the Skill provides the exact layout conventions, Tailwind classes, Blade component structure, and controller patterns to implement it consistently. ## Quick Start Ask the AI to redesign the products and pricing page with a three-tier pricing table and a trial signup form following this Skill's design guidelines.

Frequently Asked Questions about web-build-design

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

FAQPage Schema
How do I build a SaaS pricing page with Laravel and Tailwind?▼

Create a Blade view with a 3-column pricing card layout using Tailwind, highlight the middle tier with a ribbon, and add inline trial and PayPal purchase forms that POST to a controller. Livewire components can handle interval toggles and form validation.

How to implement a free trial flow with license keys in Laravel?▼

Capture the user's email in a trial form, create a License record with status trial and an expiry date, then flash the license key on the download page. Livewire TrialForm components provide real-time validation feedback.

Can I use Tailwind CDN for Laravel marketing pages?▼

Yes, the Tailwind Play CDN works in the marketing layout for rapid prototyping with zero build step. For production, install Tailwind via npm with Vite, extract styles to app.css, and configure purging.

Should marketing pages use Filament or Blade in Laravel?▼

Filament 5 is reserved for back-office admin resources like Products and Licenses. Public marketing pages should use Blade, Livewire, and Tailwind for faster, conversion-focused UI independent of admin styling.

How does PayPal purchase fulfillment work for software licenses?▼

The purchase form collects an email and calls the PayPal Orders API; on success or webhook confirmation, a License record is created with status active and a one-year expiry. The license key is shown immediately with download instructions.