菜单
创建具有高设计质量的独特生产级前端接口。当用户要求构建Web组件、页面、工件、海报或应用程序时（例如，包括网站、登录页面、仪表板、React组件、HTML/CSS布局，或在样式化/美化任何Web UI时） ，请使用此技能。生成创意、精美的代码和UI设计，避免通用的AI美学。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
AI代理的浏览器自动化CLI。在用户需要与网站交互时使用，包括导航页面、填写表单、单击按钮、截屏、提取数据、测试Web应用或自动执行任何浏览器任务。触发器包括“打开网站”、“填写表单”、“单击按钮”、“截屏”、“从页面中抓取数据”、“测试此Web应用”、“登录到网站”、“自动浏览器操作”或任何需要编程Web交互的任务。
（中文）Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
（中文）When the user wants to set up, improve, or audit analytics tracking and measurement. Also use when the user mentions "set up tracking," "GA4," "Google Analytics," "conversion tracking," "event tracking," "UTM parameters," "tag manager," "GTM," "analytics implementation," or "tracking plan." For A/B test measurement, see ab-test-setup.
（中文）Audit websites for SEO, performance, security, technical, content, and 15 other issue cateories with 230+ rules using the squirrelscan CLI. Returns LLM-optimized reports with health scores, broken links, meta tag analysis, and actionable recommendations. Use to discover and asses website or webapp issues and health.
（中文）Skill for integrating Better Auth - the comprehensive TypeScript authentication framework.
（中文）You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
| name | frontend-design |
| description | 创建具有高设计质量的独特生产级前端接口。当用户要求构建Web组件、页面、工件、海报或应用程序时（例如，包括网站、登录页面、仪表板、React组件、HTML/CSS布局，或在样式化/美化任何Web UI时） ，请使用此技能。生成创意、精美的代码和UI设计，避免通用的AI美学。 |
| license | Complete terms in LICENSE.txt |
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Before coding, understand the context and commit to a BOLD aesthetic direction:
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
Focus on:
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
