SuperDesign

🎨 现代 UI 设计规范 · 零代码安全

frontend-design榜 #1

来自 BeyondCode 创始人的现代前端设计指南,涵盖布局、主题、动画与响应式设计最佳实践,纯文档零代码风险。

收藏
130.2k
安装
32.8k
版本
1.0.0
CLS 安全性认证2026-04-30
点击查看完整报告 >

使用说明

核心用法

frontend-design 是一个纯 Markdown 格式的前端设计指南 Skill,专为 UI 组件、落地页、仪表盘等设计场景提供结构化工作流程。其核心用法遵循四步设计法:

1. 布局设计 — 使用 ASCII 线框图快速规划页面结构
2. 主题设计 — 定义颜色(推荐 oklch())、字体、间距与阴影系统

3. 动画设计 — 通过微语法规划微交互(如 button: 150ms [S1→0.95→1] press

4. 实现交付 — 输出 Tailwind CSS、Flowbite 等现成代码

Skill 内置三种现代主题模式:Vercel/Linear 风格的暗色模式、90s 复古 Neo-Brutalism、以及 Glassmorphism 毛玻璃效果,均提供可直接复用的 CSS 变量模板。

显著优点

  • 权威性高:作者 Marcel Pociot(mpociot)是 Laravel/PHP 社区知名开发者、BeyondCode 公司创始人,属于 T2 级可信来源
  • 零安全风险:纯 Markdown 文档,无可执行代码、无外部依赖、无数据收集
  • 现代技术栈:推荐使用 oklch() 色彩空间、Tailwind CSS、语义化 CSS 变量,避免过时的 Bootstrap 蓝色
  • 实用性导向:提供具体字体清单(Inter、JetBrains Mono 等)、间距刻度、动画时长参考表,可直接落地
  • 无障碍内置:强制要求语义化 HTML、标题层级、ARIA 标签、键盘导航与 4.5:1 色彩对比度

潜在局限

  • 无自动化能力:仅提供设计规范与代码示例,不生成实际代码或图像
  • 依赖外部 CDN:文档示例引用 Tailwind、Flowbite、Lucide 等 CDN,生产环境需自行评估引入策略
  • 版本更新风险:当前为纯文档,若未来版本引入可执行代码需重新安全评估
  • 适用范围边界:聚焦视觉与交互设计,不包含后端逻辑、状态管理或性能优化深度指南

适合人群

  • 前端开发者快速搭建现代 UI 原型
  • 全栈工程师需要设计系统参考规范
  • 产品经理与设计师理解技术实现约束
  • 教育场景学习当代 CSS 最佳实践

常规风险

该 Skill 已通过 CLS-Certify 六维安全检测(静态分析、动态分析、依赖审计、网络流量、隐私合规、威胁情报),获得 S+ 最高安全评级,未发现任何风险模式。用户唯一需注意:文档中的 CDN 链接仅作示例,实际项目应根据安全策略选择是否引入第三方资源。

SuperDesign 内容

手动下载zip · 2.9 kB
SKILL.mdtext/markdown
请选择文件