前端设计

技能已验证活跃

通过高设计质量创建独特、生产级的面向接口。当用户要求构建 Web 组件、页面或应用程序时，请使用此技能。生成富有创意、精美的代码，避免通用的 AI 美学。

目的

旨在通过高质量的设计创建独特、生产级的前端接口，特别是在用户请求避免通用 AI 美学的 Web 组件、页面或应用程序时。

功能

生成高质量的前端代码
专注于独特的美学方向
避免通用的 AI 美学
提供详细的设计指南
支持各种前端技术（HTML/CSS/JS、React、Vue）

使用场景

构建具有特定设计要求的独特 Web 组件
创建精美且令人难忘的前端页面或应用程序
当项目需要强烈的、有意识的美学视角，超越典型的 AI 输出时
生成强调排版、颜色、动态和空间构图的代码

非目标

生成通用或陈词滥调的 AI 设计
生成缺乏连贯美学观点的代码
默认使用常见或过时的设计模式和字体选择

工作流

理解用户需求（组件、页面、应用程序）。
定义概念方向（目的、语气、约束、差异化）。
确立鲜明的审美方向。
实现具有细节考量的可工作代码（HTML/CSS/JS、React、Vue）。
优化排版、颜色、动态、空间构图和视觉细节。

实践

代码生成
前端开发
UI/UX 设计
美学优化

安装

npx skills add digitalsamba/claude-code-video-toolkit

通过 npx 运行 Vercel skills CLI(skills.sh)— 需要本地安装 Node.js,以及至少一个兼容 skills 的智能体(Claude Code、Cursor、Codex 等)。前提是仓库遵循 agentskills.io 格式。

质量评分

已验证

99 /100

3 days ago 分析

信任信号

最近提交5 days ago

GitHub 所有者 digitalsamba

星标1.1k

许可证MIT

状态

查看源代码

类似扩展

Angular Developer

生成 Angular 代码并提供架构指导。在创建项目、组件或服务时触发，或针对响应式（signals, linkedSignal, resource）、表单、依赖注入、路由、SSR、可访问性（ARIA）、动画、样式（组件样式, Tailwind CSS）、测试或 CLI 工具的最佳实践。

Type Audit

Typography-only audit covering font selection, type scale, readability, hierarchy, performance

Component Audit

Component consistency audit covering state coverage, hierarchy, patterns

Ui Ux Pro Max

UI/UX design intelligence with searchable style, palette, typography, and chart databases. Use when designing UI components, choosing colors/fonts, reviewing code for UX issues, building landing pages, or implementing responsive layouts.

spartan-stratos

Layout Audit

Layout and spacing audit covering grid, spacing consistency, density, responsive behavior

A11y Audit

Accessibility audit covering WCAG 2.2, contrast, focus, keyboard, screen reader, touch targets