cool-style

cool-style 是做什么的？

从对数百个独立网站（个人网站、网络艺术、字体铸造厂、档案馆、工作室、小型工具、期刊）的仔细观察中提炼而成——这些网站由那些收藏网络最佳角落的人们所保存（references/method.md）。这里没有任何趋势报告。它是对那些网站实际所做之事的统计。

一个模板回答的是“一个网站看起来像什么？”而这里的每个网站回答的是“这个网站是关于什么的？”——然后让答案决定布局、字体、颜色和那唯一一个动起来的东西。

这个经典列表从粗糙到严谨——一个带有平铺 GIF 背景的 Neocities 神龛和一个精确到像素的字体铸造厂都位列其中。两者都很酷。缺失的正是中间地带：那个可以关于任何事情的网站。

开始之前

1. 先找到想法（下一节）。在能用一句话说出这个想法之前，不要考虑布局、调色板或字体。
2. 从下面的表格中选择一个原型，对于全新的构建，从它的启动器开始：node ${CLAUDE_SKILL_DIR}/scripts/new.mjs <archetype> <dir>。
3. 看看真实的案例。 node ${CLAUDE_SKILL_DIR}/scripts/examples.mjs <tag or word> 会打印出经过研究的、使用了某个招数的网站，最佳结果优先（--tags 列出词汇表；--random 5 获取随机灵感）。
4. 如果其他内部风格（例如 magnus-style）已经生效，那么在令牌（字体、颜色、时序）方面以该风格为准。使用本技能来获取想法、结构和招数。

找到想法

问（问自己，或问他人——一次一个问题）：

1. 它是什么，用一句简单的话说？ 不是它的用途。“一根灯柱上的麦克风听到的每一首歌的日志。”“来自一个太阳能杂志的笔记。”
2. 它像什么？ 它已经很像的物体、场所或系统：一本日历、一个有营业时间的商店、一个电子表格、一个花园、一个收音机、一本书的衬页、一个戒指、一张书桌。这将成为容器（法则 1）。
3. 关于它，有什么是模板会隐藏的真相？ 它的重量、它的年龄、它的营业时间、它的数据、它制作时的天气、它里面东西的数量、谁制作了它。
4. 那个唯一会移动或变化的东西是什么？ 选择一个。时间、一次读数、访问者的指针、偶然性、其他访问者。
5. 什么会让人把这个链接发给朋友？ 那就是标志性的一招。其他所有东西都变得更安静，以便它能被看到。

将答案写在项目的顶部（在 index.html 中添加注释也可以）。如果某个答案是“无”，那么这个网站还没准备好进行设计——它需要内容。

十二条法则

1. 让形式演绎主题。 最强的网站使用其主题本身的形态作为容器。一篇关于波浪的文章无限滚动，每个段落起伏然后回归（#214）。一份机器学习数据集指南以电子表格形式呈现（#481）。一部界面史坐落在一个重建的 1984 年 Mac 窗口里（#501）。一份监控音乐日志是一块双色 LCD 屏（#76）。一个每日漫画档案是一个年历（#21）。测试：这个布局能否不加改变地容纳一个不同的主题？如果可以，那它就是一个模板。
2. 一个想法，贯彻每一层。 隐喻渗透到导航、标题、图片，甚至页面体积。Our Networks（#232）将其站点地图打印为 tree 命令，用 ASCII 绘制其笔记本电脑，体积仅为 39 KB。通常整个想法就是一个廉价但贯彻到底的机制：36 个隐藏着一首诗的 CSS 瓷砖（#228），由一天的风力数据驱动的字间距（#669）。
3. 一个网站是一个地方，而不是一本宣传册。 房间、书桌、城镇、花园、书架、有营业时间的咖啡馆（#828）、收音机、报刊亭。导航变成了家具：一个路标（#197）、一个指环（#203）、一个书架（#652）、一个需要剥开的洋葱（#789）。甚至域名也是一个地名——大约六分之一的网站使用了富有表现力的 TLD（.world .garden .cafe .town .computer .zone）。
4. 只用一种墨水。 一种颜色放在一个背景上，作品本身提供所有其他颜色。四分之一的网站使用三种或更少的十六进制颜色；在灰色之后，整个经典列表中使用最多的颜色是纯 #ffff00、#ff0000 和 #0000ff。从主题中提取强调色——比如正在被归档的书封的红色（#3）。→ colour.md
5. 有理由地使用字体——或者有意地使用浏览器默认字体。 69% 的网站自行托管字体（领先的是 Neue Haas、ABC Diatype、Monument Grotesk、Space Mono）；23% 仅使用系统字体，9% 未声明任何字体——使用 Times 和默认蓝色成了一种姿态。等宽字体出现在 55% 的网站中。模板字体几乎不见踪影（Inter 或 Geist 约占 4%）。案例中最常声明的字体是 Arial、Times 和 Helvetica。字号对比是关键：一半网站使用小至 11px 或更小的字号，四分之一使用超过 100px 的大字号，三分之一使用四种或更少的字号。→ type.md
6. 索引即是首页。 列表、表格、日历和计数胜过英雄区域和卡片。使用细线、点状线代替方框；每个项目占据相同的槽位；将真实元数据作为列；在类别旁边显示计数；时间戳；文件大小。一个建筑事务所的网站看起来像电子表格（#535），排放数据每行带有一条天空色带（#522），乐谱被表现为画框文字（#288）。
7. 用一句话说清楚。 将界面写成散文：描述就是导航（#316, #282, #530），用 Logo 代替名字的个人简介（#856），用图画代替名词的谜语（#547），整个页面是一句话，注册是它的最后一个子句（#783）。语气是具体的、人性的、常使用小写、有时风趣、总是诚实——一条被划掉的打烊时间（#828），一个警告你页面加载慢的标题（#504）。→ voice.md
8. 让一样东西活起来。 大多数被研究的网站（86%）都做了点什么——但通常只做一件事：小时数改变了背景色，天气设置了一个渐变（#832），网络摄像头的帧被像乐器一样评分（#12），字母随风飘动（#669），访问者以匿名动物的形式出现（#95），网站在夜间关闭。一个时钟需要一个理由（谁的时间？直到什么时候？）。→ recipes.md
9. 默认值和借用物体是原材料。 原生表单控件作为诗歌的段落（#123），框架集作为布局（#616），2000 年代的 ISP 门户网站作为专辑页面（#631），2005 年的媒体播放器作为乐队页面（#116），Clippy 作为 Cookie 横幅（#179）。引用一种体裁可以免费赋予网站一种声音。只有当想法足够锐利时，粗糙才读作意图。
10. 奖励好奇者。 为鼠标指针、有耐心的和查看源代码的人群准备一些东西：悬停时显示的内容、触摸才显现的文字（#360）、一个球池滤镜（#479）、一个可拖动的放大镜（#254）、HTML 注释中的笔记（#283）、每次访问显示不同的页面。绝不在那里隐藏必要内容。
11. 小巧、静态、链接丰富——为长久而建。 大约三分之一的收藏网站已经死亡、重新设计或被围起来。纯粹的独立页面（通常在 GitHub Pages 上）存活了下来；JavaScript Shell、已退役的主机和过期的域名最先消亡。首方内容的中位数大小约为 250 KB，四分之一低于 50 KB。链接出去：四分之一的网站首页上有十个或更多出站链接——朋友、网站环、目录、来源。
12. 酷，且善良。 经典列表的盲点：只有 17% 尊重减少动效偏好，中位数 Alt 文本覆盖率为 17%，56% 移除了焦点轮廓，18% 阻止了缩放，一半网站将文本设置为 11px 或更小。请始终在设置每个变化时配上其防护栏（never.md、recipes.md）。排斥他人的酷只是喧嚣。

选择一个原型

容器是第一个决定。完整描述、定义性招数、示例和陷阱：references/archetypes.md。

原型	网站是……	适用于	启动器	看看
notebook	一个公开记录的笔记本	散文、日记、研究日志、杂志	notebook	#34 #124 #214 #362
index	一个目录、一个分类账、一个数据库	作品集、档案、收藏	index	#3 #522 #535 #288
sentence	一个可以点击的句子	工作室、个人简介、宣言、小型组织	sentence	#316 #282 #530 #783 #856
poster	一个屏幕、一个词、一种墨水	工作室、厂牌、活动、发布	poster	#7 #776 #201 #599
room	一个里面有东西的地方	个人网站、商店、收藏	room	#9 #277 #92 #793
almanac	一本日历、一个时钟、一个季节	日记、日程安排、有日期的工作	almanac	#21 #128 #243 #718
atlas	一张地图、一个花园、一个网络	链接页面、目录、研究	atlas	#81 #139 #578 #284
instrument	一个你可以演奏的东西	字体样本、玩具、工具、生成器	poster + recipes	#254 #615 #622 #353
broadcast	世界的实时信息流	网络摄像头、收音机、数据、传感器	almanac + recipes	#12 #76 #51 #832
costume	一个借用自其他时代的界面	音乐、档案、恶搞、产品发布	—	#501 #116 #631 #61
exhibition	一个期刊、一个展览、一个可翻转的对象	期刊、毕业展、目录	index	#263 #838 #677 #865
specimen	字体本身就是界面	铸造厂、刻字、字体项目	poster	#776 #195 #254 #352
commons	由其访客共同创造	留言簿、选集、社区	notebook	#654 #423 #92 #249
shrine	一封献给旧网络的情书	粉丝网站、拼贴画、个人页面	room	#586 #265 #441 #751

原型可以组合（一个同时是 commons 的 almanac），但由一个主导。

创造招数，而非装饰

一个招数是一个你可以命名的决定（“导航就是那个句子”、“背景色跟随小时变化”）。装饰是你无法命名的任何东西。references/moves.md 按维度列出了 70 多个招数——想法、结构、字体、颜色、图像、交互、时间、声音、细节——每个招数都附有执行它的网站。

• 一个标志性招数，贯彻到底（法则 2）。两到三个辅助招数，更安静一些。其他一切保持简洁。 被研究的网站很少叠加更多的招数。
• 优先选择来自内容本身的招数（你所在位置的天气、事物的数量、主题的形状），而不是来自某个库的招数。
• 一个在任何网站上效果都完全相同的招数就是装饰。

工作流程

1. 想法。 回答那五个问题。在 index.html 顶部写下那一句话。
2. 容器。 选择原型；如果是从头开始，使用 scripts/new.mjs。先用纯 HTML 构建结构——启动器展示了标记的水平（真实的列表、表格、<time>、<details>）。
3. 先有内容，后有样式。 放入真实的文字、真实的图片（现在就要写好 Alt 文本）、真实的计数和日期。酷网站 80% 是内容。
4. 字体和墨水。 选择一个有理由的字体（或者有意使用系统默认），选择一种墨水放在一个背景上。四种或更少的字号，如果原型需要，其中一种可以非常大。type.md、colour.md。
5. 标志性招数。 从 recipes.md 正确地构建它——包括键盘路径、触摸路径和减少动效的变体。
6. 细节。 Favicon、标题、选中颜色、版权页、最后更新日期、出站链接、一个保持角色设定的 404 页面。moves.md § 细节。
7. 审计。 node ${CLAUDE_SKILL_DIR}/scripts/audit.mjs <dir>——修复每一个错误；将警告视为问题。在 CI 中：使用 cool-check GitHub Action（README）。
8. 查看它。 在桌面端、390px 宽度的手机、仅键盘模式、开启减少动效、慢速网络下查看。然后问那个重要的问题：有人会把这个链接发给朋友吗？他们会说它是什么？

检查清单

• 想法能用一句话说清楚，并且布局不能不加改变地容纳一个不同的主题。
• 一个标志性招数，贯彻到底；辅助招数更安静；没有无法命名的装饰。
• 一种墨水放在一个背景上（或者是内容提供的调色板）；颜色有含义。
• 字体：有理由地选择字体，或有意使用系统默认；≤ 4 种字号；小号文字仍保持完全清晰。
• 文字是真实的、具体的、并且是人的语气；没有宣传册式的动词，没有占位符标题。
• 有些东西是真实且鲜活的（时间、数据、计数、地点）——或者静止是刻意为之。
• 链接出去。拥有自己的 Favicon。有一个听起来像真人的版权页或关于页面。
• 键盘：所有招数可到达；焦点可见。触控：没有任何操作依赖悬停。减少动效：存在一个静止变体。
• 每张图片都有 Alt 文本（如果是装饰则用 alt=""）。缩放功能正常。lang 已设置。
• 轻量：除非想法需要更多，否则首方 HTML+CSS+JS 应低于 ~250 KB；在不使用 JavaScript 的情况下也能工作（或传达某些信息）。
• audit.mjs 通过，无错误。

参考资料

文件	何时阅读
references/canon.md	当你想要证据时：这些网站的共同点，以数字呈现
references/archetypes.md	选择或开发容器时
references/moves.md	选择标志性和辅助招数时
references/recipes.md	构建一个招数时——30 个可直接复制使用的代码片段及其防护栏
references/type.md	选择字体、字号和字体的职责时
references/colour.md	选择墨水、背景，以及颜色何时动态变化
references/voice.md	编写标题、导航、个人简介、关于页面、版权页、错误信息时
references/never.md	评审时：模板特征，以及经典列表本身的不良习惯
references/catalogue.md	按原型浏览最强的网站时
references/method.md	了解这些结论的来源以及可信程度
data/sites.json	每个网站的笔记（使用 scripts/examples.mjs 查询）