产品工具 (Product Precision Interface)
强调状态、层级和界面清晰度的产品型页面，气质服从任务，精度高于氛围。
AI 工具产品官网平台页
真实网站参考 / Real References
先看这些真实网站 / Open these real sites first
长这样 / Looks Like
- 界面清晰
- 状态明确
- 截图解释功能
- 层级严谨
适合做 / Good For
- AI 工具
- 产品官网
- 平台页
不适合做 / Not For
- 生活方式品牌
- 慢节奏内容站
- 纯情绪展示页
Skill 包含什么 / What The Skill Controls
截图、排版和规则来自同一套风格包 / The screenshots, layout, and rules come from the same skill packet
配色系统 / Color System
- 浅底或深底都可以
- 颜色必须服务状态和层级
- 品牌色只在关键 CTA 出现
排版系统 / Typography
- 无衬线为主
- 标题比编辑类更克制
- 数据和状态文案必须单独成层
版式规则 / Layout Rules
- 首屏先解释任务和收益
- UI 截图要和文字一一对应
- 模块节奏像产品说明书
图片处理 / Image Treatment
- 截图必须清楚解释功能
- 少用纯氛围图
- 卡片边界和容器系统一致
交互节奏 / Motion
- 交互反馈要清楚
- 避免华而不实的场景动画
- 演示动效只服务功能理解
AI Prompt / AI Prompt
复制后直接粘贴给 Cursor / Claude / Paste directly into Cursor / Claude
请参考产品工具（Product Precision Interface）风格建站：
视觉特征：界面清晰 / 状态明确 / 截图解释功能 / 层级严谨
适合场景：AI 工具 / 产品官网 / 平台页
不适合：生活方式品牌 / 慢节奏内容站 / 纯情绪展示页
推荐页面组织：工作台型 / Workbench / Tool Shell / 目录索引型 / Catalog Explorer
历史来源：包豪斯 / Bauhaus
参考网站：Linear: https://linear.app/ / Stripe: https://stripe.com/ / Atlassian Foundations: https://atlassian.design/foundations/ / Carbon for AI: https://carbondesignsystem.com/guidelines/carbon-for-ai/
配色系统：浅底或深底都可以 / 颜色必须服务状态和层级 / 品牌色只在关键 CTA 出现
排版系统：无衬线为主 / 标题比编辑类更克制 / 数据和状态文案必须单独成层
版式规则：首屏先解释任务和收益 / UI 截图要和文字一一对应 / 模块节奏像产品说明书
图片处理：截图必须清楚解释功能 / 少用纯氛围图 / 卡片边界和容器系统一致
风格要求：Use a product-precision family: engineered hierarchy, crisp screenshots, strict spacing, and copy that frames tasks and outcomes before atmosphere.
历史来源 / Historical Roots
这部分放在最后看，用来补背景，而不是先决定风格。 / Use this section to add background after the direction is already clear.
1919-1933
包豪斯 (Bauhaus)
功能、工业和几何秩序优先。它把形式服从用途这件事系统化。