UIkit 是轻量模块化的前端框架，以「按需取用」著称：主蓝（#1E87F0）配 #F8F8F8 区块表面与 #222 正文，4px 圆角与 .uk-card、.uk-navbar、.uk-button 等组件类覆盖常见结构，工具类、Flex/Grid 与顺滑动效一应俱全，版式均衡、内容优先。适合官网、文档站与需要稳定轻量底座的 Web 项目。
UIkit前端框架
提示词模板
基础模板
Design a UIkit-inspired interface. - Lightweight modular front-end framework; - #1E87F0 primary with #F8F8F8 section surfaces and #222 text; - 4px radii, .uk-card/.uk-navbar/.uk-button components; - Utility-first classes, Flex/Grid support, and smooth animations; - Balanced, content-first layouts for products and docs. Colors: #1E87F0, #F8F8F8, #222222, #999999 with #1E87F0 accent. Typography: system-ui.
变体提示词
📱 移动端
Design a mobile app with UIkit aesthetics. Use UIkit color identity with #1E87F0 accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with UIkit style. Use UIkit color identity with #1E87F0 accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with UIkit design language. Use UIkit color identity with #1E87F0 accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with UIkit visual identity. Use UIkit color identity with #1E87F0 accents. Compelling, conversion-focused.
使用示例
UIkit 文档站点
Web 端Build a documentation site with UIkit style: sticky navigation, content cards, and #1E87F0 accents.
UIkit 产品落地页
落地页Create a product landing page with UIkit design language: hero section, feature grids, and smooth scroll animations.
✅ 适合场景
- 轻量站点
- 文档站点
- 模块化构建
❌ 不适合场景
- React 或 Vue 组件生态项目
- 深度定制设计系统
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。