---
name: product-tool
description: "产品工具 (Product Precision Interface) style skill for AI website building."
---

# 产品工具 (Product Precision Interface)

## 适用场景 / Use When

AI 工具 / 产品官网 / 平台入口 / 设计规范站

## 适合做 / Best For

- AI 工具
- 产品官网
- 平台页

## 不适合做 / Not For

- 生活方式品牌
- 慢节奏内容站
- 纯情绪展示页

## 长这样 / Visual Traits

- 界面清晰
- 状态明确
- 截图解释功能
- 层级严谨

## 配色系统 / Color System

- 浅底或深底都可以
- 颜色必须服务状态和层级
- 品牌色只在关键 CTA 出现

## 排版系统 / Typography

- 无衬线为主
- 标题比编辑类更克制
- 数据和状态文案必须单独成层

## 版式规则 / Layout Rules

- 首屏先解释任务和收益
- UI 截图要和文字一一对应
- 模块节奏像产品说明书

## 图片处理 / Image Treatment

- 截图必须清楚解释功能
- 少用纯氛围图
- 卡片边界和容器系统一致

## 动效节奏 / Motion

- 交互反馈要清楚
- 避免华而不实的场景动画
- 演示动效只服务功能理解

## 推荐结构 / Recommended Structures

- 工作台型 / Workbench / Tool Shell
- 目录索引型 / Catalog Explorer

## 历史来源 / Historical Roots

- 包豪斯 / Bauhaus

## 参考网站 / Reference Sites

- Linear: https://linear.app/
- Stripe: https://stripe.com/
- Atlassian Foundations: https://atlassian.design/foundations/
- Carbon for AI: https://carbondesignsystem.com/guidelines/carbon-for-ai/

## 注意避坑 / Avoid

- 大片时尚图主导页面
- 过多情绪化留白
- 不解释功能的抽象 hero

## Prompt DNA

```text
请参考产品工具（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.
```