为什么值得关注

该技能通过取代 AI 生成 UI 时常见的模板化样式，引入结构化的推理流程：对界面类型进行分类、定义视觉层级、基于真实内容进行设计、强制使用不可补偿的质量检查，从而有效规避 AI 生成的前端反模式。

适合谁使用

AI 编码智能体（如 Codex 和 Claude Code）
使用 AI 工具进行前端开发的开发者
与 AI 协作的 UX 设计师
需要统一 AI 生成 UI 质量标准的工程团队

典型使用场景

构建具有正确层次结构的任务导向型页面和表单
重新设计现有界面，移除通用的模板化模式
基于证据进行视觉 UI 审查
在多种视口下实现并验证响应式布局

项目优势

在实现之前提供层次、构图和设计令牌的紧凑决策表
强制不可补偿的质量检查，防止视觉好看但功能破碎的 UI
明确要求为移动端、平板、桌面、宽屏和超宽屏设计独立的行为
在可用时使用浏览器截图和交互检查作为视觉证据

使用前须知

仅提升智能体的过程，不能替代产品需求、真实素材或领域专业知识
视觉验证依赖于宿主环境是否提供浏览器工具
不提供 UI 组件、字体、图片或运行时依赖
不同宿主工具对技能的发现和调用方式存在差异，可能需要手动配置

README 快速开始

Design Visual Frontend

design-visual-frontend is an Agent Skill for designing, implementing, redesigning, and reviewing frontend interfaces. It helps coding agents move beyond generic template styling by making them reason about the product's real subject, user task, composition, responsive behavior, content truth, accessibility, and rendered visual evidence.

The Skill can be used with Codex, Claude Code, and other tools that support the open SKILL.md-based Agent Skills format.

What It Does

Classifies the interface as task-led, command-led, inspection-led, narrative-led, reading-led, or conversion-led.
Defines the visual hierarchy before implementation through a compact decision sheet.
Grounds the design in real product content, workflows, assets, and domain conventions.
Prevents common AI-generated UI patterns such as empty split screens, decorative card grids, fake metrics, oversized headings, and stacked visual effects.
Establishes reusable rules for typography, color roles, spacing, surfaces, controls, states, and motion.
Requires explicit mobile, tablet, desktop, wide, and ultra-wide behavior.
Reviews accessibility, loading/error/empty states, keyboard focus, touch targets, reduced motion, and engineering integrity.
Uses browser screenshots and interaction checks when browser tooling is available, while clearly reporting when visual verification was not possible.

When To Use It

Use this Skill for:

websites and landing pages;
login, signup, checkout, booking, search, and form flows;
dashboards, admin tools, monitors, editors, and operational consoles;
product pages, portfolios, publications, and content-heavy experiences;
frontend redesigns and anti-template visual improvements;
visual UI reviews that need concrete, evidence-based findings;
responsive implementation and browser-based quality verification.

How It Works

The repository is not a component library or a fixed visual theme. It is a structured reasoning system for an AI coding agent.

SKILL.md defines when the Skill should activate and the workflow the agent must follow.
The agent inspects the request, codebase, stack, assets, and available browser tools.
It identifies the dominant surface archetype and the interface's true protagonist.
It creates a compact design decision sheet covering hierarchy, cont

项目描述

Agent Skill for distinctive frontend design, responsive implementation, visual review, and browser-verified UI quality.

design-visual-frontend