Website Blueprint Prompter (AI Agent) 🏗️

Transform any website into AI-ready development prompts — Analyze, extract design tokens, detect tech stack, and generate comprehensive blueprints for code-generation LLMs like GPT-4, Claude, and Gemini.

🎯 What This Actor Does

Website Blueprint Prompter is an AI-powered web scraping and analysis tool that:

1. Crawls any public website using Playwright (handles JavaScript-rendered content)
2. Extracts design tokens, color palettes, typography, and assets
3. Detects tech stack, frameworks, and features automatically
4. Generates comprehensive prompts ready for AI code generation

Perfect for developers, designers, and agencies who want to:

• Reverse-engineer website architecture for learning
• Generate starter templates for similar projects
• Create MVP prototypes faster with AI assistance
• Document website structures professionally

🚀 Key Features

Multi-Provider LLM Support

Works with 15+ LLM providers via LiteLLM integration:

• OpenAI: GPT-4o, GPT-4o-mini, GPT-4-turbo
• Anthropic: Claude 3.5 Sonnet, Claude 3 Opus
• Google: Gemini 2.0 Flash, Gemini 1.5 Pro
• Azure OpenAI: Your deployed models
• Groq: Llama 3.3 70B (ultra-fast inference)
• Mistral: Mistral Large, Codestral
• DeepSeek: DeepSeek Chat, DeepSeek Coder
• And more: Cohere, Together AI, OpenRouter, Ollama, Replicate, AWS Bedrock, Vertex AI

Smart Website Analysis

• Design Token Extraction: Colors, fonts, spacing scales, border radii
• Tech Stack Detection: Frameworks (React, Next.js, Vue), libraries, CDNs
• Feature Detection: Authentication, search, e-commerce, dashboards
• SEO Analysis: Meta tags, Open Graph, structured data
• Asset Discovery: Images, fonts, icons with license warnings

Developer-Ready Outputs

• Master Prompt: Complete website recreation prompt
• Sub-Prompts: Frontend, backend, CSS, database, CI/CD
• Project Skeleton: Ready-to-use starter files (ZIP)
• Development Roadmap: Phased implementation plan
• Cost Estimates: Time, team size, infrastructure costs

📋 Requirements

• LLM API Key: OpenAI, Anthropic, Google, or any supported provider
• Target URL: Any public website you want to analyze
• Apify Account: Free tier works for small sites (under 50 pages)

📥 Input Configuration

Field	Type	Required	Default	Description
website_url	string	✅	—	Target website URL to analyze
llm_provider_id	string	✅	—	Provider: openai, anthropic, google, azure, groq, mistral, deepseek, cohere, together_ai, openrouter, ollama, replicate, huggingface, bedrock, vertex_ai
model_id	string	✅	—	Model ID (e.g., gpt-4o, claude-3-5-sonnet-20241022, gemini-2.0-flash)
model_api_key	string	✅	—	Your API key for the LLM provider
max_pages	integer	❌	50	Maximum pages to crawl (1-500)
include_assets	boolean	❌	true	Extract and analyze images/fonts
respect_robots	boolean	❌	true	Follow robots.txt restrictions
output_depth	string	❌	detailed	Output detail: mvp or detailed
model_api_base	string	❌	—	Custom API endpoint (for Azure, Ollama, etc.)
azure_api_version	string	❌	—	Azure OpenAI API version

Example Input (OpenAI)

{
    "website_url": "https://example.com",
    "llm_provider_id": "openai",
    "model_id": "gpt-4o",
    "model_api_key": "sk-your-api-key-here",
    "max_pages": 50,
    "include_assets": true,
    "output_depth": "detailed"
}

Example Input (Anthropic Claude)

{
    "website_url": "https://example.com",
    "llm_provider_id": "anthropic",
    "model_id": "claude-3-5-sonnet-20241022",
    "model_api_key": "sk-ant-your-api-key-here",
    "max_pages": 30,
    "output_depth": "detailed"
}

Example Input (Google Gemini)

{
    "website_url": "https://example.com",
    "llm_provider_id": "google",
    "model_id": "gemini-2.0-flash",
    "model_api_key": "your-google-api-key",
    "max_pages": 25
}

📤 Output Files

The Actor generates 5 comprehensive output files in the Key-Value Store:

File	Format	Description
blueprint_prompt_package.txt	Text	Complete prompt package — paste directly into ChatGPT, Claude, or any code-gen LLM
blueprint.json	JSON	Structured machine-readable data for programmatic access
blueprint.md	Markdown	Human-friendly report with tables and formatting
repo_skeleton.zip	ZIP	Starter project with package.json, config files, folder structure
assets_manifest.csv	CSV	All discovered assets with URLs and license warnings

What's Inside the Blueprint?

Master Prompt

A comprehensive, ready-to-use prompt that includes:

• Project setup and folder structure
• Core page templates and routing
• Component architecture guidelines
• Styling system with design tokens
• Key features to implement
• Data models and API structure

Sub-Prompts (5 Specialized Prompts)

1. Frontend Component Architecture — React/Vue component breakdown
2. CSS Theme & Design System — Tailwind/CSS variables setup
3. Backend API Scaffolding — RESTful API endpoints
4. Database Schema — Data models and relationships
5. CI/CD Configuration — Deployment pipeline setup

Development Roadmap

• Phase 1: Foundation (1-2 weeks)
• Phase 2: Core Pages (2-3 weeks)
• Phase 3: Features (2-4 weeks)
• Phase 4: Polish & Launch (1-2 weeks)

Estimates

• Team size recommendations
• Development time estimates
• Monthly infrastructure costs

📊 Example Analysis Output

Design Tokens Detected

Colors:
├── #3B82F6 (primary blue)
├── #10B981 (secondary green)
├── #1F2937 (text dark)
└── #F9FAFB (background light)

Typography:
├── Inter (body text, Google Fonts)
└── Poppins (headings, Google Fonts)

Spacing Scale:
├── 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px

Tech Stack Detection

Framework:     Next.js (90% confidence)
UI Library:    React (95% confidence)
Styling:       Tailwind CSS (85% confidence)
Analytics:     Google Analytics 4 (90% confidence)
Hosting:       Vercel (75% confidence)
CDN:           Cloudflare (80% confidence)

Features Detected

✓ User Authentication (OAuth, email/password)
✓ Search Functionality (full-text search)
✓ E-commerce Cart (Stripe integration likely)
✓ Admin Dashboard (protected routes)
✓ Blog/CMS (dynamic content)

⚖️ Legal & Ethical Use

This Actor is designed with legal safety as a priority:

✅ What This Tool Does

• Respects robots.txt by default
• Extracts structural patterns, not copyrighted content
• Flags proprietary assets for replacement
• Provides clear legal warnings in output
• Focuses on learning and inspiration

❌ What This Tool is NOT For

• Copying websites without permission
• Scraping private or paywalled content
• Bypassing authentication or paywalls
• Any illegal or unethical use

Legal Disclaimer

The output is intended for educational purposes and original project creation. Always:

• Replace all proprietary images with licensed alternatives
• Write original copy and content
• Respect intellectual property rights
• Check terms of service before scraping

🔧 Technical Details

Built With

• OpenAI Agents SDK (Python) — Multi-step AI orchestration
• LiteLLM — Universal LLM provider interface
• Playwright — JavaScript-rendered page scraping
• Crawlee — Scalable web crawling framework
• Pydantic — Data validation and serialization

Performance

• Crawls ~10-20 pages per minute
• Handles JavaScript-heavy SPAs
• Automatic retry on failures
• Respects rate limits

💡 Use Cases

1. Developers: Generate starter code for client projects
2. Agencies: Rapid prototyping and proposals
3. Students: Learn how professional websites are built
4. Startups: MVP development acceleration
5. Designers: Extract design systems and tokens

🆘 Support

• Issues: Open an issue on the Actor page
• Questions: Contact via Apify support
• Updates: Star the Actor for notifications

📄 License

MIT License — Free for personal and commercial use.

---

Keywords: website scraper, AI code generation, website cloner, design token extractor, tech stack detector, GPT-4 prompts, Claude prompts, Gemini prompts, web development automation, Apify Actor, website analysis, reverse engineering, MVP generator, prototype builder, LiteLLM, OpenAI Agents SDK, Playwright scraper