内容
# 设计工作室
一款让网站看起来更漂亮的设计工具。它与 Claude Code 配合良好，也可以与其他代理程序一起运行。它将工作分为四个任务（规划、设计、构建和检查），因此您会获得原创设计，而不是枯燥的模板。
**[查看其工作原理 →](https://george-rd.github.io/design-studio/)**
[](https://ko-fi.com/george_builds)
<p align="center">
<img src="docs/video-1080p.gif" width="720" alt="Design Studio 23-second overview" />
<br/>
<em>23 秒概述：Design Studio 如何击败代码锚定偏差</em>
</p>
## 问题所在
当您要求 AI 构建一个网站时，它通常会每次都生成相同的内容：一个居中的标题、一个按钮、一些排列成网格的卡片。它看起来还不错，但很无聊。每个 AI 网站看起来都一样。
原因是 **代码锚定偏差**。当 AI 在进行更改之前读取自己的代码时，它只会调整现有的代码。它从不停下来思考“这应该真正看起来是什么样？”
## 工作原理
Design Studio 将工作分为四个独立的任务。每个任务由一个不同的代理执行，该代理只能看到它需要看到的内容。
| 代理 | 任务 | 为什么要分开 |
|-------|-----|-------------------|
| **规划师** | 将您的想法转化为完整的计划 | 防止模糊的请求导致不良结果 |
| **设计代理** | 用文字描述页面应该是什么样子，而不是代码 | 从不查看代码，因此它不会复制旧想法 |
| **实现代理** | 根据设计描述构建真实的代码 | 完全按照设计，不走捷径 |
| **评估器** | 在真实的浏览器中打开页面，点击并评分 | 只评估用户看到的内容，不评估代码编写难度 |
循环：**计划 → 设计 → 构建 → 检查 → 决定 → 重复**。
每轮都会使设计变得更好。评估器会单独检查页面的每个部分，并尝试故意破坏它。当分数足够高时，它会发布最佳版本。
## 您需要什么
- **主要路径：** 安装并登录 Claude Code，具有在真实浏览器中打开页面的方式（Claude Code 的 claude-in-chrome MCP 或其他浏览器工具）。
- **便携路径：** 任何可以运行 `skills/design-studio/workflow.yaml` 和 `skills/design-studio/agents/` 下的所有辅助提示的代理程序（插件根目录 `agents/` 文件仅为发现存根）。这包括 OMP、Codex、Cursor 和类似工具。您只需要一个浏览器工具和一种运行辅助代理的方式。
## 安装
```bash
# 从 GitHub
claude plugin install https://github.com/George-RD/design-studio
# 或在单个会话中加载它
claude --plugin-dir ./design-studio
```
安装后，在 Claude Code 中运行 `/reload-plugins`。
## 快速入门
在 Claude Code 中输入：
```
/design-studio:create a landing page for a small coffee shop
```
该工具将：
1. **计划：** 将您的想法转化为具有外观和感觉的完整规格
2. **设计：** 设计代理描述页面应该是什么样子（无代码）
3. **构建：** 实现代理根据描述构建它
4. **检查：** 评估器在浏览器中打开页面，截图并评分
5. **决定：** 改进、重新开始或发布
6. **循环：** 重复直到设计足够好
7. **编码：** 将获胜方向转化为可重用的设计系统：`harness-output/design-system/design-dna.md`、`tokens.css` 和可安装的技能模板
所有工作都保存在一个名为 `harness-output/` 的文件夹中。最终的设计系统位于 `harness-output/design-system/` 中。
## 命令
| 命令 | 功能 |
|---------|-------------|
| `/design-studio:create <your prompt>` | 运行完整的设计循环 |
| `/design-studio:review <path-or-url>` | 审核/改进现有的 UI，无需完整的循环 |
Design Studio 有两条路径：**工作室** 运行创建/改造循环，**评审** 审核和改进现有的 UI 而无需它。
## 评分方式
评估器根据四项内容对您的页面进行评分：
| 检查内容 | 权重 | 含义 |
|----------------|--------|---------------|
| 设计质量 | 2x | 看起来是否协调？ |
| 原创性 | 2x | 看起来是否像其他网站？ |
| 工艺 | 1x | 代码是否干净且精致？ |
| 功能性 | 1x | 人们能否使用它？ |
设计质量和原创性最为重要。AI 已经擅长于制作可用的东西。难点在于制作脱颖而出的东西。
## 与众不同之处
- **不再是模板网站。** 大多数 AI 工具每次都生成相同的布局。Design Studio 通过将构思设计的人与编写代码的人分开来解决这个问题。
- **真实浏览器测试。** 评估器在 Chrome 中打开您的页面，点击按钮，滚动并检查错误。它不仅仅读取代码。
- **分区评分。** 它不是给整个页面一个分数，而是单独检查每个部分。破碎的页脚不能隐藏在漂亮的英雄部分后面。
- **尝试破坏。** 在评分之前，评估器检查文本是否溢出、按钮是否工作以及布局在移动设备上是否损坏。
## 来源
基于Anthropic Labs关于“为长期运行的应用程序开发设计工具”的研究。关键的洞察：创造性思维与代码编写分开，产生的效果远比单个代理执行所有操作要好得多。
## 许可证
MIT
MCP 市场