admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
72 lines
4.8 KiB
Markdown
72 lines
4.8 KiB
Markdown
---
|
||
name: open-design
|
||
description: "网页 App 界面设计的**判据供给库**：153 套品牌设计系统（定调与令牌）、13 份通用工艺判据（字体/配色/动效/状态/无障碍/反 AI 味）、35 个版式骨架模板（后台面板、工具页、落地页、移动端、线框）。当需要为网页 App 的前台或后台选定视觉方向、生成设计令牌、挑版式骨架，或按工艺判据审查页面质量时使用。可被产品规划技能③段调用，也可独立使用。不用于演示文稿、视频音频图片生成、出版物物料。"
|
||
metadata:
|
||
version: "0.23.1-crop1"
|
||
source: "nexu-io/[email protected] (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/[email protected]`（Apache-2.0，HEAD `5b19dfa`）。`craft/` 内容改编自 MIT 授权的 `referodesign/refero_skill`。
|
||
本地裁剪（2026-10-05）：`design-templates/` 由 114 个裁至 35 个（去演示文稿/视频音频/出版物/纯可视化/外部依赖类）；未收录上游的应用源码目录（`apps/` `packages/` `node_modules/` 等，与页面设计无关）。
|