dalcode-website/docs/superpowers/specs/2026-05-23-website-redesign-design.md

DAL Website Redesign — Design Spec

Overview

Redesign the DAL official website from a single-product landing page into a product-matrix platform site covering DAL Code, DAL CLI, DAL Office, and DeepAILab API Platform. Inspired by Kiro (spec-driven card flow, FAQ, CLI install in hero) and Antigravity (product ecosystem cards, scroll-driven animations, dark theme).

Current state: Webflow-template-based site with Chinese copy, light/dark toggle, 5 homepage sections (Hero, Integrations marquee, Principles, CTA, Blog preview). Minimal feature presentation, no product screenshots, no CLI presence, no ecosystem overview.

Target state: Dark-themed platform site with bilingual support (zh/en), product matrix, 3-step workflow, feature grid, ecosystem section, FAQ, and dedicated subpages for each product.

Design Decisions

Decision	Choice	Rationale
Theme	Dark only	Industry standard for dev tools (Kiro, Antigravity, Cursor all dark). Remove light/dark toggle.
Language	Bilingual zh/en via next-intl	Keep existing i18n infra, serve global audience
CLI presence	Dedicated /cli page + hero CTA + ecosystem card	User requested full presence for both Code and CLI
Scope	Full site redesign	All pages, navigation, footer
CSS approach	Replace webflow.css with Tailwind	Current webflow.css is 254KB of unused styles
Animations	Keep GSAP, drop Lottie	Replace Lottie JSON animations with product screenshots + CSS effects
Positioning	Open AI Development Platform	Not "better Cursor", but "complete ecosystem"
BYOK	Feature grid item, not primary pitch	Mentioned but not hero-level messaging
DeepAILab.ai	"AI Developer Platform", never "中转站"	Position as intelligent platform, not proxy

Homepage Sections

S1: Navigation (fixed top, dark)

[DAL Logo]   Products▾   Docs   Pricing   Blog   Community     [Downloads]  [Sign In]  🌐

• Products dropdown: DAL Code / DAL CLI / DAL Office / API Platform
• Language switcher (zh/en) on the right
• Scrolled state: backdrop blur + subtle border-bottom
• Mobile: hamburger → slide-in menu

S2: Hero

• Subtitle: by DeepAILab
• Headline (en): The Open AI Development Platform
• Headline (zh): 开放的 AI 开发平台
• Sub-copy (en): From idea to production. Choose your models, bring your tools, one account for everything.
• Sub-copy (zh): 从想法到产品的完整 AI 开发平台。自由选模型，全链路覆盖，一个账号搞定一切。
• Primary CTA: Download Code
• Secondary CTA: Install CLI
• Inline CLI command: $ curl -fsSL https://cli.deepailab.ai/install | bash
• Below CTAs: product UI screenshot or animated GIF showing Code editor + CLI terminal
• Background: gradient + particle/glow animation (GSAP)

S3: Product Ecosystem (2×2 grid)

Label: PRODUCT ECOSYSTEM Heading (zh): 一个平台，覆盖 AI 开发全场景 Heading (en): One platform, every AI development scenario

Cards (2×2 grid, top row larger):

Card	Title	Tagline (zh)	Tagline (en)	Keywords
DAL Code	AI-Native IDE	AI 原生的智能开发环境	The AI-native development environment	Intent Capture, Mission Mode, Multi-model routing
DAL CLI	Terminal AI Partner	终端里的 AI 开发搭档	Your AI development partner in the terminal	Lightweight, Agent execution, Pipeline-friendly
DAL Office	AI Document Workspace	AI 驱动的文档工作台	AI-powered document workspace	Word, Excel, PPT
API Platform	Unified AI Platform	统一 AI 开发者平台	The unified AI developer platform	Model aggregation, Smart routing, API discounts

Each card: icon + product name + tagline + 3 keywords + "Learn more →" link Links to: /code, /cli, /office, /platform Animation: staggered fade-in on scroll

S4: 3-Step Workflow

Label: HOW IT WORKS Heading (zh): 不是更好的 prompt，是更好的工作方式 Heading (en): Not a better prompt. A better workflow.

Step	Name	Description (zh)	Description (en)
01	INTENT	AI 主动采访，把模糊想法变成结构化工程需求	AI interviews you, turning vague ideas into structured engineering requirements
02	BUILD	Agent 拆解任务，智能选模型，并行执行	Agents decompose tasks, route to optimal models, execute in parallel
03	SHIP	代码、测试、文档一起交付，关键操作可审批	Code, tests, and docs delivered together. Critical actions require approval

Each step card has a product UI screenshot/GIF below the description. Bottom: connecting line animation, steps highlight sequentially on scroll. Shared workflow for both Code (GUI) and CLI (terminal).

S5: Feature Grid

Label: EVERYTHING YOU NEED Heading (zh): 为认真做产品的开发者而建 Heading (en): Built for developers who ship

3×2 + 2 grid (8 cards):

Feature	Description (zh)	Description (en)
Multi-model Smart Routing	同一工作流里不同子任务自动选最优模型，质量/速度/成本动态平衡	Auto-select the optimal model for each subtask. Balance quality, speed, and cost dynamically.
Skills Engine	不是 prompt 模板，是经验封装成的引导式工作流	Not prompt templates — experience packaged as guided workflows.
Mission Mode	长任务拆解、进度追踪、断点续跑	Long-task decomposition, progress tracking, resume from breakpoints.
BYOK (Bring Your Own Key)	用自己的 API Key，不被平台锁定	Use your own API keys. No vendor lock-in.
Context Engine	5 层压缩，超长项目也能保持上下文连贯	5-layer compression keeps context coherent across massive projects.
Approval & Audit	危险操作需人工确认，全过程可追溯可审计	Critical actions require human approval. Full audit trail.
RAG Knowledge	接入私有知识库和文档，AI 回答基于你的上下文	Connect private knowledge bases. AI answers grounded in your context.
Cost Transparency	每次 AI 交互的成本实时可见，用量一目了然	Real-time cost visibility for every AI interaction.

Card design: icon + title + 2-3 line description. Hover: subtle glow/border gradient. Animation: staggered fade-in (100ms offset per card).

S6: Ecosystem — DeepAILab Platform

Label: ONE PLATFORM, ONE ACCOUNT Heading (zh): DeepAILab — 连接一切的 AI 开发者平台 Heading (en): DeepAILab — The AI developer platform that connects everything

Top: architecture diagram visualization — DeepAILab node at center, four product nodes branching out. Animated connection lines.

Bottom: 3 advantage cards:

Card	Title (zh)	Title (en)	Description (zh)	Description (en)
One Account	一个账号	One Account	一次登录，Code/CLI/Office/API 全部打通	Single sign-on across Code, CLI, Office, and API
API Discounts	API 折扣	API Discounts	通过平台调用比直连各厂商更优惠	Better rates than connecting to providers directly
Cost Dashboard	成本仪表盘	Cost Dashboard	跨产品的用量统计和成本分析，一目了然	Cross-product usage analytics and cost breakdown at a glance

CTA: Explore DeepAILab Platform → linking to DeepAILab.ai Background: gradient section (deep blue/purple) to create visual separation.

S7: CTA (Bottom)

Dark gradient background with particle/glow animation, echoing Hero.

Heading (zh): 准备好用新方式开发了吗？ Heading (en): Ready to build the new way? Sub-copy (zh): 从一次 Intent 采访开始，让 AI 先帮你想清楚要做什么。 Sub-copy (en): Start with an Intent interview. Let AI help you figure out what to build.

Repeat: [Download Code] + [Install CLI] + inline curl command.

S8: FAQ

Label: FAQ Heading (zh): 常见问题 Heading (en): Frequently Asked Questions

Accordion with 6 items:

1. DAL Code 和 Cursor / Windsurf 的区别？ / How is DAL Code different from Cursor / Windsurf?
2. DAL CLI 和 Claude Code 的区别？ / How is DAL CLI different from Claude Code?
3. 我可以用自己的 API Key 吗？ / Can I use my own API keys?
4. DeepAILab 平台的 API 折扣怎么算？ / How do DeepAILab API discounts work?
5. 支持哪些 AI 模型？ / Which AI models are supported?
6. 支持企业私有化部署吗？ / Do you support enterprise private deployment?

Subpages

/code — DAL Code Product Page

• Hero with product screenshot
• Feature deep-dive sections (Intent Capture, Mission Mode, Smart Routing, Skills, Context Engine)
• Download CTA (macOS / Windows / Linux)
• Comparison table vs Cursor/Windsurf (optional, can be added later)

/cli — DAL CLI Product Page

• Hero with terminal screenshot/GIF
• Feature sections (Agent execution, Pipeline integration, BYOK, lightweight)
• Install command prominently displayed
• Usage examples / code snippets

/office — DAL Office Page

• Hero with document editing screenshots
• Word / Excel / PPT capability showcase
• Integration with Code and CLI workflow

/platform — DeepAILab API Platform

• Supported models list
• Pricing / credit system
• SDK / API documentation links
• Smart routing explanation

/pricing — Unified Pricing

• Tiered pricing cards (Free / Pro / Team / Enterprise)
• Per-product feature comparison table
• FAQ specific to billing

/blog — Blog (restyled)

• Keep existing blog infrastructure
• Restyle to dark theme
• Grid layout for posts

/about — About DeepAILab

• Mission & vision
• Team (if applicable)
• Company stats

/contact — Contact & Trial

• Contact form (keep existing React Hook Form + Zod)
• Trial application
• Contact channels

Navigation

Top nav: Products▾ · Docs · Pricing · Blog · Community · [Downloads] · [Sign In] · 🌐

Products dropdown mega-menu:

• DAL Code — AI-Native IDE
• DAL CLI — Terminal AI Partner
• DAL Office — AI Document Workspace
• API Platform — Unified AI Platform

Footer (4 columns):

Products	Resources	Community	Company
DAL Code	Docs	Discord	About
DAL CLI	Blog	GitHub	Careers
DAL Office	Changelog	X/Twitter	Contact
API Platform	FAQ
Pricing

Bottom row: © 2026 DeepAILab · Privacy · Terms · Language switcher

Technical Decisions

Area	Decision
Styling	Remove webflow.css (254KB), rewrite with Tailwind CSS 4
Animations	Keep GSAP for scroll-driven effects. Remove Lottie dependency. Use CSS transitions for hover states.
i18n	Keep next-intl. All content strings in locale JSON files (zh/en).
Fonts	Keep Inter + Inter Tight (Google Fonts)
Images	Product screenshots as WebP. Placeholder images until real screenshots available.
Theme	Dark only. Remove next-themes + ThemeToggle component.
Components	Refactor all components to use Tailwind classes instead of webflow CSS classes.
Forms	Keep React Hook Form + Zod for contact/newsletter forms.

Files to Create

• app/code/page.tsx — DAL Code product page
• app/cli/page.tsx — DAL CLI product page
• app/office/page.tsx — DAL Office page
• app/platform/page.tsx — API Platform page
• app/pricing/page.tsx — Unified pricing page
• components/home/ProductEcosystem.tsx — 2×2 product grid
• components/home/WorkflowSteps.tsx — 3-step flow
• components/home/FeatureGrid.tsx — 8-feature grid
• components/home/EcosystemSection.tsx — DeepAILab platform section
• components/home/FaqSection.tsx — Accordion FAQ
• components/home/BottomCta.tsx — Bottom CTA section
• components/ProductDropdown.tsx — Mega menu for nav

Files to Modify

• app/page.tsx — New homepage section composition
• app/layout.tsx — Remove ThemeProvider, remove webflow.css import, dark theme as default
• components/Header.tsx — New navigation structure with Products dropdown
• components/Footer.tsx — New 4-column layout
• lib/site-content.ts — Update all content data structures
• messages/zh.json + messages/en.json — Bilingual content

Files to Delete

• app/webflow.css — Replace with Tailwind
• components/ThemeToggle.tsx — No more theme switching
• components/LottiePlayer.tsx — Removing Lottie dependency
• components/home/IntegrationsSection.tsx — Replaced by ProductEcosystem
• components/home/PrinciplesSection.tsx — Replaced by WorkflowSteps
• components/home/BlogPreviewSection.tsx — Removed from homepage

Out of Scope

• Real product screenshots (use placeholders, replace later)
• Backend API integration for sign-in/downloads
• Docs site content (can link externally)
• Blog post migration
• Analytics / tracking setup