71 lines
4.8 KiB
Markdown
71 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/` 等，与页面设计无关）。
|