网站设计 全流程
探索 Supabase 风格 — 翡翠绿发光、终端窗口、PostgreSQL 美学，开发者优先的设计语言。
supabase — design-workflow
# 初始化设计项目
$ npx create-design-app@latest --name=my-site
✓ Setting up project structure...
✓ Installing dependencies...
✓ Initializing Git repository...
✓ Project ready!
# 六个设计阶段
$ supabase design phases --list
01 战略调研 · 02 信息架构 · 03 原型设计
04 视觉设计 · 05 开发实现 · 06 测试上线
design_phases
| id | phase | description | tools |
|---|---|---|---|
| PK | 01 | 战略调研 · 商业画布、用户画像 | Figma, Miro |
| PK | 02 | 信息架构 · 站点地图、导航 | Figma, Notion |
| PK | 03 | 原型设计 · 线框图、交互 | Figma, Principle |
| PK | 04 | 视觉设计 · UI、动效、组件 | Figma |
| PK | 05 | 开发实现 · 前端、后端 | VS Code |
| PK | 06 | 测试上线 · QA、CI/CD | GitHub |
Prompt 提示词
Build a Supabase-style page: Dark background (#0a0a0f). Emerald green (#22c55e) as primary with glow effects. Terminal window aesthetic with JetBrains Mono font. PostgreSQL table layout. Green glowing borders and shadows. Developer-first design with code blocks and database schema visuals.
01/
战略调研
明确商业目标、用户需求、竞品分析，确定产品定位。
02/
信息架构
规划站点结构、导航层级与内容分类。
03/
原型设计
线框图到可交互原型，快速验证概念。
04/
视觉设计
设计系统、品牌语言、配色与组件库。
05/
开发实现
前后端开发、接口联调与响应式适配。
06/
测试上线
功能测试、性能优化、CI/CD 部署。