Agent skill · design visual · aiskillstore
frontend-design
Creates unique, production-grade frontend interfaces with exceptional design quality. Use when user asks to build web components, pages, materials, posters, or applications (e.g., websites, landing pages, dashboards, React components, HTML/CSS layouts, or styling/beautifying any web UI). Generates creative, polished code and UI designs that avoid mediocre AI aesthetics.
Why this skill is useful
Provides unique design principles and specific CSS patterns that enhance frontend aesthetics and usability.
What it needs
About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Frontend Design Skill 此技能指导创建独特的生产级前端界面，避免平庸的"AI 粗糙"美学。实现真正可用的代码，并高度关注美学细节和创意选择。 When to Use This Skill 使用此技能当用户请求： 构建 Web 组件、页面或完整应用程序 创建着陆页、仪表盘或营销页面 设计 React、Vue 或原生 HTML/CSS 界面 美化或重新设计现有的 Web UI 创建海报、素材或视觉设计元素（用于 Web） 需要高设计品质和独特美学的任何前端项目 关键触发词: Web 组件、页面、应用、网站、着陆页、仪表盘、React 组件、HTML/CSS、UI 设计、美化、前端 核心原则 在编写代码之前，必须进行深入的设计思考。每个界面都应该是独特的、有意图的、令人难忘的。 设计思维流程 在实现任何代码之前，回答以下问题： 1. 目的 (Purpose) 问题: 此界面解决什么问题？ 用户: 谁使用它？在什么情境下使用？ 目标: 用户需要完成什么任务？ 2. 风格方向 (Style Direction) 选择一个明确且大胆的美学方向。不要选择"现代简约"这样的通用描述，而是选择极致的风格： 风格选项（但不限于这些）： 极简主义: 极度克制，大量留白，精准排版 极致混乱: 密集布局，重叠元素，视觉冲击 复古未来主义: 80年代霓虹色，网格，合成波风格 有机/自然: 流动形状，自然色调，柔和曲线 奢华/精致: 优雅字体，金色点缀，精细细节 俏皮/玩具感: 明亮色彩，圆角，趣味动画 编辑/杂志风格: 大胆排版，网格系统，黑白为主 粗犷/原始: 单色，硬边，实用主义 装饰艺术/几何: 对称图案，几何形状，高对比度 柔和/粉彩: 温和色彩，渐变，梦幻感 工业/实用: 系统字体，单色，功能优先 新拟态: 柔和阴影，浮雕效果，微妙深度 玻璃态: 模糊背景，透明度，光感 关键: 选择清晰的概念方向并精准执行。大胆的极致主义和精致的极简主义都有效——关键在于意图，而不是强度。 3. 技术限制 (Constraints) 使用什么框架？（React, Vue, 原生 HTML/CSS） 性能要求？（动画复杂度，文件大小） 可访问性要求？（ARIA 标签，键盘导航，色彩对比度） 浏览器兼容性？ 4. 差异化 (Differentiation) 记忆点: 是什么让它令人难忘？ 独特性: 用户会记住哪一个细节？ 惊喜: 哪里会让用户眼前一亮？ 前端美学指南 1. 排版 (Typography) 原则: 字体选择是设计的灵魂。 Do: ✅ 选择独特且有个性的字体 ✅ 标题使用引人注目的字体，正文使用易读字体 ✅ 尝试意想不到的字体配对 ✅ 使用字体变体（font-weight, font-style）创造层次 ✅ 精确控制字间距（letter-spacing）和行高（line-height） Don't: ❌ 使用通用字体：Arial, Helvetica, Inter, Roboto, 系统字体 ❌ 所有文本使用相同的字体和大小 ❌ 忽略字体加载性能（使用 font-display: swap） 推荐字体来源: Google Fonts (选择小众、独特的字体) 自定义字体（如果项目允许） 示例字体组合: 2. 颜色与主题 (Color & Theme) 原则: 颜色定义情绪和品牌。 Do: ✅ 使用 CSS 变量保持一致性 ✅ 主色调 + 鲜明点缀色的组合 ✅ 考虑色彩心理学（蓝色=信任，红色=紧迫，绿色=成功） ✅ 使用渐变营造深度（但要有品味） ✅ 保持色彩对比度（WCAG AA 标准：至少 4.5:1） Don't: ❌ 俗套配色：白色背景 + 紫色渐变 ❌ 过多颜色（3-5 个主色已足够） ❌ 忽略可访问性 示例主题: 3. 动效 (Animation & Motion) 原则: 动画应该增强体验，而不是分散注意力。 Do: ✅ 优先使用 CSS 动画（性能更好） ✅ 设计页面加载动画（首次印象） ✅ 使用 animation-delay 实现元素逐个显示 ✅ 悬停状态添加微妙过渡 ✅ 滚动触发动画（Intersection Observer） ✅ 对于 React，使用 Framer Motion 或 React Spring Don't: ❌ 过度使用动画（每个元素都在动） ❌ 动画持续时间过长（> 500ms 会让人不耐烦） ❌ 忽略 prefers-reduced-motion 媒体查询 示例动画: 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/frontend-design--868436