Pico CSS はセマンティックな HTML そのものをスタイルにします。クラスを書かず、タグの構造だけで抑制された既定の外観が得られます。スカイブルー #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 ドキュメントサイト
WebBuild 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
- ミニマルなコンテンツサイト
❌ 適さない用途
- 複雑なエンタープライズ管理画面
- 高度にカスタマイズするテーブル UI
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。