---
name: open-design
description: "网页 App 界面设计的**判据供给库**：153 套品牌设计系统（定调与令牌）、13 份通用工艺判据（字体/配色/动效/状态/无障碍/反 AI 味）、35 个版式骨架模板（后台面板、工具页、落地页、移动端、线框）。当需要为网页 App 的前台或后台选定视觉方向、生成设计令牌、挑版式骨架，或按工艺判据审查页面质量时使用。可被产品规划技能③段调用，也可独立使用。不用于演示文稿、视频音频图片生成、出版物物料。"
metadata:
  version: "0.23.1-crop1"
  source: "nexu-io/open-design@0.23.1 (Apache-2.0) — 本地裁剪版"
---

# open-design（网页 App 设计供给库）

本技能是**三处供给**的合集，每一处解决一个明确问题。**按需读取，⛔ 不预先全量加载**。

## 三处供给

| 供给 | 路径 | 解决什么 | 用法 |
|---|---|---|---|
| **设计系统** | `design-systems/`（153 套） | **定调**：这个产品长什么样 | 选**一套**，读它的 `DESIGN.md`（设计散文）＋ `tokens.css`（语义令牌） |
| **工艺判据** | `craft/`（13 份） | **质量**：做得专不专业 | 按页面类型挑 1~2 份读，见下表 |
| **版式模板** | `design-templates/`（35 个） | **落地**：这一页怎么排 | 选最接近的一个，复制其种子与骨架 |

## 一、设计系统（定调）

每套结构：`manifest.json`（元数据）＋ `DESIGN.md`（设计散文，代理读这份）＋ `tokens.css`（已编译的语义令牌）。

- ⛔ **定调只从这里选一套**，不凭感觉编。选法：读候选套 `DESIGN.md` 第 1 章，按页面类型挑。
- ⛔ 不要用「米白 + 衬线 + 陶土色」这类模型默认审美。
- 153 套含品牌系（`linear-app` `notion` `stripe` `vercel` `apple` `github` `figma` `supabase` …）、风格系（`minimal` `brutalism` `neumorphism` `glassmorphism` `editorial` `luxury` `retro` …）、场景系（`dashboard` `trading-terminal` `hud` `mission-control` …）。

## 二、工艺判据（质量）

**按需取用，一次只读 1~2 份**：

| 文件 | 什么时候读 |
|---|---|
| `typography.md` | 任何出文字内容的页面 |
| `typography-hierarchy.md` | 层级要「像设计过」而非「拼装」的页面 |
| `typography-hierarchy-editorial.md` | 长阅读面（文档、指南） |
| `color.md` | 任何出样式的页面（⚠️ **文本对最差背景的对比度**是硬线） |
| `state-coverage.md` | 有状态的 UI（面板、表单、列表、表格） |
| `animation-discipline.md` | 有动效的页面 |
| `accessibility-baseline.md` | 有任何交互的页面（焦点、标签、键盘路径） |
| `anti-ai-slop.md` | 营销页 / 落地页 |
| `form-validation.md` | 主内容是交互表单 |
| `laws-of-ux.md` | 组合决策撞到认知极限时（定价页、面板、引导流） |
| `rtl-and-bidi.md` | 可能出现阿/希/波斯文 |
| `accessibility-baseline.md` | 交互 UI 的无障碍底线 |

`craft/README.md` 有完整对照表。

## 三、版式模板（落地）

以**后台面板 / 工具型页面**为主（2026-10-05 已按「是否服务网页 App 前后台」裁剪）：

- **后台 / 数据面板**：`dashboard` `github-dashboard` `live-dashboard` `social-media-dashboard` `flowai-live-dashboard-template` `trading-analysis-dashboard-template` `social-media-matrix-tracker-template` `dating-web` `kanban-board` `team-okrs`
- **工具页**：`pm-spec` `eng-runbook` `meeting-notes` `invoice` `contact-widget` `critique` `tweaks` `live-artifact`
- **前台官网 / 落地 / 文档**：`web-prototype`（⚠️ **营销落地页向**）＋ 3 taste 变体、`saas-landing` `pricing-page` `waitlist-page` `docs-page` `kami-landing` `open-design-landing`
- **移动端**：`mobile-app` `mobile-onboarding` `gamified-app`
- **线框**：`wireframe-greybox` `wireframe-annotated` `wireframe-sketch` `wireframe-mobile-flow`

⚠️ **只有 4 个模板带可粘贴骨架库 `references/layouts.md`**：`web-prototype` `live-dashboard` `mobile-app` `html-ppt`(已裁)。

## ⛔ 使用纪律

- **`web-prototype` 是营销落地页骨架**，工具型后台页面**不要**直接套它。
- **一次只读 1~2 份 craft**，⛔ 不把整个 `design-systems/` 或 `craft/` 读进上下文。
- 本项目 ③段（`stage-delivery`）对这三处的**具体取用判据**在 `product-planning` 技能的 `references/stage-delivery/` 里，**那里是判据正文**，本技能只提供素材。

## 来源与授权

`nexu-io/open-design@0.23.1`（Apache-2.0，HEAD `5b19dfa`）。`craft/` 内容改编自 MIT 授权的 `referodesign/refero_skill`。
本地裁剪（2026-10-05）：`design-templates/` 由 114 个裁至 35 个（去演示文稿/视频音频/出版物/纯可视化/外部依赖类）；未收录上游的应用源码目录（`apps/` `packages/` `node_modules/` 等，与页面设计无关）。