← 返回

网站设计 全流程

探索 OpenCode 风格 — 青色终端、IDE 界面、Web 开发,像操作一个现代代码编辑器。

design-workflow.ts
// 设计六个阶段
const phases = {
'01': '战略调研',
'02': '信息架构',
'03': '原型设计',
'04': '视觉设计',
'05': '开发实现',
'06': '测试上线'
}
01/

战略调研

明确商业目标、用户需求、竞品分析,确定产品定位。

02/

信息架构

规划站点结构、导航层级与内容分类。

03/

原型设计

线框图到可交互原型,快速验证概念。

04/

视觉设计

设计系统,品牌语言、配色与组件库。

05/

开发实现

前后端开发、接口联调与响应式适配。

06/

测试上线

功能测试、性能优化、CI/CD 部署。

📋
Prompt 提示词
Build an OpenCode-style page: Dark background with cyan (#00d2ff) as primary accent. IDE/code editor aesthetic. Terminal with syntax highlighting. Web dev tool feel. JetBrains Mono font. Rounded corners (12px). Modern developer tools vibe.

开始编码

采用 OpenCode 风格,打造开发者友好的网站

探索所有风格 →