design-system

Generate JSON design system configurations for landing pages from niche and tier inputs.

Updated Mar 21, 2026
One-click install
npx skills add https://github.com/yrlanrteixeira/landcraft --skill design-system-yrlanrteixeira
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/yrlanrteixeira/landcraft/tree/main/skills/design-system
Command: npx skills add https://github.com/yrlanrteixeira/landcraft --skill design-system-yrlanrteixeira

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides an interactive assistant to build a design system for landing pages, suggesting color palettes, typography, sections, and visual configurations based on the niche and tier. It outputs a partial JSON configuration ready for the '/generate-lp' command.

Core Features & Use Cases

  • Design System Assistant: Guides the user in constructing a design system for their landing page, suggesting colors, typography, sections, and visual effects suitable for the chosen niche and tier.
  • Output JSON Configuration: Produces a JSON configuration partial compatible with the '/generate-lp' command, which includes identity, design, sections, visuals, and output settings.
  • Use Case: A user can create a design system for a landing page for a barbershop by providing the niche (barbearia) and tier (premium), and the Skill will suggest a color palette, typography, sections, and visual configurations.

Quick Start

Use the /design-system command to build a design system for your landing page, specifying the niche and tier, e.g., /design-system barbearia premium.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I create a design system for a landing page based on my industry?

You can generate a landing page design system by specifying your niche and tier, such as premium or basic. The assistant then outputs a partial JSON configuration containing identity, sections, and visual settings.

What is a landing page design system configuration?

A landing page design system configuration is a structured JSON output that defines your site's identity, color palette, typography, sections, and visual effects based on a specific niche and quality tier.

Can I generate a color palette and typography for a specific landing page niche?

Yes, you can generate a color palette and typography by inputting your target niche and tier. The system interactively suggests visual configurations and design elements suitable for that specific market.

How do I configure visual sections for a premium landing page?

To configure visual sections for a premium landing page, input your niche and set the tier to premium. The assistant will interactively guide you through selecting appropriate sections and visual effects.

Does the design system output work directly with landing page generation commands?

Yes, the design system output works directly with landing page generation commands by producing a partial JSON configuration ready for the generate-lp command, requiring your interaction for final design choices.