前端与 UI 它能做什么 gpt-taste 用 GSAP 滚动动效和无缝拼接的 bento 网格,做出获奖级的落地页。 精选合集
让 Codex 真正做出好界面的设计插件
OpenAI Codex 能写出跑得起来的代码。但没人管它的时候,它只会挑最保险的字体、最平庸的间距,再把 Helvetica 往中间一放。这里精选的插件专门给它补审美:审美类 Skill 和设计系统规则。挑一个装,或者在 Open Design 里全跑起来。
前端与 UI 它能做什么 gpt-taste 用 GSAP 滚动动效和无缝拼接的 bento 网格,做出获奖级的落地页。
设计系统 它能做什么 Stitch Design Taste 写一份 DESIGN.md,引导 Google Stitch 做出不落俗套的界面。
前端与 UI 它能做什么 image-to-code 先生成设计效果图,分析之后再据此写出对应的前端代码。
前端与 UI 它能做什么 imagegen-frontend-mobile 把高质感的移动应用界面流程生成图片,而不是代码。
前端与 UI 它能做什么 imagegen-frontend-web 为落地页的每个区块各生成一张横版参考图。
前端与 UI 它能做什么 minimalist-ui 用暖色单色调和扁平 bento 网格,做出编辑风的界面。
前端与 UI 它能做什么 design-taste-frontend 读懂需求、选定方向,交付不落模板的界面。
设计系统 它能做什么 industrial-brutalist-ui 做出刚硬的瑞士印刷风或 CRT 终端风界面,带模拟颗粒质感。
前端与 UI 它能做什么 redesign-existing-projects 审查现有网站,在不破坏功能的前提下升级它。
设计系统 它能做什么 brandkit 把品牌规范板、Logo 系统和形象展示图,都生成为图片。
前端与 UI 它能做什么 high-end-visual-design 拦掉 AI 的平庸默认套路,强制上工作室级的布局和动效。
前端与 UI 它能做什么 pick-ui-library 给一个前端任务,只推荐一个精挑细选、态度鲜明的库。
前端与 UI 它能做什么 apple-design 把 Apple 的流体界面理念,落成 Web 上的弹性动效和手势。
前端与 UI 它能做什么 animation-vocabulary 把含糊的动效描述,翻成精确的技术术语。
前端与 UI 它能做什么 emil-design-eng Emil Kowalski 关于动画时长、缓动和组件打磨的一套规则。
设计系统 它能做什么 UI-UX Pro Max · Design 一个入口,统一分派 Logo、品牌形象、幻灯片、Banner 和图标活。
前端与 UI 它能做什么 UI-UX Pro Max · Banner Design 用 HTML 做好尺寸精准的 Banner,再导出成 PNG。
前端与 UI 它能做什么 UI-UX Pro Max · UI Styling 用 shadcn 组件和 Tailwind 工具类,做出无障碍的界面。
设计系统 它能做什么 UI-UX Pro Max · Brand 让品牌规范、设计 token 和素材始终对得上。
前端与 UI 它能做什么 UI-UX Pro Max · Slides 用 Chart.js 和版式模式,搭出 HTML 演示文稿。
设计系统 它能做什么 UI-UX Pro Max · Design System 三层设计 token、组件规格,还有守 token 的幻灯片生成。
前端与 UI 它能做什么 design-skills · Editorial 严格 8pt 网格上的杂志排版,用 Gelasio 衬线。
前端与 UI 它能做什么 design-skills · Terracotta 奶油底配陶土强调色,DM Serif Display 标题,专为长文阅读。
前端与 UI 它能做什么 design-skills · Dithered 用点阵明暗和有限配色,做复古高对比的界面。
前端与 UI 它能做什么 design-skills · Neumorphism 石灰底上柔和挤出的表面,配 Space Mono 字体。
前端与 UI 它能做什么 design-skills · Bento 奶油底上大小不一的网格块,Inter 字体,紧凑字号。
前端与 UI 它能做什么 design-skills · Claymorphism 圆润饱满的 3D 形状,Poppins 标题,白底配蓝。
前端与 UI 它能做什么 design-skills · Brutalism 清水混凝土感的布局,Darker Grotesque 标题,红与赭。
前端与 UI 它能做什么 Hallmark 反平庸的设计流程,58 道闸门,强制结构多样。
前端与 UI 它能做什么 Impeccable 二十来条命令,用来构建、评审和打磨前端界面。
设计系统 它能做什么 Design DNA 把参考设计抽成结构化 JSON,再据此生成新页面。
设计系统 它能做什么 Material 3 在 Compose、Flutter 和 Web 上落地 Google 的 Material Design 3。
前端与 UI 它能做什么 Details that make interfaces feel better 十六条具体的界面打磨规则,外加一份评审清单。
前端与 UI 它能做什么 Agent-Native Plans 把文字方案变成可评审的文档,带线框图和原型。
设计系统 它能做什么 Kami 用一套设计语言,排版简历、白皮书、演示和落地页。
前端与 UI 它能做什么 Border Gradients 给卡片、弹窗和首屏表面,加一道讲究的渐变边。
前端与 UI 它能做什么 Masked Reveal 滚动时用溢出遮罩,让标题逐词浮现。
前端与 UI 它能做什么 Framed Grid Layout 用细边框和角标记,搭出精准的编辑式版面。
前端与 UI 它能做什么 Container Lines 在内容容器两侧,画出安静的竖向参考线。
前端与 UI 它能做什么 Skeuomorphic UI 用分层渐变和阴影,给按钮和面板做出可触摸的纵深。
设计系统 它能做什么 Beautiful Shadows 三个现成的 Tailwind 阴影工具类,做中性的分层高度。
前端与 UI 它能做什么 Dither Background 带明显 4x4 Bayer 抖动和方形像素的 canvas 背景。
前端与 UI 它能做什么 WebGL Laser 全屏着色器光束,核心炽白,雾气染上品牌色。
设计系统 它能做什么 Mesh Gradient Dark Blue Clean 近黑藏青系统,首屏外壳里嵌一片网格渐变场。
前端与 UI 它能做什么 Cinematic Scroll Storytelling 用 Lenis 加 GSAP ScrollTrigger,做滚动驱动的落地页。
设计系统 它能做什么 Agency Grid Layout Minimal 编辑式多栏网格,超大标题配极小的大写标签。
设计系统 它能做什么 Glass Dark Mode Clock 深色磨砂表面,围着一个圆形校准表盘展开。
前端与 UI 它能做什么 WebGL 3D Object 打好光的 Three.js 首屏网格,带 PBR 材质和真实阴影。
前端与 UI 它能做什么 GSAP Skills 官方 GSAP 动画套件,从核心补间到 ScrollTrigger 和 React。
前端与 UI 它能做什么 Animation Review 按资深工艺标准,找出、改进并评审动效。 下一步
省掉配置,在 Open Design 里用 Codex 做设计
Open Design 是围绕 Codex 运转的开源、Agent 原生设计工作空间。它让你的设计系统、Skill 和模板始终保持一致,Agent 交付的成果真正属于你。