Pico CSS 让语义化 HTML 本身成为样式：不写 class，用标签结构就获得克制的默认外观。天蓝 #0172AD 是唯一主色，system-ui 字体配 4px 圆角和柔和的多层阴影，页面天生安静、轻盈、几乎零配置——文档站与快速原型最省心的起点。
Pico CSS设计系统
提示词模板
基础模板
Design a Pico CSS-inspired minimal interface. - Classless semantic HTML with restrained defaults; - Azure #0172AD as the single primary on a white canvas; - system-ui typography, 4px radii, layered soft shadows; - Quiet cards, forms, and tables with generous spacing; - Zero-config documentation and prototype layouts. Colors: #0172AD, #FFFFFF, #646B79, #373C44 with #0172AD accent. Typography: system-ui.
变体提示词
📱 移动端
Design a mobile app with Pico CSS aesthetics. Use Pico CSS color identity with #0172AD accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with Pico CSS style. Use Pico CSS color identity with #0172AD accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with Pico CSS design language. Use Pico CSS color identity with #0172AD accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Pico CSS visual identity. Use Pico CSS color identity with #0172AD accents. Compelling, conversion-focused.
使用示例
Pico 文档站点
Web 端Build a documentation site with Pico CSS style: semantic HTML, classless navigation and cards, azure #0172AD links, and soft layered shadows.
Pico 产品原型页
落地页Design a product prototype landing page with Pico CSS aesthetics: simple hero, semantic sections, system fonts, and quiet azure accents.
✅ 适合场景
- 文档与博客
- 快速原型与 MVP
- 极简内容站点
❌ 不适合场景
- 复杂的企业级后台
- 高定制度表界面
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。