docs: add website redesign plan and design spec
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Leon-in
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,281 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user