From 3a2a07e4a685d6269d9c44cc4de32d93bfb20cf5 Mon Sep 17 00:00:00 2001 From: Gemini AI Date: Mon, 29 Dec 2025 03:04:09 +0400 Subject: [PATCH] feat: intelligent CSS framework selection for web/app agents - Added CSS framework choice to web and app agents across all providers - AI can now intelligently select between: - Tailwind CSS (default): utility-first, modern designs - Windi CSS: faster builds, advanced features - Bootstrap: classic, component-based designs - Each framework uses its respective CDN for live preview rendering - Selection based on design complexity and user requirements --- lib/services/ollama-cloud.ts | 8 ++++++-- lib/services/qwen-oauth.ts | 8 ++++++-- lib/services/zai-plan.ts | 8 ++++++-- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/lib/services/ollama-cloud.ts b/lib/services/ollama-cloud.ts index a440c54..33e1ec2 100644 --- a/lib/services/ollama-cloud.ts +++ b/lib/services/ollama-cloud.ts @@ -763,8 +763,12 @@ AGENTS & CAPABILITIES: - pm: Project Manager. Create PRDs, timelines, and action plans. - code: Software Architect. Provide logic, algorithms, and backend snippets. - design: UI/UX Designer. Create high-fidelity mockups and components. -- web: Frontend Developer. Build responsive sites using HTML/Tailwind or React. Use [PREVIEW:web:html] or [PREVIEW:web:javascript]. -- app: Mobile App Developer. Create mobile-first interfaces and dashboards. React components are supported and rendered live. Use [PREVIEW:app:javascript]. +- web: Frontend Developer. Build responsive sites. **CSS FRAMEWORK CHOICE:** Intelligently select from: + - **Tailwind CSS** (default): For utility-first, modern designs. Use CDN: https://cdn.tailwindcss.com + - **Windi CSS**: For faster builds and advanced features. Use CDN: https://unpkg.com/windicss + - **Bootstrap**: For classic, component-based designs. Use CDN: https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css + Choose the best framework based on the design complexity and user's request. Use [PREVIEW:web:html]. +- app: Mobile App Developer. Create mobile-first interfaces and dashboards. **CSS FRAMEWORK CHOICE:** Same selection logic as web agent. React components are supported and rendered live. Use [PREVIEW:app:javascript]. BACKEND LOGIC & SIMULATION: - If a user asks for backend logic (Node.js, Express, Python, Databases), you MUST still provide a VISUAL experience in the Canvas. diff --git a/lib/services/qwen-oauth.ts b/lib/services/qwen-oauth.ts index 8e7e312..1550216 100644 --- a/lib/services/qwen-oauth.ts +++ b/lib/services/qwen-oauth.ts @@ -1037,8 +1037,12 @@ AGENTS & CAPABILITIES: - pm: Project Manager. Create PRDs, timelines, and action plans. - code: Software Architect. Provide logic, algorithms, and backend snippets. - design: UI/UX Designer. Create high-fidelity mockups and components. -- web: Frontend Developer. Build responsive sites using HTML/Tailwind or React. Use [PREVIEW:web:html] or [PREVIEW:web:javascript]. -- app: Mobile App Developer. Create mobile-first interfaces and dashboards. React components are supported and rendered live. Use [PREVIEW:app:javascript]. +- web: Frontend Developer. Build responsive sites. **CSS FRAMEWORK CHOICE:** Intelligently select from: + - **Tailwind CSS** (default): For utility-first, modern designs. Use CDN: https://cdn.tailwindcss.com + - **Windi CSS**: For faster builds and advanced features. Use CDN: https://unpkg.com/windicss + - **Bootstrap**: For classic, component-based designs. Use CDN: https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css + Choose the best framework based on the design complexity and user's request. Use [PREVIEW:web:html]. +- app: Mobile App Developer. Create mobile-first interfaces and dashboards. **CSS FRAMEWORK CHOICE:** Same selection logic as web agent. React components are supported and rendered live. Use [PREVIEW:app:javascript]. BACKEND LOGIC & SIMULATION: - If a user asks for backend logic (Node.js, Express, Python, Databases), you MUST still provide a VISUAL experience in the Canvas. diff --git a/lib/services/zai-plan.ts b/lib/services/zai-plan.ts index 5abb809..1dd4af9 100644 --- a/lib/services/zai-plan.ts +++ b/lib/services/zai-plan.ts @@ -836,8 +836,12 @@ AGENTS & CAPABILITIES: - pm: Project Manager. Create PRDs, timelines, and action plans. - code: Software Architect. Provide logic, algorithms, and backend snippets. - design: UI/UX Designer. Create high-fidelity mockups and components. -- web: Frontend Developer. Build responsive sites using HTML/Tailwind or React. Use [PREVIEW:web:html] or [PREVIEW:web:javascript]. -- app: Mobile App Developer. Create mobile-first interfaces and dashboards. React components are supported and rendered live. Use [PREVIEW:app:javascript]. +- web: Frontend Developer. Build responsive sites. **CSS FRAMEWORK CHOICE:** Intelligently select from: + - **Tailwind CSS** (default): For utility-first, modern designs. Use CDN: https://cdn.tailwindcss.com + - **Windi CSS**: For faster builds and advanced features. Use CDN: https://unpkg.com/windicss + - **Bootstrap**: For classic, component-based designs. Use CDN: https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css + Choose the best framework based on the design complexity and user's request. Use [PREVIEW:web:html]. +- app: Mobile App Developer. Create mobile-first interfaces and dashboards. **CSS FRAMEWORK CHOICE:** Same selection logic as web agent. React components are supported and rendered live. Use [PREVIEW:app:javascript]. BACKEND LOGIC & SIMULATION: - If a user asks for backend logic (Node.js, Express, Python, Databases), you MUST still provide a VISUAL experience in the Canvas.