# ๐๏ธ Landing Craft
**Turn any product idea into a stunning landing page โ powered by 57 city-inspired design systems.**
[](https://github.com/can4hou6joeng4/landing-craft/actions/workflows/ci.yml)
[](https://github.com/can4hou6joeng4/landing-craft/releases)
[](LICENSE)
[](https://github.com/can4hou6joeng4/landing-craft)
[๐ Live Demo](https://can4hou6joeng4.github.io/landing-craft/) ยท [๐ Changelog](CHANGELOG.md) ยท [๐ค Contributing](CONTRIBUTING.md) ยท [๐จ๐ณ ไธญๆ](README.zh-CN.md) ยท [๐ฏ๐ต ๆฅๆฌ่ช](README.ja.md)
---
A [Claude Code](https://claude.ai/claude-code) skill. Describe your product, pick a city aesthetic, get a production-ready site with GSAP animations, clip-path dividers, SVG textures, and real depth.
> Not another card-grid template. Every output is a design artifact.
## ๐ก Why Landing Craft?
Most generators give you the same Bootstrap-like layout with swapped colors. Landing Craft takes a different approach โ **each of the 57 city styles is a complete design system**: unique fonts, palettes, textures, motion curves, and icon aesthetics. Kyoto feels nothing like Lagos, and Lagos feels nothing like Palm Springs.
## โก Quick Start
```bash
npx skills add can4hou6joeng4/landing-craft -a claude-code -g -y
```
Then tell Claude:
```
Build me a landing page for my SaaS product
```
The skill walks you through city selection, layout options, and generates a complete site:
```
your-product/
โโโ index.html # Nav, hero, sections, footer
โโโ style.css # Design tokens, textures, clip-paths
โโโ main.js # GSAP ScrollTrigger animations
โโโ assets/icons.svg # SVG sprite in the city aesthetic
```
## โจ Features
๐จ **Design System**
- 57 city aesthetics โ unique fonts, colors, textures, and motion per city
- 3 color tones โ original city / dark luxe / bright modern
- ๐ Dark mode toggle with localStorage persistence
๐งฉ **Page Sections**
- 7 hero ยท 6 features ยท 6 testimonials ยท 4 nav styles
- 3 footer ยท 3 form ยท 6 extra sections (team, stats, gallery, timeline...)
- 4 section divider styles โ geometric / organic / blend / minimal
๐ **Workflow**
- ๐ฅ๏ธ Interactive browser-based city picker โ no CLI menus
- ๐ Multi-page support โ About, Contact, Blog sub-pages
- ๐ One-click deploy to Netlify, Vercel, or GitHub Pages
- ๐ป Cross-platform โ Python 3.6+ / macOS / Windows PowerShell
## ๐ ๏ธ How It Works
1. **Describe** โ product name + one-line pitch
2. **Pick** โ browse 57 city style cards in your browser
3. **Choose** โ hero, nav, color tone, transitions
4. **Generate** โ full site written to your project
5. **Preview** โ auto-opens in browser
6. **Deploy** โ optional one-click publish
## ๐ฃ๏ธ Trigger Phrases
```
ๅธฎๆๅไธไธช่ฝๅฐ้กต ยท ๅไธช้ฆ้กต ยท ไบงๅๅฑ็คบ้กต ยท ๆดปๅจ้กต ยท ่ฅ้้กต ยท ๅฎ็ฝ้ฆ้กต
landing page ยท product page ยท promo page ยท make me a homepage
```
## ๐ Project Structure
Expand file tree
```
SKILL.md # Skill definition
assets/
โโโ style-preview-template.html # 57-city interactive picker
โโโ options-preview-template.html # Layout/nav/color chooser
โโโ clip-paths.css # Section divider library
โโโ gsap-snippets.js # GSAP animation patterns
โโโ textures.css # CSS-only background textures
โโโ sections/ # Pre-built section templates
โ โโโ hero-variants.html # 7 hero styles (AโG)
โ โโโ features-variants.html # 6 feature layouts (AโF)
โ โโโ testimonial-variants.html # 6 testimonial styles (AโF)
โ โโโ footer-variants.html # 3 footer styles
โ โโโ form-variants.html # 3 form sections
โ โโโ extra-variants.html # 6 extra sections
โ โโโ page-variants.html # Multi-page templates
โ โโโ conversion-variants.html # Pricing, FAQ, CTA
โโโ scripts/
โโโ run_preview.py # Cross-platform preview launcher
โโโ run_preview.ps1 # Windows PowerShell launcher
โโโ get_city_tokens.py # City color token extractor
โโโ extract_variant.py # Section variant extractor
references/
โโโ city-styles.md # 57 city design parameters
โโโ nav-catalog.md # 4 nav implementations
โโโ imagery-derivation.md # Non-city description โ tokens
โโโ product-demo-hero.md # Product demo hero guide
evals/
โโโ evals.json # Evaluation test cases
```
## ๐ฏ Design Philosophy
1. ๐ซ **No `#ffffff` backgrounds** โ warm neutrals, cool tints, or deep darks
2. ๐ค **Two typefaces minimum** โ display headlines + clean sans body
3. ๐ผ๏ธ **SVG as design core** โ not decorative sprinkles
4. ๐๏ธ **GSAP depth** โ parallax layers, sticky panels, staggered reveals
5. ๐ **No clone grids** โ every section has visual hierarchy
## ๐ License
[MIT](LICENSE)