landing-kit-building
Anti-slop landing page framework for AI coding agents. 15 skills freeze design decisions once (typography, motion, icons, layout), then enforce them at build time. Vanilla HTML/CSS/JS. Vercel-ready. Print-quality typography. No frameworks, no dependencies.
Landing Kit
> Anti-slop landing page framework for AI coding agents. Vanilla HTML/CSS/JS.
> Freeze design decisions once. Ship in hours, not weeks.
[](LICENSE)
---
Why
Every AI-generated landing looks the same: gradients everywhere, emoji, mixed icon libraries, center-aligned everything, five different font weights. This kit blocks that at the source.
Every design decision is frozen in DESIGN-LOCK.md before the first line of CSS. No mid-build "let me just try…" No more three-week iterations because the client changed their mind about a radius.
The whole system is 15 AI skills that interview the client, analyze the copy, freeze the design, pick the icons, generate the tokens, assemble the sections, and refuse to save code that violates any of the rules.
No frameworks. No dependencies. Just tokens.css and semantic HTML.
---
What's inside
``
landing-kit/
├── CLAUDE.md Protocol for the AI agent + workflow + 7 rules
├── DESIGN.md Final design spec (fills as work progresses)
├── DESIGN-LOCK.md Design constitution — frozen at /design-lock
├── README.md This file
│
├── brief/ 9-file briefing form + brief/blocks/ configs
├── inbox/ Client materials (gitignored — private)
├── references/ Design references by aspect (gitignored — private)
├── boilerplate/ Empty site skeleton to copy into each new project
└── .claude/skills/ 15 AI skills (see the pipeline below)
Each folder has its own README. Read as needed.
---
Quick start (new landing)
Step 1. Clone this repo.
`bash`
git clone https://github.com/<your-user>/landing-kit.git my-new-landing
cd my-new-landing
Step 2. Copy the boilerplate.
`powershell`
Copy-Item -Recurse boilerplate\site .\site
Copy-Item boilerplate\vercel.json .\vercel.json
Step 3. Fill the brief.
Open brief/README.md. First question — desktop-first or mobile-first; everything downstream depends on it./brief
Alternative: run — the skill walks you through the questions in a dialog and fills the files for you.
Step 4. Drop client materials into inbox/.
Texts → inbox/texts/ · Media → inbox/media/ · Brand → inbox/brand/ · Notes → inbox/notes/
Step 5. Drop references into references/ by aspect.
Like the animation on site X → references/animation/ · The structure on site Y → references/structure/ · The palette on site Z → references/color/.references/README.md
Build a "Frankenstein" from the best parts — see .
Step 6. Run the pipeline.
Open the project in Claude Code (or any Anthropic Agent SDK client that reads .claude/skills/) and run the 14 skills in order:
`
/brief survey + brief (skip if you filled it manually)
/inbox sort client materials
/copy-analyze text analysis → strengths + structure recommendations
/refs parse references by aspect + approved-manifest
/design-lock FREEZE the design constitution (point of no return)
/blocks config for interactive blocks (form, popup, etc.)
/animation motion brief tied to your references
/tokens generate site/css/tokens.css from DESIGN-LOCK
/media media pipeline (WebP/AVIF, resize, posters)
/icons hybrid icons: libraries + AI fallback with geometry validation
/build section assembly (guards against slop + hardcode + manifest coverage)
/mobile mobile adaptation with hardened rules + safety check
/audit pre-ship checks: anti-slop, perf, a11y, typography, references
/deploy Vercel + optional Google Cloud Secret Manager for keys
Plus one standalone tool, callable anytime:`
/typography re-apply widow/orphan rules to any saved HTML
---
The 7 rules
Every session starts with these baked in (see CLAUDE.md):
1. Strict isolation — edit only files named explicitly. No "improve the neighbor".tokens.css
2. DESIGN-LOCK.md is frozen — locked fields don't change without an explicit override + decision-log entry.
3. No hardcode — colors, sizes, easings, durations all come from . Hardcoded px/#hex/ms is blocked.calc()
4. Algorithmic approach — paddings via Flexbox/Grid//vw. No "by eye".git add
5. User owns commits — the agent never runs , commit, push, reset./typography
6. Typography discipline (English) — no articles/prepositions/conjunctions at line end, no orphans. Enforced by and /audit./refs
7. References priority — every element approved in , /design-lock, /animation, /icons becomes a required entry in references/approved-manifest.md. /build refuses to save a section that drops one. Silent drops are the failure mode this rule exists to prevent.
---
Anti-AI-slop enforcement (auto-checked by /audit)
- ❌ Emoji in production HTML (unless in the brand book)
- ❌ More than one icon library
- ❌ Gradients outside DESIGN-LOCK
- ❌ More than one radius across the site
- ❌ More than 2 font-weights
- ❌ Center-align on more than 50% of blocks
- ❌ Decorative shadows without function
- ❌ More than 5 section types (repeat, don't invent)
- ❌ Hardcoded values that belong in tokens
- ❌ Rounded "pill" buttons if pill isn't in DESIGN-LOCK
- ❌ Line ending on a short English word
- ❌ Approved manifest items missing from the build
---
Skills reference
| Skill | Purpose | Blocks on | Outputs |/brief
|---|---|---|---|
| | Interactive 9-file survey | — | brief/00-08.md |/inbox
| | Sort & validate client materials | /brief done | inbox/inbox-report.md |/copy-analyze
| | Deep copy analysis for the niche | brief/01+02 filled | brief/copy-analysis.md |/refs
| | Parse references + build approved-manifest | brief/05 filled | references/proposal.md, references/approved-manifest.md |/design-lock
| | Walk 9 DESIGN-LOCK sections, freeze each | brief/00,01,05 + copy-analysis.md | DESIGN-LOCK.md LOCKED, manifest appended |/blocks
| | Config for interactive elements | brief/07 checked | brief/blocks/*.md |/animation
| | 6-section motion brief tied to references | DESIGN-LOCK LOCKED | brief/animation.md, manifest appended |/tokens
| | Sole writer of tokens.css | DESIGN-LOCK LOCKED, animation.md exists | site/css/tokens.css |/media
| | Photo → WebP/AVIF; Video → WebM+MP4 | /inbox done | site/media/, srcset snippets |/icons
| | Hybrid library+AI icons with geometry validation | DESIGN-LOCK LOCKED, tokens ready | site/media/icons/, manifest appended |/build
| | Assemble sections (guards + typography pass + manifest coverage) | tokens.css + copy-analysis + animation + icons | site/index.html, site/css/*.css |/mobile
| | Mobile adaptation + headless safety check | /build done, desktop-first only | site/css/responsive.css, site/_mobile-check-report.md |/audit
| | 9-category pre-ship checklist | /build + /mobile done | site/_audit-report.md |/deploy
| | Vercel + optional GCP Secret Manager | /audit verdict OK | site/_deploy-log.md |/typography
| | Standalone widow/orphan pass on any HTML | — | in-place rewrite |
---
Requirements
- Claude Code (or any Anthropic Agent SDK client that reads .claude/skills/)./media
- Node.js 18+ for the pipeline (sharp, ffmpeg wrappers)./deploy
- Vercel CLI for .gcloud
- Optional: CLI for /deploy with Google Cloud Secret Manager.
---
Installation
`bash`
git clone https://github.com/<your-user>/landing-kit.git
cd landing-kit
Open the folder in Claude Code. The skills in .claude/skills/ are auto-discovered.
Copy boilerplate/site/ into each new landing project you build — that's the empty skeleton the pipeline fills.
---
Philosophy
Every AI-generated landing looks the same because AI defaults to the same aggregate. A pinch of gradient here, a "modern" pill button there, seven font weights because the model doesn't know which two to pick. This kit refuses the aggregate.
The design constitution is frozen before the first line of CSS. Not because rigidity is a virtue, but because iterations inside a build are the actual bottleneck. Move the decisions to the top; then the build is mechanical.
Every rule is enforced by a skill, not a comment. "Don't hardcode colors" is a wish. /build grepping for hex codes and refusing to save is a rule.
The client's brand wins. References approved with the user become required elements in the build. /build won't ship without them. This is the single feature that separates working with an AI agent from watching one wander.
---
Contributing
Issues and PRs welcome. Before opening a PR, please read CLAUDE.md` — the 7 rules apply to contributions too.
---
License
[MIT](LICENSE)
``bash`
git clone https://github.com/<your-user>/landing-kit.git
cd landing-kit
Open the folder in Claude Code. The skills in .claude/skills/ are auto-discovered.
Copy boilerplate/site/` into each new landing project you build — that's the empty skeleton the pipeline fills.
---
- Claude Code (or any Anthropic Agent SDK client that reads .claude/skills/).
- Node.js 18+ for the /media pipeline (sharp, ffmpeg wrappers).
- Vercel CLI for /deploy.
- Optional: gcloud CLI for /deploy with Google Cloud Secret Manager.
---