WebsiteFactory

WebsiteFactory

Professional website creation with AI-generated 3D assets. Two modes: Quick (15 min, ~$5) and Premium (1-2 hrs, ~$10). Produces $5K-$15K agency-level websites.

Customization

Before executing, check for user customizations at: ${PAI_USER_DIR}/SKILLCUSTOMIZATIONS/WebsiteFactory/

Workflow Routing

Workflow	Trigger	File
QuickSite	"build website", "quick site", "one-shot website", "landing page"	Workflows/QuickSite.md
PremiumSite	"premium website", "brand website", "client website", "portfolio site"	Workflows/PremiumSite.md
GenerateAssets	"generate assets", "hero video", "website animation", "video background"	Workflows/GenerateAssets.md
ComponentSourcing	"source components", "21st.dev", "codepen", "monae", "find components", "component library"	Workflows/ComponentSourcing.md
PolishChecklist	"polish", "craft details", "loading animations", "counter animation", "glassmorphism", "shimmer", "ticker", "scroll progress"	Workflows/PolishChecklist.md
VisualEditorLoop	"visual editor", "stitch redesign", "paper.design", "pencil.dev", "screenshot iterate", "visual iterate"	Workflows/VisualEditorLoop.md
WebGLFrontier	"3D website", "WebGL", "three.js", "threejs", "particles", "3D background", "shader"	Workflows/WebGLFrontier.md
BrandedBuild	"branded page", "mj brand", "portfolio page", "project showcase", "branded prototype", "career page"	Workflows/BrandedBuild.md
DeploySite	"deploy", "make it live", "netlify deploy", "push to netlify"	Workflows/DeploySite.md

Quick Reference

• Taste Skill: npx skills add Leonxlnx/taste-skill — GitHub
• Nano Banana 2: Google Gemini 3.1 Flash — images ($0.04-0.15/img)
• Seedance 2.0: Video loops via fal.ai API — hero backgrounds (script: Projekt-Factory/Scripts/seedance-video.py)
• Kling 3.0: 3D product video via fal.ai/klingai — scroll animations
• Netlify: Free hosting + CDN — netlify deploy --prod --dir .

Full Workflow Documentation:

• Detailed spec: ~/projects/KI-Roadmap/Projekt-Factory/Specs/Website-Factory-Workflow.md
• Portfolio spec: ~/projects/KI-Roadmap/Projekt-Factory/Specs/BA5-Portfolio-Website-Spec.md

Design Framework

Parent skill: ${SKILLS_HOME}/Frontend/FrontendDesign/SKILL.md — read Core Principles (Design Thinking, Aesthetics Guidelines, Anti-AI-Slop Rules) before any HTML generation. WebsiteFactory workflows reference this as a mandatory pre-flight.

Aesthetic Presets (pick ONE)

Skill	Use For
taste-skill	Default — core design rules
soft-skill	Luxury / premium brands
minimalist-skill	SaaS, dashboards
brutalist-skill	Creative agencies
redesign-skill	Upgrading existing sites

3-Dial Parameters

Parameter	Range	Description
DESIGN_VARIANCE	1-10	Layout creativity
MOTION_INTENSITY	1-10	Animation density
VISUAL_DENSITY	1-10	Content per viewport

Examples

Example 1: Quick portfolio site

User: "Build me a portfolio website for my AI automation projects"
→ Invokes QuickSite workflow
→ Installs Taste Skill, generates one-shot HTML
→ Creates placeholder hero (CSS gradient)
→ Responsive, dark theme, professional

Example 2: Premium client website with video

User: "Create a premium website for an architecture firm with animated hero"
→ Invokes PremiumSite workflow
→ Phase 0: Brand Soul + Moodboard + Palette + Logo
→ Phase 1: Claude Code + Taste Skill (soft-skill)
→ Phase 2: Nano Banana hero image → Seedance loop video
→ Phase 3: Integration + optimize + Netlify deploy

Example 3: Generate video assets for existing site

User: "Generate a hero video for my website"
→ Invokes GenerateAssets workflow
→ Guides through Nano Banana → Seedance/Kling pipeline
→ Provides integration prompt for Claude Code