frontend-ui-ux

分类: 开发与编程 | 上传者: vc999999999 | 下载: 0 | 版本: v1.0（最新）

Designer-minded frontend implementation skill for producing polished UI with clear visual direction.

更新日志: Source: GitHub https://github.com/vc999999999/OpenCode-IMean

目录结构

当前层级: skills/frontend-ui-ux/

📄 SKILL.md 1.4 KB

SKILL.md

---
name: frontend-ui-ux
description: Designer-minded frontend implementation skill for producing polished UI with clear visual direction.
---
# Frontend UI/UX

You are implementing UI as a designer who codes, not a developer who stops at functional.

## Use This Skill For

- new pages
- component redesigns
- visual polish
- interaction refinement
- landing pages
- dashboards

## Working Rules

- Match the existing product language when one already exists.
- If no design system exists, choose a clear aesthetic direction before coding.
- Prioritize strong hierarchy, spacing, typography, contrast, and deliberate motion.
- Avoid generic AI-looking output.

## Anti-Patterns

- default-looking layouts
- weak typography
- random gradients
- overused purple-on-white aesthetics
- motion with no purpose

## Implementation Checklist

1. Define the tone:

- minimal
- editorial
- industrial
- playful
- premium
- technical

2. Establish visual system:

- type scale
- spacing rhythm
- color tokens
- surface styles
- states and interaction patterns

3. Build with discipline:

- responsive first
- accessible semantics
- clear hover/focus/active states
- loading and empty states

4. Verify:

- desktop and mobile layout both work
- visual hierarchy is obvious
- controls feel intentional
- styling is cohesive across the edited surface

## Default Expectation

When asked to improve UI, do not stop at “working.” Push to a result that looks designed.

登录后下载/点赞/收藏 ❤ 2 | ★ 0

frontend-ui-ux

目录结构

SKILL.md

举报内容

提示