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