Shell: black / white / neutral. Content: external references only.
External Website Style Atlas
不是一个模板，是一座网站风格图书馆
这个站的任务不是展示你现有的网站，而是聚合外部真实优秀网站，把它们拆成可复用的风格家族、结构模式、适用场景和 prompt DNA。首页本身保持黑白、克制、可扫描，真正的风格差异留在卡片里的参考样本。
每张卡片都回答四件事：它是什么风格，适合什么内容，应该借什么，不该借什么。这样以后做网站，不是再说“做成一个 editorial 风格”，而是先选家族，再选结构，再写 prompt。
Visual Families
7 external styles
Structure Patterns
6 reusable IA modes
Scout Sources
6 professional places to keep collecting
Working Rules
先把选风格的工作方法做对
这个站不是“找一张喜欢的图，然后照着做”。它应该帮助你建立参考 packet、分类方法和可复用的 prompt 语言。
Rule
先选内容形状，不要先选颜色
先判断这是长文、目录、品牌站、作品集、工具还是数据站。没有内容形状判断，风格选择基本都会跑偏。
Rule
把视觉层和结构层分开
同一个 catalog explorer 可以套 archive、Swiss、product precision 三种不同视觉；同一个 editorial 壳也可以承载 dossier 或 archive。
Rule
至少看 3 个真实站，再写 prompt
单一参考容易复制表面，三个以上参考才更容易抽出共同 DNA：排版角色、密度、导航、图片使用和按钮气质。
Rule
永远同时写 borrow 和 avoid
专业参考不是收集喜欢，而是明确：要借什么，不该借什么，哪些只适合局部模块，哪些适合全站。
Atlas Lenses
按问题类型切换浏览视角
这组切换不再筛卡片，而是帮助你快速跳到当前最相关的知识层：风格、结构、收集入口、prompt 或阅读。
Visual Families
外部真实网站的风格家族
每个家族至少给出两个真实样本，帮助你看见“共同 DNA”而不是只记住单个站点的表皮。
magazine-editorial
Magazine Editorial
Feature-led publication surfaces that balance cover-story drama with browseable secondary stories. 强 headline / image tension，强阅读节奏，首页像封面而不是产品 hero。
Signature
- feature-first hierarchy
- serif-led reading voice
- strong deck / byline / caption roles
- secondary rails for more stories
Borrow
- cover-story framing
- clear headline-image tension
- measured article stacks
- supporting stories that feel editorial, not widget-like
Best For
- content-first homepages
- cultural publications
- feature archives
- editorial brand sites
Avoid When
- 任务完成比阅读更重要
- 需要密集筛选或多步操作
- 只是想套一个看起来高级的壳
Live References
Prompt DNA
Use a magazine editorial family: feature-first hierarchy, serif-led headlines, crisp decks and captions, and a homepage that feels like a publication cover rather than a SaaS hero.
quiet-lifestyle-editorial
Quiet Lifestyle Editorial
比传统 magazine 更安静、更稀疏、更像一本会被收藏的刊物。适合时尚、生活方式、品牌文化与作品集首页。
Signature
- slow pacing
- cover-like hero framing
- soft prestige
- minimal navigation chrome
Borrow
- quiet image-led hierarchy
- generous whitespace
- refined serif voice without over-decoration
- brand warmth through pacing, not loud color
Best For
- lifestyle brands
- fashion / culture publishing
- taste-led brand worlds
- soft portfolio shells
Avoid When
- 需要高密度并列比较
- 需要像产品后台一样解释状态
- 需要强烈的操作导向
Live References
Prompt DNA
Use a quiet lifestyle editorial family: cover-like hero framing, disciplined whitespace, refined serif typography, and a calm premium tone with almost no aggressive UI chrome.
swiss-typographic-grid
Swiss Typographic Grid
Grid-forward, system-led, typographic surfaces where alignment and modularity do most of the work. 不是冷淡，而是高度有组织。
Signature
- modular grid
- clear labels and metadata
- hard alignment
- poster-like type discipline
Borrow
- explicit alignment rules
- type as structure, not decoration
- modular spacing
- strong margins and sectional rhythm
Best For
- identity studios
- reference libraries
- archives
- design systems with strong taxonomy
Avoid When
- 内容需要情绪化叙事
- 需要柔和或感性的品牌气质
- 想靠颜色和特效撑场面
Live References
Prompt DNA
Use a Swiss typographic grid: explicit alignment, modular spacing, labels and metadata that matter, and typography doing the primary structural work.
product-precision-interface
Product Precision Interface
Highly controlled product-facing surfaces where state clarity, copy discipline, and interface precision outrank decorative atmosphere.
Signature
- tight spacing
- clear CTA hierarchy
- engineered product surfaces
- quiet but confident motion
Borrow
- task-first hero copy
- product screenshots that explain workflow
- precise spacing and state language
- controlled polish instead of decorative noise
Best For
- AI tools
- technical products
- platform sites
- operator dashboards and workbenches
Avoid When
- 需要慢阅读和文化叙事
- 内容价值主要来自图片情绪
- 需要档案或刊物感
Live References
Prompt DNA
Use a product-precision interface family: meticulous spacing, sharp hierarchy, product screenshots that explain behavior, and a UI tone that feels engineered instead of decorative.
stage-driven-showcase
Stage-Driven Showcase
Large-stage, cinematic or product-theater experiences designed to create a memorable first impression before deeper browsing.
Signature
- hero stage dominates the fold
- big image or scene presence
- high contrast spotlighting
- experience before density
Borrow
- single-scene drama
- controlled sparse copy
- large-scale framing of one product or one world
- clear routes into deeper content after the stage moment
Best For
- campaign launches
- flagship product pages
- film / entertainment brands
- portfolio hero moments
Avoid When
- 需要快速扫描很多平级内容
- 需要复杂信息架构
- 首页必须先解释大量事实
Live References
Prompt DNA
Use a stage-driven showcase only when memory and first-impression drama matter more than density. Build one strong scene, keep the copy sparse, then provide clear exits into the rest of the site.
curated-reference-directory
Curated Reference Directory
Index-first surfaces that help people scan, filter, and discover many references quickly without collapsing everything into one narrative.
Signature
- scan-first grids
- category chips
- thumbnail-led browsing
- directory framing over story framing
Borrow
- taxonomy close to the top
- thumbnail density with breathing room
- search, filter, and browse patterns that feel obvious
- index page and detail page doing clearly different jobs
Best For
- reference atlases
- template libraries
- inspiration directories
- collection sites
Avoid When
- 真正重要的是一条主叙事线
- 想做成一篇连续阅读的特稿
- 内容样本太少撑不起目录感
Live References
Prompt DNA
Use a curated reference directory family: scan-first cards, visible taxonomy, obvious browse and filter affordances, and a homepage that works as an index rather than a manifesto.
evidence-dense-knowledge-surface
Evidence-Dense Knowledge Surface
Knowledge-heavy surfaces that need thesis, evidence, and navigation to coexist. Less about brand mood, more about making complexity readable.
Signature
- dense but structured scanning
- topic or side navigation
- evidence blocks beside narrative
- high information honesty
Borrow
- clear thesis block before detail
- topic chips or side navigation
- evidence modules with labels
- repeatable section rhythm across long, dense pages
Best For
- research hubs
- guides
- design systems
- decision-support and knowledge surfaces
Avoid When
- 内容很薄却硬做密度
- 目标主要是造势或氛围
- 用户只需要极少信息就能完成任务
Prompt DNA
Use an evidence-dense knowledge surface: thesis first, clear sectioning, labels that support scanning, and navigation strong enough to keep dense information readable and trustworthy.
Structure Patterns
信息与交互的结构模式
视觉风格不是信息架构。先选 structure pattern，才能知道 hero、导航、卡片和详情页该怎么分工。
dossier
Dossier / Feature
一条主叙事线，少量支线模块，适合完整讲清一个项目、品牌故事或长文专题。
Suited For
- case study
- manifesto
- feature article
- campaign story
Signals
- clear opening claim
- chapter rhythm
- side notes / quotes
- measured scroll
Watchouts
- 不适合大量平级条目
- 不适合复杂筛选
catalog-explorer
Catalog Explorer
索引页负责分类和筛选，详情页负责完整解释。适合风格库、资源库、模板库和技能库。
Suited For
- style atlas
- resource directory
- template gallery
- prompt library
Signals
- taxonomy
- filters
- card metadata
- stable detail pages
Watchouts
- 不要把所有解释塞进首页
- 不要只有卡片没有分类逻辑
archive-stack
Archive Stack
强调 series、issue、time、tag 的组织方式，像长期增长的档案而不是一次性 landing page。
Suited For
- publication archives
- historical collections
- cultural libraries
- notes archives
Signals
- date / issue / tag axes
- browse-first
- repeatable entry format
Watchouts
- 需要长期维护，不适合短期 campaign
network-graph
Network Graph / Cluster
用关系、节点和聚类来组织内容，适合灵感收藏和知识网络，而不是单条漏斗。
Suited For
- idea boards
- inspiration systems
- curation tools
- research maps
Signals
- clusters
- related paths
- open exploration
- non-linear movement
Watchouts
- 新用户容易迷路，需要足够好的入口解释
workbench
Workbench / Tool Shell
操作与状态优先的结构层，适合 AI 工具、后台、审批、多步骤执行。
Suited For
- agent tools
- dashboards
- workflow products
- operator consoles
Signals
- state visibility
- panels
- logs
- action zones
- handoff points
Watchouts
- 不要套成纯杂志壳
- 不要隐藏状态和副作用
immersive-stage
Immersive Stage
体验优先的舞台式结构，通常只有少量关键信息，其余靠场景、动效、镜头感承载。
Suited For
- hero experiments
- interactive portfolios
- campaign showcases
Signals
- scene-based interaction
- memorable reveal
- reduced information density
Watchouts
- 不要承载复杂信息架构
- 要给用户明确退出和补充信息入口
Selection Matrix
场景到风格的推荐映射
以后做项目先看这一张。风格聚合站本身只做容器，你真正要复用的是“场景 -> 风格家族 -> 结构模式”的判断链。
| Scenario | Visual | Structure | Reason |
|---|---|---|---|
| 设计风格聚合站 / 模板库 / 资源库 | Curated Reference Directory | Catalog Explorer | 首页保持黑白简洁，但真正的主角是目录、分类、对比和 detail page。 |
| 项目长文 / 作品说明 / 品牌故事 | Magazine Editorial or Quiet Lifestyle Editorial | Dossier / Feature | 如果目标是让人读，而不是让人操作，用 dossier，而不是卡片堆满首页。 |
| 灵感库 / 收藏夹 / 关系型参考板 | Curated Reference Directory or Swiss Typographic Grid | Network Graph / Cluster | 视觉上保持克制，结构上强调关系和多入口探索。 |
| AI 工具 / 产品官网 / 工作台 | Product Precision Interface | Workbench / Tool Shell | 让状态、计划和操作区域比情绪化样式更优先。 |
| 时尚 / 工艺 / 品牌质感站 | Quiet Lifestyle Editorial | Dossier or light Catalog | 需要安静和质感，不需要过度的 SaaS 组件感。 |
| 研究报告 / 数据故事 / 知识入口 | Evidence-Dense Knowledge Surface | Archive Stack or Dossier | 图表、证据、结论和导览要一起设计，而不是最后再补目录。 |
| 旗舰发布 / 电影 / 展示型首屏 | Stage-Driven Showcase | Immersive Stage | 把沉浸式体验留给真正值得占满首屏的内容，不要泛化成所有页面的默认。 |
Scout Sources
持续收集参考时该去哪里
这些站点不是终点，而是入口。它们帮助你更系统地扩大样本，不必每次都从随机搜索开始。
Scout
SiteInspire
适合按行业、布局、风格快速找真实网站。作为第一轮广泛扫面很高效。
Use For
- broad external scouting
- fast filtering by layout / industry
Avoid
不要把单一截图当成最终 DNA，需要回到真实站点再看。
Open
siteinspire.com/Scout
Godly
更适合找 art direction 强、视觉完成度高的 landing 和品牌页。
Use For
- high-art-direction references
- visual direction when polish matters
Avoid
不适合替代结构分析。
Open
godly.website/Scout
Mobbin
更适合产品流、界面模式、转化流程，不是纯视觉风格库。
Use For
- app flows
- product patterns
- UI states
Avoid
不适合找强品牌气质。
Open
mobbin.com/Scout
Awwwards
适合找行业顶级的 showcase 站和沉浸式体验站。
Use For
- showcase sites
- motion-heavy experiments
- memorable hero references
Avoid
不要把 award-site 的复杂动效直接搬进信息密集型产品。
Open
www.awwwards.com/Scout
Hoverstat.es
适合专门看交互细节、hover、过渡、页面切换和微动效。
Use For
- interaction detail scouting
- motion reference
Avoid
只看动效不看结构会导致表面化。
Open
www.hoverstat.es/Scout
只适合做宽松 moodboard，不适合直接决定网站结构和具体 UI。
Use For
- moodboard
- color / material / editorial atmosphere
Avoid
不要把 Pinterest 图钉拼贴当成网站 reference packet 的终稿。
Open
www.pinterest.com/Prompt DNA
给 agent 的默认语言
以后给 agent 的输入应该先描述参考 packet 和结构判断，而不是只丢一句“做成某种风格”。
Reference Packet First
Before generating any website, collect 3-5 external live references from different but related style families. For each one, extract: what to borrow, what to avoid, content shape, image ratio, navigation pattern, and CTA behavior.
Separate Surface From Structure
Do not describe the target as only a visual style. State one visual family and one structure pattern separately. Example: 'Use a black-and-white neutral shell with a curated reference directory IA.'
Use External Real Sites
Default to real live websites, not isolated Dribbble shots or internal prior sites, unless the task is explicitly about refactoring an existing property. The atlas should bias toward real websites under real constraints.
Borrow With Precision
For every chosen reference, write both borrow and avoid. Never copy a site wholesale. Distill the transferable rules: typography roles, spacing logic, image handling, navigation pattern, and interaction tone.
Reading List
更专业的理论和方法入口
这部分不是为了抄书，而是为了让风格分类和结构判断有更稳定的理论支撑。
Reading
Atlassian Design System · Foundations
支持“先 foundations / 再 patterns / 再 components”的分层思路，也就是为什么这个站应该是一个 atlas，而不是一个固定模板。
Reading
Google PAIR Guidebook
Pattern + chapter + case-study 的组织方式，对建设长期可复用的 design atlas 很有参考价值。
Reading
Carbon Design System · Carbon for AI
帮助区分视觉风格和 AI 产品中的行为 / 状态 / explainability 需求，避免只在表层做样式。
Reading
Microsoft Design · UX Design for Agents
对于 agent 工具、工作台和多状态界面很有帮助，提醒我们不要把所有东西都做成内容页。
Reading
Print · Swiss Style Principles, Typefaces, Designers
给 Swiss / International Typographic 这一路提供更清楚的形式语言、历史背景和常见误读。
Reading
Subframe · Editorial Website Design Examples
适合做二级对照，帮助区分“真正的 editorial 结构”与“只是用了衬线字的 landing page”。