magicdesign-studio

▓   ▓  ▓▓▓   ▓▓▓  ▓▓▓  ▓▓▓   ▓▓▓▓ ▓▓▓▓▓ ▓   ▓ ▓▓▓▓  ▓▓▓  ▓▓▓
▓▓ ▓▓ ▓   ▓ ▓      ▓  ▓     ▓       ▓   ▓   ▓ ▓   ▓  ▓  ▓   ▓
▓ ▓ ▓ ▓▓▓▓▓ ▓  ▓▓  ▓  ▓      ▓▓▓    ▓   ▓   ▓ ▓   ▓  ▓  ▓   ▓
▓   ▓ ▓   ▓ ▓   ▓  ▓  ▓         ▓   ▓   ▓   ▓ ▓   ▓  ▓  ▓   ▓
▓   ▓ ▓   ▓  ▓▓▓  ▓▓▓  ▓▓▓  ▓▓▓▓    ▓    ▓▓▓  ▓▓▓▓  ▓▓▓  ▓▓▓

Multi-harness toolkit for AI agents to create anti-slop landings. Works with Pi, Claude, Codex, and OpenCode.

What is this?

A complete system for creating landing pages that don't look like AI-generated garbage. Includes:

• 20+ anti-slop patterns — Detect and fix generic AI design
• 69 reference sites — Real-world design patterns
• 62 token sets — Extracted design tokens
• 6 component templates — Anti-slop HTML/Tailwind templates
• GSAP motion recipes — Animation patterns
• Copy generator — Anti-slop copywriting
• Quality auto-fix — Detect and fix issues automatically

Quick Start

# Install globally
npm install -g magicdesign-studio

# Initialize in your project (auto-detects IDE)
npx magicdesign-studio init

Auto-Detection

The init command auto-detects your IDE and configures accordingly:

| IDE | Detection | Configuration | |-----|-----------|---------------| | Pi | .pi/ directory | Skills + prompts + design-kit | | Claude | .claude/ or CLAUDE.md | Skills + prompts + design-kit | | Codex | .codex/ or codex.json | Skills + prompts + design-kit | | OpenCode | .opencode/ directory | Skills + prompts + design-kit |

Skill Directories

After installation, skills are available in multiple locations:

.opencode/skills
.claude/skills
.codex/skills
.pi/skills
~/.config/opencode/skills
~/.claude/skills
~/.codex/skills
~/.pi/skills

Tools

# Generate anti-slop copy
npx magicdesign copy-generate hero '{"business":"Restaurant","audience":"families"}'

# Generate GSAP animations
npx magicdesign motion-generate all '{}'

# Create landing from components
npx magicdesign build-create '{"title":"Landing","sections":[...]}'

# Auto-fix anti-slop issues
npx magicdesign quality-fix fix ./landing.html

# Analyze reference sites
npx magicdesign reference-fetch analyze https://example.com

# Extract design tokens
npx magicdesign token-generate batch

Skills

| Skill | Purpose | |-------|---------| | landing-brand-studio | Orchestrate brand strategy, benchmark, architecture, motion, and audit | | visual-benchmark | Analyze visual references and translate to design decisions | | motion-direction | Define animation system, stack, recipes, and performance rules | | landing-copy | Write conversion-focused copy with CTA, proof, and FAQs | | landing-builder | Build the final landing and run review loop | | cro-audit | Audit for conversion: clarity, CTA, proof, objections, friction | | quality-audit | Audit for quality, premium-feel, and AI-slop risk |

Anti-Slop Rules

The system includes 20+ patterns to detect and fix:

1. AI SaaS Default Look (purple gradients)
2. Text Gradient on H1
3. AI-Powered Badge Decorative
4. Generic AI Hero
5. Equal-Weight Feature Grid
6. Card Soup
7. Uniform Border-Radius
8. Tailwind Spacing Without Criteria
9. Default Tailwind Shadows
10. Grays Without Temperature
11. Inter/Roboto Without Intent
12. Everything Centered
13. Perfect Symmetry
14. Decorative Icons Without Function
15. Emojis as False Energy Signal
16. Invented Data
17. Fake "Trusted By"
18. Automatic 3-Column Pricing
19. Generic CTA + Ghost Button
20. Default Animations

Project Structure

After init, your project will have:

your-project/
├── .pi/                    # Pi skills, prompts, design-kit
│   ├── skills/
│   ├── prompts/
│   └── design-kit/
├── .claude/                # Claude skills, prompts, design-kit
│   ├── skills/
│   ├── prompts/
│   └── design-kit/
├── .codex/                 # Codex skills, prompts, design-kit
│   ├── skills/
│   ├── prompts/
│   └── design-kit/
├── .opencode/              # OpenCode skills, prompts, design-kit
│   ├── skills/
│   ├── prompts/
│   └── design-kit/
├── tools/                  # CLI tools
│   ├── copy-generator/
│   ├── motion-generator/
│   ├── build-executor/
│   ├── quality-autofix/
│   ├── reference-fetcher/
│   ├── token-generator/
│   └── codepen-fetcher/
└── README.md

License

Apache-2.0