Frontend Design
技能 已验证 活跃Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade frontend interfaces with high design quality, guiding LLM output away from generic AI aesthetics towards specific conceptual directions.
功能
- Guides creation of production-grade frontend interfaces.
- Generates code avoiding generic AI aesthetics.
- Focuses on specific aesthetic directions (minimalism, maximalism, etc.).
- Emphasizes meticulous refinement in typography, color, motion, and composition.
- Differentiates through unique, memorable design choices.
使用场景
- When a user asks to build a web component with a specific aesthetic.
- When a user needs a polished, production-ready webpage.
- When a user requests a frontend application with a strong, distinctive design direction.
非目标
- Generating generic or bland UI elements.
- Defaulting to overused font families or color schemes.
- Creating designs that lack context-specific character or intentionality.
工作流
- Understand user requirements (component, page, application).
- Choose a bold aesthetic direction (Purpose, Tone, Constraints, Differentiation).
- Implement production-grade, visually striking, and cohesive code.
- Refine details meticulously (typography, color, motion, spatial composition, backgrounds).
Trust
- info:Issues AttentionOpen issues: 9462, Closed issues: 22831. The closure rate is significantly below 50%, indicating slow maintainer response to newer issues.
安装
请先添加 Marketplace
/plugin marketplace add anthropics/skills/plugin install skills@anthropic-agent-skills质量评分
已验证类似扩展
Impeccable
99当用户希望设计、重新设计、塑造、批评、审计、打磨、澄清、提炼、加固、优化、改编、动画化、着色、提取或以其他方式改进前端界面时使用。涵盖网站、登陆页面、仪表板、产品 UI、应用外壳、组件、表单、设置、入职流程和空状态。处理用户体验审查、视觉层次、信息架构、认知负荷、可访问性、性能、响应行为、主题化、反模式、排版、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边缘情况、i18n 以及可复用的设计系统或令牌。也适用于需要从平淡变得更大胆或更令人愉悦的设计，需要变得更安静的醒目设计，对 UI 元素的实时浏览器迭代，或应该感觉技术上非凡的雄心勃勃的视觉效果。不适用于仅限后端或非 UI 任务。
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
Component Audit
100Component consistency audit covering state coverage, hierarchy, patterns
Angular Developer
100生成 Angular 代码并提供架构指导。在创建项目、组件或服务时触发，或针对响应式（signals, linkedSignal, resource）、表单、依赖注入、路由、SSR、可访问性（ARIA）、动画、样式（组件样式, Tailwind CSS）、测试或 CLI 工具的最佳实践。
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.