dsh-design-studio 0.0.0-stage → 0.3.2

package/skills/ui-design/SKILL.md

@@ -0,0 +1,90 @@
+# 界面设计（配合右侧「设计工作台」）
+
+做网页、App 界面、平板界面、海报 / 社媒图、幻灯片、邮件、组件这类**看得见的设计**时照这份来。目标：一眼看上去像专业设计师做的，不像模板，也没有「AI 味」。
+
+## 流程
+
+1. **先定类型和画幅**（拿不准就按用户说的场景选）：
+
+   | kind | 画幅 | 外框 | 细则 |
+   | --- | --- | --- | --- |
+   | `web` | 1280×800 起，自适应 | 浏览器窗口 | `references/web.md` |
+   | `app` | 390×844（iPhone） | 手机 + 灵动岛 | `references/app.md` |
+   | `tablet` | 820×1180 | 平板 | `references/app.md` 末尾 |
+   | `poster` | 1080×1350（4:5），可改 1080×1920 / 1080×1080 | 卡片 | `references/poster.md` |
+   | `slides` | 1280×720（16:9） | 卡片 | `references/slides.md` |
+   | `email` | 600 宽 | 卡片 | `references/email.md` |
+
+   细则只在做那一类时再读。
+
+2. **先写设计变量**：在设计目录建 `tokens.css`（起手模板 `tokens.css` 就在这个技能目录里，复制过去再按品牌改），颜色、字体、字号阶梯、间距、圆角、阴影都从这里取。每屏都 `<link rel="stylesheet" href="tokens.css">`。之后要统一改风格，改这一个文件，所有屏一起变。
+
+3. **一屏一个 HTML 文件，放同一个目录**，按用户会看的顺序一屏一屏写（画布按创建顺序排：登录 → 首页 → 详情 → …）。文件名用英文小写（`login.html`、`home.html`），`<title>` 写这屏的中文名（画布上显示它）。每屏 `<head>` 里写：
+
+   ```html
+   <meta name="dsh-design" content="app">          <!-- 类型；海报可带尺寸：poster 1080x1920 -->
+   ```
+
+   **几屏之间用真链接串起来**，让它成为点得动的原型：按钮、卡片、标签栏、返回箭头都写成 `<a href="detail.html">`（或 `data-href="detail.html"`）。返回也写具体去哪一屏（`<a href="home.html">`），不要用 `history.back()`。右侧画布会从按钮画一条连线到目标屏，「演示」时点按钮就跳过去（带过场动画），手机扫码看时也点得动。
+
+4. **写完第一屏就调 `preview_page`**（`target` 填这个文件，`kind` 填类型），用户从第一屏起就能看着它长出来；后面的屏写到同一目录会自动并排出现，不用再调。
+
+5. **写完跑一遍下面的「自查」**，有问题直接改，最后用一两句话告诉用户做了哪几屏、风格要点。
+
+6. **用户点选后让你改**（消息里有〔选中元素〕/〔选中区域〕）：按里面的文件和 CSS 路径找到源码改那一处；如果是颜色、字号、圆角这类风格问题，优先改 `tokens.css` 里的变量，让所有屏保持一致。
+
+## 设计原则
+
+**层级**：每屏只有一个视觉焦点（最大的字 / 最亮的按钮）。用字号、字重、颜色深浅三档拉开层级，不要靠边框和分割线堆结构。主操作一个，次操作弱化成描边或文字按钮。
+
+**间距**：全部用 4 / 8 的倍数（4、8、12、16、24、32、48、64）。相关的东西靠近、不相关的分开（亲密性）：组内间距 < 组间间距 < 区块间距。宁可留白多，不要塞满。
+
+**字号阶梯**：比例 1.2–1.25，例如 12 / 14 / 16 / 20 / 24 / 32 / 40 / 56。一屏最多用 4 个字号。正文 15–16px，行高 1.5–1.7；标题行高 1.1–1.3，大标题字距略收（-0.02em）。一行 45–75 个字符（中文 20–35 个字）。
+
+**颜色**：按角色定义，不按色相：背景 bg、表面 surface、文字 text、次要文字 muted、边框 line、主色 primary、强调 accent、成功 / 警告 / 危险。主色只用在关键操作和少量点缀（60 中性 – 30 辅助 – 10 主色）。中性色带一点主色的色相（暖品牌配暖灰），不要纯灰。新项目用 `oklch()` 定色，明暗一致好调。
+
+**对比度**：正文对背景至少 4.5:1，大字（≥24px 或 ≥19px 粗体）和图标至少 3:1。浅灰字配白底最容易不合格，`muted` 别浅过 `#6b7280` 这一档。
+
+**形状和层次**：圆角一套（如 8 / 12 / 16 / 999），同类元素圆角一致，嵌套时内圆角 = 外圆角 − 内边距。阴影最多两三档，用低透明度、大模糊、略带主色调的阴影；深色背景用亮一点的表面色区分层级，不靠阴影。
+
+**真实内容**：不要 Lorem ipsum、「标题一」「示例文字」。写像真产品的中文文案、合理的数字和价格、真实感的人名地名。图片位置用 SVG 插画、几何构图或带色块的占位，不引用外网图片（预览离线也要好看）。
+
+**图标**：用一套线性 SVG 图标（同样的线宽 1.75–2、圆角端点、24 网格），内联写进 HTML。不要用 emoji 当图标。
+
+**状态**：按钮的悬停 / 按下 / 禁用，输入框的聚焦 / 出错，列表的空状态、加载、出错——用户会点的地方都要有。
+
+**动效**：克制。150–250ms，`cubic-bezier(.2,.8,.2,1)`；只动 `transform` 和 `opacity`；加 `@media (prefers-reduced-motion: reduce)` 关掉。
+
+**可访问性**：语义标签（`header` `nav` `main` `button`），图片有 `alt`，焦点样式看得见（`:focus-visible`），可点的区域至少 44×44。
+
+## 中文排版
+
+- 字体栈：`"PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", system-ui, sans-serif`；数字和英文想更精致可以把 `"Inter"` / `-apple-system` 放在前面。
+- 中文不用斜体；字重用 400 / 500 / 600，标题最多 700。
+- 中文和英文、数字之间加空格（「iPhone 16 发布」）；标点用全角。
+- 中文行高比英文大一点（正文 1.6–1.75）；段落之间用间距分开，不用首行缩进。
+- 标题不要一行只剩一两个字：调整宽度或用 `text-wrap: balance`。
+
+## 别有「AI 味」
+
+一眼像 AI 生成的通病，避开：
+
+- 默认的紫蓝渐变、霓虹发光、到处玻璃拟态（毛玻璃）；
+- 每个区块都居中、每段都是「图标 + 标题 + 一句话」的三栏卡片；
+- 用 emoji 当图标、随手的装饰圆斑和波浪；
+- 每张卡片都有大阴影和描边；一屏五六种颜色；
+- 没有内容的口号式文案（「赋能」「一站式」「极致体验」）。
+
+要做的：先想清楚品牌性格（专业 / 温暖 / 活泼 / 高端），据此选**一个**主色 + 中性色 + 一款有性格的标题字体或字重对比；排版要有节奏（大字和小字、密和疏的对比）；至少一个记忆点（一个大胆的配色、一张有特色的插画、一个不寻常的版式）。
+
+## 自查（每次写完都过一遍）
+
+- [ ] 所有颜色、字号、圆角都来自 `tokens.css`，没有散落的魔法数字
+- [ ] 一屏只有一个焦点；主按钮只有一个
+- [ ] 间距都是 4 / 8 的倍数，同类元素间距一致，左边缘对齐
+- [ ] 正文对比度 ≥ 4.5:1，灰字没有太浅
+- [ ] 文案是真实的中文内容，没有占位文字、没有错别字
+- [ ] 图标同一套风格，没有 emoji 图标
+- [ ] 画幅对：App 留出顶部 54px 状态栏和底部 34px 横条；海报 / 幻灯片内容在安全区内不溢出
+- [ ] 多屏之间导航、按钮、卡片样式一致（像同一个产品）
+- [ ] 没有上面「AI 味」清单里的东西

package/skills/ui-design/references/app.md

@@ -0,0 +1,30 @@
+# App 界面（kind: app）· 平板（kind: tablet）
+
+## 画幅
+
+- 手机按 390×844（iPhone 15/16）设计，页面宽度就写满 390，不要居中一个小盒子。`<meta name="viewport" content="width=device-width,initial-scale=1">`。
+- 顶部 54px 是状态栏 + 灵动岛：自己画一条状态栏（时间 9:41、信号、电量），中间空着——灵动岛预览的外框会画，页面里别再画一个（不然换尺寸看时会出现两个）。内容从 54px 以下开始。
+- 底部 34px 是横条（home indicator）区：底部的标签栏 / 按钮要把它让出来（标签栏总高约 83px）。
+- 左右边距 16–24px；卡片之间 12–16px。
+
+## 结构和组件
+
+- **导航**：主要页面用底部标签栏（3–5 个，图标 + 文字，当前项用主色）；层级页面顶部是返回 + 标题 + 右侧操作。大标题样式（34px 粗体，滚动后收成 17px 居中）适合一级页面。
+- **触控**：可点的东西至少 44×44；主按钮高 50–56，圆角 12–16，通常放在拇指够得到的下半屏，长页面用底部固定操作栏。
+- **列表**：行高 56–72；左侧图标 / 头像，中间两行字（标题 + 灰色说明），右侧值或箭头。分组列表用浅色背景分组，不用到处画线。
+- **表单**：一行一个字段，标签在上，输入框高 48–56；键盘类型对应（手机号、验证码）。
+- **反馈**：轻提示（toast）在顶部或底部中间，2 秒消失；危险操作二次确认用底部弹出的操作表（action sheet）。
+- **空状态**：一张简单插画 + 一句说明 + 一个按钮，不要只写「暂无数据」。
+
+## 多屏一致
+
+一套 App 的几屏要像同一个产品：同一个标签栏（只是当前项不同）、同样的顶部栏、同样的卡片和按钮样式、同一套图标。把这些放进共用的 `app.css`（配合 `tokens.css`），每屏只写自己特有的部分。常见的一套：启动 / 登录 → 首页 → 列表或分类 → 详情 → 购物车或表单 → 结果或订单 → 我的。
+
+## 平台风格
+
+- 默认按 iOS 的感觉做（SF 风格字体栈、大标题、毛玻璃标签栏可以有但别滥用）。
+- 用户说安卓 / Material：顶部栏 64px、悬浮按钮（FAB）、卡片圆角 12、涟漪反馈的意思到了就行。
+
+## 平板（kind: tablet）
+
+820×1180 竖屏；用两栏（左侧列表 320–360px + 右侧详情）或侧边导航，而不是把手机界面放大。字号和手机一样，不要跟着放大。

package/skills/ui-design/references/email.md

@@ -0,0 +1,17 @@
+# 邮件（kind: email）
+
+邮件客户端（Outlook、Gmail、各种手机邮件）对 CSS 支持很差，规则和网页不一样：
+
+## 结构
+
+- 内容宽 600px，外层一个占满宽度的背景表格，里面一个 600px 居中的表格。**用 `<table>` 布局**，不要用 flex / grid。
+- 样式写成**行内样式**（`style="…"`）；`<style>` 里只放媒体查询（手机下改成 100% 宽）等可选增强。
+- 不要 JavaScript、不要外部字体依赖（可以写 web font，但要有 `Arial, "PingFang SC", "Microsoft YaHei", sans-serif` 兜底）、不要背景图承载关键信息。
+- 按钮用带背景色的表格单元格 + 链接（「防弹按钮」），高 44–48。
+
+## 版式
+
+- 顶部：Logo + 一句预览文字（隐藏的 preheader）。
+- 主体：一个主标题、一张主图（带 alt）、两三段短文字、**一个**主按钮。
+- 底部：灰色小字的公司信息、退订链接。
+- 字号：标题 24–28，正文 16，行高 1.6；颜色对比要够，很多人在手机深色模式下看。

package/skills/ui-design/references/poster.md

@@ -0,0 +1,21 @@
+# 海报 / 社媒图（kind: poster）
+
+## 画幅
+
+- 默认 1080×1350（4:5，朋友圈 / 小红书 / Instagram 竖图）。常用：1080×1920（9:16 竖版 / 开屏 / 故事）、1080×1080（方图）、1242×1660（小红书 3:4）。用别的尺寸时 `<meta name="dsh-design" content="poster 1080x1920">`，调 `preview_page` 时也带 `size`。
+- `html, body` 宽高写死成画幅尺寸，`overflow: hidden`，不要滚动。内容放在四边各 64–80px 的安全区里。
+
+## 构图
+
+- **一个焦点**：一张主视觉（插画、产品、超大字）占画面 40–60%。
+- **超大标题**：标题字号 96–160px，粗体，字距收紧（-0.03em），最多两行；副标题 32–40px；其他信息 24–28px。三档字号，拉开对比。
+- **网格**：按 4 栏或 6 栏对齐，所有元素左边缘对齐同几条线；重要信息放在视线路径（左上 → 右下，或上 → 下居中）。
+- **配色**：一个主色大面积 + 一个对比色点睛 + 黑白。背景可以是主色铺满，文字反白。
+- **层次**：前景（文字）、中景（主视觉）、背景（色块 / 纹理）三层，适度重叠显得有设计感。
+- **信息块**：时间、地点、价格、二维码位置这些放在底部一条信息带里，整齐排好。
+
+## 做法
+
+- 主视觉用 SVG 画（几何、插画、渐变网格），或用 CSS 形状、大字本身做视觉；不引用外网图片。
+- 文字用真实文案；营销海报一定有明确的行动（扫码、日期、价格）。
+- 一张海报多个版本（不同配色 / 版式）时，每个版本一个文件放同一目录，画布上并排比较。

package/skills/ui-design/references/slides.md

@@ -0,0 +1,19 @@
+# 幻灯片（kind: slides）
+
+## 画幅
+
+- 1280×720（16:9）。一页一个 HTML 文件（`01-cover.html`、`02-problem.html` …），放同一目录，画布上按顺序排开就是整套幻灯片。
+- `html, body` 宽高写死 1280×720，`overflow: hidden`。四边安全区 64px。
+
+## 原则
+
+- **一页一个观点**：标题就是结论（「转化率提升了 38%」，不是「数据分析」）。
+- **字要大**：标题 44–56px，正文 24–28px，注释 16–18px；一页正文不超过 6 行。
+- **少即是多**：能用一张图、一个大数字、一个对比说清楚的，不写段落。
+- **版式统一**：所有页的标题位置、边距、页码、Logo 位置一致；用 3–4 种版式轮换：封面、章节页、标题 + 要点、大数字、左图右文、对比（两栏）、引用、结尾。
+- **数据页**：图表用 SVG 画；只标关键数据，突出一根柱子 / 一条线（主色），其余灰色；图表标题就是结论。
+- **颜色**：深底或浅底选一种贯穿全套；主色只用来强调。
+
+## 常见一套
+
+封面（标题 + 副标题 + 讲者 / 日期）→ 目录 → 问题 → 方案 → 关键数据 → 案例 → 计划 / 时间线 → 总结 → 致谢 / 联系方式。

package/skills/ui-design/references/web.md

@@ -0,0 +1,21 @@
+# 网页（kind: web）
+
+## 画幅和布局
+
+- 按 1280–1440 宽设计，内容区最大宽度 1120–1200px 居中，两侧留白；用 12 栏网格（栏间距 24px）。
+- 一定要自适应：至少在 390 宽（手机）下也不破。用 `clamp()` 做流式字号（如 `font-size: clamp(32px, 5vw, 56px)`），`grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))` 做卡片网格，组件内部用容器查询 `@container`。
+- 首屏（上方 800px）讲清楚三件事：这是什么、对我有什么用、下一步点哪。
+
+## 常见页面结构
+
+- **落地页**：导航（Logo + 3–5 个链接 + 一个主按钮）→ 首屏（大标题 ≤ 2 行 + 一句副标题 + 主次两个按钮 + 产品图 / 插画）→ 社会证明（客户 Logo、数字）→ 功能（别都做成三栏卡片：可以左右交替、Bento 网格、大图配要点）→ 评价 → 价格 → 常见问题 → 收尾行动号召 → 页脚。
+- **后台 / 仪表盘**：左侧导航 240px（图标 + 文字，当前项高亮），顶部栏（搜索、通知、头像），内容区先放关键数字卡片（大数字 + 环比），再放图表和表格。表格：行高 48–56，数字右对齐用等宽数字（`font-variant-numeric: tabular-nums`），表头浅色小字。
+- **文档 / 博客**：正文栏 680–720px，左侧目录，右侧本页导航；代码块等宽字体、浅色背景。
+
+## 细节
+
+- 导航高 64–72px，滚动后加背景和细分割线。
+- 按钮高 40–48px，左右内边距 16–24px；主按钮实色，次按钮描边或浅底。
+- 链接要能看出是链接（颜色或下划线），悬停有变化。
+- 深色模式：用 `prefers-color-scheme` 切 `tokens.css` 里的同一组变量，不要写两套样式。
+- 不要整页都是一种卡片；区块之间用背景色深浅变化分节，比到处画线好看。

package/skills/ui-design/tokens.css

@@ -0,0 +1,70 @@
+/* 设计变量起手模板：复制到设计目录，按品牌改。每屏 <link rel="stylesheet" href="tokens.css"> */
+:root {
+  /* 颜色：按角色定义（换主题只改这里） */
+  --color-bg: oklch(98.5% 0.006 85);          /* 页面背景（带一点主色色相的暖白） */
+  --color-surface: oklch(100% 0 0);           /* 卡片、弹层 */
+  --color-surface-2: oklch(96% 0.01 85);      /* 次一级表面、分组背景 */
+  --color-text: oklch(22% 0.02 60);           /* 正文 */
+  --color-muted: oklch(50% 0.02 60);          /* 次要文字（别再浅了，保证 4.5:1） */
+  --color-line: oklch(91% 0.01 85);           /* 边框、分割线 */
+  --color-primary: oklch(58% 0.15 45);        /* 主色：关键按钮、选中态 */
+  --color-primary-ink: oklch(99% 0 0);        /* 主色上的文字 */
+  --color-accent: oklch(70% 0.12 160);        /* 点睛色，少用 */
+  --color-success: oklch(62% 0.14 150);
+  --color-warning: oklch(75% 0.15 75);
+  --color-danger: oklch(58% 0.2 25);
+
+  /* 字体 */
+  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", system-ui, sans-serif;
+  --font-display: var(--font-sans);
+  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+
+  /* 字号阶梯（1.25） */
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-md: 16px;
+  --text-lg: 20px;
+  --text-xl: 24px;
+  --text-2xl: 32px;
+  --text-3xl: 40px;
+  --text-4xl: 56px;
+
+  /* 间距（4 / 8 的倍数） */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-7: 48px;
+  --space-8: 64px;
+
+  /* 圆角 */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-full: 999px;
+
+  /* 阴影（低透明度、大模糊、带一点主色调） */
+  --shadow-sm: 0 1px 2px oklch(30% 0.03 60 / 0.06), 0 2px 6px oklch(30% 0.03 60 / 0.05);
+  --shadow-md: 0 4px 12px oklch(30% 0.03 60 / 0.08), 0 12px 32px oklch(30% 0.03 60 / 0.08);
+
+  /* 动效 */
+  --ease: cubic-bezier(.2, .8, .2, 1);
+  --dur: 200ms;
+}
+
+/* 深色版：<html data-theme="dark">。网页要跟随系统时，把选择器换成 @media (prefers-color-scheme: dark) { :root { … } } */
+[data-theme="dark"] {
+  --color-bg: oklch(18% 0.01 60);
+  --color-surface: oklch(22% 0.012 60);
+  --color-surface-2: oklch(26% 0.012 60);
+  --color-text: oklch(95% 0.005 85);
+  --color-muted: oklch(72% 0.01 85);
+  --color-line: oklch(32% 0.012 60);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root { --dur: 0ms; }
+}