USWDS 是美国联邦政府的官方设计系统，一切都为可读性与无障碍让路：深蓝 #005EA2 承担链接与主操作，Public Sans 与 16px 正文保证长时间阅读的舒适，2px 小圆角与高对比边框让表单、提示与步骤导航在公共服务场景中清晰可信。
U.S. Web Design System设计系统
提示词模板
基础模板
Design a USWDS-inspired government interface. - Deep blue #005EA2 primary on a white canvas; - Public Sans typography with 16px body text; - 2px radii, #DFE1E2 hairline borders, #1B1B1B ink; - Accessible forms, alerts, and step navigation; - Plain, high-contrast public-service layouts. Colors: #005EA2, #FFFFFF, #DFE1E2, #1B1B1B with #005EA2 accent. Typography: Public Sans.
变体提示词
📱 移动端
Design a mobile app with USWDS aesthetics. Use USWDS color identity with #005EA2 accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with USWDS style. Use USWDS color identity with #005EA2 accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with USWDS design language. Use USWDS color identity with #005EA2 accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with USWDS visual identity. Use USWDS color identity with #005EA2 accents. Compelling, conversion-focused.
使用示例
USWDS 福利申请表单
Web 端Build a benefits application form with USWDS style: deep blue #005EA2 primary, Public Sans, 2px radii, step indicator, and accessible inline validation.
USWDS 政务服务门户
落地页Design a government service portal with USWDS aesthetics: high-contrast hero, plain-language cards, alert banners, and clear step-by-step navigation.
✅ 适合场景
- 政务与公共服务
- 无障碍优先项目
- 医疗与教育平台
❌ 不适合场景
- 潮流驱动的消费品牌
- 高饱和娱乐产品
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。