AI Skill Report Card
Architecting Website Blueprints
Generates comprehensive, professional website blueprints including page structure, section-by-section content strategy, animation/motion design recommendations, and visual asset prompts. Use when a user requests a website plan, sitemap, UX blueprint, or design brief for a business, product, or personal brand — with or without a specified budget.
Quick Start14 / 15
When a user gives a website topic (e.g., "I need a website for my fitness coaching business"), immediately produce a full blueprint — do not ask clarifying questions unless the topic itself is unintelligible. Default to premium/high-end standard if no budget is given.
Output format for every request:
- Page list (with rationale for extra pages)
- Section-by-section breakdown per page
- Budget-scaled feature notes
Recommendation▾
Add an example for the $10k+ premium tier with advanced animation vocabulary to show full range across all three tiers
Workflow14 / 15
Progress:
- Step 1: Identify business type, target audience, and primary conversion goal from the topic given
- Step 2: Determine budget tier (none stated = premium default; state assumption explicitly)
- Step 3: Define page structure — core 4 pages + 1-2 high-value additions relevant to the niche
- Step 4: Break down each page into sections with layout/content, animation, and visual asset prompt
- Step 5: Scale complexity of animations/features to the budget tier
- Step 6: Present final blueprint in clean, structured format
Step 1: Identify Core Context
Extract or infer: industry, target audience, tone (corporate/playful/luxury/technical), and main CTA (book a call, buy product, get quote, etc.). If topic is vague, make a reasonable professional assumption and state it upfront in one line — don't stall the output waiting for clarification.
Step 2: Budget Tiers (Smart Defaults)
| Tier | Trigger | Animation Level | Feature Examples |
|---|---|---|---|
| No budget stated | Default | High-end, agency-standard | Scroll-triggered fade-ins, smooth hover states, subtle parallax, polished micro-interactions |
| ~$4k | User states low/mid budget | Moderate, high-impact | Fade-in on scroll, hover transitions, simple sticky nav, basic parallax hero |
| $10k+ | User states high budget | Advanced, custom | 3D/WebGL elements, custom cursor interactions, complex scroll-linked animations (GSAP/Framer Motion), interactive product configurators, custom illustrations/motion graphics |
Always state which tier is being used at the top of the output.
Step 3: Standard Page Structure
Always include:
- Home
- Services / Solutions
- About Us
- Contact Us
Then add 1-2 niche-specific high-value pages. Examples:
- E-commerce → Shop, Product Detail
- Agency/Consulting → Case Studies, Pricing
- SaaS → Pricing, Integrations/Features
- Personal brand → Portfolio, Testimonials/Blog
Step 4: Section Breakdown Template
For every section on every page, use this exact structure:
### [Section Name]
- **Layout & Content Strategy:** [headline direction, body copy purpose, CTAs, key elements]
- **Animation & Motion Design:** [specific interaction/effect scaled to budget tier]
- **Visual Asset Prompt:** [ready-to-use image/video generation prompt, styled and specific]
Step 5: Budget-Scaled Animation Vocabulary
- Premium default / $10k+: parallax scroll, scroll-linked reveals, magnetic buttons, cursor-follow effects, 3D tilt cards, animated SVG paths, video backgrounds with overlay text reveal
- ~$4k: fade-in-on-scroll, hover scale/shadow, sticky header shrink, simple accordion/tab transitions, count-up numbers
Recommendation▾
Include a brief pitfall/edge case for handling truly ambiguous topics beyond just budget clarification
Examples17 / 20
Example 1: Input: "Website for a boutique architecture firm, no budget mentioned" Output:
Assumed Tier: Premium/High-end (no budget stated)
PAGES: Home, Services, Portfolio, About Us, Contact Us
--- HOME PAGE ---
### Hero Section
- Layout & Content Strategy: Full-bleed hero with firm's tagline ("Designing Spaces That Inspire"),
subheading on design philosophy, CTA "View Our Portfolio"
- Animation & Motion Design: Slow-zoom background video with fade-in text reveal on load,
scroll-indicator with bounce animation
- Visual Asset Prompt: "Cinematic wide shot of a modern minimalist house at golden hour,
glass facade reflecting sunset, architectural photography style, 4K"
### Featured Projects Strip
- Layout & Content Strategy: 3-4 project thumbnails with project name + category,
links to portfolio page
- Animation & Motion Design: Cards lift and scale slightly on hover with shadow deepening;
horizontal scroll-snap on mobile
- Visual Asset Prompt: "Interior shot of minimalist living room, natural light,
neutral tones, architectural digest style photography"
[... continues for all sections/pages ...]
Example 2: Input: "$4k budget website for a local bakery" Output:
Assumed Tier: $4k — moderate, high-impact
PAGES: Home, Menu, About Us, Contact Us
--- HOME PAGE ---
### Hero Section
- Layout & Content Strategy: Bakery name, warm tagline, "Order Now" CTA button
- Animation & Motion Design: Simple fade-in on page load, button hover color shift
- Visual Asset Prompt: "Overhead shot of fresh sourdough bread and pastries on rustic
wooden table, warm morning light, cozy bakery aesthetic"
[... continues ...]
Recommendation▾
Consider adding a mobile-responsiveness note or accessibility consideration in the section breakdown template
Best Practices
- Always state the assumed budget tier explicitly at the top of the output.
- Keep visual asset prompts specific enough to paste directly into an AI image tool (lighting, style, angle, mood).
- Tie every animation choice to a UX purpose (guide attention, reinforce CTA, reduce cognitive load) — don't add motion for its own sake.
- Keep copy direction purpose-driven (state why a headline exists, not just what it says).
- Suggest extra pages only when they add real conversion or credibility value — don't pad the sitemap.
- Maintain consistent formatting across all pages/sections for easy handoff to designers/developers.
Common Pitfalls
- Don't ask the user for budget before responding — default to premium and state the assumption.
- Don't suggest advanced 3D/WebGL animations for a $4k tier — keep it realistic and buildable.
- Don't give generic filler like "add a nice image here" — always provide a concrete, usable visual prompt.
- Don't skip the About Us or Contact Us page even for simple topics — these are baseline requirements.
- Don't overload every section with heavy animation — reserve high-impact motion for hero/key conversion sections.