设计合集

四个工具和一间小屋定下来的审美与做法。除收藏外9章的152条都在这颗星上，点一颗跳到那一条。

随便翻一条

四个工具（刷刷、岗岗、日程安排、卡集）和一间小屋定下来的颜色、交互、动画、排版，收在一处。开新网站先翻这里，照着做，不用再把审美讲一遍。

「我曾经告诉了你我的颜色搭配，我的一些交互想法，你可以把这些整理一下吗，然后放在小屋的工具架里面，就是一个合集，包括色彩，交互，动画，排版这些的，以后我再开发新的网站的时候可以参考这些网站的一些思路和方法。」

屋主 · 2026-09-27 · tools/star/docs/目录与版式.md:7「这是什么」

怎么用

  1. 先定气质

    工具类（刷题、手册、日程、卡集这种）走液态玻璃；个人站走小屋暖纸。两种别混用。

  2. 只看那一种 + 通用

    每条都打了范围标签：工具小屋通用，另一种气质的条目直接跳过。

  3. 翻一遍否掉的方向

    屋主否过的配色与版式都写着「为什么不是那样」，被否的样子画在现行旁边，照着避开：否掉的方向。

  4. 照做网站的方法验收

    三台设备的视口、先量后截图、防假信号、测试不出声：做网站的方法。

两种气质

工具

苹果液态玻璃

中性底 + 三团光晕 + 玻璃侧栏，六个苹果强调色可换。2026-09-23屋主拍板，四个工具通用。

  • 底色#F4F5F9深色：#0B0C10
  • 玻璃rgba(255,255,255,.62)强玻璃.78
  • 次级字rgba(60,60,67,.76)三级.32只作装饰
  • 主按钮accent → accent-2品牌图标同一条亮渐变 + 白字

出处：tools/plan/docs/design/SPEC-apple-glass.md:15「颜色（苹果系统色）」、:120「降级与可访问性」、:134「次级字统一值」

小屋

小屋暖纸

暖纸、橄榄墨、楷书、手绘水彩；饱和色严格限量、限位置。夜里是同一间屋子，冷夜暖灯。

  • 纸底#F8F6F1夜里：#15171B
  • 正文墨#3E3C35标题墨：#2E2D28
  • 橄榄#5E6144主按钮、焦点环
  • 熔岩橙#AA4E1D只给随笔日期

出处：Ysevan_web/app/globals.css「:root」、Ysevan_web/docs/xiaowu-ui-spec.md「2.2 小屋扩展槽位（--xw-*）」

章节目录

屋主的审美原则

精选十条。每条附原话或出处，旁边是能点、能拖、能切换的对比小样：被否的样子都标了「示意」和出处。其余八条在做网站的方法「其余审美原则」一组。

  1. 两种气质，别混用

    工具类走苹果液态玻璃；小屋走暖纸、橄榄墨、楷书、水彩，另一套，不套苹果风。字体栈两边一样，中文字族在前。

    本站这里在用全站 · 侧栏导航

    tools/plan/CLAUDE.md:89「家族设计契约」

    被否两种混在一起（示意）
    现行工具：液态玻璃

    左边是示意：暖纸底、楷书标题、熔岩橙日期，又挂着玻璃卡、苹果蓝按钮和强调色标签，两套语言打架。工具改版前确实和小屋共用过暖纸底，2026-09-23起不再共用（tools/plan/CLAUDE.md:89「家族设计契约」）。

  2. 偏软、偏轻，要有颜色但不能重

    深色块和正红在工具页上他都嫌丑；品牌红只留在语义位上（答错、逾期）。

    「黑红不好看」

    屋主 · 2026-09-22

    控制室记录 memory/tools-palette-pastel-p2.md:18「配色裁定过程」

    现行液态玻璃：偏软、偏轻、有颜色

    黑红是示意，色值照刷刷改版前：侧栏#25282c、首页今日面板#303439、刷刷红#b4232c、底#f5f6f7（tools/shua/design-proposal.md:15「现有视觉语言」）；plan、岗岗「对齐刷刷」做成这样后被否（tools/gang/design-proposal.md:618「留档：被否掉的那两版」）。

  3. 审美优先于对比度，例外只开一处

    主按钮用品牌图标那条亮渐变配白字，白字压浅端只有1.41–3.52，照样采用；如实列出比值、记录不断言，不拿「大字3:1」粉饰。别的承载信息的文字一律≥4.5。

    本站这里在用总览 · 随便翻一条

    「所有颜色的按钮色可以和页面左上角的颜色一样浅一点」

    屋主 · 2026-09-23

    tools/plan/docs/design/SPEC-apple-glass.md:120「降级与可访问性」

    被否压深到白字≥4.5（示意）

    白字— / —

    现行和左上角一样亮

    白字4.02 / 1.90
    记录不断言

    规矩其余文字≥4.5
    对比度怎么算已选 · 单选

    链接7.56 · 标签6.54

    比值按WCAG 2.x公式现算，「深端 / 浅端」，跟着当前明暗。左边是示意：照2026-09-23以前的规矩「主按钮白字对渐变浅端≥4.5，不够就把accent-2压深」（tools/plan/docs/design/SPEC-apple-glass.md:118「降级与可访问性」），两端一起压到刚过4.5；屋主看了说要和左上角一样浅，改成现行（同文件:81）。

  4. 要好看，不要更紧凑；拿不准先出样张

    刷刷专项练习把带全名的题库卡片换成短名胶囊，信息密度上去了，观感掉了，整件撤回。动观感的改动先给屋主看样张。

    tools/shua/design-proposal.md:599「专项练习的筛选标签：做过，撤回」

    撤回短名多选胶囊（3.13.0做过）

    已选3个题库 · 共1006道

    现行带全名的卡片（3.12.0）

    已选3个题库 · 共1006道

    题库名和题数是假数据。胶囊那版信息密度更高（手机上题库区从9行卡片缩成5行标签），屋主看过觉得不如原来，整件撤回；以后再动这一页先出样张（tools/shua/design-proposal.md:599「专项练习的筛选标签：做过，撤回」）。

  5. 构图不变，等比放大

    大屏上不加列、不居中成窄柱，整套按1440等比放大。判定：大屏截图缩到1440宽，和真1440并排看不出差别。

    「跟 mac 的差距很大，希望跟 mac 一样」「UI 要适配我页面的缩放大小」

    屋主 · 2026-09-23

    tools/plan/docs/design/SPEC-apple-glass.md:73「自适应」、:3文件头

    基准真1440
    现行2040排好再缩到同宽

    --scale = 1.417（2040 ÷ 1440，1.45封顶）

    缩微版面是示意：两张都按1440×900的比例画，右边按当前宽度排好再整体缩到同宽——判定就是这样并排看。现行在2088以内和左边一模一样；2552触到1.45封顶，多出来的宽度只给卡片轨道吃，不加列。两种错法出处：tools/plan/docs/design/SPEC-apple-glass.md:78「自适应」里作废的初版；控制室记录memory/tools-palette-pastel-p2.md:13「大屏规则」。

  6. 一目了然，首页净增为零

    首页加新功能，要么替换现有元素，要么进二级页；plan从卡片仪表盘改成清单。

    star自身是例外：屋主2026-10-08要求把合集的交互在star上用遍（原话「把我stars里面所有的逻辑都狠狠的用这些设计合集的内容，纯属炫技」），总览开头的条目星球、「本书进度」圆环、「更新记录」刻度尺都是首页净增。对其他项目照旧。

    「UI 好丑，不够一目了然」「首页感觉内容太杂」

    屋主 · 2026-09-22（plan、刷刷）

    tools/plan/docs/ui-redesign-proposal-v2.md:8「从仪表盘改成清单」、tools/shua/design-proposal.md:555「首页不许为此新增元素」

    被否六个面板的仪表盘

    首页6个面板

    现行一列清单

    首页净增0

    左边面板名照plan改版前的今日工作台（tools/plan/docs/PAGE_STRUCTURE_SPEC.md:57「一级页面：今日工作台」），同一条「交物业费」在两个面板里各出现一次，就是当时的毛病（tools/plan/docs/ui-redesign-proposal-v2.md:17「现状的六个问题」）；右边照现行今日页的四节清单（同文件「3.1 今日」）。数据是示意。

  7. 图标必须是真线条图标

    灰方块占位、字符、emoji都不行；左上角放品牌图标不放字。品牌图标可以换成屋主手绘的文件，放在渐变方块里占84%。

    本站这里在用全站 · 侧栏导航全站 · 品牌方块

    「看得难受」（说内置的SVG品牌图标）

    屋主 · 2026-09-23

    tools/plan/docs/design/SPEC-apple-glass.md:127「图标」、:203「品牌图标」

    被否灰方块占位
    被否字符和emoji
    现行线条SVG

    左两列是示意：苹果样张第一版侧栏用的是灰方块占位，屋主看了要线条图标（控制室记录memory/tools-palette-pastel-p2.md:11）；规格写死禁止用字符或emoji凑图标（tools/plan/docs/design/SPEC-apple-glass.md:128「图标」）。切到深色看：emoji不跟字色走，几个字符粗细高低各不一样，线条图标和文字一起换色、选中项一起变强调色。

  8. 暖要靠冷底才显得出来

    小屋夜色：夜橄榄、琥珀棕两版被否，定稿「冷夜暖灯」——底沉进夜空的青蓝，字与灯仍是暖的。

    「深色模式下的深绿色有点太丑了，不够温馨」

    屋主 · 2026-09-01（否掉夜橄榄）

    Ysevan_web/app/globals.css「小屋色板」（文件头注释）；原话见控制室记录 memory/ysevan-web-state.md:51

    被否v1夜橄榄

    底45° · 字44°

    被否v2琥珀棕

    底36° · 字40°

    现行v3冷夜暖灯

    底225° · 字42°

    三版都是Ysevan_web的真实色值（按HSL实算）：v1Ysevan_web@46c409e app/globals.css:62、v2Ysevan_web@adb2fe4 app/globals.css:62、v3即现行Ysevan_web/app/globals.css「.dark」。下面那块是示意：字、黄铜按钮、炉火橙固定用v3的值，只把底色相从36°（琥珀棕）拖到225°（冷夜），看暖色怎么一点点显出来。

  9. 上下留白对称，「刚好装下」不合格

    在2040×1019上量到只剩4px就算装下，到屋主真机上照样溢出——浏览器工具栏、任务栏、远程桌面都在吃高度。余量从结构里来（按可用空间算），不靠凑系数。

    「上下留白要对称」

    屋主 · 2026-09-23（卡集Cover Flow）

    tools/card/CLAUDE.md:169「画廊的几条硬约束」

    被否凑参数刚好装下

    现行余量来自结构

    示意，按屋主台式机2040×1019画。左边舞台高写死69svh，在裸视口上量到卡底只剩4px就算「装下」；可浏览器工具栏、任务栏、远程桌面都在吃高度（带工具栏实测2040×930），一吃就溢出、出滚动条、上下不对称。右边舞台用flex:1吃掉剩余高度、再用等比值封顶，任何高度都装得下、上下留白相等（tools/card/CLAUDE.md:168「画廊的几条硬约束」）。

  10. 先做出来，再慢慢完善

    给结论不给选项，只问好不好看、值不值得；分阶段交付，每轮写明「这一轮故意没做什么」。

    本站这里在用总览 · 本书进度

    「全部按照你的建议来，后面再慢慢完善」

    屋主 · 2026-09-23

    控制室记录 memory/ship-staged-not-perfect.md:8

    ⑥补完其余七章 · 第三阶段 · 0.4.0 · 2026-10-08

    交付了

    • 排版16、布局与自适应17、材质11、动画17、3D与性能12、否掉的方向10、做网站的方法25，共108条，每条旁边一块能点、能拖、能切换的现场演示
    • 否掉的方向：被否的样子按当时的色值和尺寸画出来，拖中间那条线和现行对照；另有一张40行的时间线总表
    • 3D章的演示大多真跑WebGL：滚到才建上下文、滚走就还，同一时间只跑一个
    • 第二阶段加的过渡与动效写进了「动画」章；七章新加32处「本站这里在用」，导航十章全部能点
    • 全站：会变的数字改用--font-num画、不再跳；代码的等宽字族插上Menlo；高度单位按场景分svh／dvh；数字与中文之间不留空格，拼接出来的字也算

    故意没做

    • Windows上的等宽数字当时待核，2026-10-09屋主用诊断页实测、0.4.2写进排版章「等宽数字」：--font-num在Windows上落到Segoe UI、等宽；微软雅黑的数字本来就等宽，苹方打头的旧栈在Windows上从来不跳，跳的只有Mac上的Chrome；变化只是数字变窄（40px下约10%，15px下约8%）
    • Ysevan_web与plan的裸vh归各项目自己改：star只把清单报给控制室；后来已各自改完（plan fb8ee2a、小屋6db02f0）
    • 各章查出的跨项目出入（规格和代码对不上的地方）报控制室，由各项目自己改；合集里照写「现状＋正在对齐」
    • 时间线总表不进页内目录、不进搜索

    出处：tools/star/CHANGELOG.md:25「0.4.0」、tools/star/docs/目录与版式.md:160「第三阶段」；tools/plan/docs/design/SPEC-apple-glass.md:46「Windows 实测」、:48「从来不跳」、:49「变窄」；svh／dvh：控制室10-08定

    拿设计合集自己当例子：每一轮先交能看、能用的一块，并写明这一轮故意留着没做的，省得屋主把已知的粗糙当bug报回来。

维护规矩

  • 任何项目定下新的视觉或交互裁定，同一轮补进合集。
  • 加收藏只改data/collection.js，页面不用动。
  • 写进页面的数值、代码、原话，回源文件核一眼；出处写「文件:行号 + 小节名」，核不到标「未核实」。
  • 各项目和规格对不上、正在修的地方，写「现状 + 正在对齐」，不把错的值当规范。
  • 某页条目数变了，同一轮改assets/nav.js里那一页的count（对不上时控制台会提醒）。

tools/star/docs/目录与版式.md:152「维护规矩」、tools/star/CLAUDE.md:61「维护规矩」