生成的原型「不专业」：设计原则没接 frontend-design skill、无主题切换、属性面板只能改内容不能调视觉

2026-09-08 人类实测（Claude Code 风格 chat UI）后的三条反馈。逐条核实结果如下。

## ① 「参考 Claude 的设计 skill，你是否链接过来了？」→ **没有**

- `.agents/skills/frontend-design/SKILL.md` **在这个仓库里**（讲排版层级、字体、视觉结构、以及「AI 生成感」的具体特征清单）。
- 设计对话的 prompt **完全没有引用它**。它用的是自己那套 `DESIGN_PRINCIPLES`（`design-chat-model.ts:91`），八条**全是布局结构**：主操作唯一、navbar→内容→底部、层级靠 variant、列表 ≥3 项、非理想态、文案动词、≤5 功能块、主操作要有去处。

**一个字都没讲视觉**——没有排版节奏、字重对比、间距体系、色彩与调性。所以产出「结构合理但看着不专业」是必然的：模型被告知了怎么摆，没被告知怎么好看。

⚠ 直接把 `frontend-design` 全文塞进 prompt 不行：它是写给「用 React/CSS 自由发挥」的场景，而这里的输出受限于 21 个原语的闭集。要做的是**把它的视觉判据翻译成这套原语能表达的约束**。

## ② 主题切换（白天 / 黑夜）→ **现在没有**

契约里没有 theme 字段；画布跟随**页面自己**的 `.dark`（`design-prototype.ts:8`）。所以原型不能独立切换、也不能同时看两套。做深色 app 的人现在只能把整个后台切成浅色才能看浅色稿。

## ③ 属性面板只能改内容，不能调视觉

`PROTOTYPE_FIELDS` 每个类型都有字段，但清一色是**内容属性**（文案、items、variant 枚举、bool）。只有 `stack` 有 `gap`/`padding`。按钮、文本、卡片**没有**尺寸、圆角、色调、对齐的调节。

用户要的是「像 Figma 但简化」——选中一个东西，右边能直接调它长什么样。

---

## 范围

三条都进迭代 13 的 delta `design-chat-inputs` §5（该 delta 尚未签核，直接补进去，不另起一轮签核）。

Start with the iteration 13 delta `design-chat-inputs` §5, then read `.agents/skills/frontend-design/SKILL.md`, `design-chat-model.ts` around `DESIGN_PRINCIPLES`, and `design-prototype.ts` around the page `.dark` behavior. Inspect the 21 primitives and `PROTOTYPE_FIELDS` to define the three requested areas; done means the translated visual constraints, independent theme switching, and visual property editing are represented in the prototype contract and panel.

Written by the indexing model from the issue text.