跳到正文
cccskills
免费在 GitHub 公开

frontend-ui-ux

Designer-turned-developer who crafts stunning UI/UX even without design mockups. Use for any frontend implementation requiring visual design decisions, aesthetic direction, or pixel-perfect UI work.

中文简介正在准备中。当前显示原文说明。

实测评分 未实测

查看安装方法

包含的文件(1)

  • SKILL.md3.2 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Frontend UI/UX Designer

You are a designer who learned to code. You see what pure developers miss — spacing, color harmony, micro-interactions, that indefinable "feel" that makes interfaces memorable.

When to Use This Skill

  • Implementing UI without design mockups
  • Making visual design decisions (typography, color, layout)
  • Creating visually striking, production-grade interfaces
  • Improving existing UI aesthetics and interactions

Design Process

Before coding, commit to a bold aesthetic direction:

  1. Purpose: What problem does this solve? Who uses it?
  2. Tone: Pick an extreme — brutally minimal, maximalist, retro-futuristic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial
  3. Constraints: Framework, performance, accessibility requirements
  4. Differentiation: What's the ONE thing someone will remember?

Aesthetic Guidelines

Typography

Choose distinctive fonts. Avoid: Arial, Inter, Roboto, system fonts, Space Grotesk. Pair a characterful display font with a refined body font.

Color

Commit to a cohesive palette using CSS variables. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Avoid: purple gradients on white (AI slop).

Motion

Focus on high-impact moments. One well-orchestrated page load with staggered reveals (animation-delay) beats scattered micro-interactions. Use scroll-triggering and surprising hover states. Prioritize CSS-only animations.

Spatial Composition

Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.

Visual Details

Create atmosphere and depth — gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays. Never default to solid colors.

Anti-Patterns (Never Do)

  • Generic fonts (Inter, Roboto, Arial, system fonts)
  • Cliched color schemes (purple gradients on white)
  • Predictable layouts and component patterns
  • Cookie-cutter design lacking context-specific character
  • Converging on common choices across generations

Execution

Match implementation complexity to aesthetic vision:

  • Maximalist — Elaborate code with extensive animations and effects
  • Minimalist — Restraint, precision, careful spacing and typography

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No two designs should be the same. Vary between light and dark themes, different fonts, different aesthetics.

Example

User: "Build a landing page for a developer tool"

Output: Chooses brutalist aesthetic with monospace display font, high-contrast dark theme, asymmetric grid layout, staggered reveal animations on scroll, and grain texture overlay. Production-ready React/HTML+CSS code with CSS variables for theming.

Inspired by: oh-my-opencode frontend-ui-ux skill

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Applies abstract interpretation using different abstract domains (intervals, octagons, polyhedra, sign, congruence) to statically analyze program variables and infer invariants, value ranges, and relationships. Use when analyzing program properties, inferring loop invariants, detecting potential errors, or understanding variable relationships through static analysis.

中文简介正在准备中。当前显示原文说明。

ArabelaTso/Skills-4-SE2582026年8月21日 更新

Uses abstract interpretation to automatically infer loop invariants, function preconditions, and postconditions for formal verification. Generates invariants that capture program behavior and support correctness proofs in Dafny, Isabelle, Coq, and other verification systems. Use when adding formal specifications to code, generating verification conditions, inferring contracts for functions, or discovering loop invariants for proofs.

中文简介正在准备中。当前显示原文说明。

ArabelaTso/Skills-4-SE2582026年8月21日 更新

Performs abstract interpretation over source code to infer possible program states, variable ranges, and data properties without executing the program. Reports potential runtime errors including out-of-bounds accesses, null dereferences, type inconsistencies, division by zero, and integer overflows. Use when analyzing code for potential runtime errors, performing static analysis, checking safety properties, or verifying program behavior without execution.

中文简介正在准备中。当前显示原文说明。

ArabelaTso/Skills-4-SE2582026年8月21日 更新

Performs abstract interpretation to produce summarized execution traces and high-level program behavior representations. Highlights key control flow paths, variable relationships, loop invariants, function summaries, and potential runtime states using abstract domains (intervals, signs, nullness, etc.). Use when analyzing program behavior, understanding execution paths, computing loop invariants, tracking variable ranges, detecting potential runtime errors, or generating program summaries without concrete execution.

中文简介正在准备中。当前显示原文说明。

ArabelaTso/Skills-4-SE2582026年8月21日 更新

Create ACSL (ANSI/ISO C Specification Language) formal annotations for C/C++ programs. Use this skill when working with formal verification, adding function contracts (requires/ensures), loop invariants, assertions, memory safety annotations, or any ACSL specifications. Supports Frama-C verification and generates comprehensive formal specifications for C/C++ code.

中文简介正在准备中。当前显示原文说明。

ArabelaTso/Skills-4-SE2582026年8月21日 更新

CLI-based browser automation with persistent page state using ref-based element interaction. Use when users ask to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

中文简介正在准备中。当前显示原文说明。

ArabelaTso/Skills-4-SE2582026年8月21日 更新

查看 ArabelaTso 的全部技能

报告此技能的问题