winter-super-cli 2026.6.28 → 2026.6.29

package/design.md

@@ -1,66 +1,3 @@
-# Design Guidance
+# Nova
 
-File này không phải danh bạ trang trí. Đây là checklist bắt buộc khi Winter xử lý UI, brand, landing page, dashboard, hoặc component.
-
-## Resource Status
-- Source: `resources\local\awesome-design-md\README.md`
-- Corpus: `resources\local\awesome-design-md\design-md`
-- Manifest: 142 files, 1.8 MB
-- Status: Corpus local sẵn sàng tại `resources\local\awesome-design-md\design-md`.
-
-## How Winter Must Use This
-1. Khi task liên quan UI/design/brand, tìm brand hoặc style gần nhất trong `awesome-design-md/design-md` trước khi viết code.
-2. Nếu user nêu brand cụ thể, ưu tiên đúng brand đó; nếu không có, chọn brand gần nhất theo domain và nói rõ giả định.
-3. Không tự bịa palette, spacing, typography, tone khi local design guide có dữ liệu phù hợp.
-4. Với app/work tool, ưu tiên layout rõ, dense, dễ scan; không dùng hero marketing nếu user đang cần tool thật.
-5. Sau khi sửa UI, kiểm tra responsive và text overflow nếu có thể chạy app.
-
-## Available Brand Samples (40+)
-- airbnb
-- airtable
-- apple
-- binance
-- bmw
-- bmw-m
-- bugatti
-- cal
-- claude
-- clay
-- clickhouse
-- cohere
-- coinbase
-- composio
-- cursor
-- elevenlabs
-- expo
-- ferrari
-- figma
-- framer
-- hashicorp
-- ibm
-- intercom
-- kraken
-- lamborghini
-- linear.app
-- lovable
-- mastercard
-- meta
-- minimax
-- mintlify
-- miro
-- mistral.ai
-- mongodb
-- nike
-- notion
-- nvidia
-- ollama
-- opencode.ai
-- pinterest
-
-## Useful Commands
-- `/designs` để liệt kê hoặc tìm design systems.
-- `/read resources/local/awesome-design-md/README.md` để đọc overview.
-- `/grep <brand> resources/local/awesome-design-md/design-md` để tìm brand/style guide.
-
----
-*File này được tự động tạo bởi Winter CLI.*
+Design rules.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winter-super-cli",
-  "version": "2026.6.28",
+  "version": "2026.6.29",
   "description": "❄️ AI-Powered Development CLI with Interactive REPL",
   "type": "module",
   "main": "bin/winter.js",

package/src/agent/agent-definitions.js

@@ -3,11 +3,11 @@ import { pathToFileURL } from 'url';
 import { promises as fs } from 'fs';
 
 const DEFAULT_TOOL_SETS = {
-  general: ['Read', 'Write', 'Edit', 'Bash', 'Glob', 'Grep', 'OpenBrowser', 'VisibleBrowser', 'BrowserDebug', 'WebFetch', 'WebSearch', 'Parallel', 'Agent', 'DelegateTask'],
+  general: ['Read', 'Write', 'Edit', 'Bash', 'Glob', 'Grep', 'OpenBrowser', 'VisibleBrowser', 'BrowserDebug', 'DesignToCode', 'WebFetch', 'WebSearch', 'Parallel', 'Agent', 'DelegateTask'],
   plan: ['Read', 'Grep', 'Glob', 'WebFetch', 'WebSearch', 'Parallel'],
   review: ['Read', 'Grep', 'Glob', 'Bash', 'WebFetch'],
   debug: ['Read', 'Write', 'Edit', 'Bash', 'Grep', 'Glob', 'OpenBrowser', 'VisibleBrowser', 'BrowserDebug', 'WebFetch', 'Parallel'],
-  design: ['Read', 'Write', 'Edit', 'Bash', 'Grep', 'Glob', 'OpenBrowser', 'VisibleBrowser', 'BrowserDebug', 'WebFetch'],
+  design: ['Read', 'Write', 'Edit', 'Bash', 'Grep', 'Glob', 'OpenBrowser', 'VisibleBrowser', 'BrowserDebug', 'DesignToCode', 'WebFetch'],
   research: ['Read', 'Grep', 'Glob', 'WebFetch', 'WebSearch', 'Parallel'],
   swe: ['Read', 'Write', 'Edit', 'Bash', 'Grep', 'Glob', 'OpenBrowser', 'VisibleBrowser', 'BrowserDebug', 'Parallel'],
 };

package/src/agent/runtime.js

@@ -64,6 +64,7 @@ export class AgentRuntime {
           model: executionProfile.model,
           enableTools: true,
           toolPromptOnly: forceTextToolFallback,
+          toolChoiceRequired: requireToolEvidence && !usedTools && !forceTextToolFallback,
           requireToolEvidence: requireToolEvidence && !usedTools,
           usedMutatingTools: usedMutatingTools,
           deferFinalContent: this.shouldVerifyBeforeFinal(messages, usedMutatingTools, autoVerificationPassed),

package/src/ai/provider-adapters.js

@@ -124,6 +124,7 @@ function buildOpenAIRequest(provider, messages, options) {
   if (options.reasoning?.reasoning_effort) body.reasoning_effort = options.reasoning.reasoning_effort;
   if (options.reasoning?.thinking) body.thinking = options.reasoning.thinking;
   if (options.tools?.length) body.tools = options.tools;
+  if (options.toolChoiceRequired && options.tools?.length) body.tool_choice = 'required';
 
   return {
     url: `${trimTrailingSlash(provider.baseURL)}/chat/completions`,
@@ -147,6 +148,7 @@ function buildAnthropicRequest(provider, messages, options) {
   if (options.stream) body.stream = true;
   if (options.reasoning?.thinking) body.thinking = options.reasoning.thinking;
   if (options.tools?.length) body.tools = options.tools.map(toAnthropicTool).filter(Boolean);
+  if (options.toolChoiceRequired && body.tools?.length) body.tool_choice = { type: 'any' };
 
   const headers = {
     'Content-Type': 'application/json',

package/src/cli/config.js

@@ -7,7 +7,7 @@ import { promises as fs } from 'fs';
 import path from 'path';
 import { homedir } from 'os';
 import { loadEnvFile, stripInlineSecrets } from './secret-env.js';
-import { CHROME_DEVTOOLS_MCP_NAME, createChromeDevtoolsMcpServer, ensureMcpConfigShape } from '../mcp/presets.js';
+import { CHROME_DEVTOOLS_MCP_NAME, FIGMA_MCP_NAME, createChromeDevtoolsMcpServer, createFigmaMcpServer, ensureMcpConfigShape } from '../mcp/presets.js';
 
 export class ConfigLoader {
   constructor() {
@@ -36,11 +36,14 @@ export class ConfigLoader {
     if (!next.mcp.servers.some(server => server?.name === CHROME_DEVTOOLS_MCP_NAME)) {
       next.mcp.servers.push(createChromeDevtoolsMcpServer(['--isolated']));
     }
+    if (!next.mcp.servers.some(server => server?.name === FIGMA_MCP_NAME)) {
+      next.mcp.servers.push(createFigmaMcpServer());
+    }
     next.permissions.allowlist.tools = [
       ...new Set([...(next.permissions.allowlist.tools || []), 'MCP']),
     ];
     next.permissions.allowlist.mcpServers = [
-      ...new Set([...(next.permissions.allowlist.mcpServers || []), CHROME_DEVTOOLS_MCP_NAME]),
+      ...new Set([...(next.permissions.allowlist.mcpServers || []), CHROME_DEVTOOLS_MCP_NAME, FIGMA_MCP_NAME]),
     ];
     return next;
   }
@@ -79,11 +82,11 @@ export class ConfigLoader {
         allowlist: {
           tools: ['Read', 'Glob', 'Grep', 'LSP', 'TaskCreate', 'TaskUpdate', 'TaskList', 'WebFetch', 'WebSearch', 'Parallel', 'MCP'],
           commands: [],
-          mcpServers: [CHROME_DEVTOOLS_MCP_NAME],
+          mcpServers: [CHROME_DEVTOOLS_MCP_NAME, FIGMA_MCP_NAME],
         },
       },
       mcp: {
-        servers: [createChromeDevtoolsMcpServer(['--isolated'])],
+        servers: [createChromeDevtoolsMcpServer(['--isolated']), createFigmaMcpServer()],
       },
       routing: {
         strategy: 'heuristic',

package/src/cli/input-controller.js

@@ -82,58 +82,69 @@ export class WinterInputController {
     readline.emitKeypressEvents(process.stdin, repl.rl);
 
     process.stdin.on('keypress', (str, key = {}) => {
-      if (key.ctrl && key.name === 'v') {
-        void this.handleDirectClipboardPaste();
-        return;
-      }
+      this.handleGlobalKeypress(str, key);
+    });
+  }
 
-      if (key.name === 'return' && (key.shift || key.meta)) {
-        repl.rl.write('\\\n');
-        return;
-      }
+  handleGlobalKeypress(str, key = {}) {
+    const repl = this.repl;
 
-      if (key.ctrl || key.meta) return;
+    if (repl.interactiveChecklistOpen) {
+      return true;
+    }
 
-      if (typeof str === 'string' && str.length > 1) {
-        return;
-      }
+    if (key.ctrl && key.name === 'v') {
+      void this.handleDirectClipboardPaste();
+      return true;
+    }
 
-      if (repl.slashMenu.open && this.handleSlashMenuKey(key)) {
-        return;
-      }
+    if (key.name === 'return' && (key.shift || key.meta)) {
+      repl.rl.write('\\\n');
+      return true;
+    }
 
-      if (key.name === 'escape') {
-        if (repl.isProcessing) {
-          // Cancel current AI turn
-          repl.isCancelled = true;
-          if (repl.spinner) repl.spinner.stop();
-          console.log(`\n${colors.red}[ Đã nhận lệnh HỦY... AI sẽ kết thúc ở thao tác tiếp theo ]${colors.reset}`);
-        } else {
-          // Double-ESC to end session
-          const now = Date.now();
-          if (this._lastEscTime && (now - this._lastEscTime) < 500) {
-            console.log(`\n\n${colors.cyan}Cảm ơn đã sử dụng Winter!${colors.reset}`);
-            console.log(`${colors.yellow}Tiếp tục phiên làm việc:${colors.reset}`);
-            console.log(`${colors.bright}${colors.green}winter --session ${repl.session?.getSessionId?.() || ''}${colors.reset}\n`);
-            process.exit(0);
-          }
-          this._lastEscTime = now;
-          console.log(`${colors.dim}Press ESC again to end session${colors.reset}`);
+    if (key.ctrl || key.meta) return false;
+
+    if (typeof str === 'string' && str.length > 1) {
+      return false;
+    }
+
+    if (repl.slashMenu.open && this.handleSlashMenuKey(key)) {
+      return true;
+    }
+
+    if (key.name === 'escape') {
+      if (repl.isProcessing) {
+        // Cancel current AI turn
+        repl.isCancelled = true;
+        if (repl.spinner) repl.spinner.stop();
+        console.log(`\n${colors.red}[ Đã nhận lệnh HỦY... AI sẽ kết thúc ở thao tác tiếp theo ]${colors.reset}`);
+      } else {
+        // Double-ESC to end session
+        const now = Date.now();
+        if (this._lastEscTime && (now - this._lastEscTime) < 500) {
+          console.log(`\n\n${colors.cyan}Cảm ơn đã sử dụng Winter!${colors.reset}`);
+          console.log(`${colors.yellow}Tiếp tục phiên làm việc:${colors.reset}`);
+          console.log(`${colors.bright}${colors.green}winter --session ${repl.session?.getSessionId?.() || ''}${colors.reset}\n`);
+          process.exit(0);
         }
-        return;
+        this._lastEscTime = now;
+        console.log(`${colors.dim}Press ESC again to end session${colors.reset}`);
       }
+      return true;
+    }
 
-      queueMicrotask(() => {
-        const line = repl.rl?.line || '';
-        if (!line.startsWith('/')) {
-          this.closeSlashMenu();
-          repl.rl?.prompt?.(true);
-          return;
-        }
+    queueMicrotask(() => {
+      const line = repl.rl?.line || '';
+      if (!line.startsWith('/')) {
+        this.closeSlashMenu();
+        repl.rl?.prompt?.(true);
+        return;
+      }
 
-        this.openSlashMenu(line);
-      });
+      this.openSlashMenu(line);
     });
+    return true;
   }
 
   async handleDirectClipboardPaste() {

package/src/cli/prompt-builder.js

@@ -138,6 +138,7 @@ export class PromptBuilder {
       `Open browser requests: if the user asks to "mở chrome", "open Chrome", or open a URL in a visible browser, use OpenBrowser. Do NOT use Bash, Get-Command, Start-Process, cmd start, or shell app launch commands for this.`,
       `Browser capability: You CAN browse URLs! Use WebFetch only for static page text extraction. For live Chrome debugging and visible browser control, prefer MCP server "chrome-devtools" when configured: use MCP tool "new_page" or "navigate_page", then "take_snapshot", "click", "fill"/"fill_form", "take_screenshot", "evaluate_script", "list_console_messages", "list_network_requests", or performance trace tools. If MCP is unavailable, use VisibleBrowser for real visible Puppeteer control. BrowserDebug is headless fallback only when visible control is unnecessary.`,
       `Browser interaction rule: if the user asks to click, press, fill, select, submit, open a web app path, or inspect page-by-page data, WebFetch is not enough and BrowserDebug is not user-visible. Use chrome-devtools MCP or VisibleBrowser so the user can watch a normal browser. Never claim "đã bấm/đã điền/đã mở/đã kiểm tra" from prose alone.`,
+      `Figma/design-to-code: if the user gives a Figma URL or asks to implement a Figma frame, call DesignToCode with the Figma frame URL and an output_path. Do not only describe the design. If the user asks to modify the Figma canvas itself, use MCP server "figma" when configured and say clearly when it is not connected.`,
       `When a task touches coding, agents, UI, brand, or design, inspect the relevant required local resource in depth before deciding.`,
       `If the user asks you to modify, run, inspect, check, publish, commit, or otherwise act on the project, you MUST use tools. Do not claim completion without a tool result from this turn.`,
       ``,
@@ -248,7 +249,7 @@ export class PromptBuilder {
       rolePrompt,
       '',
       '## Tool Rules',
-      '- Canonical tools: Read, Write, Edit, Bash, Glob, Grep, TaskCreate, TaskUpdate, TaskList, OpenBrowser, VisibleBrowser, BrowserDebug, WebFetch, WebSearch, MCP, Agent, DelegateTask, ParallelAgent.',
+      '- Canonical tools: Read, Write, Edit, Bash, Glob, Grep, TaskCreate, TaskUpdate, TaskList, OpenBrowser, VisibleBrowser, BrowserDebug, DesignToCode, WebFetch, WebSearch, MCP, Agent, DelegateTask, ParallelAgent.',
       '- For multi-agent work, use DelegateTask for one isolated subagent or ParallelAgent for independent concurrent subagents; do not pretend delegation happened without tool evidence.',
       '- If native tool calls are unavailable, output exactly one fallback tool call and no prose: <invoke name="Read"><parameter name="path">README.md</parameter></invoke> OR {"tool":"Read","arguments":{"path":"README.md"}} OR CALL_TOOL Read {"path":"README.md"}.',
       '- Treat skills, memories, bundled resources, local project rules, and the tool list as operational context. Use them proactively when relevant.',

package/src/cli/repl-commands.js

@@ -219,6 +219,38 @@ async function handleBrowserCommand(repl, args = []) {
   if (result.recovery) console.log(`${colors.dim}${result.recovery}${colors.reset}`);
 }
 
+async function handleFigmaCommand(repl, args = []) {
+  const parsed = parseFlagArgs(args);
+  const [urlArg, outputArg] = parsed.positional;
+  const url = parsed.url || parsed.figmaUrl || urlArg;
+  if (!url || url === 'help' || url === '--help') {
+    console.log(`${colors.cyan}/figma usage:${colors.reset}`);
+    console.log('  /figma <figma-frame-url> [output.tsx] --force');
+    console.log('  /design-to-code <figma-frame-url> --output src/components/FigmaDesign.tsx');
+    console.log(`${colors.dim}Requires FIGMA_TOKEN in project .env, environment, or --token.${colors.reset}`);
+    return;
+  }
+
+  const payload = {
+    url: String(url).replace(/^['"]|['"]$/g, ''),
+    output_path: parsed.output || parsed.out || parsed.component || outputArg,
+    assets_dir: parsed.assets || parsed.assetsDir,
+    force: parsed.force === true,
+    no_tailwind: parsed.noTailwind === true || parsed.noTailwind === 'true',
+    token: parsed.token,
+  };
+  console.log(`${colors.cyan}DesignToCode:${colors.reset} ${payload.url}`);
+  const result = await repl.tools.execute('DesignToCode', payload, { cwd: repl.projectPath });
+  if (result.success) {
+    console.log(`${colors.green}OK DesignToCode${result.outputPath ? ` -> ${result.outputPath}` : ''}${colors.reset}`);
+    const output = [result.stdout, result.stderr].filter(Boolean).join('\n').trim();
+    if (output) console.log(output.length > 4000 ? `${output.slice(0, 4000)}...` : output);
+    return;
+  }
+  console.log(`${colors.red}FAIL DesignToCode: ${result.error || 'unknown error'}${colors.reset}`);
+  if (result.recovery) console.log(`${colors.dim}${result.recovery}${colors.reset}`);
+}
+
 /**
  * Handle slash commands in the Winter REPL.
  * Delegated from WinterREPL.handleSlashCommand to reduce file size.
@@ -467,6 +499,12 @@ export async function handleSlashCommand(repl, input) {
       await handleBrowserCommand(repl, args);
       return;
 
+    case '/figma':
+    case '/design-to-code':
+    case '/vibefigma':
+      await handleFigmaCommand(repl, args);
+      return;
+
     // Inline Completion
     case '/complete':
       if (args.length === 0) {

package/src/cli/repl.js

@@ -93,6 +93,7 @@ export class WinterREPL {
     this.history = [];
     this.maxHistory = 500;
     this.slashMenu = { open: false, line: '', items: [], selected: 0 };
+    this.interactiveChecklistOpen = false;
     this.inputQueue = Promise.resolve();
     this.readlineClosed = false;
     this.taskQueue = [];
@@ -1443,11 +1444,22 @@ export class WinterREPL {
   async showInteractiveChecklist(title, items) {
     if (!items || items.length === 0) return [];
 
+    if (!process.stdin.isTTY || !process.stdout.isTTY) {
+      console.log(`\n\x1b[36m${title}\x1b[0m`);
+      console.log(`\x1b[2mNon-interactive terminal detected; selecting all steps.\x1b[0m`);
+      items.forEach(item => console.log(`  \x1b[32m[x]\x1b[0m ${item}`));
+      this.interactiveChecklistOpen = false;
+      return [...items];
+    }
+
     return new Promise((resolve) => {
       let cursor = 0;
       const selected = new Set(items.map((_, i) => i)); // default select all
+      let ignoreInitialReturn = true;
 
       let printedLines = 0;
+      const wasRaw = Boolean(process.stdin.isRaw);
+      const wasPaused = process.stdin.isPaused?.() ?? false;
       const render = () => {
         // Xóa những dòng đã in trước đó.
         if (printedLines > 0) {
@@ -1475,6 +1487,11 @@ export class WinterREPL {
           if (selected.has(cursor)) selected.delete(cursor);
           else selected.add(cursor);
         } else if (key.name === 'return') {
+          if (ignoreInitialReturn) {
+            ignoreInitialReturn = false;
+            render();
+            return;
+          }
           cleanup();
           const result = items.filter((_, i) => selected.has(i));
           resolve(result);
@@ -1489,18 +1506,37 @@ export class WinterREPL {
 
       const cleanup = () => {
         process.stdin.removeListener('keypress', onKeyPress);
-        if (process.stdin.isTTY) process.stdin.setRawMode(false);
-        this.rl.resume();
+        if (process.stdin.isTTY && typeof process.stdin.setRawMode === 'function') {
+          process.stdin.setRawMode(wasRaw);
+        }
+        if (wasPaused && typeof process.stdin.pause === 'function') {
+          process.stdin.pause();
+        }
+        this.interactiveChecklistOpen = false;
+        this.rl?.resume?.();
         process.stdout.write('\n');
       };
 
-      this.rl.pause();
-      if (process.stdin.isTTY) process.stdin.setRawMode(true);
+      try {
+        this.interactiveChecklistOpen = true;
+        this.rl?.pause?.();
+        if (process.stdin.isTTY && typeof process.stdin.setRawMode === 'function') {
+          process.stdin.setRawMode(true);
+        }
+        process.stdin.resume();
+
+        readline.emitKeypressEvents(process.stdin);
+        process.stdin.on('keypress', onKeyPress);
 
-      readline.emitKeypressEvents(process.stdin);
-      process.stdin.on('keypress', onKeyPress);
+        setImmediate(() => {
+          ignoreInitialReturn = false;
+        });
 
-      render();
+        render();
+      } catch (error) {
+        cleanup();
+        throw error;
+      }
     });
   }
 
@@ -1832,9 +1868,9 @@ ${colors.reset}
         return byName(['Read', 'Grep', 'Glob', 'WebFetch', 'WebSearch', 'Parallel']);
       case 'design':
       case 'ui':
-        return byName(['Read', 'Write', 'Edit', 'Bash', 'Grep', 'Glob', 'OpenBrowser', 'VisibleBrowser', 'BrowserDebug', 'WebFetch', 'MCP']);
+        return byName(['Read', 'Write', 'Edit', 'Bash', 'Grep', 'Glob', 'OpenBrowser', 'VisibleBrowser', 'BrowserDebug', 'DesignToCode', 'WebFetch', 'MCP']);
       default:
-        return byName(['Read', 'Write', 'Edit', 'Bash', 'Glob', 'Grep', 'OpenBrowser', 'VisibleBrowser', 'BrowserDebug', 'WebFetch', 'WebSearch', 'MCP', 'Parallel', 'Agent', 'DelegateTask', 'ParallelAgent']);
+        return byName(['Read', 'Write', 'Edit', 'Bash', 'Glob', 'Grep', 'OpenBrowser', 'VisibleBrowser', 'BrowserDebug', 'DesignToCode', 'WebFetch', 'WebSearch', 'MCP', 'Parallel', 'Agent', 'DelegateTask', 'ParallelAgent']);
     }
   }
 
@@ -1963,10 +1999,10 @@ ${colors.reset}
     if (this.isBrowserInteractionRequest(rawText)) return true;
     
     // Even without explicit target, some verbs are strong enough on their own
-    const continuationAction = /\b(continue|resume|start|begin|tiep|tiếp|bat dau|bắt đầu)\b/i;
+    const continuationAction = /\b(continue|resume|start|begin|do it|go ahead|tiep|tiếp|bat dau|bắt đầu|lam di|làm đi)\b/i;
     if (continuationAction.test(text)) return true;
 
-    const strongActionAlone = /\b(fix|debug|deploy|build|test|commit|install|run|refactor|start|begin|sửa|chạy|cài|triển khai|xây dựng|bắt đầu|bat dau)\b/i;
+    const strongActionAlone = /\b(fix|debug|deploy|build|test|commit|install|run|refactor|start|begin|do|sửa|chạy|cài|triển khai|xây dựng|bắt đầu|bat dau|làm|lam)\b/i;
     if (strongActionAlone.test(text)) return true;
     
     return actionPattern.test(text) && targetPattern.test(text);
@@ -2039,7 +2075,7 @@ ${colors.reset}
     if (!text.trim()) return false;
 
     // Detect fake completion claims - model says it did something without using tools
-    const fakeCompletionClaims = /(?:đã (?:sửa|tạo|viết|xóa|cập nhật|thêm|chỉnh|xong|hoàn thành|fix|update|edit|write|create|delete|remove|modify|change|apply|deploy|push)|i(?:'ve| have) (?:fixed|created|written|updated|added|modified|changed|edited|applied|deployed|deleted|removed|patched|implemented|refactored)|done!|xong rồi|hoàn thành|đã hoàn tất|hoàn tất|the (?:fix|change|update|edit|modification) (?:has been|is) (?:applied|done|completed|made)|here(?:'s| is) the (?:fix|update|change|solution|implementation|code)|file (?:has been|was) (?:updated|created|modified|written|changed)|changes? (?:have been|has been|were) (?:made|applied|saved)|successfully (?:updated|created|modified|fixed|applied|changed|written))/i;
+    const fakeCompletionClaims = /(?:đã (?:làm|sửa|tạo|viết|xóa|cập nhật|thêm|chỉnh|xong|hoàn thành|fix|update|edit|write|create|delete|remove|modify|change|apply|deploy|push)|i(?:'ve| have) (?:done|fixed|created|written|updated|added|modified|changed|edited|applied|deployed|deleted|removed|patched|implemented|refactored)|done!|xong rồi|hoàn thành|đã hoàn tất|hoàn tất|phase \d+ done|build check:\s*pass|files? (?:tạo|sửa|created|modified|changed)|the (?:fix|change|update|edit|modification) (?:has been|is) (?:applied|done|completed|made)|here(?:'s| is) the (?:fix|update|change|solution|implementation|code)|file (?:has been|was) (?:updated|created|modified|written|changed)|changes? (?:have been|has been|were) (?:made|applied|saved)|successfully (?:updated|created|modified|fixed|applied|changed|written))/i;
     if (fakeCompletionClaims.test(text)) return true;
 
     const fakeBrowserClaims = /(?:đã|da|i(?:'ve| have))\s+(?:bấm|bam|click(?:ed)?|mở|mo|open(?:ed)?|điền|dien|fill(?:ed)?|chọn|chon|select(?:ed)?|submit(?:ted)?|vào|vao|navigate(?:d)?)/i;
@@ -2151,6 +2187,10 @@ ${colors.reset}
       hints.push('TOOL HINT: For "open Chrome" / "mở chrome", call OpenBrowser {"browser":"chrome","url":"about:blank"}. Do NOT call Bash/Get-Command/Start-Process. If configured, use MCP {"server":"chrome-devtools","tool":"list"} for page state, console, network, screenshots, and performance.');
     }
 
+    if (/\b(figma|vibefigma|design[- ]?to[- ]?code|design to code|frame|node-id)\b/i.test(text)) {
+      hints.push('TOOL HINT: For Figma design-to-code, call DesignToCode with {"url":"<Figma frame URL>","output_path":"src/components/Name.tsx"}. Do NOT only describe the design. If the user asks direct Figma canvas manipulation, use MCP server "figma" when configured; otherwise explain that Winter needs the Figma MCP server connected.');
+    }
+
     if (hints.length === 0) return null;
 
     return `[Tool Router] ${hints.join(' | ')}`;
@@ -2404,7 +2444,7 @@ ${colors.reset}
           '/provider', '/model', '/models', '/providers',
           '/theme:toggle', '/tui',
           '/auto', '/debug', '/doctor', '/context', '/scorecard', '/swe',
-          '/read', '/write', '/glob', '/grep', '/bash', '/browser', '/paste',
+          '/read', '/write', '/glob', '/grep', '/bash', '/browser', '/paste', '/figma', '/design-to-code',
         '/codex', '/claude', '/karpathy', '/agents',
         '/resources', '/designs', '/skills',
         '/ecc',

package/src/cli/slash-commands.js

@@ -37,6 +37,9 @@ export const SLASH_COMMANDS = [
   { cmd: '/bash', desc: 'Run command', usage: '/bash <command>' },
   { cmd: '/image', desc: 'Analyze image/screenshot or clipboard image', usage: '/image [file] [question]' },
   { cmd: '/paste', desc: 'Read clipboard text or image', usage: '/paste [prompt]' },
+  { cmd: '/figma', desc: 'Convert selected Figma frame to code', usage: '/figma <figma-url> [output.tsx] [--force]' },
+  { cmd: '/design-to-code', desc: 'Alias for Figma design-to-code', usage: '/design-to-code <figma-url> --output src/components/FigmaDesign.tsx' },
+  { cmd: '/vibefigma', desc: 'Run bundled vibefigma design-to-code workflow', usage: '/vibefigma <figma-url> [output.tsx]' },
   { cmd: '/design', desc: 'Design commands', sub: ['search', 'add', 'apply', 'list', 'preview'] },
   { cmd: '/designs', desc: 'List/search awesome-design-md systems', usage: '/designs [query]' },
   { cmd: '/skill', desc: 'Skills management', sub: ['list', 'enable', 'create'] },

package/src/design/commands.js

@@ -15,35 +15,75 @@ export class DesignCommands {
     this.repl = repl;
     this.session = repl.session;
     this.config = repl.config;
+    this.projectPath = repl.projectPath || null;
     this.brandsDir = path.join(packageRoot, 'resources', 'local', 'awesome-design-md', 'design-md');
   }
 
   async execute(action, args) {
-    switch (action) {
+    const requestedAction = String(action || '').trim();
+    if (!requestedAction) {
+      await this.printHelp();
+      await this.listBrands();
+      return;
+    }
+
+    switch (requestedAction.toLowerCase()) {
       case 'search':
       case 'find':
+      case 'tim':
         await this.search(args[0] || '');
         break;
       case 'add':
+      case 'install':
         await this.addBrand(args[0]);
         break;
       case 'apply':
+      case 'use':
+      case 'set':
         await this.applyBrand(args[0]);
         break;
       case 'list':
+      case 'ls':
         await this.listBrands();
         break;
       case 'preview':
+      case 'show':
+      case 'view':
         await this.previewBrand(args[0]);
         break;
       case 'init':
         await this.initBrandsDir();
         break;
+      case 'help':
+      case '--help':
+      case '-h':
+        await this.printHelp();
+        break;
       default:
-        await this.listBrands();
+        if (await this.brandExists(requestedAction)) {
+          await this.applyBrand(requestedAction);
+        } else {
+          await this.search(requestedAction);
+        }
     }
   }
 
+  async printHelp() {
+    console.log(`${colors.cyan}/design usage:${colors.reset}`);
+    console.log('  /design <brand>              Apply a design system to the current project');
+    console.log('  /design search <query>       Search bundled design systems');
+    console.log('  /design preview <brand>      Preview DESIGN.md');
+    console.log('  /design add <brand>          Copy DESIGN.md into the current project');
+    console.log('  /design list                 List all bundled brands');
+    console.log('');
+  }
+
+  async brandExists(brand) {
+    if (!brand) return false;
+    const brandDir = path.join(this.brandsDir, brand);
+    return await fs.access(brandDir).then(() => true).catch(() => false);
+  }
+
   async search(query) {
     if (!query) {
       console.log(`${colors.yellow}Usage: winter design search <query>${colors.reset}`);
@@ -67,7 +107,7 @@ export class DesignCommands {
       });
       console.log('');
 
-      await this.session.addToMemory(`Searched design brands for: ${query}`, 'search');
+      await this.session?.addToMemory?.(`Searched design brands for: ${query}`, 'search');
     } catch (error) {
       console.log(`${colors.red}${statusIcons.error} Error: ${error.message}${colors.reset}`);
       console.log(`${colors.dim}Make sure you have awesome-design-md installed${colors.reset}`);
@@ -103,11 +143,11 @@ export class DesignCommands {
       }
 
       // Write to current project
-      const targetPath = path.join(process.cwd(), fileName);
+      const targetPath = path.join(this.repl?.projectPath || this.projectPath || process.cwd(), fileName);
       await fs.writeFile(targetPath, fileContent);
 
       console.log(`${statusIcons.success} Added ${fileName} for ${brand}`);
-      await this.session.addToMemory(`Added design file: ${brand}`, 'design');
+      await this.session?.addToMemory?.(`Added design file: ${brand}`, 'design');
     } catch (error) {
       console.log(`${colors.red}${statusIcons.error} Error: ${error.message}${colors.reset}`);
     }
@@ -142,7 +182,7 @@ export class DesignCommands {
 
       console.log(`${colors.cyan}${statusIcons.info} Analyzing and applying ${brand} design system...${colors.reset}`);
       
-      const prompt = `Please act as a Senior UI/UX Engineer. Analyze the following design system (${brand}) and completely refactor the UI and styles in this project to match its specifications. Focus on colors, typography, border radiuses, interactive states, and overall visual aesthetics as defined in the document.
+      const prompt = `Please act as a Senior UI/UX Engineer. Analyze the following design system (${brand}) and apply it to this project with real tool calls. Inspect the existing UI files/styles first, then make focused code changes and verify with the closest build/typecheck/smoke command. Do not only describe the design. Focus on colors, typography, border radiuses, interactive states, and overall visual aesthetics as defined in the document.
 
 <design_system>
 ${fileContent}
@@ -229,7 +269,7 @@ Start by reviewing the codebase, especially tailwind configs or global css, then
   }
 
   async initBrandsDir() {
-    const localDir = path.join(process.cwd(), '.design-systems');
+    const localDir = path.join(this.repl?.projectPath || this.projectPath || process.cwd(), '.design-systems');
     await fs.mkdir(localDir, { recursive: true });
     console.log(`${statusIcons.success} Created ${localDir}/`);
   }

package/src/mcp/presets.js

@@ -1,7 +1,11 @@
 export const CHROME_DEVTOOLS_MCP_NAME = 'chrome-devtools';
+export const FIGMA_MCP_NAME = 'figma';
 
 const CHROME_DEVTOOLS_PACKAGE = 'chrome-devtools-mcp@latest';
 const CHROME_DEVTOOLS_SOURCE = 'https://github.com/ChromeDevTools/chrome-devtools-mcp';
+const MCP_REMOTE_PACKAGE = 'mcp-remote@latest';
+const FIGMA_DEV_MODE_MCP_URL = 'http://127.0.0.1:3845/mcp';
+const FIGMA_DEV_MODE_MCP_SOURCE = 'https://developers.figma.com/docs/figma-mcp-server/local-server-installation/';
 
 const CHROME_DEVTOOLS_FLAGS_WITH_VALUES = new Set([
   '--browser-url',
@@ -27,6 +31,10 @@ export function isChromeDevtoolsPreset(name = '') {
   return ['chrome-devtools', 'chromedevtools', 'chrome', 'devtools', 'cdp'].includes(normalizeMcpPresetName(name));
 }
 
+export function isFigmaPreset(name = '') {
+  return ['figma', 'figma-dev-mode', 'figmadevmode', 'figma-desktop', 'figmadesktop'].includes(normalizeMcpPresetName(name));
+}
+
 export function buildChromeDevtoolsArgs(options = []) {
   const input = Array.isArray(options) ? [...options] : [];
   const args = ['-y', CHROME_DEVTOOLS_PACKAGE];
@@ -85,10 +93,51 @@ export function createChromeDevtoolsMcpServer(options = [], platform = process.p
   };
 }
 
+export function createFigmaMcpServer(options = [], platform = process.platform, env = process.env) {
+  const input = Array.isArray(options) ? [...options] : [];
+  const customUrlIndex = input.findIndex(value => value === '--url' || value === '--endpoint');
+  const endpoint = customUrlIndex >= 0 && input[customUrlIndex + 1]
+    ? String(input[customUrlIndex + 1])
+    : FIGMA_DEV_MODE_MCP_URL;
+  const npxArgs = ['-y', MCP_REMOTE_PACKAGE, endpoint];
+  const common = {
+    name: FIGMA_MCP_NAME,
+    enabled: true,
+    requestTimeoutMs: 60000,
+    metadata: {
+      preset: FIGMA_MCP_NAME,
+      source: FIGMA_DEV_MODE_MCP_SOURCE,
+      endpoint,
+      purpose: 'Figma Dev Mode MCP for direct design context, selected frame inspection, assets, variables, and design-to-code workflows.',
+    },
+  };
+
+  if (platform === 'win32') {
+    return {
+      ...common,
+      command: 'cmd',
+      args: ['/c', 'npx', ...npxArgs],
+      env: {
+        SystemRoot: env.SystemRoot || 'C:\\Windows',
+        PROGRAMFILES: env.PROGRAMFILES || 'C:\\Program Files',
+      },
+    };
+  }
+
+  return {
+    ...common,
+    command: 'npx',
+    args: npxArgs,
+  };
+}
+
 export function getMcpPreset(name, options = []) {
   if (isChromeDevtoolsPreset(name)) {
     return createChromeDevtoolsMcpServer(options);
   }
+  if (isFigmaPreset(name)) {
+    return createFigmaMcpServer(options);
+  }
   throw new Error(`Unknown MCP preset: ${name}`);
 }
 

package/src/tools/executor.js

@@ -477,6 +477,23 @@ export class ToolExecutor {
           }
         }
       },
+      {
+        type: 'function',
+        name: 'DesignToCode',
+        description: 'Convert a selected Figma design/frame URL into project code using the bundled vibefigma workflow. Use when the user gives a Figma URL, asks for Figma design-to-code, or asks to implement a selected Figma frame. Requires FIGMA_TOKEN in env/.env or a token argument.',
+        parameters: {
+          type: 'object',
+          properties: {
+            url: { type: 'string', description: 'Figma design/file URL. Best results require a selected node-id in the URL.' },
+            output_path: { type: 'string', description: 'Optional React component output path, e.g. src/components/FigmaDesign.tsx' },
+            assets_dir: { type: 'string', description: 'Optional asset output directory, default handled by vibefigma.' },
+            force: { type: 'boolean', description: 'Overwrite existing generated files without prompting.' },
+            no_tailwind: { type: 'boolean', description: 'Generate regular CSS instead of Tailwind.' },
+            token: { type: 'string', description: 'Optional Figma access token. Prefer FIGMA_TOKEN env/.env instead.' },
+          },
+          required: ['url']
+        }
+      },
       {
         type: 'function',
         name: 'WebFetch',
@@ -625,6 +642,8 @@ export class ToolExecutor {
         return await this.visibleBrowser(input, cwd);
       case 'OpenBrowser':
         return await this.openBrowser(input.url ?? input.uri ?? input.href, input.browser);
+      case 'DesignToCode':
+        return await this.designToCode(input, cwd);
       case 'WebFetch':
         return await this.webFetch(input.url ?? input.uri ?? input.href, input.prompt ?? input.query ?? input.extract);
       case 'WebSearch':
@@ -693,7 +712,7 @@ export class ToolExecutor {
         return {
           success: false,
           error: `Unknown tool: ${toolName}`,
-          availableTools: ['Read', 'Write', 'Edit', 'Bash', 'Glob', 'Grep', 'TaskCreate', 'TaskUpdate', 'TaskList', 'MCP', 'Parallel', 'OpenBrowser', 'VisibleBrowser', 'BrowserDebug', 'WebFetch', 'WebSearch', 'WebArchive', 'HtmlEffectiveness', 'NotebookRead', 'NotebookEdit', 'TodoWrite', 'TodoList', 'ScheduleWakeup', 'AskUserQuestion', 'Agent', 'DelegateTask', 'ParallelAgent', 'InsertText', 'StrReplaceAll'],
+          availableTools: ['Read', 'Write', 'Edit', 'Bash', 'Glob', 'Grep', 'TaskCreate', 'TaskUpdate', 'TaskList', 'MCP', 'Parallel', 'OpenBrowser', 'VisibleBrowser', 'BrowserDebug', 'DesignToCode', 'WebFetch', 'WebSearch', 'WebArchive', 'HtmlEffectiveness', 'NotebookRead', 'NotebookEdit', 'TodoWrite', 'TodoList', 'ScheduleWakeup', 'AskUserQuestion', 'Agent', 'DelegateTask', 'ParallelAgent', 'InsertText', 'StrReplaceAll'],
           recovery: 'Call one of the available tools. For file writes use Write with { "file_path": "...", "content": "..." }. For shell commands use Bash with { "command": "..." }.',
         };
     }
@@ -852,6 +871,44 @@ export class ToolExecutor {
       return { success: true, coerced: true, args: { ...args, url, browser } };
     }
 
+    if (toolName === 'DesignToCode') {
+      const url = pick('url', 'figmaUrl', 'figma_url', 'href', 'uri', 'input');
+      if (!url) {
+        return {
+          success: false,
+          error: 'Figma url is required',
+          recovery: 'Example: DesignToCode {"url":"https://www.figma.com/design/FILE/Name?node-id=1-2","output_path":"src/components/FigmaDesign.tsx"}',
+        };
+      }
+      if (!/^https:\/\/(?:www\.)?figma\.com\/(?:design|file)\//i.test(url)) {
+        return {
+          success: false,
+          error: 'DesignToCode requires a Figma design/file URL',
+          recovery: 'Copy a Figma frame/component link such as https://www.figma.com/design/FILE/Name?node-id=1-2.',
+        };
+      }
+      const outputPath = pick('output_path', 'outputPath', 'component', 'path', 'file');
+      const assetsDir = pick('assets_dir', 'assetsDir', 'assets');
+      if (outputPath) {
+        const outputSafety = await this.validateWorkspacePath(this.resolveInputPath(outputPath, cwd), 'DesignToCode output path');
+        if (outputSafety?.success === false) return outputSafety;
+      }
+      if (assetsDir) {
+        const assetsSafety = await this.validateWorkspacePath(this.resolveInputPath(assetsDir, cwd), 'DesignToCode assets directory');
+        if (assetsSafety?.success === false) return assetsSafety;
+      }
+      return {
+        success: true,
+        coerced: true,
+        args: {
+          ...args,
+          url,
+          output_path: outputPath,
+          assets_dir: assetsDir,
+        },
+      };
+    }
+
     if (toolName === 'Agent' || toolName === 'DelegateTask') {
       const task = pick('task', 'goal', 'prompt', 'description');
       if (!task) {
@@ -1171,6 +1228,13 @@ export class ToolExecutor {
       browserdebug: 'BrowserDebug',
       browser: 'BrowserDebug',
       browserinspect: 'BrowserDebug',
+      designtocode: 'DesignToCode',
+      designcode: 'DesignToCode',
+      figma: 'DesignToCode',
+      figmatocode: 'DesignToCode',
+      figmacode: 'DesignToCode',
+      vibefigma: 'DesignToCode',
+      figmadesign: 'DesignToCode',
       parallel: 'Parallel',
       parallelexecute: 'Parallel',
       paralleltools: 'Parallel',
@@ -1247,6 +1311,7 @@ export class ToolExecutor {
       case 'WebArchive':
       case 'BrowserDebug':
       case 'VisibleBrowser':
+      case 'DesignToCode':
         return { url: value };
       case 'TaskCreate':
       case 'TodoWrite':
@@ -2151,6 +2216,84 @@ export class ToolExecutor {
     };
   }
 
+  async readProjectEnvValue(name, cwd = this.projectPath) {
+    if (process.env[name]) return process.env[name];
+    try {
+      const envPath = path.join(cwd || this.projectPath, '.env');
+      const raw = await fs.readFile(envPath, 'utf8');
+      const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const pattern = new RegExp(`^\\s*${escaped}\\s*=\\s*(.*)\\s*$`, 'm');
+      const match = raw.match(pattern);
+      if (!match) return '';
+      return String(match[1] || '').trim().replace(/^['"]|['"]$/g, '');
+    } catch {
+      return '';
+    }
+  }
+
+  async designToCode(input = {}, cwd = this.projectPath) {
+    const url = String(input.url || input.figmaUrl || input.figma_url || input.href || input.uri || '').trim();
+    if (!url) {
+      return {
+        success: false,
+        error: 'Figma url is required',
+        recovery: 'Use DesignToCode {"url":"https://www.figma.com/design/FILE/Name?node-id=1-2","output_path":"src/components/FigmaDesign.tsx"}.',
+      };
+    }
+
+    const token = String(input.token || input.access_token || input.accessToken || await this.readProjectEnvValue('FIGMA_TOKEN', cwd) || await this.readProjectEnvValue('FIGMA_ACCESS_TOKEN', cwd) || '').trim();
+    if (!token) {
+      return {
+        success: false,
+        error: 'FIGMA_TOKEN is required for Figma design-to-code',
+        url,
+        recovery: 'Add FIGMA_TOKEN to your project .env or pass token to DesignToCode. Then retry with a selected frame URL that includes node-id.',
+      };
+    }
+
+    const args = ['-y', 'vibefigma', url];
+    const outputPath = input.output_path || input.outputPath || input.component || input.path || input.file;
+    const assetsDir = input.assets_dir || input.assetsDir || input.assets;
+    if (outputPath) args.push('-c', String(outputPath));
+    if (assetsDir) args.push('-a', String(assetsDir));
+    if (input.force) args.push('--force');
+    if (input.no_tailwind || input.noTailwind) args.push('--no-tailwind');
+
+    const command = process.platform === 'win32' ? 'npx.cmd' : 'npx';
+    try {
+      const { stdout, stderr } = await execFileAsync(command, args, {
+        cwd,
+        env: { ...process.env, FIGMA_TOKEN: token },
+        timeout: Number(input.timeout || input.timeout_ms || input.timeoutMs || 180000),
+        maxBuffer: 20 * 1024 * 1024,
+        windowsHide: true,
+      });
+      return {
+        success: true,
+        tool: 'DesignToCode',
+        url,
+        outputPath: outputPath || null,
+        assetsDir: assetsDir || null,
+        command: `npx -y vibefigma "${url}"${outputPath ? ` -c ${outputPath}` : ''}${assetsDir ? ` -a ${assetsDir}` : ''}${input.force ? ' --force' : ''}${input.no_tailwind || input.noTailwind ? ' --no-tailwind' : ''}`,
+        stdout,
+        stderr,
+        recovery: 'Review the generated component, then run the project typecheck/build and clean up responsiveness if needed.',
+      };
+    } catch (error) {
+      return {
+        success: false,
+        tool: 'DesignToCode',
+        url,
+        outputPath: outputPath || null,
+        error: error.message,
+        exitCode: error.code,
+        stdout: error.stdout || '',
+        stderr: error.stderr || '',
+        recovery: 'Check that the Figma URL is a selected frame/component, FIGMA_TOKEN is valid, and network access can reach Figma. Then retry DesignToCode.',
+      };
+    }
+  }
+
   async webFetch(url, prompt) {
     if (typeof url !== 'string' || url.trim() === '') {
       return { success: false, error: 'url is required', recovery: 'Example: WebFetch {"url":"https://example.com"}. Include the https:// scheme.' };