drafted 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drafted",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Design workspace for AI agents — MCP server and CLI",
   "type": "module",
   "bin": {
@@ -11,6 +11,7 @@
     "mcp/",
     "cli/",
     "shared/",
+    "skills/",
     "README.md"
   ],
   "dependencies": {

package/skills/import-website-to-drafted.md

@@ -0,0 +1,317 @@
+---
+description: Import an existing website into Drafted as a design frame. Renders the page in a headless browser to capture the full DOM (including SPA content), downloads all assets, rewrites paths, then uploads via MCP tools.
+argument-hint: "[URL or local path, e.g., 'https://example.com' or './dist']"
+---
+# /import-website-to-drafted
+
+Import a website into Drafted as a fully rendered frame with all its assets.
+
+## How it works
+
+Drafted frames render in iframes. The server injects a `<base>` tag so relative paths like `<link href="css/styles.css">` resolve to the frame's assets in R2 storage. You upload the HTML as a frame via `write`, and all referenced files (CSS, JS, images, fonts) as assets via `upload_asset` or `batch`.
+
+**Most modern sites are SPAs** (React, Framer, Webflow, Next.js) where the HTML source is just a shell and the real content is rendered by JavaScript. A simple HTTP fetch won't capture the content. This skill uses Puppeteer to render the page fully before capturing.
+
+## Step 1: Create/open a project
+
+```
+create_project({ name: "My Import" })
+open_project({ projectId: "..." })
+```
+
+## Step 2: Ensure Puppeteer is available
+
+```bash
+npm ls puppeteer 2>/dev/null || npm install puppeteer
+```
+
+## Step 3: Render, capture, and download assets
+
+Run this script locally. It launches a headless browser, renders the page fully (including SPA content), captures the complete DOM, then downloads all external assets and rewrites URLs to relative paths.
+
+**Adapt `SITE_URL` as needed:**
+
+```bash
+node -e "
+const puppeteer = require('puppeteer');
+const https = require('https');
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const { URL } = require('url');
+
+const SITE_URL = 'https://example.com';  // ← CHANGE THIS
+const OUT_DIR = '/tmp/site-import';
+
+// ── Helpers ──────────────────────────────────────────────────────
+
+function download(url) {
+  return new Promise((resolve, reject) => {
+    const mod = url.startsWith('https') ? https : http;
+    mod.get(url, { headers: { 'User-Agent': 'Mozilla/5.0' } }, res => {
+      if (res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
+        return download(res.headers.location).then(resolve, reject);
+      }
+      if (res.statusCode >= 400) return reject(new Error('HTTP ' + res.statusCode));
+      const chunks = [];
+      res.on('data', c => chunks.push(c));
+      res.on('end', () => resolve(Buffer.concat(chunks)));
+      res.on('error', reject);
+    }).on('error', reject);
+  });
+}
+
+function urlToAssetPath(urlStr) {
+  try {
+    const u = new URL(urlStr);
+    const domain = u.hostname.replace(/[^a-z0-9.-]/g, '_');
+    let p = u.pathname.replace(/[?#].*/, '');
+    if (!p || p === '/') p = '/index';
+    if (!path.extname(p)) {
+      // Guess extension from common patterns
+      if (urlStr.includes('font') || urlStr.includes('woff')) p += '.woff2';
+      else if (urlStr.includes('css') || urlStr.includes('stylesheet')) p += '.css';
+      else p += '.bin';
+    }
+    return 'assets/' + domain + p;
+  } catch { return null; }
+}
+
+const MIME_BY_EXT = {
+  '.css': 'text/css', '.js': 'application/javascript', '.mjs': 'application/javascript',
+  '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif',
+  '.webp': 'image/webp', '.svg': 'image/svg+xml', '.ico': 'image/x-icon',
+  '.woff': 'font/woff', '.woff2': 'font/woff2', '.ttf': 'font/ttf', '.otf': 'font/otf',
+  '.json': 'application/json', '.pdf': 'application/pdf',
+};
+
+// ── Main ─────────────────────────────────────────────────────────
+
+(async () => {
+  fs.mkdirSync(OUT_DIR, { recursive: true });
+
+  // 1. Render the page in a real browser
+  console.log('Launching browser...');
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: ['--no-sandbox', '--disable-setuid-sandbox'],
+  });
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1440, height: 900 });
+
+  console.log('Navigating to', SITE_URL);
+  await page.goto(SITE_URL, { waitUntil: 'networkidle0', timeout: 30000 });
+
+  // Scroll to bottom to trigger lazy-loaded content
+  await page.evaluate(async () => {
+    await new Promise(resolve => {
+      let total = 0;
+      const timer = setInterval(() => {
+        window.scrollBy(0, 400);
+        total += 400;
+        if (total >= document.body.scrollHeight) { clearInterval(timer); resolve(); }
+      }, 100);
+      setTimeout(() => { clearInterval(timer); resolve(); }, 5000);
+    });
+    window.scrollTo(0, 0);
+  });
+  await new Promise(r => setTimeout(r, 1000)); // let lazy content settle
+
+  // 2. Capture the fully rendered DOM
+  let html = await page.content();
+  const pageHeight = await page.evaluate(() => document.documentElement.scrollHeight);
+  console.log('Captured rendered DOM (' + (html.length / 1024).toFixed(0) + ' KB, page height: ' + pageHeight + 'px)');
+
+  // 3. Capture computed styles and inline them (prevents style loss)
+  const inlineStyles = await page.evaluate(() => {
+    const styles = [];
+    for (const sheet of document.styleSheets) {
+      try {
+        const rules = Array.from(sheet.cssRules || []).map(r => r.cssText).join('\\n');
+        if (rules) styles.push(rules);
+      } catch { /* cross-origin stylesheet, skip */ }
+    }
+    return styles.join('\\n');
+  });
+
+  await browser.close();
+
+  // 4. Find all external URLs in the rendered HTML + inline styles
+  const combined = html + '\\n' + inlineStyles;
+  const urlPattern = /(?:src|href|srcset)=[\"']?(https?:\\/\\/[^\"'\\s,>]+)[\"']?|url\\([\"']?(https?:\\/\\/[^\"')]+)[\"']?\\)/g;
+  const skipDomains = ['google-analytics.com', 'googletagmanager.com', 'segment.com', 'hotjar.com', 'facebook.net', 'events.framer.com'];
+  const assetExtensions = /\\.(css|js|mjs|json|png|jpe?g|gif|webp|svg|ico|woff2?|ttf|otf|eot|mp4|webm|pdf)(\\?|$)/i;
+
+  const assets = new Map();
+  let match;
+  while ((match = urlPattern.exec(combined)) !== null) {
+    const url = (match[1] || match[2] || '').split(/[\\s,]/)[0]; // handle srcset
+    if (!url || assets.has(url)) continue;
+    try { if (skipDomains.some(d => url.includes(d))) continue; } catch {}
+    if (!assetExtensions.test(url) && !url.includes('font') && !url.includes('woff')) continue;
+    const assetPath = urlToAssetPath(url);
+    if (assetPath) assets.set(url, assetPath);
+  }
+
+  console.log('Found', assets.size, 'assets to download');
+
+  // 5. Download each asset
+  let downloaded = 0, failed = 0;
+  for (const [url, relPath] of assets) {
+    const outPath = path.join(OUT_DIR, relPath);
+    fs.mkdirSync(path.dirname(outPath), { recursive: true });
+    try {
+      const data = await download(url);
+      fs.writeFileSync(outPath, data);
+      downloaded++;
+    } catch (e) {
+      console.error('  FAILED:', url.substring(0, 80), e.message);
+      failed++;
+      assets.delete(url); // remove so we don't rewrite to a missing file
+    }
+  }
+  console.log('Downloaded:', downloaded, '| Failed:', failed);
+
+  // 6. Rewrite URLs in HTML AND in downloaded text files (CSS, JS, MJS)
+  const rewriteTargets = [{ content: html, path: path.join(OUT_DIR, 'index.html') }];
+  for (const [, relPath] of assets) {
+    const ext = path.extname(relPath).toLowerCase();
+    if (['.css', '.js', '.mjs', '.json', '.svg'].includes(ext)) {
+      const filePath = path.join(OUT_DIR, relPath);
+      if (fs.existsSync(filePath)) {
+        rewriteTargets.push({ content: fs.readFileSync(filePath, 'utf8'), path: filePath });
+      }
+    }
+  }
+
+  for (const target of rewriteTargets) {
+    let content = target.content;
+    for (const [url, relPath] of assets) {
+      // In the main HTML, use relative paths directly
+      // In asset files, compute the relative path from the asset to the referenced asset
+      if (target.path.endsWith('index.html')) {
+        content = content.split(url).join(relPath);
+      } else {
+        const fromDir = path.dirname(target.path.replace(OUT_DIR + '/', ''));
+        const toPath = relPath;
+        const rel = path.relative(fromDir, toPath);
+        content = content.split(url).join(rel);
+      }
+    }
+    if (target.path.endsWith('index.html')) html = content;
+    fs.writeFileSync(target.path, content);
+  }
+
+  // 7. Inject captured styles into the HTML (ensures styles survive without external sheets)
+  if (inlineStyles) {
+    const styleTag = '<style id=\"captured-styles\">' + inlineStyles + '</style>';
+    if (html.includes('</head>')) {
+      html = html.replace('</head>', styleTag + '</head>');
+    } else {
+      html = styleTag + html;
+    }
+  }
+
+  // 8. Clean up HTML
+  html = html.replace(/<base[^>]*>/gi, '');
+  html = html.replace(/<meta[^>]*Content-Security-Policy[^>]*>/gi, '');
+  html = html.replace(/<script[^>]*(?:analytics|gtag|segment|hotjar|events\\.framer)[^>]*>.*?<\\/script>/gis, '');
+  html = html.replace(/navigator\\.serviceWorker\\.register\\([^)]*\\)/g, '');
+  html = html.replace(/\\/\\/# sourceMappingURL=[^\\n]*/g, '');
+
+  // 9. Write final HTML
+  fs.writeFileSync(path.join(OUT_DIR, 'index.html'), html);
+
+  // 10. Write manifest
+  const manifest = Array.from(assets.entries()).map(([url, relPath]) => ({
+    asset_path: relPath,
+    file_path: path.join(OUT_DIR, relPath),
+    exists: fs.existsSync(path.join(OUT_DIR, relPath)),
+  })).filter(a => a.exists);
+  fs.writeFileSync(path.join(OUT_DIR, 'manifest.json'), JSON.stringify(manifest, null, 2));
+
+  console.log('\\nOutput:', OUT_DIR);
+  console.log('HTML:', path.join(OUT_DIR, 'index.html'), '(' + (html.length / 1024).toFixed(0) + ' KB)');
+  console.log('Page height:', pageHeight, 'px (use this for frame height)');
+  console.log('Manifest:', manifest.length, 'assets ready to upload');
+})().catch(e => { console.error(e); process.exit(1); });
+"
+```
+
+This outputs:
+- `/tmp/site-import/index.html` — fully rendered HTML with relative paths and captured styles
+- `/tmp/site-import/assets/...` — all downloaded assets (with URLs rewritten inside CSS/JS files too)
+- `/tmp/site-import/manifest.json` — asset list for the upload step
+- The page height in pixels (use this for the frame height)
+
+**Key improvements over a plain HTTP fetch:**
+- Renders the page in a real browser — captures SPA content (React, Framer, Webflow, etc.)
+- Scrolls to trigger lazy-loaded images and content
+- Captures computed CSS and inlines it — styles survive even if external sheets fail
+- Rewrites URLs inside CSS and JS files, not just HTML
+- Handles `srcset` attributes
+
+## Step 4: Write the frame
+
+Use `file_path` to write the HTML directly from disk — this handles large files that won't fit in a `content` parameter:
+
+```
+write({
+  path: "/designs/my-site/homepage.html",
+  file_path: "/tmp/site-import/index.html",
+  width: 1440,
+  height: <page-height-from-script-output>
+})
+```
+
+The `write` tool reads `.html` files as inline content (not binary), so the frame gets proper base tag injection and all relative asset paths will resolve. Note the frame ID in the response — you'll use it in the next step.
+
+**Use the page height from the script output** as the frame height so the full page is visible without scrolling within the frame.
+
+## Step 5: Upload assets
+
+Read `manifest.json` and batch upload all assets:
+
+```
+batch({
+  operations: [
+    { tool: "upload_asset", asset_path: "assets/fonts.gstatic.com/s/outfit/v14/abc.woff2", file_path: "/tmp/site-import/assets/fonts.gstatic.com/s/outfit/v14/abc.woff2", frame_id: "<frame-id>" },
+    { tool: "upload_asset", asset_path: "assets/cdn.example.com/img/hero.png", file_path: "/tmp/site-import/assets/cdn.example.com/img/hero.png", frame_id: "<frame-id>" },
+    // ... one entry per asset from manifest.json
+  ]
+})
+```
+
+Associate assets with the frame via `frame_id` so they're cleaned up if the frame is deleted.
+
+**For large manifests (30+ assets):** Split into batches of 20-30 operations to avoid timeouts.
+
+## Step 6: Verify
+
+```
+screenshot({ target: "/designs/my-site/homepage.html", fullPage: true })
+```
+
+Check for missing images, broken styles, or layout issues. If assets are missing, check `list_assets({ frame_id: "..." })` against the manifest.
+
+## For local build directories
+
+If importing from a local build output (e.g., `./dist` from Vite, `./build` from CRA):
+
+1. Skip the Puppeteer step — read `index.html` directly
+2. Find all asset references in the HTML
+3. Copy assets to `/tmp/site-import/assets/` preserving relative paths
+4. `write` the HTML + `batch upload_asset` the assets
+
+The Puppeteer approach is only needed for live URLs where JS rendering matters.
+
+## Common issues
+
+| Problem | Cause | Fix |
+|---------|-------|-----|
+| Blank frame | CSP meta tag not stripped | Check the cleanup regex caught it |
+| Missing images | `srcset` or `<picture>` not captured | Add patterns for these to the URL regex |
+| Broken layout | Computed styles not captured | Check the inlined `<style id="captured-styles">` tag |
+| 404 on assets | URL rewriting missed some references | Check downloaded CSS/JS files for un-rewritten absolute URLs |
+| Frame too short | Used default height instead of page height | Use the page height from script output |
+| Puppeteer not found | Not installed | Run `npm install puppeteer` first |