diff --git a/README.md b/README.md
index 70e665f4..ec03176a 100644
--- a/README.md
+++ b/README.md
@@ -44,7 +44,6 @@ If you have ideas for new examples or guides, share them on the [issues page](ht
   - [Vector databases (Pinecone)](https://github.com/anthropics/anthropic-cookbook/blob/main/third_party/Pinecone/rag_using_pinecone.ipynb)
   - [Wikipedia](https://github.com/anthropics/anthropic-cookbook/blob/main/third_party/Wikipedia/wikipedia-search-cookbook.ipynb/)
   - [Web pages](https://github.com/anthropics/anthropic-cookbook/blob/main/misc/read_web_pages_with_haiku.ipynb)
-  - [Internet search (Brave)](https://github.com/anthropics/anthropic-cookbook/blob/main/third_party/Brave/web_search_using_brave.ipynb)
 - [Embeddings with Voyage AI](https://github.com/anthropics/anthropic-cookbook/blob/main/third_party/VoyageAI/how_to_create_embeddings.md)
 
 ### Multimodal Capabilities
@@ -66,4 +65,4 @@ If you have ideas for new examples or guides, share them on the [issues page](ht
 ## Additional Resources
 
 - [Anthropic on AWS](https://github.com/aws-samples/anthropic-on-aws): Explore examples and solutions for using Claude on AWS infrastructure.
-- [AWS Samples](https://github.com/aws-samples/): A collection of code samples from AWS which can be adapted for use with Claude. Note that some samples may require modification to work optimally with Claude.
\ No newline at end of file
+- [AWS Samples](https://github.com/aws-samples/): A collection of code samples from AWS which can be adapted for use with Claude. Note that some samples may require modification to work optimally with Claude.
diff --git a/coding/prompting_for_frontend_aesthetics.ipynb b/coding/prompting_for_frontend_aesthetics.ipynb
new file mode 100644
index 00000000..a9072ccb
--- /dev/null
+++ b/coding/prompting_for_frontend_aesthetics.ipynb
@@ -0,0 +1,1179 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Frontend Aesthetics: A Prompting Guide\n",
+    "\n",
+    "Claude can generate high-quality frontends, but without guidance it tends toward generic, conservative designs. This guide shows you how to prompt Claude to produce more distinctive, polished output."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Prompting for Better Outputs\n",
+    "\n",
+    "Claude has strong knowledge of design principles, typography, and color theory, but defaults to safe choices unless explicitly encouraged otherwise. Through experimentation, we've found three strategies that consistently produce better results:\n",
+    "\n",
+    "1. **Guide specific design dimensions** - Direct Claude's attention to typography, color, motion, and backgrounds individually\n",
+    "2. **Reference design inspirations** - Suggest sources like IDE themes or cultural aesthetics without being overly prescriptive  \n",
+    "3. **Call out common defaults** - Explicitly tell Claude to avoid its tendency toward generic choices\n",
+    "\n",
+    "The prompt below applies these strategies across four key design areas."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## The Prompt\n",
+    "\n",
+    "To implement these changes, you can append this prompt section to your system prompt or CLAUDE.md file."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "DISTILLED_AESTHETICS_PROMPT = \"\"\"\n",
+    "<frontend_aesthetics>\n",
+    "You tend to converge toward generic, \"on distribution\" outputs. In frontend design, this creates what users call the \"AI slop\" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight. Focus on:\n",
+    "\n",
+    "Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics.\n",
+    "\n",
+    "Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.\n",
+    "\n",
+    "Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. \n",
+    "\n",
+    "Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.\n",
+    "\n",
+    "Avoid generic AI-generated aesthetics:\n",
+    "- Overused font families (Inter, Roboto, Arial, system fonts)\n",
+    "- Clichéd color schemes (particularly purple gradients on white backgrounds)\n",
+    "- Predictable layouts and component patterns\n",
+    "- Cookie-cutter design that lacks context-specific character\n",
+    "\n",
+    "Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!\n",
+    "</frontend_aesthetics>\n",
+    "\"\"\""
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Results\n",
+    "\n",
+    "Here are the results of UI generations both with and without the prompt section above.\n",
+    "\n",
+    "Without guidance, Claude often defaults to simplistic designs with white and purple backgrounds. With the aesthetics prompt, it produces more varied and visually interesting designs.\n",
+    "\n",
+    "### Example 1: SaaS Landing Page\n",
+    "**Prompt:** `\"Create a SaaS landing page for a project management tool\"`\n",
+    "\n",
+    "<table>\n",
+    "<tr>\n",
+    "<td width=\"50%\" valign=\"top\">\n",
+    "\n",
+    "**Without Aesthetics Prompt**\n",
+    "\n",
+    "![Baseline output without aesthetics guidance](../images/frontend_aesthetics/baseline_saas.png)\n",
+    "\n",
+    "</td>\n",
+    "<td width=\"50%\" valign=\"top\">\n",
+    "\n",
+    "**With Aesthetics Prompt**\n",
+    "\n",
+    "![Enhanced output with distilled aesthetics prompt](../images/frontend_aesthetics/distilled_saas.png)\n",
+    "\n",
+    "</td>\n",
+    "</tr>\n",
+    "</table>\n",
+    "\n",
+    "### Example 2: Blog Post\n",
+    "**Prompt:** `\"Build a blog post layout with author bio, reading time, and related articles\"`\n",
+    "\n",
+    "<table>\n",
+    "<tr>\n",
+    "<td width=\"50%\" valign=\"top\">\n",
+    "\n",
+    "**Without Aesthetics Prompt**\n",
+    "\n",
+    "![Baseline portfolio without aesthetics guidance](../images/frontend_aesthetics/baseline_portfolio.png)\n",
+    "\n",
+    "</td>\n",
+    "<td width=\"50%\" valign=\"top\">\n",
+    "\n",
+    "**With Aesthetics Prompt**\n",
+    "\n",
+    "![Enhanced portfolio with distilled aesthetics prompt](../images/frontend_aesthetics/distilled_portfolio.png)\n",
+    "\n",
+    "</td>\n",
+    "</tr>\n",
+    "</table>\n",
+    "\n",
+    "### Example 3: Admin Table\n",
+    "**Prompt:** `\"Create an admin panel with a data table showing users, their roles, and action buttons\"`\n",
+    "\n",
+    "<table>\n",
+    "<tr>\n",
+    "<td width=\"50%\" valign=\"top\">\n",
+    "\n",
+    "**Without Aesthetics Prompt**\n",
+    "\n",
+    "![Baseline dashboard without aesthetics guidance](../images/frontend_aesthetics/baseline_dashboard.png)\n",
+    "\n",
+    "</td>\n",
+    "<td width=\"50%\" valign=\"top\">\n",
+    "\n",
+    "**With Aesthetics Prompt**\n",
+    "\n",
+    "![Enhanced dashboard with distilled aesthetics prompt](../images/frontend_aesthetics/distilled_dashboard.png)\n",
+    "\n",
+    "</td>\n",
+    "</tr>\n",
+    "</table>"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Try It Yourself\n",
+    "\n",
+    "First, set up the helper functions:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import os\n",
+    "import re\n",
+    "import webbrowser\n",
+    "import time\n",
+    "import html\n",
+    "from pathlib import Path\n",
+    "from datetime import datetime\n",
+    "from anthropic import Anthropic\n",
+    "from IPython.display import display, HTML as DisplayHTML\n",
+    "\n",
+    "client = Anthropic(api_key=os.environ.get(\"ANTHROPIC_API_KEY\"))\n",
+    "\n",
+    "\n",
+    "def save_html(html_content):\n",
+    "    os.makedirs(\"html_outputs\", exist_ok=True)\n",
+    "    timestamp = datetime.now().strftime(\"%Y%m%d_%H%M%S\")\n",
+    "    filepath = f\"html_outputs/{timestamp}.html\"\n",
+    "    with open(filepath, \"w\") as f:\n",
+    "        f.write(html_content)\n",
+    "    return filepath\n",
+    "\n",
+    "\n",
+    "def extract_html(text):\n",
+    "    pattern = r\"```(?:html)?\\s*(.*?)\\s*```\"\n",
+    "    matches = re.findall(pattern, text, re.DOTALL)\n",
+    "    return matches[0] if matches else None\n",
+    "\n",
+    "\n",
+    "def open_in_browser(filepath):\n",
+    "    abs_path = Path(filepath).resolve()\n",
+    "    webbrowser.open(f\"file://{abs_path}\")\n",
+    "    print(f\"🌐 Opened in browser: {filepath}\")\n",
+    "\n",
+    "\n",
+    "def generate_html_with_claude(system_prompt, user_prompt):\n",
+    "    print(\"🚀 Generating HTML...\\n\")\n",
+    "\n",
+    "    full_response = \"\"\n",
+    "    start_time = time.time()\n",
+    "    display_id = display(DisplayHTML(\"\"), display_id=True)\n",
+    "\n",
+    "    with client.messages.stream(\n",
+    "        model=\"claude-sonnet-4-5-20250929\",\n",
+    "        max_tokens=64000,\n",
+    "        system=system_prompt,\n",
+    "        messages=[{\"role\": \"user\", \"content\": user_prompt}],\n",
+    "    ) as stream:\n",
+    "        for text in stream.text_stream:\n",
+    "            full_response += text\n",
+    "            escaped_text = html.escape(full_response)\n",
+    "            display_html = f\"\"\"\n",
+    "            <div id=\"stream-container\" style=\"border: 2px solid #667eea; border-radius: 8px; padding: 16px; background: #f8f9fa; max-height: 500px; overflow-y: auto;\">\n",
+    "                <pre style=\"margin: 0; font-family: monospace; font-size: 12px; color: #2d2d2d; white-space: pre-wrap; word-wrap: break-word;\">{escaped_text}</pre>\n",
+    "            </div>\n",
+    "            <script>\n",
+    "                requestAnimationFrame(() => {{\n",
+    "                    const container = document.getElementById('stream-container');\n",
+    "                    if (container) {{\n",
+    "                        container.scrollTop = container.scrollHeight;\n",
+    "                    }}\n",
+    "                }});\n",
+    "            </script>\n",
+    "            \"\"\"\n",
+    "            display_id.update(DisplayHTML(display_html))\n",
+    "\n",
+    "    elapsed = time.time() - start_time\n",
+    "    escaped_text = html.escape(full_response)\n",
+    "    final_html = f\"\"\"\n",
+    "    <div style=\"border: 2px solid #28a745; border-radius: 8px; padding: 16px; background: #f8f9fa; max-height: 500px; overflow-y: auto;\">\n",
+    "        <pre style=\"margin: 0; font-family: monospace; font-size: 12px; color: #2d2d2d; white-space: pre-wrap; word-wrap: break-word;\">{escaped_text}</pre>\n",
+    "    </div>\n",
+    "    \"\"\"\n",
+    "    display_id.update(DisplayHTML(final_html))\n",
+    "\n",
+    "    print(f\"\\n✅ Complete in {elapsed:.1f}s\\n\")\n",
+    "\n",
+    "    html_content = extract_html(full_response)\n",
+    "    if html_content is None:\n",
+    "        print(\"❌ Error: Could not extract HTML from response.\")\n",
+    "        raise ValueError(\"Failed to extract HTML from Claude's response.\")\n",
+    "\n",
+    "    filepath = save_html(html_content)\n",
+    "    print(f\"💾 HTML saved to: {filepath}\")\n",
+    "    open_in_browser(filepath)\n",
+    "\n",
+    "    return filepath"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Generate with the aesthetics prompt:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "🚀 Generating HTML...\n",
+      "\n"
+     ]
+    },
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "    <div style=\"border: 2px solid #28a745; border-radius: 8px; padding: 16px; background: #f8f9fa; max-height: 500px; overflow-y: auto;\">\n",
+       "        <pre style=\"margin: 0; font-family: monospace; font-size: 12px; color: #2d2d2d; white-space: pre-wrap; word-wrap: break-word;\">```html\n",
+       "&lt;!DOCTYPE html&gt;\n",
+       "&lt;html lang=&quot;en&quot;&gt;\n",
+       "&lt;head&gt;\n",
+       "    &lt;meta charset=&quot;UTF-8&quot;&gt;\n",
+       "    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n",
+       "    &lt;title&gt;Momentum — Project Management Reimagined&lt;/title&gt;\n",
+       "    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;\n",
+       "    &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;\n",
+       "    &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;\n",
+       "    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&amp;family=DM+Sans:wght@400;500;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;\n",
+       "    &lt;style&gt;\n",
+       "        :root {\n",
+       "            --primary: #FF6B35;\n",
+       "            --primary-dark: #E85A2A;\n",
+       "            --secondary: #004E89;\n",
+       "            --accent: #FFD23F;\n",
+       "            --dark: #1A1A2E;\n",
+       "            --light: #F8F9FA;\n",
+       "        }\n",
+       "\n",
+       "        * {\n",
+       "            margin: 0;\n",
+       "            padding: 0;\n",
+       "            box-sizing: border-box;\n",
+       "        }\n",
+       "\n",
+       "        body {\n",
+       "            font-family: &#x27;DM Sans&#x27;, sans-serif;\n",
+       "            background: var(--light);\n",
+       "            color: var(--dark);\n",
+       "            overflow-x: hidden;\n",
+       "        }\n",
+       "\n",
+       "        h1, h2, h3, h4 {\n",
+       "            font-family: &#x27;Syne&#x27;, sans-serif;\n",
+       "            font-weight: 800;\n",
+       "        }\n",
+       "\n",
+       "        /* Animated background */\n",
+       "        .hero-bg {\n",
+       "            position: absolute;\n",
+       "            top: 0;\n",
+       "            left: 0;\n",
+       "            width: 100%;\n",
+       "            height: 100%;\n",
+       "            background: linear-gradient(135deg, #004E89 0%, #1A1A2E 50%, #FF6B35 100%);\n",
+       "            z-index: 0;\n",
+       "        }\n",
+       "\n",
+       "        .hero-bg::before {\n",
+       "            content: &#x27;&#x27;;\n",
+       "            position: absolute;\n",
+       "            width: 200%;\n",
+       "            height: 200%;\n",
+       "            background: \n",
+       "                radial-gradient(circle at 20% 50%, rgba(255, 107, 53, 0.3) 0%, transparent 50%),\n",
+       "                radial-gradient(circle at 80% 80%, rgba(255, 210, 63, 0.2) 0%, transparent 50%),\n",
+       "                radial-gradient(circle at 40% 20%, rgba(0, 78, 137, 0.3) 0%, transparent 50%);\n",
+       "            animation: float 20s ease-in-out infinite;\n",
+       "        }\n",
+       "\n",
+       "        @keyframes float {\n",
+       "            0%, 100% { transform: translate(0, 0) rotate(0deg); }\n",
+       "            33% { transform: translate(30px, -30px) rotate(120deg); }\n",
+       "            66% { transform: translate(-20px, 20px) rotate(240deg); }\n",
+       "        }\n",
+       "\n",
+       "        .mesh-gradient {\n",
+       "            background: \n",
+       "                radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.3) 0px, transparent 50%),\n",
+       "                radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.2) 0px, transparent 50%),\n",
+       "                radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 0.3) 0px, transparent 50%),\n",
+       "                radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 0.2) 0px, transparent 50%);\n",
+       "        }\n",
+       "\n",
+       "        /* Fade in animations */\n",
+       "        .fade-in {\n",
+       "            opacity: 0;\n",
+       "            transform: translateY(30px);\n",
+       "            animation: fadeInUp 0.8s ease forwards;\n",
+       "        }\n",
+       "\n",
+       "        @keyframes fadeInUp {\n",
+       "            to {\n",
+       "                opacity: 1;\n",
+       "                transform: translateY(0);\n",
+       "            }\n",
+       "        }\n",
+       "\n",
+       "        .delay-1 { animation-delay: 0.1s; }\n",
+       "        .delay-2 { animation-delay: 0.2s; }\n",
+       "        .delay-3 { animation-delay: 0.3s; }\n",
+       "        .delay-4 { animation-delay: 0.4s; }\n",
+       "        .delay-5 { animation-delay: 0.5s; }\n",
+       "        .delay-6 { animation-delay: 0.6s; }\n",
+       "\n",
+       "        /* Feature cards */\n",
+       "        .feature-card {\n",
+       "            background: white;\n",
+       "            border-radius: 24px;\n",
+       "            padding: 2rem;\n",
+       "            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n",
+       "            border: 2px solid transparent;\n",
+       "            position: relative;\n",
+       "            overflow: hidden;\n",
+       "        }\n",
+       "\n",
+       "        .feature-card::before {\n",
+       "            content: &#x27;&#x27;;\n",
+       "            position: absolute;\n",
+       "            top: 0;\n",
+       "            left: 0;\n",
+       "            width: 100%;\n",
+       "            height: 4px;\n",
+       "            background: linear-gradient(90deg, var(--primary), var(--accent));\n",
+       "            transform: scaleX(0);\n",
+       "            transform-origin: left;\n",
+       "            transition: transform 0.4s ease;\n",
+       "        }\n",
+       "\n",
+       "        .feature-card:hover::before {\n",
+       "            transform: scaleX(1);\n",
+       "        }\n",
+       "\n",
+       "        .feature-card:hover {\n",
+       "            transform: translateY(-8px);\n",
+       "            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\n",
+       "            border-color: var(--primary);\n",
+       "        }\n",
+       "\n",
+       "        /* CTA Button */\n",
+       "        .cta-button {\n",
+       "            background: var(--primary);\n",
+       "            color: white;\n",
+       "            padding: 1rem 2.5rem;\n",
+       "            border-radius: 50px;\n",
+       "            font-weight: 700;\n",
+       "            text-decoration: none;\n",
+       "            display: inline-block;\n",
+       "            transition: all 0.3s ease;\n",
+       "            box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);\n",
+       "            position: relative;\n",
+       "            overflow: hidden;\n",
+       "        }\n",
+       "\n",
+       "        .cta-button::before {\n",
+       "            content: &#x27;&#x27;;\n",
+       "            position: absolute;\n",
+       "            top: 50%;\n",
+       "            left: 50%;\n",
+       "            width: 0;\n",
+       "            height: 0;\n",
+       "            border-radius: 50%;\n",
+       "            background: rgba(255, 255, 255, 0.2);\n",
+       "            transform: translate(-50%, -50%);\n",
+       "            transition: width 0.6s, height 0.6s;\n",
+       "        }\n",
+       "\n",
+       "        .cta-button:hover::before {\n",
+       "            width: 300px;\n",
+       "            height: 300px;\n",
+       "        }\n",
+       "\n",
+       "        .cta-button:hover {\n",
+       "            transform: translateY(-2px);\n",
+       "            box-shadow: 0 15px 40px rgba(255, 107, 53, 0.4);\n",
+       "        }\n",
+       "\n",
+       "        .cta-button span {\n",
+       "            position: relative;\n",
+       "            z-index: 1;\n",
+       "        }\n",
+       "\n",
+       "        /* Stats counter animation */\n",
+       "        .stat-number {\n",
+       "            font-size: 3rem;\n",
+       "            font-weight: 800;\n",
+       "            background: linear-gradient(135deg, var(--primary), var(--accent));\n",
+       "            -webkit-background-clip: text;\n",
+       "            -webkit-text-fill-color: transparent;\n",
+       "            background-clip: text;\n",
+       "        }\n",
+       "\n",
+       "        /* Testimonial cards */\n",
+       "        .testimonial {\n",
+       "            background: white;\n",
+       "            padding: 2rem;\n",
+       "            border-radius: 20px;\n",
+       "            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);\n",
+       "            transition: transform 0.3s ease;\n",
+       "        }\n",
+       "\n",
+       "        .testimonial:hover {\n",
+       "            transform: scale(1.02);\n",
+       "        }\n",
+       "\n",
+       "        /* Icon styles */\n",
+       "        .icon-circle {\n",
+       "            width: 60px;\n",
+       "            height: 60px;\n",
+       "            border-radius: 50%;\n",
+       "            display: flex;\n",
+       "            align-items: center;\n",
+       "            justify-content: center;\n",
+       "            font-size: 24px;\n",
+       "            margin-bottom: 1rem;\n",
+       "        }\n",
+       "\n",
+       "        /* Navbar scroll effect */\n",
+       "        .navbar {\n",
+       "            transition: all 0.3s ease;\n",
+       "        }\n",
+       "\n",
+       "        .navbar.scrolled {\n",
+       "            background: rgba(255, 255, 255, 0.95);\n",
+       "            backdrop-filter: blur(10px);\n",
+       "            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);\n",
+       "        }\n",
+       "\n",
+       "        /* Pricing cards */\n",
+       "        .pricing-card {\n",
+       "            background: white;\n",
+       "            border-radius: 24px;\n",
+       "            padding: 3rem 2rem;\n",
+       "            transition: all 0.4s ease;\n",
+       "            border: 2px solid #e5e7eb;\n",
+       "        }\n",
+       "\n",
+       "        .pricing-card.featured {\n",
+       "            border-color: var(--primary);\n",
+       "            transform: scale(1.05);\n",
+       "            box-shadow: 0 20px 60px rgba(255, 107, 53, 0.2);\n",
+       "        }\n",
+       "\n",
+       "        .pricing-card:hover {\n",
+       "            transform: translateY(-10px) scale(1.02);\n",
+       "            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\n",
+       "        }\n",
+       "\n",
+       "        /* Dashboard mockup */\n",
+       "        .dashboard-mockup {\n",
+       "            background: white;\n",
+       "            border-radius: 20px;\n",
+       "            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);\n",
+       "            padding: 1rem;\n",
+       "            position: relative;\n",
+       "            transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);\n",
+       "            transition: transform 0.5s ease;\n",
+       "        }\n",
+       "\n",
+       "        .dashboard-mockup:hover {\n",
+       "            transform: perspective(1000px) rotateY(0deg) rotateX(0deg);\n",
+       "        }\n",
+       "\n",
+       "        .mockup-header {\n",
+       "            display: flex;\n",
+       "            gap: 8px;\n",
+       "            margin-bottom: 1rem;\n",
+       "        }\n",
+       "\n",
+       "        .mockup-dot {\n",
+       "            width: 12px;\n",
+       "            height: 12px;\n",
+       "            border-radius: 50%;\n",
+       "        }\n",
+       "\n",
+       "        .mockup-content {\n",
+       "            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n",
+       "            border-radius: 12px;\n",
+       "            height: 400px;\n",
+       "            position: relative;\n",
+       "            overflow: hidden;\n",
+       "        }\n",
+       "\n",
+       "        .mockup-element {\n",
+       "            position: absolute;\n",
+       "            background: white;\n",
+       "            border-radius: 8px;\n",
+       "            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n",
+       "        }\n",
+       "    &lt;/style&gt;\n",
+       "&lt;/head&gt;\n",
+       "&lt;body&gt;\n",
+       "    &lt;!-- Navigation --&gt;\n",
+       "    &lt;nav class=&quot;navbar fixed w-full top-0 z-50 py-4 px-8&quot;&gt;\n",
+       "        &lt;div class=&quot;max-w-7xl mx-auto flex items-center justify-between&quot;&gt;\n",
+       "            &lt;div class=&quot;flex items-center gap-2&quot;&gt;\n",
+       "                &lt;div class=&quot;w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-yellow-400 flex items-center justify-center&quot;&gt;\n",
+       "                    &lt;span class=&quot;text-white font-bold text-xl&quot;&gt;M&lt;/span&gt;\n",
+       "                &lt;/div&gt;\n",
+       "                &lt;span class=&quot;text-2xl font-bold&quot;&gt;Momentum&lt;/span&gt;\n",
+       "            &lt;/div&gt;\n",
+       "            &lt;div class=&quot;hidden md:flex items-center gap-8&quot;&gt;\n",
+       "                &lt;a href=&quot;#features&quot; class=&quot;text-gray-700 hover:text-orange-500 transition font-medium&quot;&gt;Features&lt;/a&gt;\n",
+       "                &lt;a href=&quot;#pricing&quot; class=&quot;text-gray-700 hover:text-orange-500 transition font-medium&quot;&gt;Pricing&lt;/a&gt;\n",
+       "                &lt;a href=&quot;#testimonials&quot; class=&quot;text-gray-700 hover:text-orange-500 transition font-medium&quot;&gt;Testimonials&lt;/a&gt;\n",
+       "                &lt;a href=&quot;#&quot; class=&quot;text-gray-700 hover:text-orange-500 transition font-medium&quot;&gt;Login&lt;/a&gt;\n",
+       "                &lt;a href=&quot;#&quot; class=&quot;cta-button&quot;&gt;&lt;span&gt;Start Free Trial&lt;/span&gt;&lt;/a&gt;\n",
+       "            &lt;/div&gt;\n",
+       "            &lt;button class=&quot;md:hidden text-gray-700&quot;&gt;\n",
+       "                &lt;svg width=&quot;24&quot; height=&quot;24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;\n",
+       "                    &lt;line x1=&quot;3&quot; y1=&quot;12&quot; x2=&quot;21&quot; y2=&quot;12&quot;&gt;&lt;/line&gt;\n",
+       "                    &lt;line x1=&quot;3&quot; y1=&quot;6&quot; x2=&quot;21&quot; y2=&quot;6&quot;&gt;&lt;/line&gt;\n",
+       "                    &lt;line x1=&quot;3&quot; y1=&quot;18&quot; x2=&quot;21&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;\n",
+       "                &lt;/svg&gt;\n",
+       "            &lt;/button&gt;\n",
+       "        &lt;/div&gt;\n",
+       "    &lt;/nav&gt;\n",
+       "\n",
+       "    &lt;!-- Hero Section --&gt;\n",
+       "    &lt;section class=&quot;relative min-h-screen flex items-center justify-center overflow-hidden pt-20&quot;&gt;\n",
+       "        &lt;div class=&quot;hero-bg&quot;&gt;&lt;/div&gt;\n",
+       "        \n",
+       "        &lt;div class=&quot;relative z-10 max-w-7xl mx-auto px-8 py-20&quot;&gt;\n",
+       "            &lt;div class=&quot;grid md:grid-cols-2 gap-12 items-center&quot;&gt;\n",
+       "                &lt;div class=&quot;text-white&quot;&gt;\n",
+       "                    &lt;h1 class=&quot;text-6xl md:text-7xl leading-tight mb-6 fade-in&quot;&gt;\n",
+       "                        Build momentum.&lt;br/&gt;\n",
+       "                        &lt;span class=&quot;text-yellow-300&quot;&gt;Ship faster.&lt;/span&gt;\n",
+       "                    &lt;/h1&gt;\n",
+       "                    &lt;p class=&quot;text-xl mb-8 text-gray-200 fade-in delay-1&quot;&gt;\n",
+       "                        The project management tool that adapts to your team&#x27;s rhythm. Stop managing tasks. Start building momentum.\n",
+       "                    &lt;/p&gt;\n",
+       "                    &lt;div class=&quot;flex flex-wrap gap-4 fade-in delay-2&quot;&gt;\n",
+       "                        &lt;a href=&quot;#&quot; class=&quot;cta-button&quot;&gt;&lt;span&gt;Get Started Free&lt;/span&gt;&lt;/a&gt;\n",
+       "                        &lt;a href=&quot;#&quot; class=&quot;bg-white/10 backdrop-blur text-white px-8 py-4 rounded-full font-bold hover:bg-white/20 transition inline-block&quot;&gt;\n",
+       "                            Watch Demo\n",
+       "                        &lt;/a&gt;\n",
+       "                    &lt;/div&gt;\n",
+       "                    &lt;div class=&quot;flex items-center gap-8 mt-12 fade-in delay-3&quot;&gt;\n",
+       "                        &lt;div&gt;\n",
+       "                            &lt;div class=&quot;stat-number text-white&quot;&gt;50k+&lt;/div&gt;\n",
+       "                            &lt;div class=&quot;text-gray-300&quot;&gt;Active Teams&lt;/div&gt;\n",
+       "                        &lt;/div&gt;\n",
+       "                        &lt;div&gt;\n",
+       "                            &lt;div class=&quot;stat-number text-white&quot;&gt;4.9&lt;/div&gt;\n",
+       "                            &lt;div class=&quot;text-gray-300&quot;&gt;Average Rating&lt;/div&gt;\n",
+       "                        &lt;/div&gt;\n",
+       "                        &lt;div&gt;\n",
+       "                            &lt;div class=&quot;stat-number text-white&quot;&gt;99%&lt;/div&gt;\n",
+       "                            &lt;div class=&quot;text-gray-300&quot;&gt;Uptime&lt;/div&gt;\n",
+       "                        &lt;/div&gt;\n",
+       "                    &lt;/div&gt;\n",
+       "                &lt;/div&gt;\n",
+       "                \n",
+       "                &lt;div class=&quot;fade-in delay-4&quot;&gt;\n",
+       "                    &lt;div class=&quot;dashboard-mockup&quot;&gt;\n",
+       "                        &lt;div class=&quot;mockup-header&quot;&gt;\n",
+       "                            &lt;div class=&quot;mockup-dot bg-red-500&quot;&gt;&lt;/div&gt;\n",
+       "                            &lt;div class=&quot;mockup-dot bg-yellow-400&quot;&gt;&lt;/div&gt;\n",
+       "                            &lt;div class=&quot;mockup-dot bg-green-500&quot;&gt;&lt;/div&gt;\n",
+       "                        &lt;/div&gt;\n",
+       "                        &lt;div class=&quot;mockup-content&quot;&gt;\n",
+       "                            &lt;div class=&quot;mockup-element&quot; style=&quot;top: 20px; left: 20px; width: 200px; height: 60px;&quot;&gt;&lt;/div&gt;\n",
+       "                            &lt;div class=&quot;mockup-element&quot; style=&quot;top: 100px; left: 20px; width: 150px; height: 100px;&quot;&gt;&lt;/div&gt;\n",
+       "                            &lt;div class=&quot;mockup-element&quot; style=&quot;top: 100px; right: 20px; width: 150px; height: 100px;&quot;&gt;&lt;/div&gt;\n",
+       "                            &lt;div class=&quot;mockup-element&quot; style=&quot;top: 220px; left: 20px; width: 320px; height: 80px;&quot;&gt;&lt;/div&gt;\n",
+       "                            &lt;div class=&quot;mockup-element&quot; style=&quot;bottom: 20px; right: 20px; width: 100px; height: 60px; background: linear-gradient(135deg, #FF6B35, #FFD23F);&quot;&gt;&lt;/div&gt;\n",
+       "                        &lt;/div&gt;\n",
+       "                    &lt;/div&gt;\n",
+       "                &lt;/div&gt;\n",
+       "            &lt;/div&gt;\n",
+       "        &lt;/div&gt;\n",
+       "    &lt;/section&gt;\n",
+       "\n",
+       "    &lt;!-- Features Section --&gt;\n",
+       "    &lt;section id=&quot;features&quot; class=&quot;py-32 px-8 bg-white&quot;&gt;\n",
+       "        &lt;div class=&quot;max-w-7xl mx-auto&quot;&gt;\n",
+       "            &lt;div class=&quot;text-center mb-20&quot;&gt;\n",
+       "                &lt;h2 class=&quot;text-5xl md:text-6xl font-bold mb-6&quot;&gt;Everything you need.&lt;br/&gt;Nothing you don&#x27;t.&lt;/h2&gt;\n",
+       "                &lt;p class=&quot;text-xl text-gray-600 max-w-2xl mx-auto&quot;&gt;Powerful features that don&#x27;t get in your way. Built for teams who want to focus on work, not tools.&lt;/p&gt;\n",
+       "            &lt;/div&gt;\n",
+       "\n",
+       "            &lt;div class=&quot;grid md:grid-cols-3 gap-8&quot;&gt;\n",
+       "                &lt;div class=&quot;feature-card&quot;&gt;\n",
+       "                    &lt;div class=&quot;icon-circle bg-orange-100 text-orange-500&quot;&gt;⚡&lt;/div&gt;\n",
+       "                    &lt;h3 class=&quot;text-2xl font-bold mb-4&quot;&gt;Lightning Fast&lt;/h3&gt;\n",
+       "                    &lt;p class=&quot;text-gray-600&quot;&gt;Native performance across all devices. No lag, no loading spinners. Just instant productivity.&lt;/p&gt;\n",
+       "                &lt;/div&gt;\n",
+       "\n",
+       "                &lt;div class=&quot;feature-card&quot;&gt;\n",
+       "                    &lt;div class=&quot;icon-circle bg-blue-100 text-blue-500&quot;&gt;🎯&lt;/div&gt;\n",
+       "                    &lt;h3 class=&quot;text-2xl font-bold mb-4&quot;&gt;Smart Workflows&lt;/h3&gt;\n",
+       "                    &lt;p class=&quot;text-gray-600&quot;&gt;AI-powered automation that learns from your team&#x27;s patterns and suggests optimizations.&lt;/p&gt;\n",
+       "                &lt;/div&gt;\n",
+       "\n",
+       "                &lt;div class=&quot;feature-card&quot;&gt;\n",
+       "                    &lt;div class=&quot;icon-circle bg-purple-100 text-purple-500&quot;&gt;🔗&lt;/div&gt;\n",
+       "                    &lt;h3 class=&quot;text-2xl font-bold mb-4&quot;&gt;Seamless Integration&lt;/h3&gt;\n",
+       "                    &lt;p class=&quot;text-gray-600&quot;&gt;Connect with 1000+ tools your team already uses. Slack, GitHub, Figma, and more.&lt;/p&gt;\n",
+       "                &lt;/div&gt;\n",
+       "\n",
+       "                &lt;div class=&quot;feature-card&quot;&gt;\n",
+       "                    &lt;div class=&quot;icon-circle bg-green-100 text-green-500&quot;&gt;📊&lt;/div&gt;\n",
+       "                    &lt;h3 class=&quot;text-2xl font-bold mb-4&quot;&gt;Real-time Analytics&lt;/h3&gt;\n",
+       "                    &lt;p class=&quot;text-gray-600&quot;&gt;Visualize progress with beautiful dashboards that update in real-time as work happens.&lt;/p&gt;\n",
+       "                &lt;/div&gt;\n",
+       "\n",
+       "                &lt;div class=&quot;feature-card&quot;&gt;\n",
+       "                    &lt;div class=&quot;icon-circle bg-pink-100 text-pink-500&quot;&gt;🎨&lt;/div&gt;\n",
+       "                    &lt;h3 class=&quot;text-2xl font-bold mb-4&quot;&gt;Customizable Views&lt;/h3&gt;\n",
+       "                    &lt;p class=&quot;text-gray-600&quot;&gt;Board, list, timeline, calendar - switch between views instantly. See work your way.&lt;/p&gt;\n",
+       "                &lt;/div&gt;\n",
+       "\n",
+       "                &lt;div class=&quot;feature-card&quot;&gt;\n",
+       "                    &lt;div class=&quot;icon-circle bg-yellow-100 text-yellow-600&quot;&gt;🔒&lt;/div&gt;\n",
+       "                    &lt;h3 class=&quot;text-2xl font-bold mb-4&quot;&gt;Enterprise Security&lt;/h3&gt;\n",
+       "                    &lt;p class=&quot;text-gray-600&quot;&gt;SOC 2 Type II certified. Your data encrypted at rest and in transit. Always.&lt;/p&gt;\n",
+       "                &lt;/div&gt;\n",
+       "            &lt;/div&gt;\n",
+       "        &lt;/div&gt;\n",
+       "    &lt;/section&gt;\n",
+       "\n",
+       "    &lt;!-- Social Proof / Stats --&gt;\n",
+       "    &lt;section class=&quot;py-24 px-8 bg-gradient-to-br from-gray-900 to-gray-800 text-white&quot;&gt;\n",
+       "        &lt;div class=&quot;max-w-7xl mx-auto&quot;&gt;\n",
+       "            &lt;div class=&quot;text-center mb-16&quot;&gt;\n",
+       "                &lt;h2 class=&quot;text-4xl md:text-5xl font-bold mb-4&quot;&gt;Trusted by teams worldwide&lt;/h2&gt;\n",
+       "                &lt;p class=&quot;text-xl text-gray-300&quot;&gt;Join thousands of companies building better products&lt;/p&gt;\n",
+       "            &lt;/div&gt;\n",
+       "            \n",
+       "            &lt;div class=&quot;grid grid-cols-2 md:grid-cols-4 gap-8 mb-16&quot;&gt;\n",
+       "                &lt;div class=&quot;text-center&quot;&gt;\n",
+       "                    &lt;div class=&quot;text-5xl font-bold mb-2 text-yellow-400&quot;&gt;2.5M+&lt;/div&gt;\n",
+       "                    &lt;div class=&quot;text-gray-400&quot;&gt;Projects Created&lt;/div&gt;\n",
+       "                &lt;/div&gt;\n",
+       "                &lt;div class=&quot;text-center&quot;&gt;\n",
+       "                    &lt;div class=&quot;text-5xl font-bold mb-2 text-yellow-400&quot;&gt;50K+&lt;/div&gt;\n",
+       "                    &lt;div class=&quot;text-gray-400&quot;&gt;Active Teams&lt;/div&gt;\n",
+       "                &lt;/div&gt;\n",
+       "                &lt;div class=&quot;text-center&quot;&gt;\n",
+       "                    &lt;div class=&quot;text-5xl font-bold mb-2 text-yellow-400&quot;&gt;150+&lt;/div&gt;\n",
+       "                    &lt;div class=&quot;text-gray-400&quot;&gt;Countries&lt;/div&gt;\n",
+       "                &lt;/div&gt;\n",
+       "                &lt;div class=&quot;text-center&quot;&gt;\n",
+       "                    &lt;div class=&quot;text-5xl font-bold mb-2 text-yellow-400&quot;&gt;99.9%&lt;/div&gt;\n",
+       "                    &lt;div class=&quot;text-gray-400&quot;&gt;Uptime SLA&lt;/div&gt;\n",
+       "                &lt;/div&gt;\n",
+       "            &lt;/div&gt;\n",
+       "\n",
+       "            &lt;div class=&quot;flex flex-wrap justify-center items-center gap-12 opacity-60&quot;&gt;\n",
+       "                &lt;div class=&quot;text-3xl font-bold&quot;&gt;Stripe&lt;/div&gt;\n",
+       "                &lt;div class=&quot;text-3xl font-bold&quot;&gt;Notion&lt;/div&gt;\n",
+       "                &lt;div class=&quot;text-3xl font-bold&quot;&gt;Figma&lt;/div&gt;\n",
+       "                &lt;div class=&quot;text-3xl font-bold&quot;&gt;Webflow&lt;/div&gt;\n",
+       "                &lt;div class=&quot;text-3xl font-bold&quot;&gt;Linear&lt;/div&gt;\n",
+       "            &lt;/div&gt;\n",
+       "        &lt;/div&gt;\n",
+       "    &lt;/section&gt;\n",
+       "\n",
+       "    &lt;!-- Testimonials --&gt;\n",
+       "    &lt;section id=&quot;testimonials&quot; class=&quot;py-32 px-8 bg-gray-50&quot;&gt;\n",
+       "        &lt;div class=&quot;max-w-7xl mx-auto&quot;&gt;\n",
+       "            &lt;div class=&quot;text-center mb-20&quot;&gt;\n",
+       "                &lt;h2 class=&quot;text-5xl font-bold mb-6&quot;&gt;Loved by teams everywhere&lt;/h2&gt;\n",
+       "                &lt;p class=&quot;text-xl text-gray-600&quot;&gt;Don&#x27;t just take our word for it&lt;/p&gt;\n",
+       "            &lt;/div&gt;\n",
+       "\n",
+       "            &lt;div class=&quot;grid md:grid-cols-3 gap-8&quot;&gt;\n",
+       "                &lt;div class=&quot;testimonial&quot;&gt;\n",
+       "                    &lt;div class=&quot;flex items-center gap-1 mb-4&quot;&gt;\n",
+       "                        &lt;span class=&quot;text-yellow-400 text-xl&quot;&gt;★★★★★&lt;/span&gt;\n",
+       "                    &lt;/div&gt;\n",
+       "                    &lt;p class=&quot;text-gray-700 mb-6&quot;&gt;&quot;Momentum completely changed how our team works. We shipped our last feature 40% faster than usual. The automation is brilliant.&quot;&lt;/p&gt;\n",
+       "                    &lt;div class=&quot;flex items-center gap-3&quot;&gt;\n",
+       "                        &lt;div class=&quot;w-12 h-12 rounded-full bg-gradient-to-br from-purple-400 to-pink-400&quot;&gt;&lt;/div&gt;\n",
+       "                        &lt;div&gt;\n",
+       "                            &lt;div class=&quot;font-bold&quot;&gt;Sarah Chen&lt;/div&gt;\n",
+       "                            &lt;div class=&quot;text-sm text-gray-500&quot;&gt;Head of Product, TechCorp&lt;/div&gt;\n",
+       "                        &lt;/div&gt;\n",
+       "                    &lt;/div&gt;\n",
+       "                &lt;/div&gt;\n",
+       "\n",
+       "                &lt;div class=&quot;testimonial&quot;&gt;\n",
+       "                    &lt;div class=&quot;flex items-center gap-1 mb-4&quot;&gt;\n",
+       "                        &lt;span class=&quot;text-yellow-400 text-xl&quot;&gt;★★★★★&lt;/span&gt;\n",
+       "                    &lt;/div&gt;\n",
+       "                    &lt;p class=&quot;text-gray-700 mb-6&quot;&gt;&quot;Finally, a project management tool that doesn&#x27;t feel like homework. Our team adoption rate was 100% in the first week.&quot;&lt;/p&gt;\n",
+       "                    &lt;div class=&quot;flex items-center gap-3&quot;&gt;\n",
+       "                        &lt;div class=&quot;w-12 h-12 rounded-full bg-gradient-to-br from-blue-400 to-cyan-400&quot;&gt;&lt;/div&gt;\n",
+       "                        &lt;div&gt;\n",
+       "                            &lt;div class=&quot;font-bold&quot;&gt;Marcus Rodriguez&lt;/div&gt;\n",
+       "                            &lt;div class=&quot;text-sm text-gray-500&quot;&gt;Engineering Manager, StartupXYZ&lt;/div&gt;\n",
+       "                        &lt;/div&gt;\n",
+       "                    &lt;/div&gt;\n",
+       "                &lt;/div&gt;\n",
+       "\n",
+       "                &lt;div class=&quot;testimonial&quot;&gt;\n",
+       "                    &lt;div class=&quot;flex items-center gap-1 mb-4&quot;&gt;\n",
+       "                        &lt;span class=&quot;text-yellow-400 text-xl&quot;&gt;★★★★★&lt;/span&gt;\n",
+       "                    &lt;/div&gt;\n",
+       "                    &lt;p class=&quot;text-gray-700 mb-6&quot;&gt;&quot;The real-time collaboration features are next level. It&#x27;s like Google Docs, but for project management. Game changer.&quot;&lt;/p&gt;\n",
+       "                    &lt;div class=&quot;flex items-center gap-3&quot;&gt;\n",
+       "                        &lt;div class=&quot;w-12 h-12 rounded-full bg-gradient-to-br from-green-400 to-emerald-400&quot;&gt;&lt;/div&gt;\n",
+       "                        &lt;div&gt;\n",
+       "                            &lt;div class=&quot;font-bold&quot;&gt;Aisha Patel&lt;/div&gt;\n",
+       "                            &lt;div class=&quot;text-sm text-gray-500&quot;&gt;Design Lead, CreativeStudio&lt;/div&gt;\n",
+       "                        &lt;/div&gt;\n",
+       "                    &lt;/div&gt;\n",
+       "                &lt;/div&gt;\n",
+       "            &lt;/div&gt;\n",
+       "        &lt;/div&gt;\n",
+       "    &lt;/section&gt;\n",
+       "\n",
+       "    &lt;!-- Pricing --&gt;\n",
+       "    &lt;section id=&quot;pricing&quot; class=&quot;py-32 px-8 bg-white&quot;&gt;\n",
+       "        &lt;div class=&quot;max-w-7xl mx-auto&quot;&gt;\n",
+       "            &lt;div class=&quot;text-center mb-20&quot;&gt;\n",
+       "                &lt;h2 class=&quot;text-5xl md:text-6xl font-bold mb-6&quot;&gt;Simple, transparent pricing&lt;/h2&gt;\n",
+       "                &lt;p class=&quot;text-xl text-gray-600&quot;&gt;No hidden fees. Cancel anytime. Start with a 14-day free trial.&lt;/p&gt;\n",
+       "            &lt;/div&gt;\n",
+       "\n",
+       "            &lt;div class=&quot;grid md:grid-cols-3 gap-8 max-w-6xl mx-auto&quot;&gt;\n",
+       "                &lt;div class=&quot;pricing-card&quot;&gt;\n",
+       "                    &lt;div class=&quot;text-sm font-bold text-gray-500 mb-2&quot;&gt;STARTER&lt;/div&gt;\n",
+       "                    &lt;div class=&quot;mb-6&quot;&gt;\n",
+       "                        &lt;span class=&quot;text-5xl font-bold&quot;&gt;$12&lt;/span&gt;\n",
+       "                        &lt;span class=&quot;text-gray-500&quot;&gt;/user/month&lt;/span&gt;\n",
+       "                    &lt;/div&gt;\n",
+       "                    &lt;ul class=&quot;space-y-4 mb-8&quot;&gt;\n",
+       "                        &lt;li class=&quot;flex items-center gap-2&quot;&gt;\n",
+       "                            &lt;span class=&quot;text-green-500&quot;&gt;✓&lt;/span&gt;\n",
+       "                            &lt;span&gt;Up to 10 team members&lt;/span&gt;\n",
+       "                        &lt;/li&gt;\n",
+       "                        &lt;li class=&quot;flex items-center gap-2&quot;&gt;\n",
+       "                            &lt;span class=&quot;text-green-500&quot;&gt;✓&lt;/span&gt;\n",
+       "                            &lt;span&gt;Unlimited projects&lt;/span&gt;\n",
+       "                        &lt;/li&gt;\n",
+       "                        &lt;li class=&quot;flex items-center gap-2&quot;&gt;\n",
+       "                            &lt;span class=&quot;text-green-500&quot;&gt;✓&lt;/span&gt;\n",
+       "                            &lt;span&gt;Basic integrations&lt;/span&gt;\n",
+       "                        &lt;/li&gt;\n",
+       "                        &lt;li class=&quot;flex items-center gap-2&quot;&gt;\n",
+       "                            &lt;span class=&quot;text-green-500&quot;&gt;✓&lt;/span&gt;\n",
+       "                            &lt;span&gt;5GB storage&lt;/span&gt;\n",
+       "                        &lt;/li&gt;\n",
+       "                    &lt;/ul&gt;\n",
+       "                    &lt;a href=&quot;#&quot; class=&quot;block text-center bg-gray-900 text-white py-3 rounded-full font-bold hover:bg-gray-800 transition&quot;&gt;\n",
+       "                        Start Free Trial\n",
+       "                    &lt;/a&gt;\n",
+       "                &lt;/div&gt;\n",
+       "\n",
+       "                &lt;div class=&quot;pricing-card featured&quot;&gt;\n",
+       "                    &lt;div class=&quot;text-sm font-bold text-orange-500 mb-2&quot;&gt;PROFESSIONAL&lt;/div&gt;\n",
+       "                    &lt;div class=&quot;mb-6&quot;&gt;\n",
+       "                        &lt;span class=&quot;text-5xl font-bold&quot;&gt;$29&lt;/span&gt;\n",
+       "                        &lt;span class=&quot;text-gray-500&quot;&gt;/user/month&lt;/span&gt;\n",
+       "                    &lt;/div&gt;\n",
+       "                    &lt;ul class=&quot;space-y-4 mb-8&quot;&gt;\n",
+       "                        &lt;li class=&quot;flex items-center gap-2&quot;&gt;\n",
+       "                            &lt;span class=&quot;text-green-500&quot;&gt;✓&lt;/span&gt;\n",
+       "                            &lt;span&gt;Unlimited team members&lt;/span&gt;\n",
+       "                        &lt;/li&gt;\n",
+       "                        &lt;li class=&quot;flex items-center gap-2&quot;&gt;\n",
+       "                            &lt;span class=&quot;text-green-500&quot;&gt;✓&lt;/span&gt;\n",
+       "                            &lt;span&gt;Advanced automation&lt;/span&gt;\n",
+       "                        &lt;/li&gt;\n",
+       "                        &lt;li class=&quot;flex items-center gap-2&quot;&gt;\n",
+       "                            &lt;span class=&quot;text-green-500&quot;&gt;✓&lt;/span&gt;\n",
+       "                            &lt;span&gt;All integrations&lt;/span&gt;\n",
+       "                        &lt;/li&gt;\n",
+       "                        &lt;li class=&quot;flex items-center gap-2&quot;&gt;\n",
+       "                            &lt;span class=&quot;text-green-500&quot;&gt;✓&lt;/span&gt;\n",
+       "                            &lt;span&gt;100GB storage&lt;/span&gt;\n",
+       "                        &lt;/li&gt;\n",
+       "                        &lt;li class=&quot;flex items-center gap-2&quot;&gt;\n",
+       "                            &lt;span class=&quot;text-green-500&quot;&gt;✓&lt;/span&gt;\n",
+       "                            &lt;span&gt;Priority support&lt;/span&gt;\n",
+       "                        &lt;/li&gt;\n",
+       "                    &lt;/ul&gt;\n",
+       "                    &lt;a href=&quot;#&quot; class=&quot;block text-center bg-orange-500 text-white py-3 rounded-full font-bold hover:bg-orange-600 transition&quot;&gt;\n",
+       "                        Start Free Trial\n",
+       "                    &lt;/a&gt;\n",
+       "                &lt;/div&gt;\n",
+       "\n",
+       "                &lt;div class=&quot;pricing-card&quot;&gt;\n",
+       "                    &lt;div class=&quot;text-sm font-bold text-gray-500 mb-2&quot;&gt;ENTERPRISE&lt;/div&gt;\n",
+       "                    &lt;div class=&quot;mb-6&quot;&gt;\n",
+       "                        &lt;span class=&quot;text-5xl font-bold&quot;&gt;Custom&lt;/span&gt;\n",
+       "                    &lt;/div&gt;\n",
+       "                    &lt;ul class=&quot;space-y-4 mb-8&quot;&gt;\n",
+       "                        &lt;li class=&quot;flex items-center gap-2&quot;&gt;\n",
+       "                            &lt;span class=&quot;text-green-500&quot;&gt;✓&lt;/span&gt;\n",
+       "                            &lt;span&gt;Everything in Pro&lt;/span&gt;\n",
+       "                        &lt;/li&gt;\n",
+       "                        &lt;li class=&quot;flex items-center gap-2&quot;&gt;\n",
+       "                            &lt;span class=&quot;text-green-500&quot;&gt;✓&lt;/span&gt;\n",
+       "                            &lt;span&gt;Advanced security&lt;/span&gt;\n",
+       "                        &lt;/li&gt;\n",
+       "                        &lt;li class=&quot;flex items-center gap-2&quot;&gt;\n",
+       "                            &lt;span class=&quot;text-green-500&quot;&gt;✓&lt;/span&gt;\n",
+       "                            &lt;span&gt;Custom integrations&lt;/span&gt;\n",
+       "                        &lt;/li&gt;\n",
+       "                        &lt;li class=&quot;flex items-center gap-2&quot;&gt;\n",
+       "                            &lt;span class=&quot;text-green-500&quot;&gt;✓&lt;/span&gt;\n",
+       "                            &lt;span&gt;Unlimited storage&lt;/span&gt;\n",
+       "                        &lt;/li&gt;\n",
+       "                        &lt;li class=&quot;flex items-center gap-2&quot;&gt;\n",
+       "                            &lt;span class=&quot;text-green-500&quot;&gt;✓&lt;/span&gt;\n",
+       "                            &lt;span&gt;Dedicated support&lt;/span&gt;\n",
+       "                        &lt;/li&gt;\n",
+       "                    &lt;/ul&gt;\n",
+       "                    &lt;a href=&quot;#&quot; class=&quot;block text-center bg-gray-900 text-white py-3 rounded-full font-bold hover:bg-gray-800 transition&quot;&gt;\n",
+       "                        Contact Sales\n",
+       "                    &lt;/a&gt;\n",
+       "                &lt;/div&gt;\n",
+       "            &lt;/div&gt;\n",
+       "        &lt;/div&gt;\n",
+       "    &lt;/section&gt;\n",
+       "\n",
+       "    &lt;!-- CTA Section --&gt;\n",
+       "    &lt;section class=&quot;py-32 px-8 bg-gradient-to-br from-orange-500 to-yellow-400 text-white&quot;&gt;\n",
+       "        &lt;div class=&quot;max-w-4xl mx-auto text-center&quot;&gt;\n",
+       "            &lt;h2 class=&quot;text-5xl md:text-6xl font-bold mb-6&quot;&gt;Ready to build momentum?&lt;/h2&gt;\n",
+       "            &lt;p class=&quot;text-2xl mb-12 text-white/90&quot;&gt;Join 50,000+ teams shipping faster with Momentum&lt;/p&gt;\n",
+       "            &lt;div class=&quot;flex flex-wrap gap-4 justify-center&quot;&gt;\n",
+       "                &lt;a href=&quot;#&quot; class=&quot;bg-white text-orange-500 px-10 py-5 rounded-full font-bold text-lg hover:bg-gray-100 transition inline-block&quot;&gt;\n",
+       "                    Start Free Trial\n",
+       "                &lt;/a&gt;\n",
+       "                &lt;a href=&quot;#&quot; class=&quot;bg-white/10 backdrop-blur text-white px-10 py-5 rounded-full font-bold text-lg hover:bg-white/20 transition inline-block&quot;&gt;\n",
+       "                    Schedule Demo\n",
+       "                &lt;/a&gt;\n",
+       "            &lt;/div&gt;\n",
+       "            &lt;p class=&quot;mt-8 text-white/80&quot;&gt;No credit card required • 14-day free trial • Cancel anytime&lt;/p&gt;\n",
+       "        &lt;/div&gt;\n",
+       "    &lt;/section&gt;\n",
+       "\n",
+       "    &lt;!-- Footer --&gt;\n",
+       "    &lt;footer class=&quot;bg-gray-900 text-white py-16 px-8&quot;&gt;\n",
+       "        &lt;div class=&quot;max-w-7xl mx-auto&quot;&gt;\n",
+       "            &lt;div class=&quot;grid md:grid-cols-4 gap-12 mb-12&quot;&gt;\n",
+       "                &lt;div&gt;\n",
+       "                    &lt;div class=&quot;flex items-center gap-2 mb-4&quot;&gt;\n",
+       "                        &lt;div class=&quot;w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-yellow-400 flex items-center justify-center&quot;&gt;\n",
+       "                            &lt;span class=&quot;text-white font-bold text-xl&quot;&gt;M&lt;/span&gt;\n",
+       "                        &lt;/div&gt;\n",
+       "                        &lt;span class=&quot;text-2xl font-bold&quot;&gt;Momentum&lt;/span&gt;\n",
+       "                    &lt;/div&gt;\n",
+       "                    &lt;p class=&quot;text-gray-400&quot;&gt;Building momentum for teams that ship.&lt;/p&gt;\n",
+       "                &lt;/div&gt;\n",
+       "                \n",
+       "                &lt;div&gt;\n",
+       "                    &lt;h4 class=&quot;font-bold mb-4&quot;&gt;Product&lt;/h4&gt;\n",
+       "                    &lt;ul class=&quot;space-y-2 text-gray-400&quot;&gt;\n",
+       "                        &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;hover:text-white transition&quot;&gt;Features&lt;/a&gt;&lt;/li&gt;\n",
+       "                        &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;hover:text-white transition&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;\n",
+       "                        &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;hover:text-white transition&quot;&gt;Integrations&lt;/a&gt;&lt;/li&gt;\n",
+       "                        &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;hover:text-white transition&quot;&gt;Changelog&lt;/a&gt;&lt;/li&gt;\n",
+       "                    &lt;/ul&gt;\n",
+       "                &lt;/div&gt;\n",
+       "                \n",
+       "                &lt;div&gt;\n",
+       "                    &lt;h4 class=&quot;font-bold mb-4&quot;&gt;Company&lt;/h4&gt;\n",
+       "                    &lt;ul class=&quot;space-y-2 text-gray-400&quot;&gt;\n",
+       "                        &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;hover:text-white transition&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\n",
+       "                        &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;hover:text-white transition&quot;&gt;Blog&lt;/a&gt;&lt;/li&gt;\n",
+       "                        &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;hover:text-white transition&quot;&gt;Careers&lt;/a&gt;&lt;/li&gt;\n",
+       "                        &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;hover:text-white transition&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\n",
+       "                    &lt;/ul&gt;\n",
+       "                &lt;/div&gt;\n",
+       "                \n",
+       "                &lt;div&gt;\n",
+       "                    &lt;h4 class=&quot;font-bold mb-4&quot;&gt;Legal&lt;/h4&gt;\n",
+       "                    &lt;ul class=&quot;space-y-2 text-gray-400&quot;&gt;\n",
+       "                        &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;hover:text-white transition&quot;&gt;Privacy&lt;/a&gt;&lt;/li&gt;\n",
+       "                        &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;hover:text-white transition&quot;&gt;Terms&lt;/a&gt;&lt;/li&gt;\n",
+       "                        &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;hover:text-white transition&quot;&gt;Security&lt;/a&gt;&lt;/li&gt;\n",
+       "                        &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;hover:text-white transition&quot;&gt;GDPR&lt;/a&gt;&lt;/li&gt;\n",
+       "                    &lt;/ul&gt;\n",
+       "                &lt;/div&gt;\n",
+       "            &lt;/div&gt;\n",
+       "            \n",
+       "            &lt;div class=&quot;border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4&quot;&gt;\n",
+       "                &lt;p class=&quot;text-gray-400&quot;&gt;© 2024 Momentum. All rights reserved.&lt;/p&gt;\n",
+       "                &lt;div class=&quot;flex gap-6&quot;&gt;\n",
+       "                    &lt;a href=&quot;#&quot; class=&quot;text-gray-400 hover:text-white transition&quot;&gt;Twitter&lt;/a&gt;\n",
+       "                    &lt;a href=&quot;#&quot; class=&quot;text-gray-400 hover:text-white transition&quot;&gt;LinkedIn&lt;/a&gt;\n",
+       "                    &lt;a href=&quot;#&quot; class=&quot;text-gray-400 hover:text-white transition&quot;&gt;GitHub&lt;/a&gt;\n",
+       "                &lt;/div&gt;\n",
+       "            &lt;/div&gt;\n",
+       "        &lt;/div&gt;\n",
+       "    &lt;/footer&gt;\n",
+       "\n",
+       "    &lt;script&gt;\n",
+       "        // Navbar scroll effect\n",
+       "        const navbar = document.querySelector(&#x27;.navbar&#x27;);\n",
+       "        window.addEventListener(&#x27;scroll&#x27;, () =&gt; {\n",
+       "            if (window.scrollY &gt; 50) {\n",
+       "                navbar.classList.add(&#x27;scrolled&#x27;);\n",
+       "            } else {\n",
+       "                navbar.classList.remove(&#x27;scrolled&#x27;);\n",
+       "            }\n",
+       "        });\n",
+       "\n",
+       "        // Smooth scroll for anchor links\n",
+       "        document.querySelectorAll(&#x27;a[href^=&quot;#&quot;]&#x27;).forEach(anchor =&gt; {\n",
+       "            anchor.addEventListener(&#x27;click&#x27;, function (e) {\n",
+       "                e.preventDefault();\n",
+       "                const target = document.querySelector(this.getAttribute(&#x27;href&#x27;));\n",
+       "                if (target) {\n",
+       "                    target.scrollIntoView({\n",
+       "                        behavior: &#x27;smooth&#x27;,\n",
+       "                        block: &#x27;start&#x27;\n",
+       "                    });\n",
+       "                }\n",
+       "            });\n",
+       "        });\n",
+       "\n",
+       "        // Intersection Observer for fade-in animations\n",
+       "        const observerOptions = {\n",
+       "            threshold: 0.1,\n",
+       "            rootMargin: &#x27;0px 0px -50px 0px&#x27;\n",
+       "        };\n",
+       "\n",
+       "        const observer = new IntersectionObserver((entries) =&gt; {\n",
+       "            entries.forEach(entry =&gt; {\n",
+       "                if (entry.isIntersecting) {\n",
+       "                    entry.target.style.opacity = &#x27;1&#x27;;\n",
+       "                    entry.target.style.transform = &#x27;translateY(0)&#x27;;\n",
+       "                }\n",
+       "            });\n",
+       "        }, observerOptions);\n",
+       "\n",
+       "        document.querySelectorAll(&#x27;.feature-card, .testimonial, .pricing-card&#x27;).forEach(el =&gt; {\n",
+       "            el.style.opacity = &#x27;0&#x27;;\n",
+       "            el.style.transform = &#x27;translateY(30px)&#x27;;\n",
+       "            el.style.transition = &#x27;opacity 0.6s ease, transform 0.6s ease&#x27;;\n",
+       "            observer.observe(el);\n",
+       "        });\n",
+       "    &lt;/script&gt;\n",
+       "&lt;/body&gt;\n",
+       "&lt;/html&gt;\n",
+       "```</pre>\n",
+       "    </div>\n",
+       "    "
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "\n",
+      "✅ Complete in 98.2s\n",
+      "\n",
+      "💾 HTML saved to: html_outputs/20251021_101010.html\n",
+      "🌐 Opened in browser: html_outputs/20251021_101010.html\n"
+     ]
+    },
+    {
+     "data": {
+      "text/plain": [
+       "'html_outputs/20251021_101010.html'"
+      ]
+     },
+     "execution_count": 3,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "BASE_SYSTEM_PROMPT = \"\"\"\n",
+    "You are an expert frontend engineer skilled at crafting beautiful, performant frontend applications.\n",
+    "\n",
+    "<tech_stack>\n",
+    "Use vanilla HTML, CSS, & Javascript. Use Tailwind CSS for your CSS variables.\n",
+    "</tech_stack>\n",
+    "\n",
+    "<output>\n",
+    "Generate complete, self-contained HTML code for the requested frontend application. Include all CSS and JavaScript inline. \n",
+    "\n",
+    "CRITICAL: You must wrap your HTML code in triple backticks with html language identifier like this:\n",
+    "```html\n",
+    "<!DOCTYPE html>\n",
+    "<html>\n",
+    "...\n",
+    "</html>\n",
+    "```\n",
+    "\n",
+    "Our parser depends on this format - do not deviate from it!\n",
+    "</output>\n",
+    "\"\"\"\n",
+    "\n",
+    "USER_PROMPT = \"Create a SaaS landing page for a project management tool\"\n",
+    "\n",
+    "# Generate with distilled aesthetics prompt\n",
+    "generate_html_with_claude(\n",
+    "    BASE_SYSTEM_PROMPT + \"\\n\\n\" + DISTILLED_AESTHETICS_PROMPT,\n",
+    "    USER_PROMPT\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Isolated Prompting\n",
+    "\n",
+    "The full aesthetics prompt works well for general use, but sometimes you want targeted control. You can isolate specific dimensions (typography, color, motion) or lock in a particular theme. This gives you faster generation times and more predictable outputs.\n",
+    "\n",
+    "### Example 1: Typography Only\n",
+    "\n",
+    "Isolate a single design dimension when you want to improve one aspect without changing others:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "TYPOGRAPHY_PROMPT = \"\"\"\n",
+    "<use_interesting_fonts>\n",
+    "Typography instantly signals quality. Avoid using boring, generic fonts.\n",
+    "\n",
+    "**Never use:** Inter, Roboto, Open Sans, Lato, default system fonts\n",
+    "\n",
+    "**Impact choices:**\n",
+    "- Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk\n",
+    "- Editorial: Playfair Display, Crimson Pro, Fraunces\n",
+    "- Startup: Clash Display, Satoshi, Cabinet Grotesk\n",
+    "- Technical: IBM Plex family, Source Sans 3\n",
+    "- Distinctive: Bricolage Grotesque, Obviously, Newsreader\n",
+    "\n",
+    "**Pairing principle:** High contrast = interesting. Display + monospace, serif + geometric sans, variable font across weights.\n",
+    "\n",
+    "**Use extremes:** 100/200 weight vs 800/900, not 400 vs 600. Size jumps of 3x+, not 1.5x.\n",
+    "\n",
+    "Pick one distinctive font, use it decisively. Load from Google Fonts. State your choice before coding.\n",
+    "</use_interesting_fonts>\n",
+    "\"\"\"\n",
+    "\n",
+    "# Generate with typography-only guidance\n",
+    "generate_html_with_claude(\n",
+    "    BASE_SYSTEM_PROMPT + \"\\n\\n\" + TYPOGRAPHY_PROMPT,\n",
+    "    USER_PROMPT\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Example 2: Theme Constraint\n",
+    "\n",
+    "Lock in a specific aesthetic when you want consistent theming across generations:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "SOLARPUNK_THEME_PROMPT = \"\"\"\n",
+    "<always_use_solarpunk_theme>\n",
+    "Always design with Solarpunk aesthetic:\n",
+    "- Warm, optimistic color palettes (greens, golds, earth tones)\n",
+    "- Organic shapes mixed with technical elements\n",
+    "- Nature-inspired patterns and textures\n",
+    "- Bright, hopeful atmosphere\n",
+    "- Retro-futuristic typography\n",
+    "</always_use_solarpunk_theme>\n",
+    "\"\"\"\n",
+    "\n",
+    "# Generate with theme constraint\n",
+    "generate_html_with_claude(\n",
+    "    BASE_SYSTEM_PROMPT + \"\\n\\n\" + SOLARPUNK_THEME_PROMPT,\n",
+    "    \"Create a dashboard for renewable energy monitoring\"\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Summary\n",
+    "\n",
+    "Claude has strong design capabilities but defaults to safe, generic choices. The techniques in this guide - targeting specific design dimensions, referencing concrete inspirations, and explicitly avoiding common defaults - reliably produce more distinctive output. The full aesthetics prompt works well as a baseline. For more control, use isolated prompts to focus on individual aspects or lock in specific themes across multiple generations."
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "py311",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.13"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
diff --git a/images/frontend_aesthetics/baseline_dashboard.png b/images/frontend_aesthetics/baseline_dashboard.png
new file mode 100644
index 00000000..f2fda6cd
Binary files /dev/null and b/images/frontend_aesthetics/baseline_dashboard.png differ
diff --git a/images/frontend_aesthetics/baseline_portfolio.png b/images/frontend_aesthetics/baseline_portfolio.png
new file mode 100644
index 00000000..da106be1
Binary files /dev/null and b/images/frontend_aesthetics/baseline_portfolio.png differ
diff --git a/images/frontend_aesthetics/baseline_saas.png b/images/frontend_aesthetics/baseline_saas.png
new file mode 100644
index 00000000..95f01359
Binary files /dev/null and b/images/frontend_aesthetics/baseline_saas.png differ
diff --git a/images/frontend_aesthetics/distilled_dashboard.png b/images/frontend_aesthetics/distilled_dashboard.png
new file mode 100644
index 00000000..1c556a3c
Binary files /dev/null and b/images/frontend_aesthetics/distilled_dashboard.png differ
diff --git a/images/frontend_aesthetics/distilled_portfolio.png b/images/frontend_aesthetics/distilled_portfolio.png
new file mode 100644
index 00000000..a1e82c08
Binary files /dev/null and b/images/frontend_aesthetics/distilled_portfolio.png differ
diff --git a/images/frontend_aesthetics/distilled_saas.png b/images/frontend_aesthetics/distilled_saas.png
new file mode 100644
index 00000000..7eb8cc30
Binary files /dev/null and b/images/frontend_aesthetics/distilled_saas.png differ
diff --git a/lychee.toml b/lychee.toml
index 4b3cde5e..b503b52d 100644
--- a/lychee.toml
+++ b/lychee.toml
@@ -27,7 +27,7 @@ exclude_path = [
     ".git/",
     "__pycache__/",
     ".ipynb_checkpoints/",
-    "*.pyc",
+    ".pyc",
     ".github/",
     "scripts/"
 ]
@@ -48,4 +48,4 @@ accept = [403, 429]
 # Headers for authenticated requests
 headers = [
     "User-Agent=Mozilla/5.0 (compatible; lychee/0.20.1; anthropic-cookbook)"
-]
\ No newline at end of file
+]
diff --git a/skills/README.md b/skills/README.md
index 12ecac6d..fde124ac 100644
--- a/skills/README.md
+++ b/skills/README.md
@@ -17,15 +17,17 @@ Skills are organized packages of instructions, executable code, and resources th
 
 ## Key Features
 
-✨ **Progressive Disclosure Architecture** - Skills load only when needed, optimizing token usage
-📊 **Financial Focus** - Real-world examples for finance and business analytics
-🔧 **Custom Skills Development** - Learn to build and deploy your own skills
-🎯 **Production-Ready Examples** - Code you can adapt for immediate use
+- ✨ **Progressive Disclosure Architecture** - Skills load only when needed, optimizing token usage
+- 📊 **Financial Focus** - Real-world examples for finance and business analytics
+- 🔧 **Custom Skills Development** - Learn to build and deploy your own skills
+- 🎯 **Production-Ready Examples** - Code you can adapt for immediate use
 
 ## Cookbook Structure
 
 ### 📚 [Notebook 1: Introduction to Skills](notebooks/01_skills_introduction.ipynb)
+
 Learn the fundamentals of Claude's Skills feature with quick-start examples.
+
 - Understanding Skills architecture
 - Setting up the API with beta headers
 - Creating your first Excel spreadsheet
@@ -33,14 +35,18 @@ Learn the fundamentals of Claude's Skills feature with quick-start examples.
 - Exporting to PDF format
 
 ### 💼 [Notebook 2: Financial Applications](notebooks/02_skills_financial_applications.ipynb)
+
 Explore powerful business use cases with real financial data.
+
 - Building financial dashboards with charts and pivot tables
 - Portfolio analysis and investment reporting
 - Cross-format workflows: CSV → Excel → PowerPoint → PDF
 - Token optimization strategies
 
 ### 🔧 [Notebook 3: Custom Skills Development](notebooks/03_skills_custom_development.ipynb)
+
 Master the art of creating your own specialized skills.
+
 - Building a financial ratio calculator
 - Creating company brand guidelines skill
 - Advanced: Financial modeling suite
@@ -57,35 +63,40 @@ Master the art of creating your own specialized skills.
 ### Installation
 
 1. **Clone the repository**
+
 ```bash
 git clone https://github.com/anthropics/claude-cookbooks.git
 cd claude-cookbooks/skills
 ```
 
 2. **Create virtual environment** (recommended)
+
 ```bash
 python -m venv venv
 source venv/bin/activate  # On Windows: venv\Scripts\activate
 ```
 
 3. **Install dependencies**
+
 ```bash
 pip install -r requirements.txt
 ```
 
 4. **Configure API key**
+
 ```bash
 cp .env.example .env
 # Edit .env and add your ANTHROPIC_API_KEY
 ```
 
 5. **Launch Jupyter**
+
 ```bash
 jupyter notebook
 ```
 
 6. **Start with Notebook 1**
-Open `notebooks/01_skills_introduction.ipynb` and follow along!
+   Open `notebooks/01_skills_introduction.ipynb` and follow along!
 
 ## Sample Data
 
@@ -136,6 +147,7 @@ client = Anthropic(
 ```
 
 **Required Beta Headers:**
+
 - `code-execution-2025-08-25` - Enables code execution for Skills
 - `files-api-2025-04-14` - Required for downloading generated files
 - `skills-2025-10-02` - Enables Skills feature
@@ -216,6 +228,7 @@ client.beta.files.delete(file_id="file_abc123...")
 ```
 
 **Important Notes:**
+
 - Files are stored temporarily on Anthropic's servers
 - Downloaded files should be saved to your local `outputs/` directory
 - The Files API uses the same API key as the Messages API
@@ -228,12 +241,12 @@ See the [Files API documentation](https://docs.claude.com/en/api/files-content)
 
 Claude comes with these pre-built skills:
 
-| Skill | ID | Description |
-|-------|-----|-------------|
-| Excel | `xlsx` | Create and manipulate Excel workbooks with formulas, charts, and formatting |
-| PowerPoint | `pptx` | Generate professional presentations with slides, charts, and transitions |
-| PDF | `pdf` | Create formatted PDF documents with text, tables, and images |
-| Word | `docx` | Generate Word documents with rich formatting and structure |
+| Skill      | ID     | Description                                                                 |
+| ---------- | ------ | --------------------------------------------------------------------------- |
+| Excel      | `xlsx` | Create and manipulate Excel workbooks with formulas, charts, and formatting |
+| PowerPoint | `pptx` | Generate professional presentations with slides, charts, and transitions    |
+| PDF        | `pdf`  | Create formatted PDF documents with text, tables, and images                |
+| Word       | `docx` | Generate Word documents with rich formatting and structure                  |
 
 ## Creating Custom Skills
 
@@ -253,16 +266,19 @@ Learn more in [Notebook 3](notebooks/03_skills_custom_development.ipynb).
 ## Common Use Cases
 
 ### Financial Reporting
+
 - Automated quarterly reports
 - Budget variance analysis
 - Investment performance dashboards
 
 ### Data Analysis
+
 - Excel-based analytics with complex formulas
 - Pivot table generation
 - Statistical analysis and visualization
 
 ### Document Automation
+
 - Branded presentation generation
 - Report compilation from multiple sources
 - Cross-format document conversion
@@ -279,34 +295,43 @@ Learn more in [Notebook 3](notebooks/03_skills_custom_development.ipynb).
 ### Common Issues
 
 **API Key Not Found**
+
 ```
 ValueError: ANTHROPIC_API_KEY not found
 ```
+
 → Make sure you've copied `.env.example` to `.env` and added your key
 
 **Skills Beta Header Missing**
+
 ```
 Error: Skills feature requires beta header
 ```
+
 → Ensure you're using the correct beta headers as shown in the notebooks
 
 **Token Limit Exceeded**
+
 ```
 Error: Request exceeds token limit
 ```
+
 → Break large operations into smaller chunks or use progressive disclosure
 
 ## Resources
 
 ### Documentation
+
 - 📖 [Claude API Documentation](https://docs.anthropic.com/en/api/messages)
 - 🔧 [Skills Documentation](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview)
 
 ### Support Articles
+
 - 📚 [Teach Claude your way of working using Skills](https://support.claude.com/en/articles/12580051-teach-claude-your-way-of-working-using-skills) - User guide for working with Skills
 - 🛠️ [How to create a skill with Claude through conversation](https://support.claude.com/en/articles/12599426-how-to-create-a-skill-with-claude-through-conversation) - Interactive skill creation guide
 
 ### Community & Support
+
 - 💬 [Claude Support](https://support.claude.com)
 - 🐙 [GitHub Issues](https://github.com/anthropics/claude-cookbooks/issues)
 
@@ -326,4 +351,4 @@ Special thanks to the Anthropic team for developing the Skills feature and provi
 
 **Questions?** Check the [FAQ](docs/FAQ.md) or open an issue.
 
-**Ready to start?** Open [Notebook 1](notebooks/01_skills_introduction.ipynb) and let's build something amazing! 🎉
\ No newline at end of file
+**Ready to start?** Open [Notebook 1](notebooks/01_skills_introduction.ipynb) and let's build something amazing! 🎉