带有标签“前端设计”的 Skills

frontend-design-zh - 根据文本需求使用 React 和 Tailwind CSS 创建静态网站
前端设计 React Tailwind CSS shadcn/ui
★ 55 · 更新于 2026-09-23
根据文本需求使用 React、Tailwind CSS 和 shadcn/ui 生成生产级静态网站，支持 Vite 和 Next.js 工作流。
⚙ 生成静态网站代码 ⚙ 实现移动优先响应式布局 ⚙ 配置 Vite 和 Next.js 工作流
moai-icons-vector - 矢量图标库企业级指南
图标矢量图标 React SVG
★ 602 · 更新于 2026-09-23
涵盖 10+ 矢量图标库指南、React 实现模式、无障碍规范与打包体积优化策略。
⚙ 选择矢量图标库 ⚙ 实现 React 图标组件 ⚙ 创建类型安全的图标按钮
cleanui - AI UI 设计规范约束技能
ui-设计前端 react react-native
★ 30 · 更新于 2026-09-23
消除前端 UI 生成中的 AI 痕迹，强化排版、布局与各平台设计规范。
⚙ 规范文本排版与字重 ⚙ 消除通用 AI 设计痕迹 ⚙ 按内容类型匹配布局
neumorphism - Neumorphism (Soft UI) 的 Web 与 App 实现指南。
新拟物 Soft-UI 前端 CSS
★ 3 · 更新于 2026-09-22
提供在 Web、SwiftUI、Flutter、React Native 和 Jetpack Compose 中实现新拟物风格的指南与代码示例。
⚙ 使用 CSS 实现新拟物样式 ⚙ 在 SwiftUI 中实现新拟物视图 ⚙ 在 Flutter 中实现新拟物部件
aico-frontend-implement - 使用 TDD 执行前端任务实现
前端 tdd 测试代码实现
★ 602 · 更新于 2026-09-22
遵循 TDD 流程读取任务文件、按步骤执行实现、验证结果并更新任务状态。
⚙ 读取任务文件 ⚙ 读取约束文档 ⚙ 执行实现步骤
delight - 通过微交互与精致细节为用户界面增添惊喜体验
UI设计用户体验微交互动效
★ 602 · 更新于 2026-09-22
在界面中添加愉悦瞬间、个性化细节与精致交互，将功能性界面提升为令人难忘的愉悦体验。
⚙ 收集目标受众与品牌上下文 ⚙ 识别界面中的惊喜优化机会 ⚙ 执行前端设计技能
avoid-ai-design - 审查并重写前端 UI 以消除 AI 设计模式
设计用户界面前端 AI模式消除
★ 79 · 更新于 2026-09-22
审查并重写 HTML/CSS 和 React/Tailwind 前端 UI，消除通用 AI 设计模式，并支持仅检测模式。
⚙ 审查前端代码中的 AI 模式 ⚙ 在可用时渲染 UI 预览 ⚙ 确定统一的设计方向
frontend-architecture-planner - 在编码前通过结构化提问规划前端架构。
前端架构规划技术选型工程化
★ 0 · 更新于 2026-09-22
通过结构化提问在实施前明确产品范围、UI模式、组件架构、数据流与工程约束。
⚙ 提出结构化架构提问 ⚙ 总结架构决策与权衡 ⚙ 推荐前端技术栈方案
frontend-design - 构建或重构用户界面时的视觉设计指南。
前端设计 UI 排版
★ 0 · 更新于 2026-09-22
为新建或重构用户界面提供视觉设计、排版、配色、布局及界面文案撰写的指导意见。
⚙ 结合主题背景进行设计 ⚙ 制定包含 Token 的设计计划 ⚙ 根据需求简报审查设计计划
delight - 为用户界面增添愉悦感与细节润色
UI设计动画微交互用户体验
★ 0 · 更新于 2026-09-22
识别界面改进契机，通过微交互、个性化文案与视觉打磨将功能性界面转化为令人愉悦的体验。
⚙ 评估愉悦化改进契机 ⚙ 应用微交互与动画效果 ⚙ 撰写符合语境的个性化文案
delight - 为用户界面添加令人愉悦的细节与个性化交互
界面设计用户体验前端动画
★ 0 · 更新于 2026-09-22
识别界面优化契机，通过微交互、动画、个性化文案、音效及庆祝效果提升 UI 用户体验。
⚙ 评估界面中的愉悦化改进契机 ⚙ 实现微交互与动态效果 ⚙ 为界面文案融入个性化表达
figma-to-code - Figma 转代码精确还原技能
figma 前端 UI还原代码生成
★ 0 · 更新于 2026-09-22
严格按照 Figma 设计稿精准还原代码，禁止任何凭空推测、近似替代或自行修改。
⚙ 提取精确设计属性 ⚙ 下载真实设计资产 ⚙ 还原布局与组件
delight - 为用户界面添加趣味、个性与精致细节
界面设计前端微交互动画
★ 0 · 更新于 2026-09-22
识别界面中的体验优化点，通过微交互、个性化文案、动画和音效提升用户界面体验。
⚙ 评估趣味化体验机会 ⚙ 制定趣味化设计策略 ⚙ 添加微交互与动画
frontend-mobile-security-xss-scan - 前端代码 XSS 漏洞扫描器
skill security app-security frontend
★ 15 · 更新于 2026-09-21
分析 React、Vue、Angular 及原生 JavaScript 代码，识别注入点并预防 XSS 漏洞。
⚙ 扫描代码库中的 XSS 漏洞 ⚙ 检测不安全的 DOM 操作模式 ⚙ 识别特定框架的 XSS 风险
frontend-design - 创建独具特色且具备生产级品质的前端界面。
前端设计用户界面代码生成
★ 3 · 更新于 2026-09-21
为网页组件、页面、制品和应用生成具备生产级品质且避免通用AI审美的前端代码。
⚙ 收集所需的项目设计上下文 ⚙ 缺失上下文时运行 teach-impeccable ⚙ 确定鲜明的概念设计方向
overdrive - 以突破常规的技术实现提升界面表现
前端 UI 动画性能
★ 0 · 更新于 2026-09-21
通过高级浏览器 API、物理动画和高性能渲染技术，突破 Web 界面的视觉与性能极限。
⚙ 提出多种设计方向 ⚙ 使用浏览器自动化迭代视觉效果 ⚙ 实现渐进增强降级方案
overdrive - 通过高难度的技术实现打破 Web 界面常规限制。
UI设计前端动画 WebGL
★ 0 · 更新于 2026-09-21
利用高级 Web API、自定义渲染、过渡动画与高性能技术提升界面体验，并提供渐进增强降级方案。
⚙ 在实现前提出技术方向 ⚙ 通过 AskUserQuestion 工具确认方案 ⚙ 使用浏览器自动化验证视觉效果
connect-to-backend-api - 连接前端与后端 API 路由
API集成前端 TypeScript 服务层
★ 0 · 更新于 2026-09-21
通过创建服务文件、处理 API 调用、管理响应错误和转换数据，将前端连接至后端 API 路由。
⚙ 创建后端服务文件 ⚙ 定义 TypeScript 资源类型 ⚙ 执行 HTTP API 调用
overdrive - 使用高难度技术方案突破常规界面限制。
前端界面动画 WebGL
★ 0 · 更新于 2026-09-21
利用着色器、虚拟滚动、高级动画与性能优化技术，打造突破常规限制的 Web 界面体验。
⚙ 提议技术实现方案 ⚙ 通过浏览器自动化预览效果 ⚙ 实现电影级界面过渡动画
ui-ux-frontend-basics - 前端页面与组件的 UI/UX 基础指南
ui-ux 前端布局排版
★ 0 · 更新于 2026-09-21
在设计与完善前端页面和组件时应用实用的 UI/UX 规则与指南。
⚙ 分类界面类型 ⚙ 建立视觉层级 ⚙ 应用间距规范

Scroll to load more