---
name: civic-service
description: "公共服务清晰系统 (Civic Service Clarity) style skill for AI website building."
---

# 公共服务清晰系统 (Civic Service Clarity)

## 适用场景 / Use When

公共服务入口 / 流程办理站 / 服务设计文档 / 高可读知识入口

## 适合做 / Best For

- 公共服务站
- 流程办理页
- 服务设计文档

## 不适合做 / Not For

- 奢华品牌首页
- 实验海报页
- 纯情绪发布页

## 长这样 / Visual Traits

- plain language
- 任务入口强
- 层级稳定
- 高可读

## 配色系统 / Color System

- 颜色服务任务和状态
- 高对比文本优先
- 不要用品牌表达压过清晰度

## 排版系统 / Typography

- plain language 比个性更重要
- 步骤、按钮、说明和错误提示都要很好读
- 标题像任务入口而不是广告语

## 版式规则 / Layout Rules

- 先任务，再解释，再扩展
- 服务入口必须明显
- 页面要能支持压力下的快速完成

## 图片处理 / Image Treatment

- 几乎不依赖氛围图
- 示意图、流程图和图标都应辅助完成任务
- 截图应服务说明而非定调

## 动效节奏 / Motion

- 动效极少
- 反馈必须清楚
- 稳定性和可访问性优先

## 推荐结构 / Recommended Structures

- 工作台型 / Workbench / Tool Shell
- 档案堆栈型 / Archive Stack

## 历史来源 / Historical Roots

- 新字体排印 / New Typography
- 瑞士风格 / Swiss Style
- 包豪斯 / Bauhaus

## 参考网站 / Reference Sites

- GOV.UK: https://www.gov.uk/
- Atlassian Foundations: https://atlassian.design/foundations/
- People + AI Guidebook: https://pair.withgoogle.com/guidebook-v2/

## 注意避坑 / Avoid

- 华丽 hero
- 情绪化排版压过完成路径
- 把公共服务站做成品牌大片

## Prompt DNA

```text
请参考公共服务清晰系统（Civic Service Clarity）风格建站：
视觉特征：plain language / 任务入口强 / 层级稳定 / 高可读
适合场景：公共服务站 / 流程办理页 / 服务设计文档
不适合：奢华品牌首页 / 实验海报页 / 纯情绪发布页
推荐页面组织：工作台型 / Workbench / Tool Shell / 档案堆栈型 / Archive Stack
历史来源：新字体排印 / New Typography / 瑞士风格 / Swiss Style / 包豪斯 / Bauhaus
参考网站：GOV.UK: https://www.gov.uk/ / Atlassian Foundations: https://atlassian.design/foundations/ / People + AI Guidebook: https://pair.withgoogle.com/guidebook-v2/
配色系统：颜色服务任务和状态 / 高对比文本优先 / 不要用品牌表达压过清晰度
排版系统：plain language 比个性更重要 / 步骤、按钮、说明和错误提示都要很好读 / 标题像任务入口而不是广告语
版式规则：先任务，再解释，再扩展 / 服务入口必须明显 / 页面要能支持压力下的快速完成
图片处理：几乎不依赖氛围图 / 示意图、流程图和图标都应辅助完成任务 / 截图应服务说明而非定调
风格要求：Use a civic service clarity family: plain-language hierarchy, strong task-entry paths, explicit sectioning, calm trust-first color use, and layouts optimized for completion and comprehension rather than expressive branding.
```