dsh-artist-mode

Readme

# 🎨 DSH 艺术家模式（Artist Mode）

<p align="center">
  <strong>对话式设计交付 — 打字→回车→3-30 分钟拿到能交付的设计</strong><br/>
  <em>HTML 原生设计 · 反 AI slop · 5 维评审 · Agnes AI 生图/生视频</em>
</p>

<p align="center">
  <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License: MIT"></a>
  <img src="https://img.shields.io/badge/version-v0.5.0-478CBF" alt="v0.5.0">
  <a href="#"><img src="https://img.shields.io/badge/dsh--plugin-ready-478CBF?logo=deepseek&logoColor=white" alt="dsh-plugin"></a>
</p>

---

## ✨ 这是什么

一个 **DSH（DeepSeek Harness）agent 预设**：让 AI 像设计师一样工作——你说需求，它产出**单文件 HTML 设计**（可点击原型 / 演讲 deck / 信息图 / 动画），3-30 分钟可交付。

与 [专家模式](https://github.com/Asher-2000/dsh-expert-mode) **平级并列**的独立预设。

## 核心能力

| 能力 | 说明 |
|---|---|
| 🎨 **对话式设计交付** | 打字→回车→能交付的单文件 HTML（原型/PPT/信息图/动画） |
| 🚫 **反 AI slop 铁律 11 条** | 紫蓝渐变/emoji 图标/圆角堆砌/左 border accent… 全部禁绝 |
| 🎭 **60 风格库** | 媒介(web/PPT/信息图) × 气质(大胆/中性/安静)，纯 CSS 变量驱动 |
| 🧐 **5 维评审** | 哲学一致性/视觉层级/细节执行/功能性/创新性，artist_critic 独立评审 |
| 🏷️ **品牌资产协议** | 问→搜→下载→grep 色值→brand-spec.md，绝不凭记忆猜品牌色 |
| 🖼️ **Agnes AI 生图/生视频**（M9） | OpenAI 兼容 API，免费档，默认 off 可选启用 |
| 🎬 **动画→MP4/GIF 导出** | Stage+Sprite 动画引擎 + BGM/SFX 双轨 + 一条命令导出 |
| 🖥️ **deck 3D 概览墙** | 多页 HTML deck 聚合器 + 键盘翻页 + 全屏演示 |
| 📱 **设备框架** | iPhone/Android/macOS/浏览器窗口 4 种高保真外壳 |

## 📦 安装

**方式 A · 装 skill（推荐，跨 agent 通用）**

```bash
# 1. 克隆仓库
git clone https://github.com/Asher-2000/dsh-artist-mode.git
cd dsh-artist-mode

# 2. 拷贝 5 个 skill 到你的 agent skills 目录（以 Hermes 为例）
cp -r skills/artist-design skills/artist-prototype skills/artist-deck skills/artist-animation skills/artist-ai-media ~/.hermes/skills/creative/

# 3. 重启 agent，即可按需触发（如"做个咖啡店点单 App 原型"）
```

**方式 B · 装 dsh preset（完整预设体验，含 artist_designer/artist_critic 子代理）**

```bash
# 1. 克隆仓库
git clone https://github.com/Asher-2000/dsh-artist-mode.git
cd dsh-artist-mode

# 2. 安装到 DSH 预设目录
mkdir -p ~/.dsh/.agent-presets/artist-mode
cp -r agent.cordis.yml preset.yml .artist-mode skills ~/.dsh/.agent-presets/artist-mode/

# 3. 重启 DSH web，预设选择器选「艺术家模式」
```

## 🚀 快速开始

1. 安装并重启 DSH
2. 选择「艺术家模式」预设
3. 直接说需求：

```
"做一个咖啡店点单 App 原型，3 版风格对比"
"做 8 页产品发布会 deck"
"把这份数据做成信息图"
"给我做一个品牌 landing 页，风格参考我们的品牌色"
```

## 🖼️ 可选云能力（Agnes AI，M9）

默认 **off**（纯 HTML/CSS 交付，零网络零 key）。启用生图/生视频：

```bash
export AGNES_API_KEY=sk-xxx
node skills/artist-ai-media/scripts/media-client.mjs on
node skills/artist-ai-media/scripts/media-client.mjs image '{"prompt":"a minimal coffee cup","brand":{"primary":"#8B5A2B"},"out":"/tmp/art"}'
node skills/artist-ai-media/scripts/media-client.mjs video '{"prompt":"coffee cup animation","scene":"deck-bg","out":"/tmp/art"}'
```

- 生图：`agnes-image-2.0-flash`（免费，同步返回 PNG）
- 生视频：`agnes-video-v2.0`（免费，异步任务，mode=ti2vid）
- 站点：国际 `apihub.agnes-ai.com/v1` / 国际 .cn 镜像 / 国内站（`AGNES_BASE_URL` 可配）
- 护栏：单会话 ≤3 视频 / ≤30s；失败降级 CSS 占位/动画引擎

## 🏗️ 架构

```
artist-mode/
├── preset.yml                # 预设元数据
├── agent.cordis.yml          # persona + artist_designer/artist_critic 子代理（路由到 skills/）
├── .artist-mode/             # preset 壳（路由入口，指向 skills/）
│   ├── SKILL.md              # 入口导航（任务 → 对应 skill）
│   └── assets/_deprecated/   # 旧占位骨架（v0.5 前，已废弃）
├── skills/                   # ⭐ 5 个通用 skill（可跨 agent 安装）
│   ├── artist-design/        # 设计内核：反 slop 11 条 + CSS 契约 + 12/40 风格库 + 品牌协议 + 5 维评审
│   │   ├── references/       # design-styles / design-styles-huashu / brand-asset-protocol 等 7 份
│   │   └── scripts/          # fetch_images.py / verify.py
│   ├── artist-prototype/     # 交互原型：4 设备框 + 状态机 + 点击测试
│   │   └── assets/           # ios/android/macos/browser_frame.jsx + design_canvas.jsx
│   ├── artist-deck/          # 幻灯片：3D 概览墙 + PDF/PPTX 导出
│   │   ├── assets/           # deck_index.html + deck_stage.js
│   │   ├── references/       # slide-decks / editable-pptx / scene-templates
│   │   └── scripts/          # export_deck_pdf/pptx/stage_pdf + html2pptx + gen_deck_thumbs
│   ├── artist-animation/     # 动画：Stage+Sprite 引擎 + MP4/GIF + BGM/SFX
│   │   ├── assets/           # animations.jsx + bgm-*.mp3 ×6 + sfx/ 37 个
│   │   ├── references/       # animation-pitfalls / audio-design-rules / launch-film 等 12 份
│   │   └── scripts/          # render-video / render-video-seek / add-music / convert-formats
│   └── artist-ai-media/      # 生图/生视频：Agnes AI（M9，默认 off）
│       └── scripts/          # media-client + adapter-image/video + adapter-agents
└── docs/                     # 历史方案文档（PRD/架构/设计内核/评估/评审）
```

### 两种安装方式

**方式 A · 装 skill（推荐，跨 agent 通用）**
```bash
# 拷到目标 agent 的 skills 目录（以 Hermes 为例）
cp -r skills/artist-design skills/artist-prototype skills/artist-deck skills/artist-animation skills/artist-ai-media ~/.hermes/skills/creative/
```

**方式 B · 装 dsh preset（完整预设体验）**
```bash
mkdir -p ~/.dsh/.agent-presets/artist-mode
cp -r agent.cordis.yml preset.yml .artist-mode skills ~/.dsh/.agent-presets/artist-mode/
```

## 📚 文档

| 文档 | 说明 |
|---|---|
| `docs/artist-mode-plan.md` | 总方案（历史 v0.4 版：定位/架构/设计内核/工具链/Agnes 接入；当前实现以 preset.yml v0.5 为准） |
| `docs/design-core-spec.md` | 设计内核规范（反 slop 铁律/风格库/5 维评审/品牌协议） |
| `docs/media-gen-architecture.md` | 生图/生视频接入架构 |
| `docs/agnes-adapter-plan.md` | Agnes adapter 实现方案 |
| `docs/`（其余） | 历史评审/评估/一致性文档 |

## 🎯 设计哲学

- **对话式**：不用打开 Figma/PS，说话就能交付设计
- **HTML 原生**：单文件 HTML 即交付物，零依赖双击即开
- **反 AI slop**：不做"看起来像 AI 做的"设计，有 11 条铁律约束
- **可评审**：5 维独立评审，知道改什么、为什么改
- **可扩展**：60 风格库规划 + Agnes AI 生图/生视频可选接入

## 📄 许可证

MIT License

## 🙏 致谢

- [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) - 核心框架
- [huashu-design](https://github.com/alchaincyf/huashu-design) - 设计思路参考（MIT）
- [Agnes AI](https://agnes-ai.com) - 免费全模态 API