Portfolio
设计 × Coding

个人产品 · 线上运行 · 2026 · Design Agent Workstation

Design Station

一句话说需求,Agent 规划并产出图片、网页、文案、视频,都落在同一张画布上

0

个内置技能

0

类产出

0

个设计 Agent

Design Station:品牌与首页

产品定义 · 设计 · 前后端实现与部署

设计工作里真正费时间的,是把一个想法变成一整套能用的东西:图片、网页、文案、视频,还得看起来像一个品牌做的。Design Station 把这件事交给 Agent:说清要什么,它先给方案,再按内置技能一件件做出来,结果都落在同一张画布上,可以接着改。产品定义、界面、前后端和上线都是我自己做的。

Briefing

一个人能不能做一个真正能用的设计 Agent 产品

市面上的 AI 工具大多只解决一件事:生图的只生图,写文案的只写文案,做网页的只做网页。设计师真实的工作是一个项目——一盏灯要发布,需要产品图、一套视觉规则、一页官网、一条五秒短片,而且它们得像同一个品牌做出来的。Design Station 就是照着这件事做的:一个项目一张画布,技能分工,资产复用。

给谁用

要独立完成一整套交付的设计师和小团队。

怎么用

描述要做什么,必要时挑技能、挑素材,Agent 先说方案再动手。

我做了什么

产品定义、界面设计、前后端实现、部署上线,一个人。

Product

Design Station:首页、工作区与项目列表
首页提需求 · 工作区左边是过程右边是画布 · 项目列表回到任何一次创作
Design Station 录屏演示 · 1:08

Flow

一次创作,四步走完

  1. 01 · 01

    先把需求说清楚

    一句话就行:「给一盏建筑感的台灯做一套克制的发布物料,产品图、官网和一条五秒短片保持同一个身份。」输入框下面四个类型是筛选,不是必选。

    首页输入框里写下一段需求
  2. 02 · 02

    需要的话,指定技能和素材

    12 个内置技能对应 12 种交付物;素材库里的品牌、角色、产品 UI 可以直接带进来,保证这次做的和上次是一套。

    在输入框里选择技能
  3. 03 · 03

    Agent 先给方案,再一件件做

    左边是它的思考和进度:确认方案、锁定身份、用哪个技能、做出了什么。每一步都写清楚,不是一个转圈的进度条。

    工作区左侧的过程记录与右侧画布
  4. 04 · 04

    结果落在画布上,接着改

    方向、视觉规则、产品图、文案、网页、短片都在同一张画布上。选中一件就能继续改:整件重做,或者只圈出要动的那块,说一句「把盖子换成玻璃的」,其余部分保持不变。

    圈出要改的区域,描述改动

Decisions

几个决定了产品长相的选择

  • 01画布,不是聊天记录

    结果留在原地,不往上滚

    一个项目的所有产物在一张画布上各有位置,改哪件点哪件;对话只是过程,不是交付物。

  • 02技能是可读的文档

    每个技能就是一份 md

    「什么是好的产品图」这类判断写成文档,人能读、能改、能自己加,AI 照着做;不是藏在提示词里的黑盒。

  • 03资产可复用

    品牌、角色、产品 UI 存起来

    一次定好的身份,之后每次创作都能带上,跨项目保持一致,而不是每次重新描述。

  • 04先方案后执行

    做之前先说清楚要做什么

    Agent 先给一句话方案和分工,确认之后才开始生成;中途每一步都有明确产物。

  • 05同一份成果两种读法

    预览和代码是一件事

    网页类产出可以看效果,也可以直接看和改代码,导出即可用,不用再翻译一遍。

  • 06模型是可换的

    按任务挑模型,不锁死

    图片、视频、文本各自可选模型,产品不替用户做死这个选择。

网页产出:预览和代码,同一份东西

工作区里的代码视图:index.html
工作区里的预览视图:生成的编辑部网站
  • 代码

    生成的是能跑的页面,不是效果图:直接看和改 index.html,改完整包下载。

  • 预览

    同一份文件的显示结果,桌面和移动保持同一套阅读顺序。

Outputs

四类产出,同一个身份

  1. 01 · 图片

    产品图与包装:一套,不是一张

    先把可生产的形态定死——一只可替换的瓶身、一个内盘、一套外盒,再出成组的图:完整包装、材质静物、替换系统各一张,同一套光和同一组颜色。生成之后还能扩展成电商方形、竖版等尺寸。

    Nara Form 包装:三张一致的 4:5 成品图
  2. 02 · 界面

    网站与移动端:能跑的页面

    从参考界面到可编辑的代码,桌面和移动保持同一套阅读顺序;再提一句「这段说得太响了」,它改完仍然保持结构不变。

    生成的编辑部网站预览
  3. 03 · 视频

    五秒短片:从已定稿的图出发

    用已经确认的产品图做首帧,生成一条 16:9、5 秒的材质短片,参数(时长、帧率、分辨率)写在旁边,不含生成音轨。

    由定稿图生成的五秒短片
  4. 04 · 文字

    研究与文案:判断也是交付物

    受众研究、竞品对比、信息体系这些说不清的部分同样有技能负责:谁在做决定、对手强在哪、这次到底说哪一句。产出是画布上能直接用的文档,而不是一段聊天回复。

    Northline:受众研究 · 竞品格局 · 信息体系三份文档

Library

技能:12 个内置,每个都是一份能读能改的文档

Skills:12 个内置技能
四类各 3 个:图片、界面、文字、视频;也可以导入或新建自己的技能。
打开「产品图」技能,看到的就是它的判断标准
点开一个技能,看到的就是 Agent 照着做的那份文档:什么算好、先定什么、怎么判断。

资产:一次定好的身份,之后每次都能带上

Assets:品牌 / 角色 / 产品 UI
品牌、角色、产品 UI 三类标准存在这里,创作时直接引用,跨项目保持一致。

Now

它现在就在线上跑

design.aifisher.cn 是它的正式地址,中英双语,注册即可用。技能文档、Agent 的分工方式和界面都还在按使用反馈改——对我来说这是 AI Coding 最实在的部分:判断能直接变成产品,验证周期以天计,不用等排期。